Tutorial: Cara letak Social Networking Bookmark pada Blog

Untuk kengkawan yang bertanya macam mana nak letak icon Facebook, Twitter,Blogspot dan Chat kat tepi blog. Maaf ya lambat sediakan tutorial... almaklumla... saya ni busy dengan Khalis, busy juga dengan template order... bajet busy la konon.... hehehe.... ok... pada sesiapa yang berminat... follow langkah2 kat bawah ya...

1. Login ke Blogspot .

2. Klik Layout > Add a Gadget Javascript / HTML

3. Copy di bawah dan Pastekan ke dalamnya

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

<div style='display:scroll; position:fixed; top:140px; left:-12px;'>

<a class='linkopacity' href='masukkan url facebook anda' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="masukkan url icon facebook anda" /></a><br />

<a class='linkopacity' href='masukkan url twitter anda' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="masukkan url icon twitter anda" /></a><br />

<a class='linkopacity' href='http://www.blogger.com/home' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Go to Dashboard'><img border="0" src="masukkan url icon blogspot anda" /></a><br />

</div>

*Bahagian yang saya boldkan dengan warna merah tu... anda haruslah tukar dengan url social network anda dan juga url icon yang anda suka...

**Bahagian yang saya boldkan dengan warna purple pula... anda boleh menukar kedudukan button anda sama ada di kedudukan kiri atau kanan blog dengan menukar kan, left ke right.
dan juga boleh menukar tahap ketinggian button tersebut terapung di sini top:140px.

Untuk YM sedikit perubahan pada code... Copy&paste code dibawah ya... pastikan anda paste kod dibawah sebelum kod </div> ini ya...

<a class='linkopacity' href="ymsgr:sendim?masukkan Id Yahoo Messenger anda" imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='chat with me'><img border="0" src="masukkan url icon YM anda" /></a><br />

*Bahagian yang berwarna merah anda perlu masukkan maklumat anda ya...

Jika 4 code diatas tidak mencukupi, anda boleh salin kod di bawah dan paste sebelum </div> , dan masukkan link serta gambar yang anda suka...

<a class='linkopacity' href='LINK ADDRESS' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="URL IMAGE" /></a><br />

4. Setelah semua dah selesai, anda boleh save dan tengok hasilnya... mudahkan?

Sebagai tambahan...saya sediakan icon2 yang agak cantik di mata saya... berserta dengan urlnya sekali... tapi jika anda tidak berminat... sila lah cari disini dan upload sendiri icon2 tersebut untuk mendapatkan urlnya...=)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhezzEqLRk068gPsPosGfgB-yd_lfJ7H00JfSGfedsFBpKZ3aiFE_J-Xhnfhxa6yc6Qaaua74mp9gyYufAHwzcB7ZFpG9Ra3qipa2GtExRfVP33PKZ4AEKpnAoyVfB5_HdlOFu7Tecrj4/s1600/facebook.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNSF68tUVvUAOFKsEw04E0Fr8hxLTRykF5_NvJIiIxkYzrf9f98P3A_GNnxWD0P5eiwIoasrvsw5mkJqM9PhnPcbYsqDWNCTip3-udhl_anddtRpxfXs6O0fffcUeafjvfgEEU-6R4HH5e/s1600/twitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOWS_LEUnqSa8k4leqfixOUtMlG10e3mA975UFt902eqZYNSCq6KWhnvlhPg6tmIhkC6Muvn_yqSzskbKXgDQHbiqt3Uzt9LJ4v33FRH7f0ZwPFy99IOSFbGU-KzD55cMz9GCaA3ouP6z/s1600/blogger.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghqnSdk-3uvTYjjSh5GWBOtN7CRuh2TEEs_WXdh_kycSuFnk5HdQ2I8CUg00j8ebgYHxdWvti1Cw8ilYCqaoNn5-M6PTP7FZQD4-GKuyrn36QzjfCQEjI5Bu2Wm_myKGMFaCPsJ7OqOYPY/s1600/gtalk.png

Selamat Mencuba, Jika tidak paham... boleh bertanya...dan saya akan cuba untuk reply... terima kasih ya...=)

Tutorial kredit pada: Mommy Pinky