Membuat Fans Page Facebook Dengan Efek Tooltip

Membuat Fans Page Facebook Dengan Efek Tooltip - Sebelumnya Saya telah mengulas cara membuat Fans Page Facebook di Blog, setelah saya jelaskan pada ulasan sebelumnya Fans Facebook memiliki peranan cukup baik untuk Blog sobat karena dapat mendatangkan visitor baru dan menaikan populeritas Blog sobat.

Pada kesempatan kali ini saya masih membahas mengenai Fans Facebook, namun pada Fans Facebook kali ini dimodifikasi dengan sentuhan Efek Tooltip. Efek Tooltip pada Fans Facebook akan muncul jika icon disentuh oleh cursor, dan widget Fans Facebook melayang diatasnya. Baiklah sobat kita langsung saja menuju cara pemasangan, berikut ini langkah-langkah Membuat Fans Page Facebook Dengan Efek Tooltip.

1. Silahkan Sobat login keakun Blogger
2. kemudian Pilih Template, lalu klik edit HTML
3. Selanjutnya sobat cari kode ]]></b:skin>
4. Kemudian sobat salin kode CSS dibawah ini dan terapkan diatasnya

/* Fans Facebook  Efek Tooltip  */
a:link,a:visited { position:relative; }
.tooltip { 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: #dee6f3; background: #dee6f3; background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1)); background:#dee6f3; border-color:#dee6f3; }
.tooltip:before,.tooltip:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; }
.tooltip:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; }
a:hover .tooltip { 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; }
.tooltip,.tooltip.left { left:0; right:0; }
.tooltip:before,.tooltip:after,.tooltip.left:before,.tooltip.left:after { left:40px; right:auto; }
.tooltip:before { border-top-color:#dee6f3; }
.tooltip:after { border-top-color:#dee6f3; }

5. Simpan Template
6. Selanjutnya Sobat menuju menuju Tata Letak/Layout, kemudian add Gadget lalu pilih HTML/Javascrip. Kemudian Sobat salin kode dibawah ini dan pastekan pada content yang tersedia.

<b:if cond="data:blog.pageType == &quot;item&quot;">
<a href="https://www.facebook.com/aak-shareblogspotcom" rel="nofollow" target="_blank"><img alt="Like" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKPwqVEaeiov2LbW_zVyU3XocSWNBi0KfRS7tsFa9IcwuCdiryvYSR6I8nBFnt4vrN8oEN3-v6vgOOSmOnv8MXRXet88KEzQwWroEfttM9VS51VEmsw0KvnNUro4-MsuWHzuRmc5Yjmz_C/s80/like+(1).png" title="Like" /><span class="tooltip ">
<object allowtransparency="true" data="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2Faak-shareblogspotcom%2F727072134018053%3Fsk%3Dtimeline&amp;width&amp;height=210&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=591662174265135" frameborder="0" scrolling="no" style="border: 0px solid; height: 210px; overflow: hidden;"></object>
</span></a>
</b:if>
<div class="clear">
</div></b:if>

Penjelasan :
Silahkan Sobat ganti pada kode yang saya beri warna biru dengan Alamat Fans Facebook Sobat dan ID Fans Facebook Sobat.

7. Lalu klik Simpan

Demo

Demo Fans Page Facebook Efek Tooltip

Pada Fans Facebook dengan efek Tooltip diatas Anda juga bisa memasangnya di bawah postingan dengan meletakkan kode HTML di bawah kode <data:post.body/>. Sekian cara Membuat Fans Page Facebook Dengan Efek Tooltip, semoga bermanfaat!

Subscribe to receive free email updates: