Sekiranya anda teringin nak pasang ikon/icon yang statik kat tepi blog anda macam yang ada kat blog ni. Sila jangan malu untuk baca tutorial yang saya tulis ni.
Sample:
1. Log-in ke
.
2. Masuk ke bahagian
3. Gunakan function Search dalam Firefox atau Chrome (
<body> dan masukkan code yang disediakan betul-betul di bawah tag <body> tersebut. Tips: Anda boleh juga meletakkan code di mana-mana saja asalkan di dalam bahagian body template anda (<body> .......... </body>) tetapi icons akan load paling last kalau letak kat belakang dekat dengan </body>.
Copy and Paste code dalam <body>: (DELETE WARNA OREN)
<style type="text/css">
#fixed_icons {
background: transparent;
width: 48px; //tukar mengikut saiz icon anda
position: fixed;
top: 15%; //tukar kedudukan vertical icon (bole guna % or px)
right: 0.20%; //tukar kedudukan horizontal (bole guna % or px)
z-index: 3; //supaya icon tidak tersembunyi di belakang image lain
}
#fixed_icons a {
display: block;
text-indent: 24px;
height: 48px; //tukar ikut saiz icon anda
padding-bottom: 3px; //untuk tentukan jarak vertical antara setiap icon
text-decoration: none;
opacity: 0.6; //transparency settings (0=invisible, 1=no transparency)
-moz-opacity: 0.6; //transparency setting Firefox tua
-khtml-opacity: 0.6; //transparency setting Safari kuno
filter: alpha(opacity=60); //transparency setting Internet Explorer lapok
}
#fixed_icons a:hover {
opacity: 1.0; //setting transparency untuk mouse over
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
filter: alpha(opacity=100);
}
#fixed_icons #facebook {
background: url(http://URL icon Facebook) no-repeat;
}
#fixed_icons #twitter {
background: url(http://URL icon Twitter) no-repeat;
}
#fixed_icons #rss {
background: url(http://URL icon RSS) no-repeat;
}
#fixed_icons #email {
background: url(http://URL icon email) no-repeat;
}
</style>
<div id="fixed_icons">
<a href="http://www.facebook.com/ridhuan" title="Duan on Facebook" target="_blank" id="facebook"></a>
<a href="http://twitter.com/eworque" title="Follow me on Twitter" target="_blank" id="twitter"></a>
<a href="http://feeds.feedburner.com/DuanSays" title="RSS Feed" target="_blank" id="rss"></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=DuanSays&loc=en_US" title="RSS updates via e-mail" target="_blank" id="email"></a>
</div>
*Code warna merah dan purple adalah nama/id untuk setiap item. Kalau nak tukar letak nama sendiri pun boleh tetapi mesti tukar semua sekali dengan nama yang sama.
*Tukar tulisan warna pink kepada link anda dan tulisan hijau kepada ayat anda ikut suka hati. Kalau anda tak guna Feedburner anda boleh tukar kepada Formspring, MySpace atau apa-apa saja. Pandai-pandai sendiri la.
*Shortcut!!
- Masuk kat Dashboard > Design > Page Elements.
- Add A Gadget > HTML/Javascript
- Copy and Paste the same codes
*Kalau anda tak suka icon tukar transparency tetapi nak tukar kepada icon lain atau nak icon berubah kedudukan sewaktu mouseover, anda boleh cuba memandai dengan setting hover dalam code di atas. Code di atas juga telah diubah suai menggunakan teknik "Memandai Sendiri".
*Untuk pengguna Self-hosted WordPress. Gunakan code yang sama tetapi tampalkan code:
<div id="fixed_icons"> ... to ... </div>
di dalam <body> tag di dalam header.php ataupun sebelum tag </body> di dalam footer.php.
Kemudian tampalkan hanya code yang berada di antara:
<style type="text/css"> ... to ... </style>: ke dalam file style.css.
Delete <style type="text/css"> dan </style> sebab dalam style.css tak diperlukan tag tersebut.
Given by 
Given by 
Posts
