Belajar dan Berbagi

Cara Membuat Maintenace Page di Blog

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaEYtb1WkFrb3YGsM69ShwjbrEmGhPAkTOZmf7BT_1JkuV3UQy9SlitFdqYZZv799LGRVohM1dQnMp_k_Grw-rhd8wEiKb-pxekKrHM-rCDrl4g51x6KqUhTKascSMJ9mF17ommtCTRM/s1600/Cara+Membuat+Maintenace+Page+di+Blog.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cara Membuat Maintenace Page di Blog" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaEYtb1WkFrb3YGsM69ShwjbrEmGhPAkTOZmf7BT_1JkuV3UQy9SlitFdqYZZv799LGRVohM1dQnMp_k_Grw-rhd8wEiKb-pxekKrHM-rCDrl4g51x6KqUhTKascSMJ9mF17ommtCTRM/s1600/Cara+Membuat+Maintenace+Page+di+Blog.jpg" title="Cara Membuat Maintenace Page di Blog" width="199" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://one-go.blogspot.com/2014/09/cara-membuat-maintenace-page-di-blog.html">Cara Membuat Maintenace Page di Blog</a></td></tr>
</tbody></table>
<div style="text-align: justify;">
Hay sobat <i>One-GO</i>! kali ini saya akan <b>Belajar dan Berbagi</b> tentang bagaimana <a href="http://one-go.blogspot.com/2014/09/cara-membuat-maintenace-page-di-blog.html">Cara Membuat Maintenace Page di Blog</a>, Terkadang kita sering meng-edit / meng-otak-atik / merubah isi template kita, maksud dan tujuannya mungkin agar para pengunjung blog kita bisa merasa nyaman terhadap penggunaan dari tampilan blog yg kita edit, namun terkadang kita tidak memikirkan kenyamanan Pengunjung saat kita mengedit template jika ada kesalahan dan itu justru membuat pengunjung merasa terganggu terhadap perubahan template yang baru saja kita edit. nah One-GO! mempunyai Tutorial bagaimana Cara Membuat Maintenace Page di Blog sebelum meng-edit Template dan ini juga akan memberikan informasi ke pengunjung bahwa Web atau blog kita sedang dalam perbikan. langsung saja pada Tutorialnya di bawa.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
Cara Pemasangan di Blogspot</h2>
<ul>
<li style="text-align: justify;">Login ke akun blogger Sobat One-GO! >> <b class="template">Template</b></li>
<li style="text-align: justify;">Klik <b class="buttonblog">Edit HTML</b></li>
<li style="text-align: justify;">Tekan Keyboard <kbd>Ctrl</kbd> + <kbd>F</kbd> Kemudian Cari kode <b>]]></b:skin></b></li>
<li style="text-align: justify;">Letakkan kode CSS berikut diatas kode <b>]]></b:skin></b></li>
</ul>
<pre class="numbered" data-codetype="CSS"><code class="CSS">html { height: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTBlBeDJMKYKuhBoZmaN8RO6uFJ-XI76r-gtma0lagHpIsdH2plzNx9ndoq0DG1nfHSGI0FJJU4Yzd-yDJyh7um6pMI9HjMPkThtV-LN-A9_whqWDCPOL937WTJQjVfgm4oD0juGiJCfG/s1600/mode+maintenance.png) no-repeat center 50%;margin: 0;}
body {display: none;}</code></pre>
<br />
<div style="text-align: justify;">
Setelah itu klik <b class="buttonorgblog">Simpan template</b> Sobat.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Untuk melihat Demo atau contoh hasilnya  bisa di klik <a href="http://one-go.blogspot.com/p/underconstructions.html" target="_blank" title="Demo Maintenace Page di Blog"><b>disini</b></a></div>
<div style="text-align: justify;">
<br /></div>
<div class="info_n" style="text-align: justify;">
Jika sobat <i>One-GO!</i> ingin mengembaliakan template seperti semula, sobat tinggal menghapus kode CSS yang diatas di Template sobat</div>
<div style="text-align: justify;">
Mungkin sampai disini dulu pembahasan tentang bagaimana <a href="http://one-go.blogspot.com/2014/09/cara-membuat-maintenace-page-di-blog.html" title="Cara Membuat Maintenace Page di Blog">Cara Membuat Maintenace Page di Blog</a> jika ada pertanyaan silahkan berkomentarlah dibawah. :)</div>
<br />

Cara Membuat Maintenace Page di Blog

Cara Membuat Maintenace Page di Blog Hay sobat One-GO ! kali ini saya akan Belajar dan Berbagi tentang bagaimana Cara Membuat Maintena...

