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/ahmad.strong1' target='new'><img border='0' height='48' src='http://4.bp.blogspot.com/-Qhbza0v7MAw/Tuvupau0UNI/AAAAAAAAA0E/kMOGzWEVv0k/s200/logo+facebook.JPG' width='48'/></a></div>
<br/>
<div class='separator' style='clear: both; text-align: center;'>
<a href='http://twitter.com/Uptus_faktaku' target='new'><img border='0' height='48' src='http://2.bp.blogspot.com/-fDDV7jjbMzA/Tuvu1jUVWoI/AAAAAAAAA0M/I30ZLXzt1Pc/s200/logo+twitter.JPG' width='48'/></a></div>
<br/>
<div class='separator' style='clear: both; text-align: center;'>
<a href='http://feeds.feedburner.com/Cobasanasini CSS' target='new'><img border='0' height='48' src='http://4.bp.blogspot.com/-L7hU5AGOLdA/TuvvHDHJEyI/AAAAAAAAA0U/4vr-crFz8Mw/s200/logo+rss.JPG' width='48'/></a></div>
<br/>
</div>
</div>
Catatan :

Hijau = ganti dengan alamat facebook anda
BIRU = ganti dengan alamat twitter anda
Merah = ganti dengan alamat RSS anda

0 Coment "Cara Membuat Tombol Keep Follow Melayang Dengan Hover Opacity Dan Zoom", Baca atau Masukkan Komentar

Posting Komentar