Sharing Mie: CSS

Cara Mengubah Join Site Jadi Menggunakan Gambar

2/11/2013 03:54:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
Tombol Follow, atau sekarang menjadi Join This Site, widget tersebut sebenarnya juga sedikit menjadi beban untuk loading blog, mungkin dengan trik ini loading blog menjadi lebih ringan dan pengunjung blog kalian tetap bisa follow.<br />
<br />
Singkat padat dan jelas, lets do it!<br />
<br />
<ul style="text-align: left;">
<li>    Hapus widget followers / Join This Site mu</li>
</ul>
<ul style="text-align: left;">
<li>    Kemudian buat kode seperti dibawah ini:</li>
</ul>
<br />
<blockquote class="tr_bq">
    <a href="http://www.Blogger.com/follow-blog.g?blogID=<span style="color: orange;"><b>2542779688843262002</b></span>" title="Join this site / follow" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="<span style="color: yellow;"><b>URL-GAMBAR-DISINI</b></span>" alt="Join this site" style="vertical-align:center;border:0px;cursor:pointer;" /></a></blockquote>
<br />
    Ganti yang berwarna <span style="color: orange;"><b>Orange</b></span> dengan ID blog kalian.<br />
    Ganti yang berwarna <b><span style="color: yellow;">Kuning</span></b> dengan URL gambar kalian sendiri.<br />
<ul style="text-align: left;">
<li>    Untuk mengetahui ID blog kalian bisa kalian lihat ketika mengedit blog kalian seperti di bawah ini,contohnya pada halaman <b>Rancangan / Design</b>:    </li>
</ul>
<ul style="text-align: left;">
<li>    Nah, kode tersebut di letakkan dimana? Terserah saja. Boleh di Tambah <b>Gadget / Add Gadget</b> terus pilih <b>HTML / JavaScript</b>, boleh juga langsung di masukkan ke template (<b>dianjurkan untuk yang sudah expert saja</b>).</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6mV6mTj3Z8OFbIcb5JXCw-t2vbQBjYtSYWt2jc7IYbyupgWbPmG02GaQIfWtpvjUDtVhSkPSpk9A7HMfdZ0UZpks8isGO2HyrLK-pRg6iwnR6V3ekTW_OWGanX-1-eMN1abtDRCUspVIL/s1600/sadasda.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6mV6mTj3Z8OFbIcb5JXCw-t2vbQBjYtSYWt2jc7IYbyupgWbPmG02GaQIfWtpvjUDtVhSkPSpk9A7HMfdZ0UZpks8isGO2HyrLK-pRg6iwnR6V3ekTW_OWGanX-1-eMN1abtDRCUspVIL/s320/sadasda.JPG" width="284" /></a></div>
<br />
<ul style="text-align: left;">
<li>    Jika menggunakan gambar masih kalian pikir berat, boleh menggunakan link biasa:</li>
</ul>
<blockquote class="tr_bq">
    <a href="http://www.Blogger.com/follow-blog.g?blogID=<span style="color: orange;"><b>2542779688843262002</b></span>" title="Join this site / follow" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><b><span style="color: yellow;">Join This Site</span></b></a></blockquote>
<ul style="text-align: left;">
<li>    Ganti yang berwarna Orange dengan ID blog kalian.</li>
</ul>
<ul style="text-align: left;">
<li>    Ganti yang berwarna Kuning dengan kata-kata kalian sendiri.</li>
</ul>
<ul style="text-align: left;">
<li>    Atau menggunakan <span style="background-color: cyan;"><b>TOMBOL</b></span></li>
</ul>
<br />
<blockquote class="tr_bq">
    <input value="<span style="color: yellow;"><b>Join This Site</b></span>" onclick="window.open('http://www.<span style="color: #666666;"><b>Blogger</b></span>.com/follow-blog.g?blogID=2542779688843262002', 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');" style="background:<span style="color: #0b5394;"><b>black</b></span>;color:<b><span style="color: lime;">white</span></b>;border:<span style="color: red;"><b>1px solid red</b></span>;text-align:center;font-weight:bold;" type="button" /></blockquote>
    Ganti yang berwarna <span style="color: orange;"><b>Orange</b></span> dengan ID blog kalian.<br />
    Ganti yang berwarna <span style="color: yellow;"><b>Kuning</b></span> dengan kata-kata kalian sendiri.<br />
    Ganti yang berwarna <span style="color: #0b5394;"><b>Biru</b></span> untuk mengganti warna background tombol.<br />
    Ganti yang berwarna <b><span style="color: lime;">Hijau</span></b> untuk mengganti warna teks.<br />
    ganti yang berwarna <span style="color: red;"><b>Merah</b></span> untuk memodifikasi border / garis tepi.<br />
<br /></div>

Tombol Follow, atau sekarang menjadi Join This Site, widget tersebut sebenarnya juga sedikit menjadi beban untuk loading blog, mungkin deng...

Cara menambah kotak berlangganan dan share widget ke Blogger

2/04/2013 01:59:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIX9tgSOB3tGC5z96mEnTHkm02ATiHKX2xzmbugL2heiXMGv88tCQFcnO5QAoQ7kQLj3qhdeXRc0wWZa5WWhx4hL-68A06eP7x9wE6rjIsvFjjgxQfUq3EEIVDbHe6sN8z1s-PVDk2Ylv/s1600/iconsetc-blogger-logo-square.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIX9tgSOB3tGC5z96mEnTHkm02ATiHKX2xzmbugL2heiXMGv88tCQFcnO5QAoQ7kQLj3qhdeXRc0wWZa5WWhx4hL-68A06eP7x9wE6rjIsvFjjgxQfUq3EEIVDbHe6sN8z1s-PVDk2Ylv/s1600/iconsetc-blogger-logo-square.png" width="320" /></a></div>
<br />
Dalam tutorial, saya akan menjelaskan kepada Anda bagaimana membuat Kotak Berlangganan dengan Feedburner Email, berlangganan Delicius dan tombol jaringan sosial lainnya (<b>Digg, Twitter, Facebook, Stumbleupon, Delicious</b>). Anda dapat dengan mudah menambah atau menghapus tombol sosial untuk widget ini dan setup email subscription.If Anda Anda ingin menambahkan widget ini ke blog atau website, maka ikuti langkah-langkah di bawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
</div>
<ol style="text-align: left;">
<li>Log in ke Layout</li>
<li>Klik pada 'Tambah Gadget' di sidebar.</li>
<li>Pilih 'HTML / Javascript "dan tambahkan kode yang diberikan di bawah ini dan klik simpan.</li>
</ol>
<br />
<blockquote class="tr_bq">
style type="text/css">#subscribe-box {      overflow: hidden;      margin: 10px 0 0 0;      }<br />
#subscribe-box a.subscribe-sec {      display: inline-block;      display: -moz-inline-stack;      width: 40px;      padding-top: 38px;      zoom: 1;      }<br />
#subscribe-box a.subscribe-sec:hover {      color: #660000;      }</style><br />
<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value=&#39;&#39;;" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p><br />
<p><div id="subscribe-box"><a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1JVdqUVEqOqz4xWf0p2c-2hd6EcXf6wRD9HmWKCwnadA8V0y_iX2Ul18lCqPedSBW5hXQprao5Srf2aElKp_unhyphenhyphenivyO5JJEq3oXQyFiYrKgj3N596EU4ejlTou6a9aKGg9jgjiDRlR5/s1600/delicious.png) center top no-repeat"></a><a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQ4pMG9HgTlOf9k03AXJZ4aQ7gzGB-92P2hOOkbzKtRtFwz2Pv4_mexP_mUoAym-zA-s8dZyl4tGbTtOJldSD5A_UUkPTa0-cOmFpxpPuLpAkAGmpqYjwc8oRGlzLGiUwRJDcBmfPDtPB/s1600/twitter.png) center top no-repeat"></a><a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-XsJvuxgF8U8gVTDJVeTw19jc_XY7G40B6H433t8Bz-YfgaeCdpGQkGmvLABfJHdWlPLcRpGfWrhqDEJoizU9wWr5ZbWZYu0HZr72JMyUxqafOmh29LNfFKWW1CQoVpiDOMLYsvAYNscT/s1600/digg.png) center top no-repeat"></a><a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ1NKo1xe6pcwg3d-DjOVNsDRKeZkPDvAOKpZZ92lavo_YZ6Tb9YtZ7M4K1sqbzUN_WqiZipNjkDSDnWRN6t-i_3VKDCaut407J7fszH7evfvpSNlCN0KRhmpEnCIFKpTVVsoYTl9b1cW8/s1600/facebook.png) center top no-repeat"></a><a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyW-J9-8lW12Czto6gm-FgRV3EjteZWdtsP23PawAdtHsF4x5EvsFd2QViKj-XNZiflE3rKQRZQW9-gsni0LHA28TSItdX6Sren5xpPgY-e6cHbdVpymrqaLg5vJFrKa4Js6UmQY5nCdjS/s1600/stumbleupon.png) center top no-repeat"></a><a title="RSS Feed" href="http://feeds.feedburner.com/FEEDBURNER-ID" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYvRMvu8n-xm5Mxyt6j_wC7J4SKeEF0Qtjidas6ae6v1dPN7mrkWrvv7fbbCRo2amya61m9DyYhstuEpL3MDZ-vPnEzMIniev9DQxfQVVYaYJhyLKa1f3oUB5vV3d_Kiwsq8fnF_yxe1Iv/s1600/rss.png) center top no-repeat"></a></div></p><br />
</form></blockquote>
<div class="separator" style="clear: both;">
<b>Keterangan :</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Ganti ID pada script yang diwarnai.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Tips :</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Jika Anda tidak punya akun Delicious,  Stumbleupon, dan Digg, Anda tinggal menghapus saja script nya seperti pada contoh dibawah ini :</div>
<blockquote class="tr_bq">
<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1JVdqUVEqOqz4xWf0p2c-2hd6EcXf6wRD9HmWKCwnadA8V0y_iX2Ul18lCqPedSBW5hXQprao5Srf2aElKp_unhyphenhyphenivyO5JJEq3oXQyFiYrKgj3N596EU4ejlTou6a9aKGg9jgjiDRlR5/s1600/delicious.png) center top no-repeat"></a></blockquote>
<div>
TQ</div>
<br />
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Cara menambah kotak berlangganan dan share widget ke Blogger

Dalam tutorial, saya akan menjelaskan kepada Anda bagaimana membuat Kotak Berlangganan dengan Feedburner Email, berlangganan Delicius da...

Edit Artikel/postingan Populer dengan Slider Carousel

2/04/2013 01:56:00 PM Palma Hutabarat 2

