Invite X-D-X ./: Trik Blog

Sosial Media Share (Simple)

Unknown 0 Trik Blog 4/29/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdGq_dh6otwyLE7pVGxbR8P0fLTwaG_o-VEefF8Fnh2_Y_cwx_dvovaq__Fewq1VnD63zD77TaGzHFSq5ZV0nIKHC2MctMIPOrZP5tFh6xKW72Xy4bv06SwUQJy6DocdEVMVhjgdsSb3eq/s1600/Sosial+Media+Share.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Sosial Media Share" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdGq_dh6otwyLE7pVGxbR8P0fLTwaG_o-VEefF8Fnh2_Y_cwx_dvovaq__Fewq1VnD63zD77TaGzHFSq5ZV0nIKHC2MctMIPOrZP5tFh6xKW72Xy4bv06SwUQJy6DocdEVMVhjgdsSb3eq/s1600/Sosial+Media+Share.png" title="Sosial Media Share" /></a></div>
<br />
<b>Tutorial Blog</b> : Pada kesempatan kali ini saya kan mencoba memberikan tutorial  membuat sosial media sharing. Konten ini berguna sekali untuk memperbanyak visitor atau pengunjung tea. Duka teuing kumaha anu kieu teh ges hal lumrah dina perbloggeran, nya enya atuh da fungsinya sangat penting untuk optimalisasi SEO, telah kita ketahui bahwa sosial media merupakan hal yang sulit ditinggalkan oleh masyarakat kita. Dari pada kepanjangan langsung saja ke intinya :</div>
<div style="text-align: justify;">
<ul>
<li>Silahkan masuk ke blogger.com Anda.</li>
<li>Silahkan di backup terlebih dahulu templatenya (bila perlu).</li>
<li>Cari <xdx>CTRL</xdx>+<xdx>F</xdx> kode dibawah:</li>
</ul>
<blockquote class="tr_bq">
<data:post.body/></blockquote>
<ul>
<li>Bila ditemplate anda ada dua buah kode seperti itu silahkan simpan di kode yang kedua (Atau temukan sendiri karena berbeda template berbeda pula isinya)</li>
<li>Silahkan simpan kode ini dibawah kode <data:post.body/>.</li>
</ul><pre>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_counter addthis_pill_style"></a>
</div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
</b:if></pre></div>
<h5 style="text-align: left;">
DEMO</h5>
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="100" src="http://jsfiddle.net/deris/Xqy28/embedded/result/" width="100%"></iframe></div>

Sosial Media Share (Simple)

Tutorial Blog : Pada kesempatan kali ini saya kan mencoba memberikan tutorial membuat sosial media sharing. Konten ini berguna sekali...

Cara Membuat Tooltip dengan CSS3 Manual

Unknown 0 Trik Blog 3/03/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Tooltip CSS</b> - Salam sejahtra buat blogger semuanya, pada kesempatan kali ini saya akan memberikan tips atau tutorial membuat Tooltip dengan CSS3 secara manual. Dan apabila teman-teman ingin membuat tooltips yang otomatis saya pernah posting,<br />
baca >> <b><a class="tooltip" href="ttp://deris10.blogspot.com/2014/02/membuat-auto-tooltip-diblog.html" target="_blank" title="Membuat Tooltip otomatis di blog">DISINI</a></b> <<.<br />
<h5 style="text-align: left;">
STEP #1</h5>
<ul style="text-align: left;">
<li>Loggin Blogger <b>></b> Dashboard <b>></b> Edit Html.</li>
<li><xdx>CTRL</xdx>+<xdx>F</xdx> atau Cari kode <b><span style="color: #0b5394;">]]></b:skin></span></b>,</li>
<li>Letakan CSS berikut, tepat diatas kode tersebut.</li>
</ul>
<blockquote class="tr_bq">
/*CSS3TOOLTIPXDX*/<br />
.tooltip {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>position: relative;<br />
}<br />
.tooltip:before, .tooltip:after {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>transition: All 0.5s ease;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-transition: All 0.5s ease;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-transition: All 0.5s ease;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-o-transition: All 0.5s ease;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: -100px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>left: 50%;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>bottom: 300%;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>display: block;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #000;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>opacity: 0;<br />
}<br />
.tooltip:before {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>content: attr(title);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border: solid 1px #0088cc;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background: #FFF;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 200px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>text-align: center;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 2;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-size: 13px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>line-height: 18px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 5px;<br />
}<br />
.tooltip:after {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>content: '\25c6';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top: 10px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 15px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 15px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>line-height: 28px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #0088cc;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-size: 20px;<br />
}<br />
.tooltip:hover:before, .tooltip:hover:after {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>bottom: 150%;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>opacity: 1;<br />
}</blockquote>
<ul style="text-align: left;">
<li>Simpan Template anda!.</li>
</ul>
<h5 style="text-align: left;">
Step #2 </h5>
<div>
Untuk penerapan dalam postingan anda :</div>
<blockquote class="tr_bq">
<a href="#" title="Ini adalah Demo membuat Tooltips" class="tooltip">Tooltip</a></blockquote>
<b>Demo</b> >>> <a class="tooltip" href="https://www.blogger.com/blogger.g?blogID=1097862451188080365#" title="Ini adalah Demo membuat Tooltips">Tooltip</a></div>

Cara Membuat Tooltip dengan CSS3 Manual

Tooltip CSS - Salam sejahtra buat blogger semuanya, pada kesempatan kali ini saya akan memberikan tips atau tutorial membuat Tooltip denga...

Memasang Tombol Follow Twitter di Blog.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<span style="color: lime;"><b>Tombol Follow Twitter</b> </span>- Cara memasang tombol twitter di blog sangat mudah sekali anda hanya perlu meletakan skrip tersebut di element mana saja yang anda inginkan, misalnya di widget ataupun postingan Anda.</div>
<div class="codeview" style="text-align: justify;">
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25.200000762939453px; text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: #252525;"><a class="twitter-follow-button" data-lang="id" data-show-count="</span><b><span style="color: blue;">true</span></b><span style="color: #252525;">" href="https://twitter.com/</span><span style="color: red;"><b>deris_senjaya</b></span><span style="color: #252525;">">Ikuti @</span><span style="color: red;"><b>deris_senjaya</b></span><span style="color: #252525;"></a></span></span><span style="color: #252525; font-family: 'Courier New', Courier, monospace;"><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></span></div></div>
<h5>
Keterangan :</h5>
<div>
<ul>
<li>Anda harus mengganti teks yang berwarna <span style="color: red;"><b>Merah</b></span>.</li>
<li>Dan untuk yang teks berwarna <b><span style="color: blue;">Biru</span></b>, '<span style="color: #252525; font-family: 'Courier New', Courier, monospace; font-size: 14px; line-height: 25.200000762939453px; text-align: left;">data-show-count="</span><b style="font-family: 'Courier New', Courier, monospace; font-size: 14px; line-height: 25.200000762939453px; text-align: left;"><span style="color: blue;">true</span></b><span style="color: #252525; font-family: 'Courier New', Courier, monospace; font-size: 14px; line-height: 25.200000762939453px; text-align: left;">"</span>' anda bisa mengubahnya dengan '<span style="color: #252525; font-family: 'Courier New', Courier, monospace; font-size: 14px; line-height: 25.200000762939453px; text-align: left;">data-show-count="</span><b style="font-family: 'Courier New', Courier, monospace; font-size: 14px; line-height: 25.200000762939453px; text-align: left;"><span style="color: blue;">false"</span></b>'. Penjelasannya untuk '<b>True</b>' adalah untuk menampilkan jumlah follower, sedangkan untuk '<b>false</b>' tidak menampilkan jumlah follower.!</li>
</ul>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvBGm5JqVZtk2BHgknE7altQez7MpWkMQQnVmfdWfpzOOLn9ksCW6RuaFJiuKXU5AOhHRPLtf8Mck4gqzbOaxuySCMg4oXgJ2d2hnBs3CFmwKsTmmJpYYav6lEC99OBRNx1v1Faheh7ZSj/s1600/tombol+twitter.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvBGm5JqVZtk2BHgknE7altQez7MpWkMQQnVmfdWfpzOOLn9ksCW6RuaFJiuKXU5AOhHRPLtf8Mck4gqzbOaxuySCMg4oXgJ2d2hnBs3CFmwKsTmmJpYYav6lEC99OBRNx1v1Faheh7ZSj/s1600/tombol+twitter.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DEMO TWITTER FOLLOW</td></tr>
</tbody></table>
</div>
</div>

Memasang Tombol Follow Twitter di Blog.

Tombol Follow Twitter - Cara memasang tombol twitter di blog sangat mudah sekali anda hanya perlu meletakan skrip tersebut di element man...

Membuat Efek Tombol Keyboard di Blog

Unknown 0 Trik Blog 2/22/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY2op2k54-sYBcrNV3WgpSYFELRTCPXtyqZC2Tj_vPSr96QdnbNhqGzXxGW1W6H1tM0nKGT7UOOszpbqSMje0hKYA-GbmJXxH5HftA4vjsA0CQ6Qce4AVCdMciNrbRJDCMckiN-aWKkGT/s1600/Tombol+Keyboard+di+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY2op2k54-sYBcrNV3WgpSYFELRTCPXtyqZC2Tj_vPSr96QdnbNhqGzXxGW1W6H1tM0nKGT7UOOszpbqSMje0hKYA-GbmJXxH5HftA4vjsA0CQ6Qce4AVCdMciNrbRJDCMckiN-aWKkGT/s1600/Tombol+Keyboard+di+blog.png" width="400" /></a></div>
<b>Tombol Keyboard Blog</b> - Pernahkah anda melihat blog yang memakai efek tombol seperti keyboard di blog? jika pernah mungkin anda penasaran "Bagaimana cara membuatnya?". Tenang Sob kali ini saya akan membahas itu semua, Cara nya sangat mudah sekali hanya perlu menambahkan CSS saja diblog Anda.</div>
<h5>
STEP 1 :</h5>
<div>
<ul style="text-align: left;">
<li><b>Loggin Blogger</b> > <b>Template</b> > <b>Edit Html</b>.</li>
<li><xdx>CTRL</xdx>+<xdx>F</xdx> atau cari <span style="color: red;">kode</span> <b><span style="color: #274e13;">]]></b:skin></span></b>.</li>
<li>Tambahkan <i>Cascading Style Sheet</i> ini <b>di atas</b> <span style="color: red;">kode</span> tsb.</li>
</ul>
</div>
<div class="codeview2">
.keyboard {
    border: 1px solid gray;
    padding: 1px 5px;
    margin: 0px 5px;
    font-size: 1.2em;
    text-transform: uppercase;
    color:#555 !important;
    box-shadow: 1px 0px 1px 0px rgb(255, 255, 255), 0px 2px 0px 2px lightGray, 0px 2px 0px 3px rgb(51, 51, 51);
    -moz-box-shadow: 1px 0px 1px 0px rgb(255, 255, 255), 0px 2px 0px 2px lightGray, 0px 2px 0px 3px rgb(51, 51, 51);
    -webkit-box-shadow: 1px 0px 1px 0px rgb(255, 255, 255), 0px 2px 0px 2px lightGray, 0px 2px 0px 3px rgb(51, 51, 51);
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    background: linear-gradient(left center , white 0%, rgb(226, 226, 226) 25%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(left center , white 0%, rgb(226, 226, 226) 25%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(left center , white 0%, rgb(226, 226, 226) 25%) repeat scroll 0% 0% transparent;
}
.keyboard:active {
    background: none repeat scroll 0% 0% rgb(119, 119, 119);
}
.keyboard:hover {
    opacity: 0.8;
    cursor: pointer;
    text-decoration:none;
}</div>
<ul style="text-align: left;">
<li>Kemudian <b>Simpan</b> Template Anda.</li>
</ul>
<h5 style="text-align: left;">
STEP 2 :</h5>
<div>
Ketika posting anda hanya perlu menambahkan kode seperti ini :
<br />
<div class="codeview">
<a class="keyboard">CTRL</a>+<a class="keyboard">F</a><br />
<a class="keyboard">CTRL</a>+<a class="keyboard">A</a><br />
<a class="keyboard">F1</a><br />
<a class="keyboard">F2</a><br />
<a class="keyboard">F3</a><br />
<a class="keyboard">F5</a></div>
Maka hasilnya akan seperti ini :<br />
<div>
<a class="keyboard">CTRL</a>+<a class="keyboard">F</a> = Fungsi untuk Mencari (Find).<br/><br/>
<a class="keyboard">CTRL</a>+<a class="keyboard">A</a> = Fungsi untuk Seleksi Semua Text.<br/><br/>
<a class="keyboard">F1</a> = Fungsi untuk memunculkan Help.<br/><br/>
<a class="keyboard">F2</a> = Fungsi untuk Rename.<br/><br/>
<a class="keyboard">F3</a> = Fungsi untuk Search.<br/><br/>
<a class="keyboard">F5</a> = Fungsi untuk Refresh.</div><br/>
<div class="info">
Demikian tutorial membuat efek tombol keyboard diblog, Jika ada yang ditanyakan silahkan di kotak komentar :D.</div>
</div>
</div>

Membuat Efek Tombol Keyboard di Blog

Tombol Keyboard Blog - Pernahkah anda melihat blog yang memakai efek tombol seperti keyboard di blog? jika pernah mungkin anda penasara...

Tutorial Share to Download Keren untuk blog

Unknown 0 Trik Blog 2/20/2014

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEVlIhtgM6vxIqpoGdE0imNujSNCaI0CZjtzHpEK0IyFgJ0PPDJVl8t63m4ETi7Q02JIze_ii9yvhtUs64OjHKOqK-t7vDsBUzoVpYzvpLosAiaNF4LU9lU3LQDXkyBhjf0U17FnynXPAH/s1600/share+to+download.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEVlIhtgM6vxIqpoGdE0imNujSNCaI0CZjtzHpEK0IyFgJ0PPDJVl8t63m4ETi7Q02JIze_ii9yvhtUs64OjHKOqK-t7vDsBUzoVpYzvpLosAiaNF4LU9lU3LQDXkyBhjf0U17FnynXPAH/s1600/share+to+download.png" /></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<b>Share to Download</b> - Ini merupakan salah satu optimalisasi dari seo agar blog kita menjadi lebih terkenal :), mungkin sedikit pemaksaan bagi pengujung untuk share artikel kita. Tapi anda bisa berfikir 2 kali apabila artikel anda yang terlalu biasa untuk menggunakan konten seperti ini, tapi jika artikel anda sangat menarik pasti saya sarankan untuk menggunakan ini. Langsung saja untuk tutorialnya :</div>
<h3 style="text-align: left;">
Pertama :</h3>
<div>
<ul style="text-align: left;">
<li><b><span style="color: magenta;">Masuk Blogger Anda</span></b> <span style="color: red;">></span> <b><span style="color: magenta;">Template</span></b><span style="color: red;"> ></span> <b><span style="color: magenta;">Edit Html</span></b>.</li>
<li>'Copy paste' <i>Stylesheet</i> ini tepat diatas <b><span style="color: #274e13;"></body></span></b>.</li>
</ul></div>
<pre class="codeview"><link href='https://deris-cole.googlecode.com/svn/CSS/SharetoUnlockXDX.css' rel='stylesheet' type='text/css'/></pre>
<div style="text-align: center;">
<b><span style="color: #990000;">Kemudian.....<br />
Untuk Selanjutnya Silahkan Share, Like atau Tweet.<br />
Konten dibawah - Sebagai Contoh / DEMO</span>.</b></div>
<article id="default-usage">
<div class="to-lock" style="display: none;">

<div style="text-align: justify">
<h3 style="text-align: left;">
Kedua :</h3>
<div>
Anda tinggal memasukan kode ini, didalam postingan anda !</div>
<div class="codeview2">
<article id="default-usage"><br />
<div class="to-lock" style="display: none;"><br />
<br />
<div style="text-align: justify"><br />
<span style="background-color: #eeeeee; color: orange;"><b>DISINI LINK ATAU KONTEN YANG DISEMBUNYIKAN ! </b></span><br />
</div><br />
<br />
</article><br />
</div><div id="mblunlocker"> </div><br />
<script type="text/javascript" src="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script><br />
<script><br />
jQuery(document).ready(function ($) {<br />
$("#default-usage .to-lock").socialLock({<br />
text: {<br />
header: "LINK DAN KONTEN DIKUNCI!",<br />
message: "Untuk membuka kunci, Silahkan Like / Tweet / Plus(+), <b>Terima Kasih</b>!"<br />
},<br />
style: "ui-social-locker-secrets",<br />
buttons: {<br />
order: ["twitter", "facebook", "google"]<br />
},<br />
  // pengaturan twitter<br />
twitter: {<br />
url: "<b><span style="background-color: #eeeeee; color: orange;">http://deris10.blogspot.com/</span></b>",<br />
text: "#inviteXDX"<br />
},<br />
    // pengaturan facebook<br />
facebook: {<br />
url: "<b><span style="background-color: #eeeeee; color: orange;">http://www.facebook.com/358093207561934</span></b>",<br />
appId: "365605720117937"<br />
},<br />
google: {<br />
url: "<b><span style="background-color: white; color: orange;">http://deris10.blogspot.com/</span></b>"<br />
}<br />
});<br />
});;;;<br />
      <br />
</script></div>
<br />
<ul style="text-align: left;">
<li>Untuk yang bertulisan '<b><span style="background-color: white; color: #bf9000;">KUNING</span></b>' Silahkan ganti dengan selera anda masing-masing.!</li>
</ul>
</div>

</article> 
</div><div id="mblunlocker"></div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "LINK DAN KONTEN DIKUNCI!",
message: "Untuk membuka kunci, Silahkan Like / Tweet / Plus(+), <b>Terima Kasih</b>!"
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
  // pengaturan twitter
twitter: {
url: "http://deris10.blogspot.com/",
text: "#inviteXDX"
},
    // pengaturan facebook
facebook: {
url: "http://www.facebook.com/358093207561934",
appId: "365605720117937"
},
google: {
url: "http://deris10.blogspot.com/"
}
});
});
</script>
<div class="alert">
Sekian Penjelasan tentang share to download pada blog, Terima Kasih !</div>
</div>

Tutorial Share to Download Keren untuk blog

Share to Download - Ini merupakan salah satu optimalisasi dari seo agar blog kita menjadi lebih terkenal :), mungkin sedikit pemaksaan b...

Membuat Daftar Isi Simple

Unknown 0 Trik Blog 2/19/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Daftar Isi</b> - Cara membuat daftar isi simple berdasarkan label sangat mudah sekali. Anda tinggal masuk ke <span style="color: magenta;"><b>Blogger</b> </span>Anda > Lalu <span style="color: magenta;"><b>Tambah Laman</b> </span>> Masukan <b><span style="color: magenta;">Javascript</span></b> ini dalam postingan laman Anda.<br />
<div class="codeview2">
<script src="https://deris-cole.googlecode.com/svn/trunk/javascript/Soft-Daftar-Isi.js"><br />
</script><script src="<b><span style="color: #cc0000;">http://deris10.blogspot.com</span></b>/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"><br />
</script></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<ul style="text-align: left;">
<li>Untuk <b><span style="color: #cc0000;">http://deris10.blogspot.com</span></b>. harus diganti dengan namablog Anda.</li>
<li>Untuk demo anda bisa melihat gambar dibawah :</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0aGcY3SN9LyW4dnTqsdz95SiGfxNzQfcvf_34itGfqwV-j_R86zODgynyh5Ne6l5b_uQrSUQCBLIjbRLVLMO5JjFPEVXE5fskyrP_8GazGr8x2epF9GJ8s4Eah5mjO4RV3rFohQ6Hb-D/s1600/Daftar+Isi+Simple.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0aGcY3SN9LyW4dnTqsdz95SiGfxNzQfcvf_34itGfqwV-j_R86zODgynyh5Ne6l5b_uQrSUQCBLIjbRLVLMO5JjFPEVXE5fskyrP_8GazGr8x2epF9GJ8s4Eah5mjO4RV3rFohQ6Hb-D/s1600/Daftar+Isi+Simple.png" width="640" /></a></div>
<br />
<div style="text-align: center;">
<ul class="tombol">
<li><a href="http://deris10.blogspot.com/p/laman-label-anime.html" target="_blank">Demo</a></li>
</ul>
</div>
</div>

Membuat Daftar Isi Simple

Daftar Isi - Cara membuat daftar isi simple berdasarkan label sangat mudah sekali. Anda tinggal masuk ke Blogger Anda > Lalu Tambah La...

Membuat Berita Terbaru Blog diatas Header

Unknown 4 Trik Blog 2/18/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<b>BERITA TERBARU</b> - Membuat berita terbaru diatas header dari blog akan membuat tampak manis dari sebuah blog, anda bisa melihat demo gambarnya dibawah :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamNwlQk5JJXFsy9o3tM4xru0WNDdpCeRbI6GEZ2zs_sqF5iU1EWCKlleIQ7FJc6ZMYnXjCaHtL9zogNUGeonZkJ8kdqsbs3ybGdYIBv06hOjr3OUNBeXnyesFbFYM_p951jl5EX0sxIUI/s1600/Breaking+news.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamNwlQk5JJXFsy9o3tM4xru0WNDdpCeRbI6GEZ2zs_sqF5iU1EWCKlleIQ7FJc6ZMYnXjCaHtL9zogNUGeonZkJ8kdqsbs3ybGdYIBv06hOjr3OUNBeXnyesFbFYM_p951jl5EX0sxIUI/s1600/Breaking+news.png" width="640" /></a></div>
<h5 style="text-align: left;">
Step 1 :</h5>
<div>
<ul style="text-align: left;">
<li>Masuk Dashboard > Edit HTML.</li>
<li><xdx>CTRL</xdx>+<xdx>F</xdx> atau cari kode <b><span style="color: #0b5394;">]]></b:skin></span></b>.</li>
<li>Letakan kode CSS dibawah tepat diatasnya.</li>
</ul>
</div>
<div class="codeview">
/* Headline-xdx */<br />
.newspic {background:transparent url(https://lh5.googleusercontent.com/-5EABVQDyheA/Uvs0mPwebmI/AAAAAAAAARY/-b6e5vAA0HY/w123-h22-no/wn.png) no-repeat top left;border-bottom:1px solid #CDCDCD; width:675px;margin:0 auto;padding:0 auto;height:23px;color:#000;position:absolute;left:13.10%;}<br />
.news {width: 850px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}<br />
.news a:link, .news a:visited{color:#000;text-decoration:none;}<br />
.news a:hover {color:#0099cc;text-decoration:underline;}</div>
<br />
<ul style="text-align: left;">
<li>Kemudian Cari kode <b><span style="color: #38761d;"><div id='body-wrapper'></span></b>.</li>
<li>Letakan kode tepat ini dibawahnya.</li>
</ul>
<div class="codeview">
<div style='clear:both;'/><br />
<div class='newspic'><br />
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'><br />
<script type='text/javascript'><br />
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)<br />
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://www.deris10.blogspot.com/feeds/posts/default&quot;) //Specify<br />
&quot;label&quot; plus URL to RSS feed<br />
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields<br />
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag<br />
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date<br />
cssfeed.entries_per_page(1)<br />
cssfeed.init()<br />
</script><br />
</div><br />
<div style='clear:both;'/><br />
</div></div>
<ul style="text-align: left;">
<li>Selanjutnya letakan script ini diatas kode <b><span style="color: #38761d;"></head></span></b>.</li>
</ul>
<div class="codeview2">
<br />
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};<br />
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};<br />
//]]><br />
</script><br />
<style type='text/css'><br />
.titlefield{ /*CSS for RSS title link in general*/<br />
text-decoration: none;}<br />
.labelfield{ /*CSS for label field in general*/<br />
color:#0099cc;font-size: 100%;}<br />
.datefield{ /*CSS for date field in general*/<br />
color:#aaa;font:normal 12px courier;text-transform:none;}<br />
#example1{ /*Demo 1 main container*/<br />
width: 960px;<br />
height: 13px;<br />
border: 0px solid #cdcdcd;<br />
padding: 0px;<br />
font:bold 13px courier;<br />
text-transform:none;<br />
text-align:left;<br />
background-color:transparent;}<br />
code{ /*CSS for insructions*/<br />
color: #0099CC;}<br />
#example1 a:link, #example1 a:visited {color:#02ab68;text-decoration:none;}<br />
#example1 a:hover {color:#111;text-decoration:none;}<br />
</style></div>
<br />
<ul style="text-align: left;">
<li>Selesai, Silahkan simpan template Anda.</li>
</ul>
</div>

Membuat Berita Terbaru Blog diatas Header

BERITA TERBARU - Membuat berita terbaru diatas header dari blog akan membuat tampak manis dari sebuah blog, anda bisa melihat demo gambar...

Membuat tag 'alt' Otomatis di Setiap Gambar Blog.

Unknown 0 Trik Blog 2/17/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Cara membuat tag 'alt' disetiap Gambar Blog</b> - Fungsinya untuk menampilkan penanda dari keterangan gambar tersebut, Anda bisa melihat contohnya dibawah !
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinj2QfyjG2S3pKU2Hc7WjxZgvk-KzIFxrNPb2WZ8GEhRmeIXgbSHpw2Mj-1Zm8JytcUClYXizIhsEB8KcqpF3PUmMLUByeCNzSsRoZU4v5i7NNR943inUPrJ15gyd5F4ZLl8AyG4UnWnC9/s1600/Tag+Alt+Otomatis+Pada+gambar.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinj2QfyjG2S3pKU2Hc7WjxZgvk-KzIFxrNPb2WZ8GEhRmeIXgbSHpw2Mj-1Zm8JytcUClYXizIhsEB8KcqpF3PUmMLUByeCNzSsRoZU4v5i7NNR943inUPrJ15gyd5F4ZLl8AyG4UnWnC9/s1600/Tag+Alt+Otomatis+Pada+gambar.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Contoh tag <i>alt</i></td></tr>
</tbody></table>
<h3>
Tutorial :</h3>
<ul style="text-align: left;">
<li>Buka Dashboard blogger anda.</li>
<li>Template > Edit Html</li>
<li>Cari (<xdx>CTRL</xdx>+<xdx>F</xdx>) kode <b><span style="color: #38761d;"></body></span></b></li>
<li>Letakan <i>Javascript</i> ini diatas kode tsb.</li>
</ul>
<div>
<pre class="line-number" data-codetype="Jquery"><code>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $('img').each(function(){
 var $img = $(this);
 var filename = $img.attr('src')
 $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
 $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
 });
});
//]]>
</script>
</code></pre>
</div>
<ul style="text-align: left;">
<li>Simpan <i>Template</i> anda.</li>
</ul>
<div>
Sekian cara membuat tag 'alt' otomatis pada blog !</div>
</div>

Membuat tag 'alt' Otomatis di Setiap Gambar Blog.

Cara membuat tag 'alt' disetiap Gambar Blog - Fungsinya untuk menampilkan penanda dari keterangan gambar tersebut, Anda bisa melih...

Efek Animasi Persentase di Scrollbar

Unknown 0 Trik Blog 2/13/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Animasi Scrollbar</h2>
<div style="text-align: justify;">
<b>Percentase Scrollbar</b> - Sebenarnya bingung juga ingin memakai judul apa. Tapi apabila ingin lihat demonya lihat saja di gambar bawah :</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSdA3Dp1p_p6kcWyI9LCzbTUuOz62AgK8Ono5ab9F7CCdyR_6zFgaooPREdZTzYYG1RZuQ2ZwyC8W-5Qe4e7UDeUO4qTA_vsrl9Oo6xTGAS62_zURDKrd9Gzl5Hn8XdFE55gUcnj89SYc/s1600/Efek+Persentase+pada+scrollbar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSdA3Dp1p_p6kcWyI9LCzbTUuOz62AgK8Ono5ab9F7CCdyR_6zFgaooPREdZTzYYG1RZuQ2ZwyC8W-5Qe4e7UDeUO4qTA_vsrl9Oo6xTGAS62_zURDKrd9Gzl5Hn8XdFE55gUcnj89SYc/s1600/Efek+Persentase+pada+scrollbar.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Demo</td></tr>
</tbody></table>
 Mungkin setelah melihat gambarnya sedikit banyak bisa mengerti ya, langsung saja ya :<br />
<h3 style="text-align: left;">
Pertama :</h3>
<div>
<ul style="text-align: left;">
<li>Login Blogger.com</li>
<li>Edit Html, <xdx>CTRL</xdx>+<xdx>F</xdx> <span style="color: #38761d;"><b>]]></b:skin></b></span></li>
<li>Letakan Kode CSS ini, tepat diatas kode diatas.<b><span style="color: #38761d;"> ]]></b:skin></span></b></li>
</ul>
</div>
<div>
<pre class="line-number" data-codetype="CSS"><code>
/* Scroll xdx*/
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: "";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}</code></pre>
</div>
<ul style="text-align: left;">
<li>Kemudian cari kode<span style="color: #38761d;"> <b></head></b></span></li>
<li>Tamhkan kode ini tepat dibawahnya, sehingga terlihat seperti ini.</li>
</ul>
<blockquote class="tr_bq codeview">
<b><span style="color: #38761d;"></head></span></b><br />
<div id='scroll'></div></blockquote>
<ul style="text-align: left;">
<li>Cari kode <b><span style="color: #38761d;"><body></span></b> ganti dengan seperti dibawah:</li>
</ul>
<blockquote class="tr_bq codeview">
<b><span style="color: #38761d;"><body</span></b> class='loading'></blockquote>
<ul style="text-align: left;">
<li>Terakhir letakan Javascritp ini dibawah <b><span style="color: #38761d;"><body></span></b>.</li>
</ul>
<pre class="line-number" data-codetype="Jquery"><code>
<script language='JavaScript' type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
//]]>
</script></code></pre>
<div class="info">
Seperti itulah cara membuat, efek animasi persentase di scrollbar. Apabila ada pertanyaan silahkan dikotak komentar. !</div>
</div>

Efek Animasi Persentase di Scrollbar

Animasi Scrollbar Percentase Scrollbar - Sebenarnya bingung juga ingin memakai judul apa. Tapi apabila ingin lihat demonya lihat saja d...

Membuat Widget Tab Accordion Blogger

