Bagaimana cara membuat Fanspage like button dengan efek tooltip?.. Nah pada kesempatan ini saya akan membagikan caranya. Tentusaja anda sudah tahu pengaruh media sosial di blog anda, seperti yang sudah saya jelaskan di artikel-artikel sebelumnya yaitu anda dapat mendatangkan trafik atau pengunjung blog dari sosial media.

Emang kenapa kalo Fans page kita banyak yang like?.. hehehe, Nah gini sob, Agar nantinya jika kita share artikel kita di fanspage facebook maka kemungkinanan besar artikel yang kita share akan muncul di facebooknya orang yang mengikuti ataupun me-Like Fanspage facebook kita.

Nah kita dapat memanfaatkan pengunjung blog kita untuk mendapatkan like FB FP, yaitu seperti menambahkan widget fanspage di bawah postingan, di widget sidebar blog, ataupun dengan cara membuat fanspage facebook melayang. eh iya baca juga sob: cara membuat Fanspage Google Plus melayang di blog.

Fanspage Facebook melayang dengan efek tooltip ini baru akan kelihatan jika mouse diarahkan ke tombol likenya ini. Ok berikut ini adalah Cara Membuat Facebook FP Like Button Dengan Efek Tooltip.

DEMO: www.infonewz2blogspot.com 

( Masuk ke artikel dan lihat sudut kiri di bawah postingan dan jika berkenan di Like juga yah :) )

Berikut ini adalah cara membuatnya:

1. Sebelumnya sobat harus sudah punya FP. ( baca: cara membuat Fanspage Facebook )
1. Backup template / simpan dinotepad untuk berjaga-jaga jika ada kesalahan.
2. Masuk ke edit HTML template Blog sobat.
3. Cari kode ini : ]]></b:skin>
4. Letakan kode CSS dibawah ini keatas kode ]]></b:skin>.

/* Facebook Tooltip Provided by www.seocips.com */
a:link,a:visited { position:relative; }
.bgttooltip { width:300px; position:absolute; bottom:400%; margin:0 0 7px 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; }
.bgttooltip:before,.bgttooltip:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; }
.bgttooltip:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; }
a:hover .bgttooltip { 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; }
.bgttooltip,.bgttooltip.left { left:0; right:0; }
.bgttooltip:before,.bgttooltip:after,.bgttooltip.left:before,.bgttooltip.left:after { left:40px; right:auto; }
.bgttooltip:before { border-top-color:#2aa4cf; }
.bgttooltip:after { border-top-color:#2aa4cf; }

5. Letakan kode dibawah ini kedalam widget blog atau dibawah postingan, jika ingin meletakan dibawah postingan misalnya dibawah <data:post.body/> ( kode ketiga atau keberapa tergantung template anda, dicoba saja satu persatu ) atau bisa juga diatas kode <div id='related_posts'/> ( itu jika kode related postnya kayak gitu )

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href="https://www.facebook.com/trimbelboy" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgds7-TgSCm1IqXz3pv5HvklEqGZEEF7AQo9SEkdJdxCZCRLx6-chttPjkM7cUEECfWmz-9HdOFdyugBq1RZw24yGrXdtFSOfqfFD7c6gxPupVq1ACzeLV_Fg7tli8u9x5ZccS4TEqvXLKg/s80/like+(1).png" title="Like" alt="Like"/><span class="bgttooltip">
<object data="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbenipaper&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" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;" allowTransparency="true"></object>
 </span></a>
<div class='clear'/>
</b:if>

Keterangan : ganti tulisan berwarna diatas dengan alamat Fanspage facebooknya sobat.

6. Simpan Template dan lihat hasilnya.

Sekian sobat tutorial blog tentang Cara Membuat Facebook FP Like Button Dengan Efek Tooltip untuk saat ini dan semoga bermanfaat.