Given by 
Given by Tutorial: Icon Terapung Tepi Blog
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:
Steps:
1. Log-in ke Dashboard Blogger.
2. Masuk ke bahagian Design > Edit HTML.
3. Gunakan function Search dalam Firefox atau Chrome (Ctrl+F) untuk cari tag <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
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
*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.
Read more...
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.
|
Bookmark this post:
|
|
Posts
