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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHBzCx2V3C_aOeB9y1Amd-3zT2-yclUBvfK9bVlSJMdKiRrcW2zTwWD-LIfDeZQSPBiKY7EVuhBgJEpS8e3HjfVu16b2G0EtkOObZDugB_7Z-cWqG2oa6hlJ92sb7TNxzaBw7KCSwbrao/' width='32'/></a>
<br/><a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uwPGzmEZok4bxZ-9vcwGLZ0rfGOP2aDvvCLkYjr6wn0GqJ_uufFiPAzPk9tOQ9cU5Gd9dK6V6SIbC-uqvQsT0Jn-YC7W24h6TV9esbt7cVsvlsGu-bo7qn_3tzQMxfxKlyltUImw8kE/' width='32'/></a>
<br/><a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0WBqr0j-8YRhfVzrlHP_F3ONtLqEskgdTXYbiKLl8SzY4S5f7rzsNXOfCnJbpCaW8O1SQqJiWwI1x1wDosuuvJ7NtUoI5ABKD7yLirjVWPdfYwEHCyX8nfolC1_mUv0fnxEm9bgW3ExY/' width='32'/></a>
<br/><a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ53-kzojUNSGcDr2uNkgSptjr5iOaUSciIcYSsYvpRSqH2-s4K22qI5YLugwFIjLsKz2aiW6Un67p87pK9DCzulgYZBEnakXqPgg3icXZ6a8T3DpawCVf3teRMQX-9th0dWvNarmxoXk/' width='32'/></a>
<br/><a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9DHx2CDRjdMHXEzRjkG9-3Yg1zLx55kPaNeX1jR8hMX7XFUXjUV7Mt2nI-QhVCb6OBNDiokcZxXHV6qeZKD_V9Up9NfkvUZUjkezB4p0VqzjQNpHxoyOm-xXJO8q4KkAKtWUWxHuKEyw/' width='32'/></a>
<br/><a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjISYpLWJjNe2SXM_RJqcQiX1Fg3OX5I48MVWVAaASrzrdrN7BtqzA3UGtA-waIg3LYm_MMAx20VHk8ZuRe_DvUIC214uXDOb93JYsR-Xj_gQRUIzv5CBi9g1zvdfgh_0yKyLJSOy-dR7w/' width='32'/></a>
<br/><a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiscVTOOiMDHRz2G_KyioLMd_ciGZ_mf3mQse1vDCulZAX87hMOifQMzDJhbQec1wMs3EW7vf24PKVWe7O1GWlG1FhyphenhyphenLRQFuExqu2iaijJn8r0G2QAl2TYSrZhCJ6mSgTG2gk4A6ndN2Gc/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

Share :

Facebook Twitter Google+