Unknown 0 Trik Blog 2/13/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Tab Accordion </h2>
<div>
Membuat Tab Accordion tanpa masuk edit html - Ternyata ada cara mudah menggunakan tab view jenis accordion ini, caranya :</div>
<div>
<ul style="text-align: left;">
<li>Masuk Blogger :</li>
<li>Masuk Tab <i>Tata Letak</i>.</li>
<li>Tambahkan Gadget <b>Html/Javascript</b> :</li>
</ul>
</div>
<pre class="line-number"><code><style type="text/css"> 
.blogtabs {padding: 0px !important;border: 1px solid #bbb;} 
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 15px;padding: 3px 5px;overflow: hidden;position: relative;background: #353535;color:#fff;font-family:monospace;font-weight:100;cursor:pointer;}html .blogtabs h2.active {background: #02ab68;}.blogtabs .widget-content {border: 0px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}.btab, #showtabs {display:none;}
.quickedit { display:none; }
</style><script type="text/javascript" src="http://bloggergubug.googlecode.com/files/tabviewjquery.js"></script><script type="text/javascript">$(document).ready(function() {$('#showtabs').simpleBlogTab ({organictabs: 3});});</script><div id="showtabs"></div></code></pre>
<div>
<ul style="text-align: left;">
<li>Simpan Gadget/Widget anda :</li>
</ul>
</div>
<div class="info">
Catatan : Script diatas harus berada diatas widget yang lainnya, supaya masuk ke dalam tab viewnya.</div>
<div style="text-align: right;">
<i><span style="font-size: x-small;">Script dasar dari bloggergubug</span></i>
</div>
</div>
</div>

Membuat Widget Tab Accordion Blogger

Tab Accordion Membuat Tab Accordion tanpa masuk edit html - Ternyata ada cara mudah menggunakan tab view jenis accordion ini, caranya ...

Membuat Syntax Highlighter Keren

Unknown 0 Trik Blog 2/10/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Cara Menampilkan Syntax Highlighter</h2>
<div style="text-align: justify;">
Kali ini saya akan memberikan tutorial membuat syntax highlighter untuk blog<b> fungsi</b> dari <i>syntax higlighter</i> ini adalah untuk memunculkan kode atau script dari blog baik itu html, javascript maupun CSS.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGl6ObK8W9fQbzXUWQMkqaPENsPaUGJaVtPyB4ooWOUKHlEZT_frYa3QrIKrjPT38KLP1dDj3_X_XkVedrs0vexWcipVffJnsPpg68zqLvL20kpIlFIX_1NkKNQRHakOpEgv87RG73NuSU/s1600/Syntax+Highlighter+Keren.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGl6ObK8W9fQbzXUWQMkqaPENsPaUGJaVtPyB4ooWOUKHlEZT_frYa3QrIKrjPT38KLP1dDj3_X_XkVedrs0vexWcipVffJnsPpg68zqLvL20kpIlFIX_1NkKNQRHakOpEgv87RG73NuSU/s1600/Syntax+Highlighter+Keren.jpg" width="640" /></a></div>
</div>
<h5 style="text-align: justify;">
Pertama :</h5>
<div>
<ul style="text-align: left;">
<li>Masuk Blogger anda.</li>
<li>Edit Html -> <dxd>CTRL</dxd>+<dxd>F</dxd> atau Search kode <b><span style="color: #38761d;">]]></b:skin></span></b></li>
<li>Letakan CSS berikut, diatas kode <b><span style="color: #38761d;">]]></b:skin></span></b>.</li>
</ul>
</div>
<pre class="line-number" data-codetype="CSS"><code>/* Syntax Highlghter */
pre {
 background-color: #2f3741;
 border-left: 4px solid #40627E;
 color: #839496;
 font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
 font-size: 13px;
 line-height: 1.4em;
 margin: 0;
 padding: .8em 1em;
 position: relative;
 white-space: pre-wrap;
 word-wrap: normal; }
 
 pre.line-number {
  background:#2f3741 url(http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGmyK7Za2nzmOvziQqoK2h2FN0CG3uvjrZckZUlZMvHeKL4WkLOa7FgUGPwn7jwjgnPsgqFut_EHt43tD2nnQvGw7y_KFu-BbbB7kRinFBieDMYtMSvD3VpKVU144Bx7bhKkWjvQPzmyE/s1600/new-line-number.png)no-repeat top left;
  border-left: none;
  padding-left: 54px;
overflow:auto; }
 
  pre.line-number:after {
   background-color: #39424e;
   bottom: 0;
   content: "";
   height: 8px;
   left: 0;
   position: absolute;
   width: 35px; }
 
