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
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