<div dir="ltr" style="text-align: left;" trbidi="on">
Script ini sangat mudah untuk menginstal, Anda hanya harus meletakkan script untuk Gadget baru<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jIM0FpGlbEXazCklqDR8TeE1Xg25VXHSWDdmModQV5iJcqj3VbLc53_1OBw70yilSRpb3WuvbvKkFR2m3konEi_JD5i6QIU9nP2xvwIcmMa-_kHlGBVTF3TifCnRRg7X436mQMra_EaJ/s1600/petunjuk1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jIM0FpGlbEXazCklqDR8TeE1Xg25VXHSWDdmModQV5iJcqj3VbLc53_1OBw70yilSRpb3WuvbvKkFR2m3konEi_JD5i6QIU9nP2xvwIcmMa-_kHlGBVTF3TifCnRRg7X436mQMra_EaJ/s320/petunjuk1.jpg" width="320" /></a></div>
<br />
<ul style="text-align: left;">
<li>Login ke Dashboard Blogger dan arahkan ke <b>Desain - Elemen Halaman</b></li>
<li>Klik "Tambah Gadget" dan Pilih "Popular Posts" ( <b>Jika Anda sudah memiliki gadget ini melewatkan langkah ini</b> )</li>
<li>Setelah Anda memiliki gadget Popular Post "Tambah Gadget" lagi dan pilih "HTML / Javascript"</li>
<li>Masukkan semua di bawah script untuk "Konten" HTML / Javascript Gadget</li>
<li>Jika Anda telah jQuery di Template Anda hapus dari naskah saya</li>
<li>Selesai-posting Anda populer sekarang dengan animasi</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<blockquote>
<style><br />
#slider ol,#slider ul,#slider li<br />
 {<br />
 margin: 0;<br />
 padding: 0;<br />
 border: 0;<br />
 outline: 0;<br />
 font-size: 100%;<br />
}<br />
.popular-posts  img {<br />
  margin: 0  !important;<br />
  padding:0  !important;<br />
  width:150px;<br />
  height:120px;<br />
}<br />
ol, ul {<br />
 list-style: none;<br />
 }<br />
.wrapper {<br />
 width: 720px;<br />
 margin: 0 auto;<br />
 position:relative;<br />
}<br />
.clear {<br />
 clear: both;<br />
 }<br />
.display-none {<br />
 display:none;<br />
 }<br />
#slider {<br />
 position: relative;<br />
 top: -2px;<br />
 z-index: 1;<br />
 }<br />
#slider .prev {<br />
 position: absolute;<br />
 width: 21px;<br />
 height: 21px;<br />
 display: block;<br />
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;<br />
 top: 150px;<br />
 left: -51px;<br />
 }<br />
#slider .next {<br />
 position: absolute;<br />
 width: 21px;<br />
 height: 21px;<br />
 display: block;<br />
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;<br />
 top: 150px;<br />
 right: -51px;<br />
 }<br />
#slider #slider-wrapper {<br />
 width: 720px;<br />
 height: 300px;<br />
 padding-top: 40px;<br />
 overflow: hidden;<br />
 z-index: 999;<br />
 position: relative;<br />
 }<br />
#slider #slider-inner {<br />
 width:9780px;<br />
 height:300px;<br />
 position:absolute;<br />
 }<br />
#slider .article {<br />
 width: 150px;<br />
 height: 300px;<br />
 float: left;<br />
 margin-right: 30px;<br />
 }<br />
#slider .article img {<br />
 margin-bottom: 25px;<br />
 box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);<br />
 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);<br />
 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);<br />
 }<br />
#slider .article h2 {<br />
 margin-bottom: 15px;<br />
 line-height: 18px;<br />
 }<br />
#slider .article h2 a {<br />
 font-size: 18px;<br />
 color: #404040;<br />
 font-weight: bold;<br />
 text-shadow: 0 1px 0 #fff;<br />
 line-height: 23px;<br />
 }<br />
#slider .article .meta-comments a {<br />
 font-size: 10px;<br />
 font-weight: bold;<br />
 text-transform: uppercase;<br />
 text-shadow: 0 1px 0 #fff;<br />
 }<br />
#slider .article .item-snippet {<br />
 margin-left: 15px;<br />
 }<br />
#slider .widget-item-control { display: none}<br />
</style><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script></blockquote>
Terima kasih. Telah Berkunjung </div>
<br /></div>

Blogger CSS HTML Javascript jQuery Edit Artikel/postingan Populer dengan Slider Carousel

Script ini sangat mudah untuk menginstal, Anda hanya harus meletakkan script untuk Gadget baru Login ke Dashboard Blogger dan arahkan ...

Social Media Dengan Kotak Berlangganan Keren Untuk Blogger

