Post Game

Cara Membuat Tombol Keep Follow Melayang Dengan Hover Opacity Dan Zoom

Cara Membuat Tombol Keep Follow Melayang Dengan Hover Opacity Dan Zoom

Sebelum masuk ke pembahasan saya mau curhat dulu sesungguhnya saya posting ini karena lagi ga ada kerjaan di tempat PKL dan saya juga bingung tadinya mau posting tentang apa, ya dari ga ada kerjaan sama sekali mening posting tentnag membuka boroknya blog saya dari semua gadget yang ada, dan sekarang saya akan membuka borok blog saya yang saya bangun sediri dari awal, yaitu tombol keep follow yang ketika di salah satu logonya di sorot oleh cursor maka logo tersebut akan membesar dan logo tersebut menjadi jelas tidak transparan lagi. Nah kalo yang tertarik dan mau memasangnya di blognya silahkan simak dan saksikan liputan berikut...

Selamat siang sodara, kali ini saya akan meliput tentang tata cara membuat tombol yang dari tadi sedang di bicarakan
1. Masuk ke Blogger
2. Kemudian klik Template > Edit HTML > Lanjutkan.
3. Cari kode </body>
4. Lalu simpan kode berikut di atasnya

<style type=text/css>
#keepfollow {position:fixed; bottom:98px; margin-right:0px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:0 0 2px 0;z-index:10;}
#keepfollow .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
.mouseover img
{
opacity:.60;
filter:alpha(opacity=60);
}
.mouseover img:hover
{opacity:1.0;
filter:alpha(opacity=100);
text-shadow: 0 0 10px rgb(251, 51, 51);color:RED;-moz-transform:scale(2.2);-webkit-transform:scale(2.2);-webkit-transition-duration: 1.5s;}
</style>

<div class=mouseover id=keepfollow title=keep follow>
<div style=clear: both;font-size: 16px;text-align:center;>
</div>
<div class=sbutton id=gplusone>
<div class=separator style=clear: both; text-align: center;>
<a href=http://www.facebook.com/ZamalsBlog target=new><img border=0 height=48 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpYIEp1_koTtMrCMIJB8B_5NZyf7AsTHmHD_F_IyOKjHYPVOQ3tosefHqe1W3f7pUvi6aZgyXBSLct0s9zfB118eFFjbv6tUCAJJDzbKJ1E93120DDxAW7wO9D6kf6argHNW1Y-t9fj0/s200/logo+facebook.JPG width=48/></a></div>
<br/>
<div class=separator style=clear: both; text-align: center;>
<a href=http://twitter.com/zamaludin_a target=new><img border=0 height=48 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCDD4aS1Ri5rzTrpDcpb3n5tlNNgVjSA2QNZnavfy3IR_RIN2iZyrsCJPzExz0jwZn2SxKOnK8nhPTBY4037BLq5kaXpLyMpw5s8ChJ1_eNpH85T3xe2l6StY4DIQueF3MaQgzD_tQZM8/s200/logo+twitter.JPG width=48/></a></div>
<br/>
<div class=separator style=clear: both; text-align: center;>
<a href=http://feeds.feedburner.com/zamaludin target=new><img border=0 height=48 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbBm55CLxYNqjnl1hK3680dR_iGk7RfZXHhwgZKqVai_PMGwjnMNl5RrRn4dyUf4cu8oGKUu20iTeCqa0aJopx8ODLuJx83Tj_QdEFWtuAHvpm8Ve4HXcbB6qn-vZjmEE7KbpNM1mK6s/s200/logo+rss.JPG width=48/></a></div>
<br/>
</div>
</div>

itu kode panjang cuma saya bikin ribet doang hehehe
keterangan:
biru = ganti dengan alamat facebook anda
merah = ganti dengan alamat twitter anda
unyu = ganti dengan alamat RSS anda

5. Klik simpan
selesai...

tapi sayang sungguh di sayang gadget ini optimal di buka di Google Chrome dan Safari (yang lain belum saya coba) karena kalo di buka di firefox hovernya menjadi kurang indah

sekian dari saya assalamualaikum wr. wb

Go to link Download