بِسۡمِ ٱللهِ ٱلرَّحۡمَـٰنِ ٱلرَّحِيمِ

Salam. Rasanya hari ini hendak buat tutorial untuk blogspot pula walaupun tak pandai sangat lagi programming ini. Ok, tajuk tu hentam je sebab taktau nak letak apa. Kalau ada yang tau, boleh inform.


Mula-mula ternampak widget ini di Cybernatics.com tapi bila tanya Acapz, dia lupa. Jadi tanpa melengahkan masa, "”hack” sahaja code template dia. Hehe. Ok, ini contoh widget yang di highlight kan dengan warna merah, screenshot dari blog Cybernatics.com:



tutor

Antara kelebihan widget ini ialah nampak lebih kemas dan dapat menarik perhatian terutamanya bagi yang sudah ada hidden shoutbox di bahagian kanan.

1. Mula-mula, Add Widget > HTML/JavaSript dan paste kod di bawah:
<!-- Cute Profile --> 

<div style="display:scroll; position:fixed; top:150px; right:0px;"> 
<a class="linkopacity" href="http://www.blogger.com/profile/13414369733773263510" target="_blank" rel="nofollow" title="Contact" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dl.dropbox.com/u/1024578/Template/contact.png" /></a><br /> 
<a class="linkopacity" href="http://www.facebook.com/#!/yusdi.namaku" target="_blank" rel="nofollow" title="Facebook" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dl.dropbox.com/u/1024578/Template/facebook.png" /></a><br />
<a class="linkopacity" href="http://www.flickr.com/photos/dakulala/" target="_blank" rel="nofollow" title="Flickr" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dl.dropbox.com/u/1024578/Template/Flickr-32.png" /></a><br />
<a class="linkopacity" href="http://www.flickr.com/photos/dakulala/" target="_blank" rel="nofollow" title="Flickr" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dl.dropbox.com/u/1024578/Template/Flickr-32.png" /></a><br />
<a class="linkopacity" href="http://www.flickr.com/photos/dakulala/" target="_blank" rel="nofollow" title="Flickr" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dl.dropbox.com/u/1024578/Template/Flickr-32.png" /></a><br />
<a class="linkopacity" href="http://www.flickr.com/photos/dakulala/" target="_blank" rel="nofollow" title="Flickr" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dl.dropbox.com/u/1024578/Template/Flickr-32.png" /></a><br />
</div>

  • Sila tukar link selepas   href=   diatas dengan link website yang dikehendaki.
  • Sila tukar link selepas   src=   diatas dengan url gambar yang dikehendaki.
  • Untuk meletakkan gambar yang menarik seperti facebook, flickr, twitter dsb, boleh cari di Iconpedia. Contoh:


icon


  • Sila hostkan gambar tersebut dalam photobucket dan seumpamanya. Kalau tiada hosting atau tak tau, saya boleh hosting kan :)
  • Sila tukar top:150px; untuk adjust kedudukan widget.
  • Kalau hendak pakai logo Geng Blogger, sila guna link ini. Logo diambil dari blog Nescafe Ais




2. Kemudian, cari </body> (Sila gunakan CTRL+F dan type </body> untuk memudahkan proses mencari) dan letakkan kod di berikut SEBELUM kod </body> tadi:


<!-- Cute Profile --> 
<style type='text/css'> 
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>


Alhamdulillah, siap. Rasanya boleh digunakan di semua template sama ada minimize, customize dll. Kalau ada masalah boleh tinggalkan diruang komen. Kalau hendak saya buatkan, sila email.




Bagi yang sudah ada hidden shoutbox macam dalam blog ini, sila adjust top:150px; dalam langkah pertama. Contoh dari blog dakulala:



tutor2


Kemas bukan. Sekian terima kasih.








*Rasa macam loser pulak buat tutorial sendiri walaupun tak berapa mahir lagi programming. Hehe