Cara Memasang Sosial Tab Di Atas Sidebar

Sosial Tabs sudah menjadi tidak asing lagi kepada para blogger. Sudah menjadi trend bagi blogger untuk memasang mengikut kesesuaian dan tempat samada di bawah post, di sidebar atau di atas header.


Kali ini seri akan menunjukkan cara memasang sosial tabs diatas kolom (sidebar);

Masuk ke Blogger
Klik Tab Design
Klik Tab Edit HTML
Cari kode ini, <div id='sidebar-wrapper'>. Bila sudah jumpa copy kode (Warna Merah) yang dibawah kotak dan pastekan tepat dibawah <div id='sidebar-wrapper'>.

Salin Kode Dibawah Ini:

<div id='sidebar-wrapper'>

<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TInIgbnufPI/AAAAAAAACL0/RMH14RW94hs/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TInHt-RvluI/AAAAAAAACLE/l4MZpGxFhew/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TInId48IYiI/AAAAAAAACLU/OIibtFDQB7E/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TInHuVRi7uI/AAAAAAAACLM/gfq5cLuoa1U/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TInIfkHWTwI/AAAAAAAACLs/ZXAJDgH3aOY/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TInIeRWGobI/AAAAAAAACLc/1_aTS1yZHmI/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TInIe-KvdjI/AAAAAAAACLk/QGlCu7d-lUs/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>

<b:section class='sidebar' id='sidebar' preferred='yes'>

PERHATIAN: Kalau template ada 2 atau 3 sidebar pastikan pilih mana satu sidebar hendak dipasang sosial tab diatasnya. Biasanya sidebar akan ditanda seperti sidebar, sidebar2, leftsidebar.

Bila sudah selesai yang di atas, cari kode yang ini pula, /* Footer
----------------------------------------------- */. Pastekan code (Warna Merah) yang di bawah kotak di bawah kode-kode yang ada di Footer tersebut.

Salin Kode Dibawah Ini:

/* Footer
----------------------------------------------- */
#footerbg{
padding:0px;
text-align:center;
background:#006600;
width:920px;
height:20px;
border:0px solid #006600;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#footer{
width:920px;
background:#69B02D;
clear:both;
margin:0 auto;
padding-top:0px;
line-height:1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align:center;
}
.quickedit{
display:none;
}

.addthis_toolbox{padding:5px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 1px 0 0px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}

Catatan:
width:32px; - Selaraskan semua nombor yang bertanda warna Ungu mengikut lebar sidebar.
height:32px; - Selaraskan semua nombor yang bertanda warna Ungu mengikut lebar sidebar.
padding:5px - Ubah angka untuk menyelaraskan jarak antara widget.

Save Template dan View Blog