pre[data-codetype="CSS"] { border-left-color: #5fbbba }
pre[data-codetype="HTML"] { border-left-color: #4fc1eb }
pre[data-codetype="JavaScript"] { border-left-color: #ff6c60 }
pre[data-codetype="JQuery"] { border-left-color: #99c262 }
pre.line-number[data-codetype]:before {
 background-color: #41749f;
 color: white
 content: attr(data-codetype);
 display: block;
 font-family: Oswald,Arial,Sans-serif;
 font-size: 14px;
 margin: -11px -13px 10px -54px;
 padding: 8px 12px;
 text-transform: uppercase; }
pre.line-number[data-codetype="CSS"]:before { background-color: #a9d86e }
pre.line-number[data-codetype="HTML"]:before { background-color: #4fc1eb }
pre.line-number[data-codetype="JavaScript"]:before { background-color: #ff6c60 }
pre.line-number[data-codetype="JQuery"]:before { background-color: #99c262 }
code {
 color: #d14;
 font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
 font-size: 13px; }
 
#comments code { color: #bbbb6d; }
 
pre code {
 background: none !important;
 border: none !important;
 color: #a3a49a;
 display: block;
 padding: 0 !important; }
 
pre .line-number {
 background-color: #39424e;
 color: #61686d;
 float: left;
 margin: 0 1em 0 -1em;
 min-width: 2.5em;
 padding-right: 4px;
 text-align: right; }
 
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
 color: #586e75;
 font-style: italic; }
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title { color: #859900; }
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor { color: #7195a3; }
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function { color: #569dcf; }
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type { color: #aa985a; }
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo { color: #509a55; }
pre .deletion { color: #dc322f; }
pre .tex .formula { background: #073642; }</code></pre>
<ul style="text-align: left;">
<li>Kemudian letakan Jquery ini diatas kode <b><span style="color: #38761d;"></body></span></b>.</li>
</ul>
<pre class="line-number" data-codetype="Jquery"><code><script src="https://deris-cole.googlecode.com/svn/branches/HiglightSyn.js">
 <script>
 hljs.initHighlightingOnLoad();
 </script>
</code></pre>
<ul style="text-align: left;">
<li>Silahkan save <i>template</i>nya.</li>
</ul>
<h5 style="text-align: left;">
Penerapan :</h5>
Untuk penerapan dalam postingan, Tinggal masukan kode ini.
<br />
<pre class="line-number" data-codetype="HTML"><code><pre class="line-number" data-codetype="CSS"><code> <b>MASUKAN KODE</b> </code></pre>
<pre class="line-number" data-codetype="Jquery"><code> <b>MASUKAN KODE</b> </code></pre>
<pre class="line-number" data-codetype="HTML"><code> <b>MASUKAN KODE</b> </code></pre></code></pre>
</div>

Membuat Syntax Highlighter Keren

Cara Menampilkan Syntax Highlighter Kali ini saya akan memberikan tutorial membuat syntax highlighter untuk blog fungsi dari syntax hi...

Membuat Auto Tooltip Diblog

Unknown 0 Trik Blog 2/04/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: center;">
Cara Membuat Tooltip Pada Blog</h3>
<div>
<h5 style="text-align: left;">
Pengertian :</h5>
</div>
<div>
<b>Tooltip</b> adalah komponen grafis dalam <i>user interface</i> pengguna. Komponen ini biasanya muncul ketika pointer mouse diarahkan ke komponen, untuk komponen pada blog bisa itu gambar atau sebuah link.</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3t_rWAf5TC8owi0FvJvUrJzsN5j61PegVIzFdxK8TjHpTk0U07YbVkQuAC9xiMc1ZZnLXWsVO8vLSyDrXnx7Zz-2QtlMjrEoPJ34VNrzEdMX5MFD5xllchzOnrAIMBSRTwvP_rjDkj_OE/s1600/Tooltip+keren.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3t_rWAf5TC8owi0FvJvUrJzsN5j61PegVIzFdxK8TjHpTk0U07YbVkQuAC9xiMc1ZZnLXWsVO8vLSyDrXnx7Zz-2QtlMjrEoPJ34VNrzEdMX5MFD5xllchzOnrAIMBSRTwvP_rjDkj_OE/s1600/Tooltip+keren.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Demo Tooltip</td></tr>
</tbody></table>
<div>
<h5 style="text-align: left;">
Langkah :</h5></div><div>
<ul style="text-align: left;">
<li>Masuk/login ke blogger.com/.</li>
<li>Pilih tab r<i>ancangan</i> kemudian <i>Edit Html</i>.</li>
<li>'<xdx>CTRL</xdx>+<xdx>F</xdx>' atau cari <b><span style="color: #741b47;"></head></span></b>, Letakan Javascript ini tepat dibawahnya :</li>
</ul>
</div>
<div>
<pre class="line-number" data-codetype="Jquery"><code><script src='https://sites.google.com/site/epgstudiosite/js/wb.js'/><a href='http://www.warungbebas.com/' id='wb_ttauth'/><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 6,
left : 6,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
  style_plus : "#tt{border:2px double #02bb72;background:#000000;-moz-border-radius: 10px;border-radius:10px;z-index:99999;}#ttcont{background:#000000;color:#ffffff;-moz-border-radius: 5px;border-radius: 5px;z-index:99999;}"
};
//]]></script>
<script src='https://sites.google.com/site/epgstudiosite/js/wb_tooltips.js'/>
<script src='https://sites.google.com/site/epgstudiosite/js/wb_autotooltips.js'/><div id='warungbebasautotooltip'></code></pre>
</div>
</div>
<ul style="text-align: left;">
<li>Lalu letakan Javascript ini tepat diatas <b><span style="color: #741b47;"></body></span></b>.</li>
</ul>
<pre class="line-number" data-codetype="Jquery"><code>
<script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script></code></pre>
<ul style="text-align: left;">
<li>Jika sudah silahkan simpan template anda.</li>
</ul>
<div class="notice">
Bila ada yang ditanyakan silahkan ! :)</div>
<i class="icon-thumbs-up"></i>Demikian pembahasan mengenai "<i>Membuat Auto Tooltip Diblog</i>"<br /><br />
</div>

Membuat Auto Tooltip Diblog

Cara Membuat Tooltip Pada Blog Pengertian : Tooltip adalah komponen grafis dalam user interface pengguna. Komponen ini biasanya m...

Membuat Pesan Alert, Notice, Info, Success dan Series di blog

Unknown 2 Trik Blog 2/01/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: center;">
Critical Alert, Notice, Info <i>dsb.</i></h3>
<div style="text-align: justify;">
Membuat pesan <i>critical</i> di postingan <b>blogger</b> - Disini saya akan menerangkan bagaimana membuat pesan kritikal di blogger pesannya berupa Alert, Notice, Info, Success dan Series.</div>
<h5 style="text-align: justify;">
Apa Fungsinya?</h5>
<div style="text-align: justify;">
<b>Fungsinya</b> kita bisa menekan kan atau menggaris bawahi hal yang sangat penting dalam postingan blog sehingga pembaca bisa lebih terfokus dengan critical yang lebih menarik.</div>
<h5 style="text-align: justify;">
Bagaimana Caranya?</h5>
<div style="text-align: justify;">
<ul>
<li>Login <i>Blogger</i> anda.</li>
<li>Masuk tab <i>Rancangan.</i></li>
<li>Pilih <i>Edi Html, </i>cari atau tekan <xdx>CTRL</xdx>+<xdx>F</xdx> kode<b><span style="color: red;"> ]]></b:skin></span></b></li>
<li>Masukan kode CSS berikut <i>diatas</i> kode <span style="color: #cc0000;"><b>]]></b:skin></b></span>:</li>
</ul>
</div>
<pre class="line-number" data-codetype="CSS"><code>/* Critical-XdX-Message */
.posting{max-width:620px!important;width:100%;margin:15px 20px 15px 0px;}#blog-pager{margin:1.5em 0;}
</code>.alert,.notice,.info,.success,.series{display:block;font-style:normal;padding:15px 18px 15px 48px;position:relative;border-radius:4px;color:#333;border-bottom:1px solid rgba(0,0,0,.1);margin-top:1em;margin-bottom:1em;}
<code>.alert,.notice{background-color:#BCC049;}
.info{background:#DFE7FE;}
.success{background:#CCFEBF;}
</code>.series{background:#9FCFFF;}
.alert:before,.notice:before,.info:before,.success:before,.series:before{font-family:'fontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,.18);font-size:24px;line-height:1;}
.alert:before,.notice:before{content:"\f05a"}.info:before{content:"\f0eb"}
.success:before{content:"\f14a"}
.series:before{content:"\f02d"}</pre>
<ul style="text-align: left;">
<li>Masukan Stylesheet dibawah  tepat <i>diatas</i> kode <b><span style="color: #cc0000;"></head></span></b> :</li>
</ul>
<pre class="line-number" data-codetype="HTML"><code><link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/></code></pre>
<div style="text-align: center;">
<b>DEMO :
</b><br />
<div class="info" style="text-align: justify;">
<b>Penggunaanya : </b>Ketika ingin mengaplikasikan pada halaman blog kita bisa memilih salah satu <i>crritical</i> dari '<i>alert</i>' '<i>notice</i>'  '<i>info</i>' '<i>success</i>' dan '<i>series</i>'. seperti <span style="color: #cc0000; font-weight: bold;"><div class="CRITICAL_ANDA">.....Tulisan Anda </div>. </span>Contoh : <div class="alert">..Tulisan anda..</div></div>
</div>
<div style="text-align: justify;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD5BR1ZftXhoUsDRyIXUfWwtgMh311fCdx7p0jqcpMLRy0ys_5yaZe7G5vWYWUdVsOebQadKjUbpfgpyX0GSijER1ZUq_QZq3ubCHK4-KUyriCwqXUP2DjC6oNnl7-jfiZdNMBkqG9h6p8/s1600/alert.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Lihat gambar penuh" border="0" height="498" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD5BR1ZftXhoUsDRyIXUfWwtgMh311fCdx7p0jqcpMLRy0ys_5yaZe7G5vWYWUdVsOebQadKjUbpfgpyX0GSijER1ZUq_QZq3ubCHK4-KUyriCwqXUP2DjC6oNnl7-jfiZdNMBkqG9h6p8/s1600/alert.png" title="Critical" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Demo Critical Message</td></tr>
</tbody></table>
Demikianlah cara membuat <i>Critica Message</i> pada postingan blog, apabila ada yang akan ditanyakan sudah kami siapkan kotak komentar :) :p .</div>
</div>

Membuat Pesan Alert, Notice, Info, Success dan Series di blog

Critical Alert, Notice, Info dsb. Membuat pesan critical di postingan blogger - Disini saya akan menerangkan bagaimana membuat pesan k...

Cara Membatasi Panjang Arsip Pada Blog

Unknown 0 Trik Blog 1/31/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Membatasi Panjang Arsip</h2>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWoSgBtM3prfHyy9gFiLxXicNsVl_iU7u485m6Uid0Bi5JjEsloy5HqMGZx1JL6oK5PAy3Sc1gwy3rjtz5UvGvJz-RnmWFc8Z1rLIoBsLxRqd-_G9QBoY3-dqFzipe7L5wUSUQL02tjVf/s1600/arsipblog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="436" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWoSgBtM3prfHyy9gFiLxXicNsVl_iU7u485m6Uid0Bi5JjEsloy5HqMGZx1JL6oK5PAy3Sc1gwy3rjtz5UvGvJz-RnmWFc8Z1rLIoBsLxRqd-_G9QBoY3-dqFzipe7L5wUSUQL02tjVf/s1600/arsipblog.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Demo Arsip Blog</td></tr>
</tbody></table>
<div>
<br /></div>
<h5 style="text-align: left;">
Archives Blog?</h5>
<div style="text-align: justify;">
<i>Archives</i>, <i>Arche</i>, <i>Archief</i> ataupun Arsip pada blog adalah sebuah catatan atau record yang telah kita tulis di blog dari awal menulis hingga sekarang, tentunya apabila semakin banyak arsip di blog makan akan semakin banyak juga ukuran yang dibutuhkan di halaman blog, tentunya kita perlu mensiasatinya agar blog kita tidak meluber :s . Kita bisa memperpendek panjang arsip tersebut dengan <i>Scroll</i>.</div>
<h5 style="text-align: justify;">
Caranya</h5>
<div>
<ul style="text-align: left;">
<li>Masuk pada tab <i>Rancangan</i>.</li>
<li>Pilih <i>Edit HTML</i>.</li>
<li>Tekan <xdx>Ctrl</xdx>+<xdx>F</xdx> untuk mencari kode :</li>
</ul>
</div>
<div class="codeview">
</b:includable><br />
<b:includable id='main'><br />
<b:if cond='data:title'><br />
<h2><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<div id='ArchiveList'><br />
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'></div>
<ul style="text-align: left;">
<li>Tambahkan kode berikut pada skrip di atas, sehingga akan terlihat seperti ini :</li>
</ul>
<div class="codeview">
</b:includable><br />
<b:includable id='main'><br />
 <b:if cond='data:title'><br />
 <h2><data:title/></h2><br />
 </b:if><br />
 <div class='widget-content'><br />
<span style="color: #02ab68;"><b><div style='overflow:auto; width:ancho; max-height:</b></span><span style="color: #cc0000;"><b>350px</b></span><span style="color: #02ab68;">;'></span><br />
  <div id='ArchiveList'><br />
 <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'><br />
 <b:if cond='data:style == &quot;HIERARCHY&quot;'><br />
 <b:include data='data' name='interval'/><br />
 </b:if><br />
 <b:if cond='data:style == &quot;FLAT&quot;'><br />
 <b:include data='data' name='flat'/><br />
 </b:if><br />
 <b:if cond='data:style == &quot;MENU&quot;'><br />
 <b:include data='data' name='menu'/><br />
 </b:if><br />
 </div><br />
 </div><span style="color: #02ab68;"><b></div></b></span></div>
<ul style="text-align: left;">
<li>Kode yang berwarna <b><span style="color: #02ab68;">Hijau</span></b> adalah kode yang ditambahkan, sedangkan yang berwarna <b><span style="color: #cc0000;">Merah</span></b> adalah kode yang bisa anda ganti dengan sesuka anda.</li>
</ul>
</div>

Cara Membatasi Panjang Arsip Pada Blog

Membatasi Panjang Arsip Demo Arsip Blog Archives Blog? Archives , Arche , Archief ataupun Arsip pada blog adalah sebuah catata...

Membuat Scroll Pada Kotak Komentar

Unknown 0 Trik Blog 1/24/2014

<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: center;">Scroll Kotak Komentar</h2><div><b>Selamat siang,!!</b> kesempatan hari ini saya akan memberikan info mengenai <i>"Membuat scroll pada kotak komentar". </i>Ini berfungsi agar halaman blog anda menjadi lebih irit atau tidak terlalu panjang bila terdapat banyak komentar.</div><div><b><br /></b><b>Caranya :</b></div><div><ul style="text-align: left;"><li>Login ke <a href="http://www.blogger.com/" target="_blank">blogger</a> anda.</li><li>Masuk ke dalam <b>Edit Html.</b></li><li>Cari atau <i>(CTRL-F) </i>kode dibawah.</li></ul></div><div class="codeview"><div class='comments' id='comments'></div><ul style="text-align: left;"><li>Apabila sudah ditemukan ganti dengan kode ini.</li></ul><div class="codeview"><div class="comments" id="comments" style="<b><i><span style="color: red;">max-height: 700px</span></i></b>; overflow: auto;"><ul style="text-align: left;"></div><li>Kemudin di save.</li></ul><br /><i><b>Catatan :</b> Untuk "max-height:<b><span style="color: red;">700px</span></b>;" (tanpa tanda kutip) yang berwarna merah bisa anda ganti dengan anka kebutuhan anda untuk mengatur tinggi.</i></div>

Membuat Scroll Pada Kotak Komentar

Scroll Kotak Komentar Selamat siang,!! kesempatan hari ini saya akan memberikan info mengenai "Membuat scroll pada kotak komentar"...

Membuat Pop up di Blog

Unknown 0 Trik Blog 1/21/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Pop Up untuk Blog</h2>
<div style="text-align: justify;">
Assalamulaikum wr,wb. Pada kesempatan sore ini saya akan mencoba memberikan info bagaimana caranya membuat pop up di blog. Jika ada yang tidak tahu apa itu pop-up, pernahkah kalian mengklik sebuah link lalu ada jendela browser baru yang muncul? nah itulah yang disebut dengan pop-up, kebanyakan pop up yang kita temui memang dibuat untuk iklan, tapi kita bisa memodifikasi pop up sesuai dengan kebutuhan kita.</div>
<div style="text-align: justify;">
<div>
<br /></div>
<div>
<b>Caranya :</b> Dalam postingan/widget pilih dalam mode <b>HTML</b>.</div>
<div>
Letakan kode berikut :</div>
<div>
<br />
<div class="codeview">
<div><center><formonsubmit="window.open('<b><span style="color: red;">http://twitface10.blogspot.com/</span></b>','popupwindow','scrollbars=no, <span style="color: #274e13;"><b>width=1366</b>,</span><b><span style="color: #274e13;">height=768</span>'</b>);return false"><input type="submit"  value="Klik Pop-Up" /><br />
</form></center></div></div>
<br />
<b>Ket :</b> Anda bisa mengganti <b><span style="color: red;">http://twitface10.blogspot.com/</span></b> dengan URL tujuan anda, dan <b><span style="color: #274e13;">width=1366, height=768</span></b> bisa diganti sesuka anda untuk pengaturan ukuran.<br />
Untuk <b>demo</b>nya bisa dilihat dibawah :<br />
<div>
<center>
<form onsubmit="window.open('http://twitface10.blogspot.com/','popupwindow','scrollbars=no, width=1366,height=768');return false">
<input type="submit" value="Klik Pop-Up" />

<br />
<div style="text-align: left;">
Mungkin sekian cara membuat pop up di blog, bila ada yang ditanyakan silahkan dikomentar.</div>
</form>
</center>
</div>
</div>
</div>
</div>

Membuat Pop up di Blog

Pop Up untuk Blog Assalamulaikum wr,wb. Pada kesempatan sore ini saya akan mencoba memberikan info bagaimana caranya membuat pop up di b...

Cara memasang scroll box di blog

Unknown 0 Trik Blog 1/05/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-tab-span" style="white-space: pre;">	</span>Cara nya memasang scroll box di blogger sangat mudah, kita bsa menggunakan scroll box untuk meminimalisasi tampilan blog supaya lebih irit.<br />
<br />
Kode nya langsung saja ya sob seperti dibawaah :<br />
<div class="codeview">
<div style="overflow:auto; width:550px; height:300px; padding:10px; border:1px solid #555"><br />
Isikan Kata-kata mu disini ya sob<br />
</div><br /></div>
<br />
<h3 style="text-align: left;">
<span class="Apple-tab-span" style="white-space: pre;">	</span>Untuk demo atau contohnya bisa dilihat disini :</h3>
<div style="text-align: center;">
<ul class="tombol">
<li><a href="http://deris10.blogspot.com/2014/01/membuat-tabel-berwarna-di-blog.html" target="_blank">D E M O</a></li>
</ul>
</div>
<br />
<div style="text-align: center;">
<b><span style="color: red;">Terima Kasih!</span></b></div>
<div style="text-align: center;">
<b>|</b></div>
<div style="text-align: center;">
<b>|</b></div>
<div style="text-align: center;">
<b>V</b></div>
</div>

Cara memasang scroll box di blog

Cara nya memasang scroll box di blogger sangat mudah, kita bsa menggunakan scroll box untuk meminimalisasi tampilan blog supaya lebih iri...

Cara Membuat Font Sendiri di Blog

Unknown 1 Trik Blog 1/01/2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
Font Untuk Blog</h2>
<div>
<h3 style="text-align: left;">
•<span style="white-space: pre;"> </span><b>Pertama  Mendapatkan  Font-Face Kit. </b></h3>
<div style="text-align: justify;">
</div>
<ol>
<li><span style="text-indent: -0.25in;">Buka alamat ini </span><a href="http://www.fontsquirrel.com/fontface/generator" style="text-indent: -0.25in;">http://www.fontsquirrel.com/fontface/generator</a><span style="text-indent: -0.25in;">.</span></li>
<li><span style="font-family: "Calibri","sans-serif"; font-size: 11pt; line-height: 115%; text-indent: -0.25in;">Silahkan  <b>Add Font</b> yang anda Inginkan upload
tunggu sampai proses upload selesai</span><span style="font-family: Wingdings; font-size: 11pt; line-height: 115%; text-indent: -0.25in;">à</span><span style="font-family: "Calibri","sans-serif"; font-size: 11pt; line-height: 115%; text-indent: -0.25in;"> lalu <b>Download
You KIT</b> !</span></li>
</ol>
<div style="text-indent: -24px;">
<span style="font-family: Calibri, sans-serif;"><span style="line-height: 16.866666793823242px;">d</span></span><br>
<div class="separator" style="clear: both; text-align: Center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZIAwmHSYHKLIG6O5lnLOXYcTEnwFwzuUwZreN-qLpOLSj0lVe-9hMbErtiLM3CSLzu4kSfsHnkFpKpTXJUtzRZorDrrY4Uy4vmCpDv1l5BInQaTa-tK_FmQRuJDujgg17y9zUKmwz91n5/s1600/Font-Gambar-1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZIAwmHSYHKLIG6O5lnLOXYcTEnwFwzuUwZreN-qLpOLSj0lVe-9hMbErtiLM3CSLzu4kSfsHnkFpKpTXJUtzRZorDrrY4Uy4vmCpDv1l5BInQaTa-tK_FmQRuJDujgg17y9zUKmwz91n5/s320/Font-Gambar-1.jpg" width="320"></a><span style="font-family: Calibri, sans-serif;"><span style="line-height: 16.866666793823242px;"></span></span></div>
<span style="font-family: Calibri, sans-serif;"><span style="line-height: 16.866666793823242px;">
</span></span></div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxNXnGoU02vqfSFedOgptXGlm6nOtJDzeVyCfKv0nfXR5Mf3dugsySDUEo0jsNchz2dnes_uy_dQo4K3wO5GMDi1p9JvF4Vac5Op_hVJR-53EsWqYMoCeJn4FbocOKlfFbx39zPAb973J/s1600/Font-Gambar-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><strike></strike></a></div>
<h3 style="text-align: left;">
<span style="font-family: Calibri, sans-serif;"><span style="line-height: 16.866666793823242px;"><b>•<span class="Apple-tab-span" style="white-space: pre;"> </span>Kedua Upload ke Hosting</b></span></span></h3></div></div>

Cara Membuat Font Sendiri di Blog

Font Untuk Blog • Pertama Mendapatkan Font-Face Kit. Buka alamat ini http://www.fontsquirrel.com/fontface/generator . Silahka...

Membuat Tabel Berwarna di Blog

Unknown 0 Trik Blog 1/01/2014

Membuat Tabel Berwarna di Blog

CARA MEMASANG TABEL BERWARNA UNTUK BLOG Untuk membuat tabel diblog sepetinya gampang-gampang susah, gampangnya memang gampang kalo su...

Scroolbar Unik For Blog

Unknown 3 Trik Blog 9/29/2013

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<span class="Apple-tab-span" style="white-space: pre;">	</span><br />Bosen lihat scroolbar diblog yang begitu-gitu saja? sekarang saya akan memberikan solusinya untuk mengganti tampilan scroolbarnya caranya mudah saja tinggal ikuti langkah-langkah step by stepnya :D , oke baiklah. :)</div>
<div>
<br /></div>
<div>
1. Buka Blogger.com > Rancangan > Edit HTML</div>
<div>
2. Cara tulisan <b>]]></b:skin></b> supaya cepat tekan tombol <b>CTRL+F</b></div>
<div>
3. Lalu Copas Script dibawah tepat diatas kode tadi <b>]]></b:skin></b></div>
<div>
<br /></div>
<div>
<b style="background-color: #cccccc;"><span style="color: #351c75;">Scriptnya :</span></b></div>
<pre class="brush: java">/* -- Scroolbar goo.gl/LQOkDL -- */
::-webkit-scrollbar {width: 14px; background: #CCCCCC; -moz-border-radius: 0px; border-radius: 0px;}
::-webkit-scrollbar-thumb {background-color: #666; -moz-border-radius: 0px; border-radius: 0px;}
</pre>
4. Simpan Templatenya.<br />
<br />
Keterangan :<br />
- Bisa diganti code <b style="background-color: #cccccc;">#CCCCCC</b> dengan warna favoritmu untuk background scroolbarnya.<br />
- Bisa diganti code<span style="background-color: white;"> <span style="color: #666666;"><b>#666</b></span></span> dengan warna favoritmu untuk scrool nya.<br />
<br />
Catatan : Ini hanya akan bekerja apabila menggunakan browser Google Chrome. Terima kasih !<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5M6gAohNoyEtVtLaxsk6w3HGeHOvCqbYtL8KHKJP9kS8e68ZsHNx-eV-oho3O41iUZEnQZpl7frboAuaTuryLDrfPrrq7vO3d1r5sVTUdGGr-Qz4LiRYO0qx7WB2iM4TH-7NohGOl1KZq/s1600/Scroorbar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5M6gAohNoyEtVtLaxsk6w3HGeHOvCqbYtL8KHKJP9kS8e68ZsHNx-eV-oho3O41iUZEnQZpl7frboAuaTuryLDrfPrrq7vO3d1r5sVTUdGGr-Qz4LiRYO0qx7WB2iM4TH-7NohGOl1KZq/s320/Scroorbar.png" width="196" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Contoh gambar</td></tr>
</tbody></table>
<br /></div>

Scroolbar Unik For Blog

Bosen lihat scroolbar diblog yang begitu-gitu saja? sekarang saya akan memberikan solusinya untuk mengganti tampilan scroolbarnya carany...

Invite X-D-X ./