Nah sob pada postingan kali ini admin akan berbagi cara membuat efek hover tooltip facebook page pada tombol facebook di blog.

Efek ini akan muncul ketika kursor mouse berada di atas tombol facebook, yailah namanya juga efek hover, yah kan guys?

Yah buat sobat yang suka utak atik blog dan mencoba ini itu, atau apalah yang ingin memasang windget ini di blog berikut adalah caranya.

Facebook Page Like Button Efek Hover Tooltip


Facebook Page Like Button Efek Hover Tooltip
Facebook Page Like Button Efek Hover Tooltip




Berikut ini adalah kodenya:

<style>
a:link,a:visited { position:relative; } .gibandotnettooltip { width:300px; position:absolute; bottom:400%; margin:0; padding:5px; font-family:Verdana,sans-serif; font-size:13px; font-weight:normal; font-style:normal; text-align:left; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.3); line-height:1.5; border:solid 1px; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; cursor:default; display:block; visibility:hidden; opacity:0; z-index:999; -moz-transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -o-transition:all 0.4s linear; transition:all 0.4s linear; color:#2B2B2B; background:#2aa4cf; background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1)); background:#2aa4cf; border-color:#2aa4cf; } .gibandotnettooltip:before,.gibandotnettooltip:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; } .gibandotnettooltip:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; } a:hover .gibandotnettooltip { text-decoration:none; visibility:visible; opacity:1; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .gibandotnettooltip,.gibandotnettooltip.left { left:0; right:0; } .gibandotnettooltip:before,.gibandotnettooltip:after,.gibandotnettooltip.left:before,.gibandotnettooltip.left:after { left:40px; right:auto; } .gibandotnettooltip:before { border-top-color:#2aa4cf; } .gibandotnettooltip:after { border-top-color:#2aa4cf; } </style>
<center>
<a href="https://www.facebook.com/spezernet" rel="nofollow" target="_blank"><img alt="Like" src="https://2.bp.blogspot.com/-m7tD8AK_ca8/VE4ZKTWX11I/AAAAAAAACZQ/8bmG6zkZZbk/s80/like%2B(1).png" /><span class="gibandotnettooltip"><object allowtransparency="true" data="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fspezernet&amp;width&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=true&amp;appId=483767385088491" frameborder="0" scrolling="no" style="border: none; height: 208px; overflow: hidden;"></object> </span></a></center>

Ganti kode berwana di atas dengan alamat facebook kamu.

Kamu dapat meletakannya di widget, atau di bagian dalam postingan, atau dimanapun yang kamu inginkan di blog kamu.
0 Komentar untuk "Membuat Facebook Page Like Button Efek Hover Tooltip"