2/04/2013 01:52:00 PM Palma Hutabarat 0

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-RnnLGnhNLGHhseu5GGec2sh_toCt6qM3ywnuBuUpzc3kd8Q6P3lRm0dc6b9QIsjLanAP9YjRNGhPkKEK5hH_lrNJIdjkPFLcpWRf_uDls4xc8zG0GhrE3VB3F-8KkNUSZReruQzEkI88/s1600/cara+menampilkan+kotak+komentar+google+.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-RnnLGnhNLGHhseu5GGec2sh_toCt6qM3ywnuBuUpzc3kd8Q6P3lRm0dc6b9QIsjLanAP9YjRNGhPkKEK5hH_lrNJIdjkPFLcpWRf_uDls4xc8zG0GhrE3VB3F-8KkNUSZReruQzEkI88/s1600/cara+menampilkan+kotak+komentar+google+.png" width="320" /></a></div>
<div dir="ltr" trbidi="on">
<br />
Hai sobat blogger, lama saya tidak mengepost widget untuk blogger lagi. Widget ini cukup keren dan elegan untuk Anda pasang ke blog Anda. Lanjutan Widget Sosial memberi Anda terlihat seperti widget profesional untuk kotak berlangganan widget yang memberikan pengguna untuk menghubungkan website Anda untuk populer situs media sosial seperti Delicious, Twitter, Facebook, StumbleUpon, Pinterest, LinkedIn dan juga Anda dapat mengakses ke FeedBurner Berlangganan Email.<br />
<br />
Sangat mudah untuk menentukan jaringan sosial Anda ingin menampilkan dan apa Ikon untuk menunjukkan. Pembaca dengan mudah dapat Anda Ikuti di Twitter, mendaftar untuk FeedBurner RSS Feed. Plugin ini dirancang untuk Anda dengan persyaratan kualitas terbaik dan juga diuji di semua web browser utama modern.<br />
<br />
Langsung saja :<br />
<br />
<ul style="text-align: left;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke Menu Layout > Add Gadget > HTML/Javascript</li>
<li>Pastekan kode dibawah ini :</li>
</ul>
<br />
<blockquote class="tr_bq">
<style><br />
div#advancedsocialwidget,div#advancedsocialwidget ul,div#advancedsocialwidget ul li,div#advancedsocialwidget ul li img,div#advancedsocialwidget ul li span,#advancedsocialwidget ul li a{background:none;border:none;margin:0;padding:0}<br />
div#advancedsocialwidget{font-family:inherit;background:#fefefe url() repeat-x;width:100%;border:1px solid #ddd!important;font-size:90%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:0 0 10px!important;padding:5px 2px 18px!important}<br />
div#advancedsocialwidget h3{font-size:inherit;text-shadow:0 1px 0 rgba(255,255,255,.5);margin:0!important;padding:2px 0 5px 10px !important}<br />
#newsletter{text-align:center;margin:0 auto 10px!important;padding:0!important}<br />
.newsletter input{-moz-border-radius-topleft:3px!important;-moz-border-radius-topright:0!important;-webkit-border-top-left-radius:3px!important;-webkit-border-top-right-radius:0!important;-moz-border-radius-bottomleft:3px!important;-moz-border-radius-bottomright:0!important;-webkit-border-bottom-left-radius:3px!important;-webkit-border-bottom-right-radius:0!important;-webkit-font-smoothing:antialiased;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;background:0 color-stop(.25,#FFF));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',EndColorStr='#FFFFFF');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE', EndColorStr='#FFFFFF')";border:1px solid #CCC;color:#666!important;height:18px!important;font-size:11px!important;line-height:18px!important;vertical-align:top;margin:5px 0 0!important;padding:4px!important}<br />
.newsletter input:focus,.newsletter input:active{background:#fafafa}<br />
.newsletter button{vertical-align:top;height:28px!important;line-height:18px!important;text-align:left;width:auto;-moz-border-radius-topright:3px!important;-moz-border-radius-topleft:0!important;-webkit-border-top-right-radius:3px!important;-webkit-border-top-left-radius:0!important;-moz-border-radius-bottomright:3px!important;-moz-border-radius-bottomleft:0!important;-webkit-border-bottom-right-radius:3px!important;-webkit-border-bottom-left-radius:0!important;background:#4b88a0;background-image:0;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;font:bold 11px Arial, Helvetica!important;color:#fff;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.2);border-color:#75a1b2 #4b88a0 #38677a;border-style:solid;border-width:1px;margin:5px 0 0!important;padding:4px!important}<br />
.newsletter button:hover{background:#75a1b2;background-image:0;cursor:pointer}<br />
.newsletter button:active{background:#89C9E2;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}<br />
div#advancedsocialwidget .textwidget img{border:0}<br />
div#advancedsocialwidget .textwidget .tfsubscribelink{text-align:center!important;position:relative;margin:5px auto!important}<br />
div#advancedsocialwidget .textwidget .rssicon{width:21px;height:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -176px 0;margin-bottom:30px;padding:5px 20px 7px 0}<br />
div#advancedsocialwidget .textwidget .rssicon a,div#advancedsocialwidget .textwidget .rssicon a:hover{text-decoration:none}<br />
div#advancedsocialwidget .textwidget .socialfollow{text-align:center;width:245px;margin:10px auto}<br />
div#advancedsocialwidget .textwidget .rsssubscribelink{display:block;text-align:center;margin:0 auto 5px;padding:0}<br />
div#advancedsocialwidget .textwidget a.rsslink{text-decoration:none;font-weight:700!important;font-family:inherit}<br />
div#advancedsocialwidget .textwidget a.rsslink:hover{text-decoration:underline}<br />
div#social_icons{float:left;width:100%;background:#fff;position:relative}<br />
div#social_icons ul{clear:left;float:left;list-style:none;position:relative;left:50%;text-align:center;margin:0!important;padding:0!important}<br />
div#social_icons ul li{display:block;float:left;list-style:none;position:relative;right:50%;margin:0 0 0 1px !important;padding:3px 10px!important}<br />
div#social_icons ul li span{display:block;color:#444!important;font-size:8px;border:none;padding:40px 0 2px!important}<br />
div#social_icons ul li:first-child span{margin-left:-2px}<br />
div#social_icons ul li:last-child span{margin-left:-10px}<br />
div#social_icons .subscribe_delicious a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -76px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_twitter a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat 0 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_stumbleupon a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -101px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_google a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -50px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_facebook a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -25px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_pinterest a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -126px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_linkedin a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -151px 0;font-family:inherit;color:inherit}<br />
.tipsy{font-size:10px;opacity:0.8;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);padding:5px}<br />
.tipsy-inner{background-color:#000;color:#FFF;max-width:200px;text-align:center;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px}<br />
.tipsy-north{background-position:top center}<br />
.tipsy-south{background-position:bottom center}<br />
.tipsy-east{background-position:right center}<br />
.tipsy-west{background-position:left center}<br />
.clear{clear:both}<br />
</style><br />
<div id="advancedsocialwidget" style="width:270px !important"><br />
<h3>Subscribe for latest updates</h3><br />
<div class="textwidget"><br />
<div id="newsletter"><br />
<form action="http://feedburner.google.com/fb/a/mailverify" class="newsletter" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wpinsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><br />
<input type="hidden" name="uri" value="<span style="color: #38761d;"><b>YOUR-FEEDBURNER-ID</b></span>" /><br />
<input type="hidden" name="loc" value="en_US" /><br />
<input name="email" id="newsletter-text" type="text" maxlength="100" style="width:160px !important" value="" class="" /><button type="submit" id="newsletter-button">Subscribe</button><br />
</form><br />
</div><br />
<div class="rsssubscribelink"><br />
<a title="Subscribe to RSS Feed" href="http://feeds.feedburner.com/wpinsite" class="rssicon"></a> &nbsp;<a class="rsslink" href="http://feeds.feedburner.com/<b><span style="color: #38761d;">YOUR-FEEDBURNER-ID</span></b>">Subscribe to RSS Feed</a><br />
</div><br />
<div class="socialfollow"><br />
<div id="___plusone_0" style="height: 20px; width: 90px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><iframe allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 20px; width: 90px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="0" vspace="0" width="100%" id="I0_1341141889671" name="I0_1341141889671" src="https://plusone.google.com/_/+1/fastbutton?bsv=pr&amp;url=http%3A%2F%2F<b><span style="color: #38761d;">www.YOUR-WEBSITE-URL.com</span></b>%2F&amp;size=medium&amp;count=true&amp;origin=http%3A%2F%2Fwww.wpinsite.com&amp;hl=en-US&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3DVZZqGbh13DI.en_GB.%2Fsv%3D1%2Fam%3D!0Tt3uNrLr0Coc6egjA%2Fd%3D1%2Frs%3DAItRSTNEDiY6r3yiw7M_70-BLTWIV1YUXw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart&amp;id=I0_1341141889671&amp;parent=http%3A%2F%2Fwww.wpinsite.com" title="+1"></iframe></div> <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/<b><span style="color: #38761d;">YOUR-FACEBOOK-ID</span></b>&amp;layout=button_count&amp;show_faces=false&amp;width=40&amp;action=like&amp;font=&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowtransparency="true"></iframe> <div class="tfsubscribelink"><br />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1340179658.html#_=1341141886240&amp;id=twitter-widget-12&amp;lang=en&amp;screen_name=<b><span style="color: #38761d;">YOUR-TWITTER-ID</span></b>&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 95%; height: 20px; " title="Twitter Follow Button"></iframe><br />
<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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><br />
</div><br />
</div><br />
<div class="clear" style="margin-bottom:5px;"></div><br />
<div id="social_icons"><br />
<ul><br />
<li class="subscribe_delicious" style="padding:0 4px !important"><a id="subscribe_delicious" href="http://delicious.com/post?url=http%3A%2F%2<b><span style="color: #38761d;">Fwww.YOUR-WEBSITE-URL.com</span></b>&amp;title=WPInsite" class="fade" target="_blank" style="opacity: 1; " original-title="Bookmark WPInsite on Delicious"></a></li><br />
<li class="subscribe_twitter" style="padding:0 4px !important"><a id="subscribe_twitter" href="http://twitter.com/<span style="color: #38761d;"><b>YOUR-TWITTER-ID</b></span>" class="fade" target="_blank" style="opacity: 1; " original-title="Follow wpinsite on Twitter"></a></li><br />
<li class="subscribe_facebook" style="padding:0 4px !important"><a id="subscribe_facebook" href="http://www.facebook.com/<span style="color: #38761d;"><b>YOUR-FACEBOOK-ID</b></span>" class="fade" target="_blank" style="opacity: 1; " original-title="Visit the WPInsite Facebook Page"></a></li><br />
<li class="subscribe_google" style="padding:0 4px !important"><a id="subscribe_google" href="https://plus.google.com/u/1/<span style="color: #38761d;"><b>YOUR-GOOGLE-PLUS-ID</b></span>" class="fade" target="_blank" style="opacity: 1; " original-title="Visit the WPInsite Google+ Page"></a></li><br />
<li class="subscribe_stumbleupon" style="padding:0 4px !important"><a id="subscribe_stumbleupon" href="http://www.stumbleupon.com/submit?title=WPInsite&amp;url=http%3A%2F%2F<b><span style="color: #38761d;">www.YOUR-WEBSITE-URL.com</span></b>" class="fade" target="_blank" style="opacity: 1; " original-title="Recommend WPInsite on StumbleUpon"></a></li><br />
<li class="subscribe_pinterest" style="padding:0 4px !important"><a id="subscribe_pinterest" href="http://www.pinterest.com/<span style="color: #38761d;"><b>YOUR-PINTEREST-ID</b></span>" class="fade" target="_blank" style="opacity: 1; " original-title="Follow me on Pinterest"></a></li><br />
<li class="subscribe_linkedin" style="padding:0 4px !important"><a id="subscribe_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2F<b><span style="color: #38761d;">www.YOUR-WEBSITE-URL.com</span></b>" class="fade" target="_blank" style="opacity: 1; " original-title="Submit post to LinkedIn"></a></li><br />
</ul><br />
</div><br />
</div><br />
<div class="clear"></div><br />
<div class="clear" style="margin-bottom:10px;"></div><br />
<div style="margin:auto; text-align:center; margin-bottom:0 !important; padding-bottom:0 !important"></div><br />
</div></blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-BmCFVypjjoQ/UJzOwuMyYEI/AAAAAAAAB8Y/TSumqBWaMI0/s1600/How+to+Add+Thesis+Email+Subscription+Widget+To+Your+Blogger+Blog+v3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-BmCFVypjjoQ/UJzOwuMyYEI/AAAAAAAAB8Y/TSumqBWaMI0/s1600/How+to+Add+Thesis+Email+Subscription+Widget+To+Your+Blogger+Blog+v3.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<blockquote class="tr_bq">
<div id="sidebars"><br />
<ul class="sidebar_list"><br />
<li id="social-profiles"><br />
<ul><br />
<li><br />
<a class="social facebook" rel="nofollow" target="_blank" title="Facebook Fan Page" href="https://www.facebook.com/<span style="color: red;"><b>ID Anda Disini"</b></span>>Facebook</a><br />
</li><br />
<li><br />
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/<span style="color: red;"><b>ID Anda Disini</b></span>">Twitter</a><br />
</li><br />
<li><br />
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/<b><span style="color: red;">ID Google+ Anda</span></b>">GooglePlus</a><br />
</li><br />
<li><br />
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/<span style="color: red;"><b>ID Anda Disini</b></span>">Rss</a><br />
</li><br />
<li><br />
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/user/palmahutabarat">Youtube</a><br />
</li><br />
</ul><br />
</li><br />
<li id="sidebar-social"><br />
<p id="email-notice"><br />
Receive Quality Tutorials Straight In Your Inbox by Submitting Your Email ID Below.We Respect Your Privacy.<br />
<span></span><br />
</p><br />
<div id="email-form"><br />
<h6>Get Email Updates</h6><br />
<form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<b><span style="color: red;">ID Feddburner Anda Disini</span></b>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><br />
<input class="input-text" type="text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" value="Enter Your Email Address"><br />
<input type="hidden" value="<b><span style="color: red;">ID Feedburner Anda Disini</span></b>" name="uri"><br />
<input type="hidden" name="loc" value="en_US"><br />
<input class="button" type="submit" value="Hook Me Up"><br />
<p><br />
We never encourage SPAM<br />
<br><br />
You can Unsubscribe any time<br />
</p><br />
</form><br />
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;<br />
   "><br />
 <a style="color:#000000;" href="http://bit.ly/EmailSubscriptionWidget">Widget</a> </span><br />
</div><br />
</li><br />
</ul><br />
</div><br />
<style><br />
 #sidebars {<br />
    border: 0 none;<br />
    float: right;<br />
    padding: 0 15px;<br />
    width: 310px;<br />
}<br />
#email-notice {<br />
    background: none repeat scroll 0 0 #DF6001;<br />
    color: #FFFFFF;<br />
    font-size: 14px;<br />
    line-height: 1.5;<br />
    margin: 0 0 20px;<br />
    padding: 15px 20px;<br />
    position: relative;<br />
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);<br />
}<br />
#email-notice span {<br />
    border-left: 14px solid transparent;<br />
    border-right: 14px solid transparent;<br />
    border-top: 10px solid #DF6001;<br />
    bottom: -10px;<br />
    height: 0;<br />
    position: absolute;<br />
    right: 40px;<br />
    width: 0;<br />
}<br />
#email-form {<br />
    background: none repeat scroll 0 0 padding-box #313131;<br />
    border-bottom: 5px solid #202020;<br />
    border-radius: 2px 2px 2px 2px;<br />
    text-shadow: 0 -1px 0 #000000;<br />
}<br />
#email-form h6 {<br />
    color: #FFFFFF;<br />
    font-family: arial;<br />
    font-size: 16px;<br />
    font-weight: bold;<br />
    letter-spacing: 0;<br />
    padding: 15px 20px 0;<br />
    text-transform: none;<br />
}<br />
#email-form form {<br />
    color: #FFFFFF;<br />
    margin: 0;<br />
    padding: 20px 18px;<br />
}<br />
#email-form input.input-text {<br />
    background: none repeat scroll 0 0 #FFFFFF;<br />
    border: 1px solid #222222;<br />
    margin: 0 0 10px;<br />
    padding: 8px;<br />
    width: 94%;<br />
}<br />
#email-form .button {<br />
    background: none repeat scroll 0 0 #FFFFFF;<br />
    float: right;<br />
    margin: 0 0 0 10px;<br />
}<br />
#email-form p {<br />
    color: #CCCCCC;<br />
    font-size: 12px;<br />
    line-height: 18px;<br />
    margin: 0;<br />
}<br />
#sidebar-social {<br />
    float: left;<br />
    font-size: 12px;<br />
    margin: 0 0 15px;<br />
    width: 100%;<br />
}<br />
ul.sidebar_list {<br />
    list-style: none outside none;<br />
}<br />
li.widget ul {<br />
    list-style: none outside none;<br />
}<br />
#social-profiles {<br />
    float: left;<br />
}<br />
#social-profiles ul {<br />
    float: left;<br />
    list-style: none outside none;<br />
    margin: 0 5px 20px;<br />
}<br />
#social-profiles ul li {<br />
    float: left;<br />
}<br />
#social-profiles ul li a {<br />
    display: block;<br />
    float: left;<br />
    height: 32px;<br />
    margin: 0 15px;<br />
    text-indent: -999em;<br />
    width: 32px;<br />
}<br />
#social-profiles a.social {<br />
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZY-_XcLfqXAgo-88Pu2sGxwD7SaIB4uarru4BFx5470VIl7EzaX3CPIK5nKbr5fS-_JReSa0a-Vfq5bcJwPnSiSzljFkA21m9VnZPymDEkBh9cI3JoN3lttFReHvLsiNpQN8V1UD90g4/s1600/social.png") no-repeat scroll 0 0 transparent;<br />
}<br />
#social-profiles a.facebook {<br />
    background-position: -79px 0;<br />
    height: 32px;<br />
    margin: 0 15px 0 5px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.facebook:hover {<br />
    background-position: -79px -74px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.twitter {<br />
    background-position: -5px -111px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.twitter:hover {<br />
    background-position: -42px 0;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.youtube {<br />
    background-position: -42px -37px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.youtube:hover {<br />
    background-position: -5px -37px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.rss {<br />
    background-position: -42px -74px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.rss:hover {<br />
    background-position: -79px -37px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.googleplus {<br />
    background-position: -5px 0;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.googleplus:hover {<br />
    background-position: -5px -74px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
* {<br />
    margin: 0;<br />
    padding: 0;<br />
}<br />
.custom .sidebar ul.sidebar_list {<br />
    padding: 15px 0;<br />
}<br />
</style> </blockquote>
<br />
<br />
<br />
<div class="series" style="background-attachment: scroll; background-color: #9fcfff; background-image: url(http://1.bp.blogspot.com/-fB8_ur4gKYQ/UFLkgDuNEdI/AAAAAAAABAM/9Ig3cqe1f40/s1600/MBT+series.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(9, 156, 238); color: #444444; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Pilih Widget yang Anda inginkan dan ganti kode yang <span style="color: red;">diwarnai</span> dengan ID Profiles Social Anda, sobat. Good Luck!!!</div>
Semoga Bermanfaat Tutor Article nya.</div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Social Media Dengan Kotak Berlangganan Keren Untuk Blogger

Hai sobat blogger, lama saya tidak mengepost widget untuk blogger lagi. Widget ini cukup keren dan elegan untuk Anda pasang ke blog Anda...

Widget Profiles Social Melayang Dengan Subscribe Box Dengan Tombol Minimize Untuk Blogger

2/04/2013 01:39:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxaQ7GI88joPVUmc9vA87G0BZyHxvj8NNWZGtXXWymCuzCPuaomzDzPBMSYsbraOUSnABVt1gDNh9DpgfmqchMvBxsqd6g7VkDxMve47Aw_8L7yw622baZyn3AJ_liSxkDkgs026FX4gV/s1600/widgetLogo.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxaQ7GI88joPVUmc9vA87G0BZyHxvj8NNWZGtXXWymCuzCPuaomzDzPBMSYsbraOUSnABVt1gDNh9DpgfmqchMvBxsqd6g7VkDxMve47Aw_8L7yw622baZyn3AJ_liSxkDkgs026FX4gV/s1600/widgetLogo.gif" /></a></div>
<br />
Hai sobat blogger, yang membuat saya lemas ini bingung mau buat postingan yang berguna buat sobat semua. Tapi dengan widget yang saya copy dari source blog bule <a href="http://www.exeideas.com/">http://www.exeideas.com</a> walau dengan sembarangan dan gamblang saja, saya copy source widget melayang ini dengan tombol minimize seperti judul tentunya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="series" style="background-attachment: scroll; background-color: #9fcfff; background-image: url(http://1.bp.blogspot.com/-fB8_ur4gKYQ/UFLkgDuNEdI/AAAAAAAABAM/9Ig3cqe1f40/s1600/MBT+series.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(9, 156, 238); color: #444444; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Fitur :<br />
<ol>
<li>Minimize button</li>
<li>Profiles Social button dengan efek hover.</li>
<li>Subscribe box dengan CSS button.</li>
</ol>
</div>
<div style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;">
<b>Langkah :</b></div>
<div style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;">
<b><br /></b></div>
<div style="background-color: white; text-align: justify;">
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"></span></span><br />
<div style="font-weight: bold;">
<ul><span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke menu Layout/tata letak > Add Gadget > HTML/Javascript</li>
<li>Pastekan kode dibawah ini :</li>
</span></span></ul>
</div>
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<br />
<blockquote class="tr_bq">
<div style="color: #111111;">
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"><style type="text/css">#exefixedfootermain{z-index:999999;width:300px;height:0px;position:fixed;bottom:0%;right:5px}#exefixedfooterdiv{border-top:3px solid #444;border-right:3px solid #444;border-left:3px solid #444;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;background-color:#d7d7d7;overflow:none;width:300px;height:250px;position:fixed;bottom:0%;right:5px;background:#fff;background:-moz-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#e5e5e5));background:-webkit-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:-o-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:-ms-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:linear-gradient(to bottom, #fff 0%,#e5e5e5 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#e5e5e5',GradientType=0 )}</span></span></div>
<div style="color: #111111;">
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">#exefixedfooterhide{z-index:999999; position: absolute;    bottom:250px;right:5px;width:285px;height:25px;cursor:pointer;background-color:#fff;padding-top:5px;border-top:3px solid #444;border-left:3px solid #444;border-right:3px solid #444;border-top-right-radius:5px;border-top-left-radius:5px;}</span></span></div>
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"><span style="color: #111111;">#exefixedfootershow{position:absolute;    bottom:0px;    right:5px;    width:285px;height:25px;cursor:pointer;background-color:#e5e5e5;padding-top:5px;border-top:3px solid #444;border-left:3px solid #444;border-right:3px solid #444;border-top-right-radius:5px;border-top-left-radius:5px}.exefixedfooterdownarrow{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333}.exefixedfooteruparrow{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #333}.exefixedfooterblockarrow{width:8px;height:10px;background-color:#333}#exefixedfootersocial{    position:absolute;    bottom:220px;    right:10px;    width:280px;height:30px;float:right}#exefixedfootersocialicon{    position:absolute;    bottom:135px;    left:10px;    width:auto;height:64px}#exefixedfooteremailsubscribe{    position:absolute;    bottom:0px;    width:242px;height:90px;right:30px}.exefixedfooteremailsubscribebox input.email{padding:7px 10px 7px 10px;font-family:"Arial","Helvetica",sans-serif;width:218px;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.exefixedfooteremailsubscribebox input.subscribe{    -moz-box-shadow:inset 0px 1px 0px 0px #fff;-webkit-box-shadow:inset 0px 1px 0px 0px #fff;box-shadow:inset 0px 1px 0px 0px #fff;background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f0f0f0),color-stop(1,#c9c9c9) );background:-moz-linear-gradient( center top,#f0f0f0 5%,#c9c9c9 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0',endColorstr='#c9c9c9');background-color:#f0f0f0;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777;font-family:arial;font-size:13px;font-weight:bold;padding:6px 18px;text-decoration:none;text-shadow:1px 1px 0px #fff}.exefixedfooteremailsubscribebox input.subscribe:hover{background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#c9c9c9),color-stop(1,#f0f0f0) );background:-moz-linear-gradient( center top,#c9c9c9 5%,#f0f0f0 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9c9c9',endColorstr='#f0f0f0');background-color:#c9c9c9}</style><div id="exefixedfootermain"><center id="exefixedfootershow"onmouseup="document.getElementById('exefixedfooterdiv').style.display='block'"><table  style="margin-top:-2px;"><tr><td><center style="color:#333;font-size:15px;font-weight:bold;"></span><b><span style="color: #bf9000;">Be Socialized And Subscribed</span></b><span style="color: #111111;"></center></td><td><center><div class="exefixedfooteruparrow"></div><div class="exefixedfooterblockarrow"></div></center></td></tr></table></center><div id="exefixedfooterdiv"><center id="exefixedfooterhide"onmouseup="document.getElementById('exefixedfooterdiv').style.display='none'"><table  style="margin-top:-2px;"><tr><td><center style="color:#333;font-size:15px;font-weight:bold;"></span><span style="color: #bf9000;"><b>Be Socialized And Subscribed</b></span><span style="color: #111111;"></center></td><td><center><div class="exefixedfooterblockarrow"></div><div class="exefixedfooterdownarrow"></div></center></td></tr></table></center><div id="exefixedfootersocial"><center style="color:#333;font-size:12px;"></span><span style="color: #bf9000;"><b>Recive All Latest And Hottest Articles,Tips And Tricks,Awesome Widgets Directly Into Your Inbox And Stay UpDate With Us...!!!</b></span><span style="color: #111111;"></center></div><div id="exefixedfootersocialicon"><table><tr><td><a href="http://www.facebook.com/</span><b><span style="color: blue;">ID Facebook Anda</span></b><span style="color: #111111;">"><img height="48px"width="48px"title="Like Us On Facebook"alt="Facebook"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBXW3X2CO68Pm8xgdK-bLgl801qy9csmspXek4RVMdtRXIcTt42jX7aYmvC7VBxX8dJFiR2uWDT0Ae-BvUgfOYpQPMRcSPkCalVObyUkcl4qUD3Uy_Z4rgn9Gn5f_baOQr96xyBKWKd7w/s1600/Facebook+Icon.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQV44IiLLz5thOY92RYkq7K82Bwbbr1p8qHljfKgejs8g_dB1TVfj0seGcE3l3daZyD_mhBun0Bu4V5qa2jFUh-pcprXyKLOrn5kgy7F6EtOQJw6pup-rqltmJHHifg47wJXFPbhloRnNC/s1600/Facebook+Rollout+Image.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBXW3X2CO68Pm8xgdK-bLgl801qy9csmspXek4RVMdtRXIcTt42jX7aYmvC7VBxX8dJFiR2uWDT0Ae-BvUgfOYpQPMRcSPkCalVObyUkcl4qUD3Uy_Z4rgn9Gn5f_baOQr96xyBKWKd7w/s1600/Facebook+Icon.png'"/></a><br /><a href="http://twitter.com/</span><span style="color: cyan;"><b>ID Twitter Anda</b></span><span style="color: #111111;">"><img height="48px"width="48px"title="Follow Me On Twitter"alt="Twitter"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5K1CapoL0P_bXiuocYBGW-vSigFXOcJr7Siwy0DMbpiLSWQseW2Fh2tk60zeLAVXSyPc5WFsQwqQBkgci7xUOovIczhF1yF3jpp8vjAnPg-cQUcpWrf6rLHqVdzTKOnm11nnKoeZAhxpd/s1600/Twitter+Icon.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyV68hQt8u8ppIPdATkn9wBTIGsb2kSScy29B69nBY_UDBMwoViA_Gom5hNEpNpipTFK87F51HlUpTvwAgctYorSuUzqZ-tF_m6SzwSufqE13lUiR_GQNgybAnh68n9EKyZCfP1o0hzNT5/s1600/Twitter+Rollout+Image.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5K1CapoL0P_bXiuocYBGW-vSigFXOcJr7Siwy0DMbpiLSWQseW2Fh2tk60zeLAVXSyPc5WFsQwqQBkgci7xUOovIczhF1yF3jpp8vjAnPg-cQUcpWrf6rLHqVdzTKOnm11nnKoeZAhxpd/s1600/Twitter+Icon.png'"/></a></td><td width="75px"valign="top"><a style="font-size:12px;color:#333;font-weight:bold;"href="http://www.facebook.com/ID Facebook Anda">Like Us On FaceBook</a><br /><br /><a style="font-size:12px;color:#333;font-weight:bold;"href="http://twitter.com/</span><b><span style="color: cyan;">ID Twitter Anda</span></b><span style="color: #111111;">">Follow Us On Twitter</a></td><td><a href="https://plus.google.com/102256859586166648016"><img height="48px"width="48px"title="Add Us To Your Circle"alt="Google Plus"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufs9rBGbzsa1loiKsW7rA5attothXaYYLdRh_jRZwvL8dXRKxKQo9iYQvbUDy_V8NdMTvq8lMIP0IcnGAwWAE3RQBiAIQt91jyi3e0ktsMhrR5ha0P09_HdGnLKcdi8V-KSvlvkTqxSS6/s1600/Google+Icon.pngE"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDx_mioGHraK39H6xtmkt_qqwpyo8dJQswDQK2d1q-gqxZUv0qQXHIgxGKIgUARNr0_VycLF-ZNZmJJLZAWr4iNlGTSPr4BLUNNkyOxIBMG5JfDZjI7fshC8z0hqFYlgZmSSPSGt1psMmH/s1600/Google+Rollout+Image.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufs9rBGbzsa1loiKsW7rA5attothXaYYLdRh_jRZwvL8dXRKxKQo9iYQvbUDy_V8NdMTvq8lMIP0IcnGAwWAE3RQBiAIQt91jyi3e0ktsMhrR5ha0P09_HdGnLKcdi8V-KSvlvkTqxSS6/s1600/Google+Icon.png'"/></a><br /><a href="http://feeds.feedburner.com/</span><b><span style="color: red;">ID Feedburner Anda</span></b><span style="color: #111111;">"><img height="48px"width="48px"title="Subscribe Our RSS"alt="RSS"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVlMgmfIdgUAIxnsR3VLg5_DdzkoUTWjUQLCGuKn6YVb1WGJnCPUteD9l_np9U2V_Gc0GgBT4DqzOSOaI_l5woGG4fW3tlAhW1lToZEYdh3R34m3Eq9XxWLv8IceLqlNcVXDSDi8tmN4xr/s1600/Feedburner+Icon.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUXb1778x9n3JtfUgOJD5B1hHu04ARnXAAZGP3ponz0cspafND5gCtTrUAWZLLixyRt1f5lZ7t5DU9aFnSfA4dIPBdtr1UDHVLqkoC-mOYk-kgxxYmcm3Y3RVqjWyATuo4KrwG8l1u-r7/s1600/Feedburner+Rollout+Image.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVlMgmfIdgUAIxnsR3VLg5_DdzkoUTWjUQLCGuKn6YVb1WGJnCPUteD9l_np9U2V_Gc0GgBT4DqzOSOaI_l5woGG4fW3tlAhW1lToZEYdh3R34m3Eq9XxWLv8IceLqlNcVXDSDi8tmN4xr/s1600/Feedburner+Icon.png'"/></a></td><td valign="top"><a style="font-size:12px;color:#333;font-weight:bold;"href="https://plus.google.com/102256859586166648016">Add Me <br />In Circle</a><br /><br /><a style="font-size:12px;color:#333;font-weight:bold;"href="http://feeds.feedburner.com/</span><span style="color: red;"><b>ID Feedburner Anda</b></span><span style="color: #111111;">">Subscribe <br />Our RSS</a></td></tr></table></div><div id="exefixedfooteremailsubscribe"><div class="exefixedfooteremailsubscribebox"><form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=exefixedfootersocialicon','popupwindow','scrollbars=yes,width=550,height=520');return true"><input class="email"type="text"id="email"name="email"value="Enter Your Email Here.."onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/><input type="hidden"value="</span><span style="color: red;"><b>ID Feedburner Anda</b></span><span style="color: #111111;">"name="uri"/><input type="hidden"name="loc"value="en_US"/><br /><input class="subscribe"name="commit"type="submit"value="Subscribe Our News Letter Now"/></form></div><center style="color:#333;font-size:8px;">E-Mail Will Be Delivered By FeedBurner.</center></div></div></div></span></span></span></blockquote>
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<br />
<div style="background-color: white; color: #111111; text-align: justify;">
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"><span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"><br /></span></span></span></span></div>
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<div class="info" style="background-attachment: scroll; background-color: #dfe7fe; background-image: url(http://2.bp.blogspot.com/-jH9ysEu0PdI/UD-xqU42isI/AAAAAAAAA2s/vHFYlXqooEY/s1600/MBT+info.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(146, 202, 228); color: #205791; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em;">
Keterangan :<br />
<ul>
<li>Ganti <span style="color: blue;">ID Facebook Anda</span> dengan ID Facebook Anda.</li>
<li>Ganti <span style="color: cyan;">ID Twitter Anda</span> dengan ID Twitter Anda.</li>
<li>Ganti <span style="color: red;">ID Feedburner Anda</span> dengan ID Feedburner Anda.</li>
</ul>
</div>
<div style="color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px;">
    </div>
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<br />
<ul><span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
<li> <span style="font-size: 13px;">Save and HAVE FUN sobat.</span> </li>
</span></span></ul>
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<br />
<div>
<div style="font-size: 13px;">
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">Terima kasih, semoga bermanfaat.</span></span></div>
<div style="font-size: 13px;">
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">Sumber kode source : <a href="view-source:http://www.blogger.com/www.exeideas.com" style="color: #0956a8; text-decoration: initial;" target="_blank">view-source:www.exeideas.com</a></span></span></div>
</div>
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span></div>
<div style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;">
<ol></ol>
</div>
<br />
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Widget Profiles Social Melayang Dengan Subscribe Box Dengan Tombol Minimize Untuk Blogger

Hai sobat blogger, yang membuat saya lemas ini bingung mau buat postingan yang berguna buat sobat semua. Tapi dengan widget yang saya co...

Membuat Objek Keren Pada Kursor Mouse di Blogger

2/04/2013 01:32:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTo8tH2iWYISS8XGukzPri7vJX2JDTKvBfJMMHfir23Ns99o27c1jaq9gtA2ZFEepW0mSp9oFmVH4axySy9HmqbC5jOmR69r7xAnvxUfGe4cLn7xwtCkLtfO3ztpkx-4k_FI36dRF3-oT/s1600/cursor_XP.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTo8tH2iWYISS8XGukzPri7vJX2JDTKvBfJMMHfir23Ns99o27c1jaq9gtA2ZFEepW0mSp9oFmVH4axySy9HmqbC5jOmR69r7xAnvxUfGe4cLn7xwtCkLtfO3ztpkx-4k_FI36dRF3-oT/s1600/cursor_XP.png" width="320" /></a></div>
<br />
Membuat Objek Berputar-putar Pada Kursor Mouse di Blogger - D-Copy Blog | Bagaimana cara Anda untuk mendapatkan perhatian pengunjung Anda? Membuat konten berkualitas? Membuat blog indah dipandang mata? atauu membuat objek pada kursor mouse di blog Anda? Yapp kali ini kita akan membahas bagaimana membuat objek pada kursor mouse.<br />
<br />
<span style="font-size: large;">Gaya Pertama :</span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
</div>
<ul style="text-align: left;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke menu <b>tata letak/layout > add gadget > HTML/Javascript</b></li>
<li>Pastekan kode dibawah ini dan save.</li>
</ul>
<br />
<blockquote class="tr_bq">
<script language="JavaScript" type="text/javascript"><br />
<b><span style="color: red;">var xCol = "#FF0000";</span></b><br />
<b><span style="color: red;">var yCol = "#FFFF00";</span></b><br />
<b><span style="color: red;">var zCol = "#0000FF";</span></b><br />
var n = 6; //number of dots per trail.<br />
var t = 40; //setTimeout speed.<br />
var s = 0.2; //effect speed.<br />
var r,h,w;<br />
var d = document;<br />
var my = 10;<br />
var mx = 10;<br />
var stp = 0;<br />
var evn = 360/3;<br />
var vx = new Array();<br />
var vy = new Array();<br />
var vz = new Array();<br />
var dy = new Array();<br />
var dx = new Array();<br />
var pix = "px";<br />
var strictmod = ((document.compatMode) &&<br />
document.compatMode.indexOf("CSS") != -1);<br />
var domWw = (typeof window.innerWidth == "number");<br />
var domSy = (typeof window.pageYOffset == "number");<br />
var idx = d.getElementsByTagName('div').length;<br />
for (i = 0; i < n; i++)<br />
{<br />
var dims = (i+1)/2;<br />
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'<br />
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'<br />
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'<br />
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'<br />
+'left:0px;width:'+dims+'px;height:'+dims+'px;'<br />
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'<br />
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'<br />
+'left:0px;width:'+dims+'px;height:'+dims+'px;'<br />
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');<br />
}<br />
if (domWw) r = window;<br />
else<br />
{<br />
if (d.documentElement &&<br />
typeof d.documentElement.clientWidth == "number" &&<br />
d.documentElement.clientWidth != 0)<br />
r = d.documentElement;<br />
else<br />
{<br />
if (d.body && typeof d.body.clientWidth == "number")<br />
r = d.body;<br />
}<br />
}<br />
function winsize()<br />
{<br />
var oh,sy,ow,sx,rh,rw;<br />
if (domWw)<br />
{<br />
if (d.documentElement && d.defaultView &&<br />
typeof d.defaultView.scrollMaxY == "number")<br />
{<br />
oh = d.documentElement.offsetHeight;<br />
sy = d.defaultView.scrollMaxY;<br />
ow = d.documentElement.offsetWidth;<br />
sx = d.defaultView.scrollMaxX;<br />
rh = oh-sy;<br />
rw = ow-sx;<br />
}<br />
else<br />
{<br />
rh = r.innerHeight;<br />
rw = r.innerWidth;<br />
}<br />
h = rh;<br />
w = rw;<br />
}<br />
else<br />
{<br />
h = r.clientHeight;<br />
w = r.clientWidth;<br />
}<br />
}<br />
function scrl(yx)<br />
{<br />
var y,x;<br />
if (domSy)<br />
{<br />
y = r.pageYOffset;<br />
x = r.pageXOffset;<br />
}<br />
else<br />
{<br />
y = r.scrollTop;<br />
x = r.scrollLeft;<br />
}<br />
return (yx == 0)?y:x;<br />
}<br />
function mouse(e)<br />
{<br />
var msy = (domSy)?window.pageYOffset:0;<br />
if (!e) e = window.event;<br />
if (typeof e.pageY == 'number')<br />
{<br />
my = e.pageY - msy + 16;<br />
mx = e.pageX + 6;<br />
}<br />
else<br />
{<br />
my = e.clientY - msy + 16;<br />
mx = e.clientX + 6;<br />
}<br />
if (my > h-65) my = h-65;<br />
if (mx > w-50) mx = w-50;<br />
}<br />
function assgn()<br />
{<br />
for (j = 0; j < 3; j++)<br />
{<br />
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *<br />
Math.sin((stp+j*25)/2) + scrl(0) + pix;<br />
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *<br />
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;<br />
}<br />
stp+=s;<br />
for (i = 0; i < n; i++)<br />
{<br />
if (i < n-1)<br />
{<br />
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;<br />
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;<br />
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;<br />
}<br />
else<br />
{<br />
vx[i].top = dy[0]; vx[i].left = dx[0];<br />
vy[i].top = dy[1]; vy[i].left = dx[1];<br />
vz[i].top = dy[2]; vz[i].left = dx[2];<br />
}<br />
}<br />
setTimeout(assgn,t);<br />
}<br />
function init()<br />
{<br />
for (i = 0; i < n; i++)<br />
{<br />
vx[i] = document.getElementById("x"+(idx+i)).style;<br />
vy[i] = document.getElementById("y"+(idx+i)).style;<br />
vz[i] = document.getElementById("z"+(idx+i)).style;<br />
}<br />
winsize();<br />
assgn();<br />
}<br />
if (window.addEventListener)<br />
{<br />
window.addEventListener("resize",winsize,false);<br />
window.addEventListener("load",init,false);<br />
document.addEventListener("mousemove",mouse,false);<br />
}<br />
else<br />
if (window.attachEvent)<br />
{<br />
window.attachEvent("onload",init);<br />
document.attachEvent("onmousemove",mouse);<br />
window.attachEvent("onresize",winsize);<br />
}<br />
</script></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-size: large;">Gaya Kedua:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
</div>
<ul style="text-align: left;">
<li>Masih pada langkah-langkah pada gaya pertama pastekan kode dibawah ini :</li>
</ul>
<br />
<blockquote class="tr_bq">
<script type="text/javascript" src="http://programisjs.googlecode.com/files/bubblecursor.js"></script><script type="text/javascript"><br />
// <![CDATA[<br />
var colours=new Array("<b><span style="color: red;">#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF</span></b>"); // colours for top, right, bottom and left borders and background of bubbles<br />
var bubbles=100; // maximum number of bubbles on screen<br />
var x=ox=400;<br />
var y=oy=300;<br />
var swide=800;<br />
var shigh=600;<br />
var sleft=sdown=0;<br />
var bubb=new Array();<br />
var bubbx=new Array();<br />
var bubby=new Array();<br />
var bubbs=new Array();<br />
window.onload=function() { if (document.getElementById) {<br />
var rats, div;<br />
for (var i=0; i<bubbles; i++) {<br />
rats=createDiv("3px", "3px");<br />
rats.style.visibility="hidden";<br />
div=createDiv("auto", "auto");<br />
rats.appendChild(div);<br />
div=div.style;<br />
div.top="1px";<br />
div.left="0px";<br />
div.bottom="1px";<br />
div.right="0px";<br />
div.borderLeft="1px solid "+colours[3];<br />
div.borderRight="1px solid "+colours[1];<br />
div=createDiv("auto", "auto");<br />
rats.appendChild(div);<br />
div=div.style;<br />
div.top="0px";<br />
div.left="1px";<br />
div.right="1px";<br />
div.bottom="0px"<br />
div.borderTop="1px solid "+colours[0];<br />
div.borderBottom="1px solid "+colours[2];<br />
div=createDiv("auto", "auto");<br />
rats.appendChild(div);<br />
div=div.style;<br />
div.left="1px";<br />
div.right="1px";<br />
div.bottom="1px";<br />
div.top="1px";<br />
div.backgroundColor=colours[4];<br />
div.opacity=0.5;<br />
if (document.all) div.filter="alpha(opacity=50)";<br />
document.body.appendChild(rats);<br />
bubb[i]=rats.style;<br />
}<br />
set_scroll();<br />
set_width();<br />
bubble();<br />
}}<br />
function bubble() {<br />
var c;<br />
if (x!=ox || y!=oy) {<br />
ox=x;<br />
oy=y;<br />
for (c=0; c<bubbles; c++) if (!bubby[c]) {<br />
bubb[c].left=(bubbx[c]=x)+"px";<br />
bubb[c].top=(bubby[c]=y)+"px";<br />
bubb[c].width="3px";<br />
bubb[c].height="3px"<br />
bubb[c].visibility="visible";<br />
bubbs[c]=3;<br />
break;<br />
}<br />
}<br />
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);<br />
setTimeout("bubble()", 40);<br />
}<br />
function update_bubb(i) {<br />
if (bubby[i]) {<br />
bubby[i]-=bubbs[i]/2+i%2;<br />
bubbx[i]+=(i%5-2)/5;<br />
if (bubby[i]>sdown && bubbx[i]>0) {<br />
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {<br />
bubb[i].width=bubbs[i]+"px";<br />
bubb[i].height=bubbs[i]+"px";<br />
}<br />
bubb[i].top=bubby[i]+"px";<br />
bubb[i].left=bubbx[i]+"px";<br />
}<br />
else {<br />
bubb[i].visibility="hidden";<br />
bubby[i]=0;<br />
return;<br />
}<br />
}<br />
}<br />
document.onmousemove=mouse;<br />
function mouse(e) {<br />
set_scroll();<br />
y=(e)?e.pageY:event.y+sleft;<br />
x=(e)?e.pageX:event.x+sdown; }<br />
window.onresize=set_width;<br />
function set_width() {<br />
if (document.documentElement && document.documentElement.clientWidth) {<br />
swide=document.documentElement.clientWidth;<br />
shigh=document.documentElement.clientHeight;<br />
}<br />
else if (typeof(self.innerHeight)=="number") {<br />
swide=self.innerWidth;<br />
shigh=self.innerHeight;<br />
}<br />
else if (document.body.clientWidth) {<br />
swide=document.body.clientWidth;<br />
shigh=document.body.clientHeight;<br />
}<br />
else {<br />
swide=800;<br />
shigh=600;<br />
}<br />
}<br />
window.onscroll=set_scroll;<br />
function set_scroll() {<br />
if (typeof(self.pageYOffset)=="number") {<br />
sdown=self.pageYOffset;<br />
sleft=self.pageXOffset;<br />
}<br />
else if (document.body.scrollTop || document.body.scrollLeft) {<br />
sdown=document.body.scrollTop;<br />
sleft=document.body.scrollLeft;<br />
}<br />
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br />
sleft=document.documentElement.scrollLeft;<br />
sdown=document.documentElement.scrollTop;<br />
}<br />
else {<br />
sdown=0;<br />
sleft=0;<br />
}<br />
}<br />
function createDiv(height, width) {<br />
var div=document.createElement("div");<br />
div.style.position="absolute";<br />
div.style.height=height;<br />
div.style.width=width;<br />
div.style.overflow="hidden";<br />
return (div);<br />
}<br />
// ]]><br />
</script></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-size: large;"><b>Gaya Ketiga :</b></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
</div>
<ul style="text-align: left;">
<li>Masih pada langkah 1 diatas, pastekan kode dibawah ini :</li>
</ul>
<br />
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<b><script src="<span style="color: #e69138;">URL JS</span>" type="text/javascript"></script></b></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" dir="rtl" style="clear: both; text-align: right;">
<b>Note</b> : untuk <b><span style="color: #e69138;">URL JS</span></b>, tukarkan dengan kod berikut mengikut warna sprakle yang anda kehendaki</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b><span style="color: #6aa84f; font-family: Courier New, Courier, monospace;">Code JS yang Diatas PilihSalah Satu Dari Bawah Ini</span></b></div>
<div class="separator" style="clear: both;">
</div>
<blockquote class="tr_bq">
<ul style="text-align: left;">
<li><b>Biru - <span style="color: #e69138;">http://programisjs.googlecode.com/files/biru.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Hitam - <span style="color: #e69138;">http://programisjs.googlecode.com/files/black.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>hijau - <span style="color: #e69138;">http://programisjs.googlecode.com/files/lawngreen.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Ungu - <span style="color: #e69138;">http://programisjs.googlecode.com/files/purple.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Putih - <span style="color: #e69138;">http://programisjs.googlecode.com/files/putih.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Pink - <span style="color: #e69138;">http://programisjs.googlecode.com/files/salmon.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Kuning - <span style="color: #e69138;">http://programisjs.googlecode.com/files/yellow.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Hijau kebiruan - <span style="color: #e69138;">http://programisjs.googlecode.com/files/aqua.js</span></b></li>
</ul>
</blockquote>
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Contoh: jika anda mahu mouse anda dengan sparkle warna biru, kodnya adalah:</div>
<blockquote class="tr_bq">
<script src="https://sites.google.com/site/unwanted86/javascript/biru.js" type="text/javascript"></script></blockquote>
<div>
<br /></div>
<div>
<div class="success" style="background-attachment: scroll; background-color: #ccfebf; background-image: url(http://3.bp.blogspot.com/-Ey_f4tLqWaw/UD-xsS60hmI/AAAAAAAAA28/q8aIYetyEwc/s1600/MBT+success.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(198, 216, 128); color: #264409; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Keterangan : Ubah warna kode yang telah <span style="color: red;">diwarnai</span> diatas.</div>
Terima Kasih Semoga Tutor Nya Bermanfaat</div>
<br />
<div class="separator" style="clear: both;">
<span style="font-size: large;"><br /></span></div>
<br />
<span style="font-size: large;"><br /></span>
</div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Membuat Objek Keren Pada Kursor Mouse di Blogger

Membuat Objek Berputar-putar Pada Kursor Mouse di Blogger - D-Copy Blog | Bagaimana cara Anda untuk mendapatkan perhatian pengunjung And...

Widget Profiles Sosial Bookmark Versi Angry Birds Untuk Blogger

2/04/2013 01:26:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKJG0yOxpAcDwYDc66a1RsyhfOfsFqhvWqwdSfrrhaU2S7-3meOlt337H6LjNfQ62AIeNBVMf_07LTVkb1oV6Wv1wzQpVOzOUZyVVIG5QcYP7gRYyR_15eP87D87nMo5J1WETY47vzLSn/s1600/angry-birds-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKJG0yOxpAcDwYDc66a1RsyhfOfsFqhvWqwdSfrrhaU2S7-3meOlt337H6LjNfQ62AIeNBVMf_07LTVkb1oV6Wv1wzQpVOzOUZyVVIG5QcYP7gRYyR_15eP87D87nMo5J1WETY47vzLSn/s1600/angry-birds-.jpg" /></a></div>
<br />
Widget Profiles Sosial Angry Birds Untuk Blogger - Sharing Blog | Hai sobat blogger, tutorial kali ini kita akan membahas widget social sharring widget "Angry Birds" untuk blogger. Widget ini didesain unyu-unyu yang cocok untuk akun blog Anda.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Langkah :</div>
<div class="separator" style="clear: both;">
</div>
<ol style="text-align: left;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke menu layout > Add gadget > HTML/Javascript</li>
<li>Cari kode dibawah ini :</li>
</ol>
<br />
<blockquote class="tr_bq">
]]></b:skin></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
     4.  Pastekan kode dibawah ini diatas pada kode diatas :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.bubblewrap{<br />
list-style-type:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
.bubblewrap li{<br />
display:inline;<br />
width: 60px;<br />
height:60px;<br />
}<br />
.bubblewrap li img{<br />
width: 50px; /* width of each image.*/<br />
height: 50px; /* height of each image.*/<br />
border:0;<br />
margin-right: 4px; /*spacing between each image*/<br />
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */<br />
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */<br />
}<br />
.bubblewrap li img:hover{<br />
-moz-transform:scale(1.8); /*scale up image 1.8x*/<br />
-webkit-transform:scale(1.8);<br />
-o-transform:scale(1.8);<br />
}</blockquote>
<div class="separator" style="clear: both;">
     5.  Save Template Anda.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
     6.  Masuk ke menu Layout (Tata Letak) <b>> Add Gadget > HTML/Javascript</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
     7.  Pastekan kode dibawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<ul class="bubblewrap"><br />
<li><a href="http://www.plus.google.com/<span style="color: #20124d;"><b>ID Google Plus Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0nxRI8OQ1qqqyUaKsBK3v4RbOHnyTIDuboHev3k7x92_XKtHcly_K0EimmMlROLTKRde_8nxMj3yKFlzmGDyFWomAYOm7nB0VifjEGv0ol4DIwqR908cYvoKt2SCm2GJkvdkIfsXhoU/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li><br />
<li><a href="http://www.facebook.com/<span style="color: #134f5c;"><b>ID akun Facebook Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUDbdYpEtkWiJ_ER3TxoC_Ybvo2J9-3vE2vE0ldsNxkJw63kSRmYwhE9EWTFTL_fhmCe-k7A1_pKQ9U8FooIqiyiPwXpCtZgr1mHgDCzvo5hB12dQj6G75PqeV9Kn4LuhCeva1l5-oOQ4/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li><br />
<li><a href="http://www.youtube.com/<span style="color: #6aa84f;"><b>ID Youtube Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQJNTrQOMJjkgqcWKWMlaf-dxrbov45b59HLxUpOGso4-hKYtJ61LcovJslvNxi3zEvc9gZ-AS4QVl_QETk8ImSWiLVsRwJ0oSAa9J-2MtymgErTbhlIaoDX1bwLUMdOR4voQ3NBZ-pA/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li><br />
<li><a href="http://www.twitter/<span style="color: orange;"><b>ID Twitter Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqRlg35oztMwRNrrqnyiHno74gYbFo9pionCFElz1JragAB8sD1BlYInNMYP503nFwx9yNfNHw_vKX1B13HmUOZi-h-X3TLcgMhts0U0OPV9kTkFzwtQjY3_XPDW6b7m395HUC83iklLU/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li><br />
<li><a href="http://feeds2.feedburner.com/<span style="color: red;"><b>ID feedburner Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIWnHIbdL6H6vQY4n349a-rRSerAIDFWrarIm1nr4hPZkup0tenFVB1xSk1MUY4DF2-OigD3KepTogI9AZEaDJUZQtHafIb7_ff3XfVXAXJ7xH68gvg2pgwNSojn13fJqYDMF3qNtYYbA/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li><br />
</ul></blockquote>
<div>
<br /></div>
<br />
<br />
<br />
<div class="info" style="background-attachment: scroll; background-color: #dfe7fe; background-image: url(http://2.bp.blogspot.com/-jH9ysEu0PdI/UD-xqU42isI/AAAAAAAAA2s/vHFYlXqooEY/s1600/MBT+info.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(146, 202, 228); color: #205791; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Keterangan :<br />
<ul>
<li>Ganti kode yang telah diwarnai dan save template Anda.</li>
</ul>
</div>
<span style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;">     8.  Save dan selesai.</span><br />
<br /></div>

Blogger CSS HTML Javascript jQuery SeputarBerita Tips'N'Trik Widget Profiles Sosial Bookmark Versi Angry Birds Untuk Blogger

Widget Profiles Sosial Angry Birds Untuk Blogger - Sharing Blog | Hai sobat blogger, tutorial kali ini kita akan membahas widget social ...

5 CSS Breadcrumbs Keren Untuk Blogger

2/04/2013 01:20:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJSrwxgZU3ODB5dZbyu-jd6BE9dpoImp0btmHSvEqLoBu90r8XrJOjyCKMe9nt_gdrtHAw8eRS4mSW697hab1-pYFcbqqvobl1qWXJCQoYTeG8DsseOhE6qAyfkP7JY2gjqjGtMF5gz9w1/s1600/css_logo_medium.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJSrwxgZU3ODB5dZbyu-jd6BE9dpoImp0btmHSvEqLoBu90r8XrJOjyCKMe9nt_gdrtHAw8eRS4mSW697hab1-pYFcbqqvobl1qWXJCQoYTeG8DsseOhE6qAyfkP7JY2gjqjGtMF5gz9w1/s1600/css_logo_medium.png" /></a></div>
<br />
Breadcrumbs adalah navigasi alternatif. Tidak hanya apakah mereka bertindak sebagai alat bantu visual untuk menginformasikan pembaca tentang posisi mereka dalam hirarki blog, tetapi juga memberikan nuansa yang lebih terstruktur.<br />
<br />
<br />
<br />
<div class="notice" style="background-attachment: scroll; background-color: #fff6bf; background-image: url(http://1.bp.blogspot.com/-axW-b4k19rA/UD-xrlRIRCI/AAAAAAAAA20/WyWG5-lKfJw/s1600/MBT+notice.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(255, 211, 36); color: #514721; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
<b>Sebelum Anda mendapatkan Memulai</b><br />
<ol>
<li>Pastikan bahwa Anda sudah memiliki Breadcrumbs di blog Anda. Baca tutorial <a href="http://d-copy.blogspot.com/2012/08/cara-buat-breadcrumb-navigation-di-blogger.html" style="color: #514721; text-decoration: initial;" target="_blank">cara membuat navigasi breadcrumbs di blog</a>.</li>
</ol>
</div>
<br style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;" />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Langkah :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
</div>
<ol style="text-align: left;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke Menu Template, centang Expand Template Widget</li>
<li>Pilih desain widget yang Anda sukai dibawah ini dan ganti kode breadcrumbs Anda.</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-CfxewhG7iLw/UHgYg4UNYsI/AAAAAAAABRY/GRi7bOf2eKc/s1600/breadcrumbs5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-CfxewhG7iLw/UHgYg4UNYsI/AAAAAAAABRY/GRi7bOf2eKc/s1600/breadcrumbs5.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<blockquote class="tr_bq">
.breadcrumbs{list-style:none;margin:0}<br />
.breadcrumbs a:last-child{border-right-width:1px!important;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px}<br />
.breadcrumbs a{color:#666;display:block;float:left;font-size:12px;position:relative;text-decoration:none;border:1px solid #D9D9D9;border-right-width:0;background-image:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";background-repeat:no-repeat;background-position:100% 0;z-index:1;padding:7px 16px 7px 19px}<br />
.breadcrumbs a:hover{border-top-color:#c4c4c4;border-bottom-color:#c4c4c4;background-image:0 45% #f8f8f8 73%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";color:#333;-moz-box-shadow:0 2px 2px #e8e8e8;-webkit-box-shadow:0 2px 2px #e8e8e8;box-shadow:0 2px 2px #e8e8e8}<br />
.first,.first:hover{z-index:30!important;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-hp8WXzNdNO4/UHgaTeh0PbI/AAAAAAAABRg/pwK9xJCEbhc/s320/breadcrumbs1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-hp8WXzNdNO4/UHgaTeh0PbI/AAAAAAAABRg/pwK9xJCEbhc/s320/breadcrumbs1.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<blockquote class="tr_bq">
.breadcrumbs{list-style:none;height:36px;line-height:36px;padding-left:36px;margin:0}<br />
.breadcrumbs > a{position:relative;float:left;margin-left:-36px;-moz-border-radius:18px;-webkit-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;border-radius:18px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-ms-box-shadow:0 0 5px rgba(0,0,0,0.5);-o-box-shadow:0 0 5px rgba(0,0,0,0.5);box-shadow:0 0 5px rgba(0,0,0,0.5)}<br />
.breadcrumbs> a:before{content:'';position:absolute;z-index:-1;left:-6px;top:-6px;width:100%;height:100%;background:#D5D5D5;-moz-border-radius:22px;-webkit-border-radius:22px;-ms-border-radius:22px;-o-border-radius:22px;border-radius:22px;border:1px #C5C5C5 solid;padding:5px}<br />
.breadcrumbs > a > span{color:#666;float:left;padding:0 46px 0 40px}<br />
.breadcrumbs a{list-style:none}<br />
.breadcrumbs a::before,.breadcrumbs a::after,.breadcrumbs a span::before,.breadcrumbs a span::after{content:"";position:absolute;top:50%;left:0;display:none}<br />
.breadcrumbs a span::before,.breadcrumbs a span::after{background:transparent;margin:-8px 0 0}<br />
.breadcrumbs > a:last-child > span{color:#333;padding:0 46px 0 60px}<br />
.breadcrumbs > a:hover,.breadcrumbs > a:last-child{background-color:#EEE;background-image:linear-gradient(tobottom,#EEE,#DDD)}<br />
.breadcrumbs > a:hover > span{color:#FFF;padding:0 66px 0 60px}<br />
.breadcrumbs > a:last-child:hover > span{padding:0 46px 0 60px}<br />
.first,.first:hover{z-index:30!important}<br />
.breadcrumbs a:nth-child(2){z-index:31!important}<br />
.breadcrumbs a:nth-child(3){z-index:32!important}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-EBC4yNNauWI/UHgbHD74yRI/AAAAAAAABRo/WrlD9wQYf4o/s320/breadcrumbs2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-EBC4yNNauWI/UHgbHD74yRI/AAAAAAAABRo/WrlD9wQYf4o/s320/breadcrumbs2.PNG" /></a></div>
<blockquote class="tr_bq">
<br />
.breadcrumbs{list-style:none;margin:0}<br />
.breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}<br />
.breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}<br />
.breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}<br />
.breadcrumbs a:nth-child(even):hover{color:#333}<br />
.breadcrumbs a:nth-child(odd):hover{color:#FFF}<br />
.first,.first:hover{z-index:30!important}<br />
.breadcrumbs a:nth-child(2){z-index:29!important}<br />
.breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-S8VimlxxVcE/UHgb7LJuA5I/AAAAAAAABRw/Nmjn_1PLRFg/s400/breadcrumbs3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="52" src="http://1.bp.blogspot.com/-S8VimlxxVcE/UHgb7LJuA5I/AAAAAAAABRw/Nmjn_1PLRFg/s320/breadcrumbs3.PNG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<blockquote class="tr_bq">
 .breadcrumbs{zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}<br />
.breadcrumbs:before,.breadcrumbs:after{display:table;content:"";zoom:1}<br />
.breadcrumbs:after{clear:both}<br />
.breadcrumbs a{color:#999}<br />
.breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}<br />
.breadcrumbs > a:after{content:'';position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}<br />
.breadcrumbs > a:before{content:'';position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}<br />
.breadcrumbs a :last-child{color:#333}<br />
.breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}<br />
.breadcrumbs a:hover{text-decoration:none!important}<br />
.breadcrumbs span:hover{color:#666}<br />
.breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}<br />
.breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}<br />
.breadcrumbs span{margin-top:1px;color:#999}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-MtMzEH4wzaQ/UHgcYuy4NoI/AAAAAAAABR4/mK4JTY1Dzk4/s320/breadcrumbs4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-MtMzEH4wzaQ/UHgcYuy4NoI/AAAAAAAABR4/mK4JTY1Dzk4/s320/breadcrumbs4.PNG" /></a></div>
<blockquote class="tr_bq">
<br />
 .breadcrumbs{list-style:none;margin:0}<br />
.breadcrumbs a span::after{background:#DDD;content:"";height:2.5em;margin-top:-1.25em;position:absolute;right:-1em;top:50%;width:2.5em;z-index:-1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}<br />
.breadcrumbs a{text-decoration:none;color:#444;background:#DDD;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:.4em 0 0 .4em;-webkit-border-radius:.4em 0 0 .4em;border-radius:.4em 0 0 .4em;margin:0 2em 0 0;padding:.7em 1em .7em 2em}<br />
.breadcrumbs a:hover,.breadcrumbs a:hover > span:after{background:#f1f1f1;color:#333}</blockquote>
<br />
Terimah Kasih Telah Berkunjung Dan Membaca Article Saya.<br />
<br />
<div>
<br /></div>
<br />
<br />
<br /></div>
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik 5 CSS Breadcrumbs Keren Untuk Blogger

Breadcrumbs adalah navigasi alternatif. Tidak hanya apakah mereka bertindak sebagai alat bantu visual untuk menginformasikan pembaca ten...

Membuat Recomended Post Yang Muncul Di Akhir Postingan Blogger

2/04/2013 01:14:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="line-height: 19px;">Kali ini aku ingin berbagi cara untuk membuat rekomended post yang muncul di akhir artikel kamu. Recomended post ini sanget bermanfaat sekali karena dengan menambahkan widget blogger ini, kamu bisa menghindari bounce visitor yang ada di blog kamu. Widget ini bisa membuat pengunjung blog kamu tertarik karena disitu akan diberikan random artikel yang bisa mereka baca juga setelah membaca artikel kamu sebelumnya. Gambar di bawah ini merupakan Screenshoot dari recomended post :</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="line-height: 19px;"><br /></span></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09aDppa8kqV5C3728_lnCvwP_wAR54q4p59GOPfn1XCZKICbXc3Hvx-rBd9lz4YjiIwDA65XzLDH7q23lFOrURSClQHHCTkPMmMxLJG1_BHeSE5KgywhfLcr0FU7Zng5RxlKNqZIJqBR6/s400/Cara+membuat+recomended+post+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09aDppa8kqV5C3728_lnCvwP_wAR54q4p59GOPfn1XCZKICbXc3Hvx-rBd9lz4YjiIwDA65XzLDH7q23lFOrURSClQHHCTkPMmMxLJG1_BHeSE5KgywhfLcr0FU7Zng5RxlKNqZIJqBR6/s320/Cara+membuat+recomended+post+blogger.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Ingin tau cara membuatnya ?</div>
<div class="separator" style="clear: both;">
Membuat Recomended Post dalam Satu Langkah</div>
<div class="separator" style="clear: both;">
Nah, sebenarnya tidak sulit untuk menambahkan widget ini. Untuk menambahkankan widget ini kamu cukup untuk menekan (klik) gambar di bawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/img/add/add2blogger_lg.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Jika kamu sudah klik gambar tersebut, sebenarnya langkahnya belum selesai sobat. Untuk membuatnya keluar di akhir postingan kamu kamu harus menambahkan Javascript ke dalam template kamu. Langkah ini nggak susah kok. Ikuti tutorial yang akan aku berikan berikut :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
1. Pergi ke Blogger Dashboard > Templates > Edit HTML</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
2. Centang Expand Widget Template !</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
3. Kemudian cari kode berikut ini</div>
<blockquote class="tr_bq">
<p class='post-footer-line post-footer-line-1'></blockquote>
<div class="separator" style="clear: both;">
atau</div>
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-1'></blockquote>
<div class="separator" style="clear: both;">
atau</div>
<blockquote class="tr_bq">
<data:post.body/></blockquote>
<div class="separator" style="clear: both;">
Setelah ketemu kode di atas, kamu tambahkan kode script di bawah ini tepat di bawah kode tersebut !</div>
<blockquote class="tr_bq">
<div id='bpslidein_place_holder'></div></blockquote>
<div class="separator" style="clear: both;">
4. Nah, langkah terakhir adalah 'Save Template' </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Sekarang kamu bisa lihat hasilnya, kalau kamu membuka salah satu postingan di blog kamu dan kamu scroll sampai akhir postingan kamu akan mendapatkan kotak rekomended post di kiri bawah layar kamu. </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Kalau kamu merasa artikel ini bermanfaat, luangkan waktu untuk berbagi kepada teman-teman kamu dengan share artikel ini. Kalau ada yang ditanyakan silahkan tinggalkan komentar di bawah.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Semoga bermanfaat </div>
<br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="line-height: 19px;"><br /></span></span></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Membuat Recomended Post Yang Muncul Di Akhir Postingan Blogger

Kali ini aku ingin berbagi cara untuk membuat rekomended post yang muncul di akhir artikel kamu. Recomended post ini sanget bermanfaat seka...

Cara Membuat Komentar Facebook Di Blog Berdampingan Komentar Blogger

2/04/2013 01:10:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
Hallo sahabat blogger sekarang kita akan belajar untuk membuat komentar facebook berdampingan dengan komentar blogger.  Namun ini merupakan cara baru yang bisa anda terapkan ketika cara yang pertama tidak berhasil di blog anda. Karena memang setiap template blog akan menghasilkan hasil edit yang berbeda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfdnKIjfZ2p1KfgmcDZZ-WiAPXxDFrp6JBDXyqaIMFTVZFyXysj-XLnN3V_mPBAYl7FUFAMjx1KjHGPwEeS1pgKuXif711-wfikczn5PQ_2XnDbL1fOcCzM6Xm_kRnL4uAMB2YeFwJhTr/s400/membuat+kotak+komentar+facebook+berdampingan+denga+kotak+komentar+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfdnKIjfZ2p1KfgmcDZZ-WiAPXxDFrp6JBDXyqaIMFTVZFyXysj-XLnN3V_mPBAYl7FUFAMjx1KjHGPwEeS1pgKuXif711-wfikczn5PQ_2XnDbL1fOcCzM6Xm_kRnL4uAMB2YeFwJhTr/s320/membuat+kotak+komentar+facebook+berdampingan+denga+kotak+komentar+blogger.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Sebenarnya caranya tidak susah-susah amat kok. Asalkan anda bisa teliti untuk membaca setiap instruksi saya saja. Nah sebelumnya saya akan memberikan hasil dari membuat kotak komentar facebook pada blog saya. Hasilnya Seperti Gambar Yang Di atas</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Berikut adalah langkah langkahnya :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 1 : Pergi ke blogger >> Dashboard >> Template</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Pastikan setiap anda edit HTML blog anda, selalu anda backup terlebih dahulu. Hal ini dikarenakan untuk jaga-jaga ketika hasil edit anda mengalami eror.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 2 : Edit HTML >> Lanjutkan</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 3 : Centang Expand Template Widget</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 4 : Temukan Kode di bawah ini (Ctrl + F) :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<b>]]></b:skin></b></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 5 : Copy kemudian paste kode di bawah ini diatas atau sebelum ]]></b:skin></div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.comments-page { background-color: #f2f2f2;}<br />#blogger-comments-page { padding: 0px 5px; display: none;}<br />.comments-tab { float: left; padding: 5px; margin-right: 3px;<br />cursor: pointer; background-color: #f2f2f2;}<br />.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}<br />.comments-tab:hover { background-color: #eeeeee;}<br />.inactive-select-tab { background-color: #d1d1d1;}</blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 6 : Jika sudah selesai kemudian lanjutkan untuk mencari kode di bawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<b></head></b></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Kemudian copy dan paste kode di bawah ini tepat di atas kode <b></head></b> yang anda temukan :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br /><script src='http://code.jquery.com/jquery-latest.js'/><br /><meta content='ID FB Anda disini' property='fb:admins'/><br /><script type='text/javascript'><br />function commentToggle(selectTab) {<br />$(".comments-tab").addClass("inactive-select-tab");<br />$(selectTab).removeClass("inactive-select-tab");<br />$(".comments-page").hide();<br />$(selectTab + "-page").show();<br />}<br /></script></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Lanhkah 7 :  Sebelumnya lihat tulisan pada script di atas yang saya beri warna merah 'ID FB Anda disini' . isikan dengan FB Id anda. Jika anda tidak tahu FB Id anda coba perhatikan contoh Comment FB temen gw yang diatas tadi.. Itu bisa anda lihat ketika anda membuka profil Facebook anda. Dan yang saya maksud dengan FB ID Nya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 8 : Kemudian cari kode seperti ini <b><div class='comments' id='comments'></b> , di blog saya kode tersebut ada dua. Kalau anda juga menemukan ada dua kode tersebut di blog anda, paste kode dibawah ini tepat di bawah kedua kode tersebut!</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><br /><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><br /><fb:comments-count expr:href='data:post.url'/> Comments<br /></div><br /><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><br /><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/><data:post.numComments/> Comments<br /></div><div class='clear'/><br /></div><br /><div class='comments-page' id='fb-comments-page'><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='fb-root'/><br /><fb:comments expr:href='data:post.url' num_posts='2' width='400'/><br /></b:if><br /></div><br /><div class='comments comments-page' id='blogger-comments-page'></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Catatan :</b> Perhatikan kode diatas yang saya beri warna. Untuk yang angka 2 merupakan jumlah komentar yang ditampilkan. Kemudian untuk angka 400 merupakan lebar dari kotak komentar facebook yang ada di blog anda.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Untuk kode yang saya beri warna merah <b><div class='comments comments-page' id='blogger-comments-page'> </b> , jika anda menemukan kode yang sama di bawah kode yang anda paste di blog anda, hapus kode tersebut. Jadi pastikan tidak ada kode tersebut sama di bawahnya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 9 : Simpan dan lihat hasilnya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Gimana sahabat blogger, apakah anda berhasil membuat kotak komentar facebook berdampingan dengan kotak komentar blog anda? Beri komentar jika anda berhasil memasangnya. Beri tahu saya bahwa kode di cara di atas benar-benar bekerja pada blog anda.</div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Cara Membuat Komentar Facebook Di Blog Berdampingan Komentar Blogger

Hallo sahabat blogger sekarang kita akan belajar untuk membuat komentar facebook berdampingan dengan komentar blogger. Namun ini merupakan...

Sharing Mie