Tutorial :- Floating Social Button

Hey Hey !
Korang mesti rimas kan , tengok kat update korang , penuh dengan Tutorial kelembai ini kan ?
Bukan apa , kelembai just nak share ngan korang je semua tuto niyh ;)
Mana tahu , kot kot berguna bagi korang ke, hee~
Espeacially , bagi new bloggers tu kan??

oke ,now! kelembai nak teach korang , macam mana nak buat floating button !
Apa itu floating button ? Tengok contoh kat bawah ni :)


Floating button ini , ada dekat sebelah KIRI blog kelembai k?
1. Log in > Dashboard > Design > Add Gadget > Html/Java Script

2. Copy code dibawah ni dan paste di ruang HTML/Javascript


<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='http://www.facebook.com/farhan.simasadi' 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='http://twitter.com/farhansimasadi' 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='http://kelembaiungu.blogspot.com/' 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>
3. Yuhuu ! Belum Siap lagi tuh! Then , kan yang tulisan warna PINK tu , korang tukarkan lah dgn link korang k?

* Yang warna MERAH = boleh tukarkan mengikut kesesuaian blog . Left boleh tukar menjadi Right !
*Bagi yang warna BIRU pula , if korang nak kekalkan pun tak pe , kalau nak , just tukar kan je link itu ;)
*tapi kalau korang pandai bab photoshop ni , korang boleh design sendiri , tp savekan sebagai format PNG. upload and get the url okays... uols boleh gantikan ikut url yang korang suka kat BIRU tu

=DONE=
Selamat Mencuba!

0 Sayang tinggalkan komen kat SINI :):

Related Posts Plugin for WordPress, Blogger...