Membuat Widget Komentar Terbaru diBlog

<div style="text-align: justify;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03HNkQyGZb7Ri8B4hbEirUcwkzLnP1viXSpenrwMGiHjovd7cUEHTHp2RqmcnOoqplFgEtgw54v7_O2QQ1UY2-3IpWggJUWwDPM0sB7OUGDuZab2a05_tNBZuh81Pk_e15MEHxQIdTJM/s1600/Membuat-Widget-Komentar-Terbaru-diBlog.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Widget Komentar Terbaru diBlog" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03HNkQyGZb7Ri8B4hbEirUcwkzLnP1viXSpenrwMGiHjovd7cUEHTHp2RqmcnOoqplFgEtgw54v7_O2QQ1UY2-3IpWggJUWwDPM0sB7OUGDuZab2a05_tNBZuh81Pk_e15MEHxQIdTJM/s1600/Membuat-Widget-Komentar-Terbaru-diBlog.jpg" title="Membuat Widget Komentar Terbaru diBlog" width="200"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://one-go.blogspot.com/2014/09/membuat-widget-komentar-terbaru-diBlog.html" title="Membuat Widget Komentar Terbaru diBlog"><span style="font-size: xx-small;">Membuat Widget Komentar Terbaru diBlog</span></a></td></tr>
</tbody></table>
Sobat <i>One-GO! </i>Kali ini saya akan <a href="http://one-go.blogspot.com/">Belajar dan Berbagi</a> bagaimana Cara <a href="http://one-go.blogspot.com/2014/09/membuat-widget-komentar-terbaru-diBlog.html" title="cara-membuat-widget-komentar-terbaru-diblog"><b>Membuat Widget Komentar Terbaru diBlog</b></a>, terkadang kita sibuk dengan aktifitas diluar dan tidak bisa melihat komentar - komentar terbaru kita satu per satu, atau kita tidak sedang login di dashboard Blogger, kan sayang jika ada pengunjung yang mengomentari artikel kita, sedangkan kita tidak tahu ada komentar terbaru. Selain itu Widget ini juga dapat membantu pengunjung untuk melihat komentar -komentar terupdate di blog kita.<br>
</div>

Membuat Widget Komentar Terbaru diBlog

Membuat Widget Komentar Terbaru diBlog Sobat One-GO! Kali ini saya akan Belajar dan Berbagi bagaimana Cara Membuat Widget Komentar Ter...

