Cara membuat Facebook page like button efek tooltip

Haisob apa kabar? pada kesempatan ini saya akan membagikan tutorial cara membuat like button facebook page efek tooltip. Pastinya sobat sudah tahu pengaruh media sosial pada blog, seperti yang sudah saya jelaskan di artikel-artikel sebelumnya yaitu kamu dapat mendatangkan trafik dari medsos.

Nah kita dapat memanfaatkan pengunjung blog kita untuk mendapatkan like Facebook page, yaitu seperti menambahkan widget fanspage Facebook ini di bawah postingan, di sidebar blog, atau dengan membuat fanspage Facebook melayang. (Baca juga: cara membuat Fanspage Google Plus melayang di blog).

Facebook page like button efek tooltip


Fanspage Facebook melayang dengan efek tooltip ini baru akan kelihatan jika mouse diarahkan ke tombol likenya ini..

Facebook page like button efek tooltip


Ok berikut adalah cara membuat Facebook page Like Button dengan efek tooltip.

Cara mememasang Facebook fanspage button efek tooltip di Blogger


Kamu bisa menambahkan kode dibawah ini pada widget blog, atau memasukannya langsung ke dalam template blog, atau memisahkan kode CSS dan HTML kemudian mencoba-coba di bagian mana letak yang cocok di blog kamu.

<style>
a:link,a:visited { position:relative; } .haisobtooltip { 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; } .haisobtooltip:before,.haisobtooltip:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; } .haisobtooltip:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; } a:hover .haisobtooltip { 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; } .haisobtooltip,.haisobtooltip.left { left:0; right:0; } .haisobtooltip:before,.haisobtooltip:after,.haisobtooltip.left:before,.haisobtooltip.left:after { left:40px; right:auto; } .haisobtooltip:before { border-top-color:#2aa4cf; } .haisobtooltip:after { border-top-color:#2aa4cf; } </style>
<center>
<a href="https://www.facebook.com/bloghaisob" 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="haisobtooltip"><object allowtransparency="true" data="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloghaisob&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 link Facebook page dengan link Facebook page milik kamu, jika belum punya kamu dapat mencoba tutorial ini: cara membuat fanspage Facebook.

Cara membuat Facebook page like button efek tooltip
Facebook page like button efek tooltip

Sekian, salam Bloggers.