Floating Button
Preview:
Floating
button digunakan untuk memudahkan reader connect dengan sosial network kamu.
Selain menjimatkan ruang, ianya juga nampak kemas dan cantik. Floating button
ini akan muncul pada sebelah sisi kanan atau kiri blog kamu. Selain sosial
network, kamu juga boleh letak button lain untuk floating button ini (cth:
email, link blog, youtube dan etc), bergantung kepada apa yang kamu ingin
reader connect.
Caranya:
1) Sign in akaun blogger
2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript
3) Copy paste kod di bawah pada ruang Html / Javascript tadi
Caranya:
1) Sign in akaun blogger
2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript
3) Copy paste kod di bawah pada ruang Html / Javascript tadi
<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='URL FACEBOOK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />
<a class='linkopacity' href='URL TWITTER ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />
<a class='linkopacity' href='URL BLOG ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />
</div>
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='URL FACEBOOK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />
<a class='linkopacity' href='URL TWITTER ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />
<a class='linkopacity' href='URL BLOG ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />
</div>
Nota:
- Pada tulisan berwarna biru, masukkan url facebook, twitter dan blog korang.
- Pada tulisan berwarna merah, masukkan url button yang korang nak. Search button di google atau mana-mana image hosting. Kalau nak gunakan yang sedia ada pun takde masalah, tak perlu search.
- Yang warna purple pula, boleh tukar mengikut kesesuaian blog. Left boleh ditukar kepada right.
4) Save dan lihat hasilnya.
Selamat mencuba! :)
Floating button digunakan untuk memudahkan reader connect dengan sosial network kamu. Selain menjimatkan ruang, ianya juga nampak kemas dan cantik. Floating button ini akan muncul pada sebelah sisi kanan atau kiri blog korang. Selain sosial network, kamu juga boleh letak button lain untuk floating button ini (cth: email, link blog, youtube dan etc), bergantung kepada apa yang kamu ingin reader connect.