Selamat Datang Diucapkan Kepada Semua Pengunjung Blog Ini Segala Komen Dan Saranan Teman Teman Amat Seri Hargai

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

3 Pandangan:

Asis Sugianto Februari 01, 2011  

wah di blog saya gak ada sosial sama sekali sob,,, maklum newbie

Tebinfea Februari 09, 2011  

Olá e boa quarta-feira.
Com um belo sol.
Teb.

Tebinfea Februari 09, 2011  

Hello and good Wednesday.
With a beautiful sun.
Teb.

Teman Setia

This Blog Is Proudly Sponsored By SURF7 Template Modified By Seri Bahasa Proud To Be A Kinabatangan Blogger