Cara Memasang SyntaxHighlighter diBlog

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1W5qdLUEPOVdW_8MjAETxJy9QP62lmqJuPMzvmFJsXrfKefZMTVpVOFFfL8bqSHEBatYwYNgTztEaix63l_D_xuHjTgboVIyMRC5PtSx150Ku9f1yFGkf-CbxeM5B5tOL7wqDHoQXXEA/s1600/Cara+Memasang+SyntaxHighlighter+diblog.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Cara Memasang SyntaxHighlighter diBlog" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1W5qdLUEPOVdW_8MjAETxJy9QP62lmqJuPMzvmFJsXrfKefZMTVpVOFFfL8bqSHEBatYwYNgTztEaix63l_D_xuHjTgboVIyMRC5PtSx150Ku9f1yFGkf-CbxeM5B5tOL7wqDHoQXXEA/s1600/Cara+Memasang+SyntaxHighlighter+diblog.png" title="Cara Memasang SyntaxHighlighter diBlog" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cara Memasang SyntaxHighlighter diBlog</td></tr>
</tbody></table>
<div style="text-align: justify;">
Sebelum One-GO! membahas bagaimana <a href="http://one-go.blogspot.com/2014/09/cara-memasang-syntaxhighlighter-diblog.html">Cara Memasang SyntaxHighlighter diBlog</a>, alangkah baiknya jika sobat One-GO! membaca artikel sebelumnya yang membahas <b><a href="http://one-go.blogspot.com/2014/09/apa-itu-syntax-highlighter.html" target="_blank">Apa itu Syntax Highlighter?</a></b>, Jika sobat One-GO! sudah pada tau langsung saja kita lanjutkan bagaimana <a href="http://one-go.blogspot.com/2014/09/cara-memasang-syntaxhighlighter-diblog.html">Cara Memasang SyntaxHighlighter diBlog.</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Syntax Highlighter ini menggunakan Syntax Highlighter dari <a href="http://highlightjs.org/" rel="nofollow" target="_blank">Software Maniacs</a> , sama dengan yang saya gunakan pada blog ini, Hanya saja pada tampilannya mungkin yang berbeda. Script yang saya bagikan ini sudah dilengkapi dengan double click untuk copy kode nya, jadi apabila pada template sobat One-GO! sudah dilengkapi JS untuk copy kode tag pre nya, silahkan singkirkan saja kode tersebut.</div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
Cara Pemasangan di Blogspot</h2>
<ul>
<li style="text-align: justify;">Login ke akun blogger Sobat One-GO! >> <b class="template">Template</b></li>
<li style="text-align: justify;">Klik <b class="buttonblog">Edit HTML</b></li>
<li style="text-align: justify;">Tekan Keyboard <kbd>Ctrl</kbd> + <kbd>F</kbd> Kemudian Cari kode <b>]]></b:skin></b></li>
<li style="text-align: justify;">Letakkan kode CSS berikut diatas kode <b>]]></b:skin> </b></li>
</ul>
Spoiler for <b>Code CSS Syntax Highlighter</b>
<span class="buka">Buka</span><span class="tutup">Tutup</span>
<br />
<div id="spoiler">
<pre class="numbered" data-codetype="CSS"><code class="CSS"> pre, i[rel="pre"] {
 display: block;
 padding: 5px .5em 5px 1em;
 font: normal normal 12px/15px "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 background-color: #e6e9f1;
 border-left: 4px solid #A30000;
 position: relative;
 overflow: auto;
 word-wrap: normal;
 white-space: pre;
 ;
}
pre:hover, i[rel="pre"]:hover {
 background-color: #DDE0E7;
 ;
}
pre code {
 display: block;
 color: #111;
 font: normal normal 12px/15px "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 letter-spacing: 0;
 white-space: pre;
 ;
}
pre[rel="HTML"], pre[data-codetype="HTML"] {
 border-left-color: #0B7E88;
 ;
}
pre[rel="CSS"], pre[data-codetype="CSS"] {
 border-left-color: #5DA028;
 ;
}
pre[rel="JavaScript"], pre[data-codetype="JavaScript"] {
 border-left-color: #40627E;
 ;
}
pre[rel="JQuery"], pre[data-codetype="JQuery"] {
 border-left-color: #40627E;
 ;
}
pre[rel="JQuery UI"], pre[data-codetype="JQuery UI"] {
 border-left-color: #40627E;
 ;
}
pre[rel="XML"], pre[data-codetype="XML"] {
 border-left-color: #C44032;
 ;
}
pre[rel*="+"], pre[data-codetype*="+"] {
 border-left-color: #0B7E88;
 ;
}
pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .lisp .string, pre .javadoc {
 color: #00BB4B;
 font-style: italic;
 ;
}
pre .keyword, pre .css .rule .keyword, pre pre .winutils, pre .javascript .title, pre .method, pre .addition, pre .css .tag, pre .lisp .title {
 color: #859900;
 ;
}
pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
 color: #A60A0A;
 ;
}
pre .title, pre .localvars, pre .function .title, pre .chunk, pre .decorator, pre .builtin, pre .built_in, pre .lisp .title, pre .identifier, pre .title .keymethods, pre .id {
 color: #103197;
 ;
}
pre .tag .title, pre .rules .property, pre .django .tag .keyword {
 font-weight: bold;
 ;
}
pre .attribute, pre .variable, pre .instancevar, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .label {
 color: #0499D3;
 ;
}
pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .diff .change, pre .special, pre .keymethods, pre .attr_selector, pre .important, pre .subst, pre .cdata {
 color: #cb4b16;
 ;
}
pre .deletion {
 color: #dc322f;
 ;
}
pre .tex .formula {
 background: #073642;
 ;
}
pre.numbered {
 border-left-width: 2px;
 padding-left: 1em;
 ;
}
pre .line-number, pre.numbered code {
 display: block;
 line-height: 16px;
 ;
}
pre .line-number {
 float: left;
 margin: 0 1em 0 -1em;
 color: #586E75;
 border-right: 2px solid #9B9DA1;
 text-align: right;
 min-width: 35px;
 ;
}
pre .line-number span {
 display: block;
 position: relative;
 padding: 0 .5em 0 1em;
 ;
}
pre .line-number span:nth-child(even) {
 background-color: #FAFAFA;
 ;
}
pre .line-number span em {
 position: absolute;
 bottom: -1px;
 left: 100%;
 background-color: red;
 padding: 0 2px 1px 2px;
 border: 1px solid black;
 font-style: normal;
 color: black;
 display: none;
 ;
}
pre .line-number span:hover em {
 display: block;
 ;
}
pre .line-number span:target a {
 display: block;
 color: white;
 position: relative;
 background-color: #268bd2;
 margin: 0 -.5em 0 -1em;
 padding: 0 .5em 0 0;
 ;
}
pre.numbered code span {
 line-height: 12px;
 ;
}
pre[data-codetype="HTML"] .line-number span:target a {
 background-color: #4584BE;
 ;
}
pre[data-codetype="CSS"] .line-number span:target a {
 background-color: #5DA028;
 ;
}
pre[data-codetype="JavaScript"] .line-number span:target a {
 background-color: #bbbbbb;
 ;
}
pre[data-codetype="JQuery"] .line-number span:target a {
 background-color: #7073CF;
 ;
}
pre[data-codetype="JQuery UI"] .line-number span:target a {
 background-color: #E36B23;
 ;
}
pre[data-codetype="XML"] .line-number span:target a {
 background-color: #C44032;
 ;
}
pre[data-codetype*="+"] .line-number span:target a {
 background-color: #0B7E88;
 ;
}
pre[rel], pre[data-codetype]:before {
 content: attr(data-codetype);
 display: block;
 position: static;
 top: 0;
 right: 0;
 left: 0;
 background-color: #666;
 padding: 5px 7px;
 margin: -5px -6px 0 -12px;
 font: bold 11px/20px Arial, Sans-Serif;
 color: white;
 ;
}
pre[rel="CSS"], pre[data-codetype="CSS"]:before {
 background-color: #5DA028;
 ;
}
pre[rel="JavaScript"], pre[data-codetype="JavaScript"]:before {
 background-color: #40627E;
 ;
}
pre[rel="HTML"], pre[data-codetype="HTML"]:before {
 background-color: #0B7E88;
 ;
}
pre[rel="JQuery"], pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"], pre[data-odetype="JavaScript"]:before {
 background-color: #40627E;
 ;
}
pre[rel="XML"], pre[data-codetype="XML"]:before {
 background-color: #E55E48;
 ;
}
pre[data-codetype*="+"]:before {
 background-color: #0B7E88;
 ;
}
pre .line-number span:target:before {
 content: "";
 display: block;
 height: 150px;
 margin-top: -150px;
 visibility: hidden;
 ;
} </code></pre>
</div>
<br />
Setelah itu cari kode </body> , letakkan script ini diatasnya
<br />
<pre class="numbered" data-codetype="JavaScript" id="code-block:2"><code class="Javascript xml"><span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">'https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s'</span>></span><span class="tag"></<span class="title">script</span>></span></code></pre>
<br />
Simpan Template sobat,<br />
<h2>
Cara Penggunannya</h2>
<br />
Setiap bahasa memiliki kelas sendiri sendiri.<br />
<ul>
<li> Java Script  ⇒ data-codetype="JavaScript" , code class="Javascript"</li>
<li>CSS  ⇒ data-codetype="CSS" , code class="CSS"</li>
<li>HTML ⇒ data-codetype="HTML" , code class="HTML"</li>
<li>XML ⇒ data-codetype="XML" , code class="XML"</li>
<li>JQuery ⇒ data-codetype="JQuery" , code class="JQuery"</li>
</ul>
<br />
<pre data-codetype="HTML"><code class="HTML">
<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript di sini ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS di sini ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML di sini ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery di sini ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML di sini ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui di sini ... </code></pre>
</code></pre>
<br />
<div style="text-align: justify;">
Apabila kurang cocok dengan tema / tampilannya Syntax Highlighter ini, silahkan dimodifikasi tampilannya sesuai selera sobat. Akhirnya tutorial <a href="http://one-go.blogspot.com/2014/09/cara-memasang-syntaxhighlighter-diblog.html">Cara Memasang SyntaxHighlighter diBlog</a> selesai juga, jika sobat One-GO! ada pertanyaan silahkan berkomentar dibawah</div>

Cara Memasang SyntaxHighlighter diBlog

Cara Memasang SyntaxHighlighter diBlog Sebelum One-GO! membahas bagaimana Cara Memasang SyntaxHighlighter diBlog , alangkah baiknya jik...

Apa itu Syntax Highlighter?

Apa itu Syntax Highlighter?

Apa itu Syntax Highlighter? Kali ini One-GO! akan Belajar dan Berbagi tentang Apa itu Syntax Highlighter? , Syntax Highlighter adalah...

Belajar dan Berbagi

Cara Membuat Maintenace Page di Blog

Membuat Widget Komentar Terbaru diBlog

Cara Memasang SyntaxHighlighter diBlog

Apa itu Syntax Highlighter?

Populer

Komentar

Arsip