Tutorial : Floating Button

February 18, 2013


Floating ni bagi menyelitkan laman-laman sosial korang bagi menjimatkan ruang di blog . Selain nampak tak semak , dia nampak sangat comel ! tak percaya ? tengok preview ni :


langkah-langkah :

1) Sign in akaun blogger 

2) Dashboard > Design > Page Element > Add A Gadget > HTML/Javascript 

3) Copy paste kod di bawah di dalam 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='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>

Note :

BIRU - masukkan URL Facebook , Twitter dan Blog korang tau .

MERAH - masukkan URL button yang korang nak , boleh search dekat google . tapi kalau korang tak nak dan cuma nak gunakan button yang sedia ada pun tak ada masalah .

PURPLE - boleh tukar kedudukan Floating Button ni sama ada nak letak sebelah kiri atau kanan . gunakan perkataan Left atau Right .

4) Save , preview dan kalau berpuas hati . Save Arrangement ! :)

Selamat mencuba you all ~

You Might Also Like

0 comments

Related Posts Plugin for WordPress, Blogger...