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

Memasang Widget Di Tepi Wrapper Template

Kali ini seri akan memberikan satu widget serbaguna untuk para blogger. Selain boleh digunakan untuk memasang sosial tabs di tepi wrapper template, ia juga boleh di gunakan untuk memasang apa-apa jenis label dengan menukar URL ikon.


Masuk ke Blogger

Klik Tab Design

Klik Tab Edit HTML

Cari kode ini; /* Headings ----------------------------------------------- */. Bila sudah jumpa copy kode yang dibawah kotak dan pastekan tepat diatas /* Headings ----------------------------------------------- */.

Salin Kode Dibawah Ini:

#menulateral{
position: fixed;
text-align: left;
margin-top: -50px;
margin-left: -44px;
}
* html #menulateral{ /*para IE*/
position:absolute;
}
#menulateral a img{
opacity: 1;
-moz-opacity:1;
filter:alpha(Opacity=100);
}
#menulateral a:hover img{
opacity:0.8;
-moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px;
}
* html #menulateral a img{
filter:alpha(Opacity=100);
}
#menulateral img{
margin-bottom: -5px;
}
a:hover img {filter:alpha(opacity=85);
-moz-opacity: 0.85;
opacity: 0.85;
}


Catatan:
margin-top: -50px; - Untuk menyelaraskan kedudukkan widget
margin-left: -44px; - Untuk menjarakkan antara widget dengan wrapper template.

Sekarang kita cari pula kode ini; <div id='headerbg'><div id='header-wrapper'>. Lepas itu cari kode penutupnya seperti ini; </div></div>. Bila sudah jumpa copy kode yang di bawah kotak dan pastekan dibawah </div></div> dengan jarak satu spacing kebawah.

Salin Kode Dibawah Ini:

<div id='navigation'>
<div id='menulateral'>

<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>
<br/><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>
<br/><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>
<br/><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>
<br/><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>
<br/><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>
<br/><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 class='clearfix'/>
</div>
</div>


Di Bawah Adalah Contoh Kode Untuk Memasang Label

<div id='navigation'>
<div id='menulateral'>

<a href='URL Label Di Sini' style='border:0;' target='_self' title='Tajuk Label'><img alt='Tajuk Gambar' src='URL Ikon/Gambar Di Sini'/></a>
<br/><a href='URL Label Di Sini' style='border:0;' target='_self' title='Tajuk Label'><img alt='Tajuk Gambar' src='URL Ikon/Gambar Di Sini'/></a>
<br/><a href='URL Label Di Sini' style='border:0;' target='_self' title='Tajuk Label'><img alt='Tajuk Gambar' src='URL Ikon/Gambar Di Sini'/></a>
<br/><a href='URL Label Di Sini' style='border:0;' target='_self' title='Tajuk Label'><img alt='Tajuk Gambar' src='URL Ikon/Gambar Di Sini'/></a>
<br/><a href='URL Label Di Sini' style='border:0;' target='_self' title='Tajuk Label'><img alt='Tajuk Gambar' src='URL Ikon/Gambar Di Sini'/></a>

</div>
<div class='clearfix'/>
</div>
</div>


Catatan:
Warna Merah - Kode asal widget
Warna Biru - Kode Sosial Tabs

Warna Cokelat - URL anda disini
Warna Biru - Tajuk untuk kedua-dua adalah sama, contoh; Panduan Memasak
Warna Ungu - Ruang untuk meletakkan URL Ikon/Gambar


Save Template dan View Blog

8 Pandangan:

caliph shuriken Februari 02, 2011  

nice.. so creative ^^

latest en3: ~ 10 saat saja ~

~~su manje~~~ Februari 02, 2011  

singgah ptg di hari baru
blog seri berwarna hijau
salam ziarah dari su
baru 0n9 tadi su lesu

nicepost di hari ini
blog seri idaman hati
kalaulapang singgahlah nanti
su manjesejap je ni...

~~su manje~~~ Februari 03, 2011  

salam ziarah di ptg khamis
su tak de mood malas

Miss Rinda Februari 04, 2011  

Sharing yang complete,Tq ~0~

anyway, kalau untuk template setipe blog templateku nggak bisa aku sharing dear, coz just special 4 admin ^_^

mungkin bisa cari di google template yang namanya "Cellar Heart", aku modif dari situ,

btw, blog ini udah cantik banget lho jangan diganti ya sayang :(

Miss Rinda Februari 06, 2011  

Seri mau dibantu di part yang mana ?
bukannya seri lebih ahli soal edit template ?
miss cuma paham design saja, masih belajar edit template :(

Nizam Februari 06, 2011  

terima kasih atas perkongsia seri.. :)

Amri Abd Rani Februari 06, 2011  

lawa n info yg bagus...
tp Pakwi suka ringkas je..
santai gitu.....

Yastro Februari 12, 2011  

Rasa cam minat gak ngan widget yg yas tanya kat seri tu...
tp nk tanya dulu nih,loading page tak effect ke?
pas tu kalau boleh yas nk pasang ikon twitter,F/b kat area situ..

Teman Setia

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