Cara Instal Social Bookmark Mengambang di Blogger

Cara Instal Social Bookmark Mengambang di Blogger mungkin ada yang sudah tau caranya gimana kan. Nah kali ini itung-itung mengulang pelajaran yang sudah-sudah. Tetep tujuannya berbagi info dan pengetahuan demi mencerdaskan bangsa kita. Yang satu ini bisa sobat lihat pada Social Bookmark pada blog saya yang mengambang sobat. Karna icon-icon yang ditampilkan lebih kecil dari biasanya dan lebih menawan oleh karena itu saya tertarik untuk memasangnya. mungkin sobat semua juga tertarik barang kali. baiklah akan semuanya cepet mengerti langsung saja kita kasih cara untuk ngebuatnya ya sobat. Tapi sebelumnya saya kasih contoh gambarnya dulu nich agar sobat blogger semua tau seperti apa sich yang saya bicarakan ini. Nah ini dia penampakannya sobat :

Nah kalau sudah mari kita pelajari cara ngebuatnya sobat :

1.   Sebelum memulai mengedit saya sarankan buat menyimpan template punya sobat dulu yach.

2.   Login ke Blogger , pergi ke Tata Letak -> Edit HTML

dan tandai kotak centang " Expand Template Widget ".

3.   Sekarang cari (CTRL + F) kode ini ]]></ B: skin> di template dan masukkan kode berikut ini sebelum kode tadi atau di atas kode tadi :

#divStayTopLeft {left:5px;position:absolute;top:15px;}
.sidetab {}
.sidetab ul {list-style-type: none;margin: 0;margin-top: 220px;margin-left: -2px;padding: 0;}
.sidetab ul li {border-bottom: 0;margin-bottom: 0;padding: 0;}
.sidetab a {background: none;display: block;height: 25px;margin-top: 0px;padding: 2px;width: 25px;}
.sidetab a:link, .navlist a:visited {color: #555;text-decoration: none;}
.sidetab a:hover {border: none;background: #e8e8e8;}
.sidetab .button a {background:none;height: 25px; width: 25px;}

4.   Kemudian cari kode berikut </body> dan letakkan kode di bawah ini tepat sebelum atau di atas kode </body> tadi :

<DIV id='divStayTopLeft'>
<div class='sidetab'>
<ul class='navlist'>
<li class='button'><a href='http://ceriwis-boplo.blogspot.com/feeds/posts/default'><img height='25' src='http://upic.me/i/ci/rss_48.png' title='Subscribe to RSS feed' width='25'/></a></li>
<a class='addthis_button_facebook'><img alt='Facebook' height='25' src='http://upic.me/i/8n/facebook_32.png' width='25'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='25' src='http://upic.me/i/k6/delicious.png' width='25'/></a>
<a class='addthis_button_email'><img alt='Email' height='25' src='http://upic.me/i/bo/emailsmall.jpg' width='25'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='25' src='http://upic.me/i/ij/favorites.png' width='25'/></a>
<a class='addthis_button_twitter'><img alt='Twitter' height='25' src='http://upic.me/i/bx/twitter_32.png' width='25'/></a>

<a class='addthis_button_google'><img alt='Google' height='25' src='http://upic.me/i/fm/gsmall.jpg' width='25'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='25' src='http://upic.me/i/0v/mdigg.png' width='25'/></a>
<a class='addthis_button_more'><img alt='More' height='25' src='http://upic.me/i/5e/wmore.png' width='25'/></a>


</ul>


</div>


</DIV>


<script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94' type='text/javascript'/>
<script src='http://hackublog.googlecode.com/files/FloatingMenu.js' type='text/javascript'/>

5.   Kalau sudah simpan template dan lihat hasilnya sobat

semoga berhasil dan sukses ya