Membuat Fans Page Facebook Dengan Pengaruh Tooltip

Membuat Fans Page Facebook Dengan Efek Tooltip - Sebelumnya Saya telah mengulas cara menciptakan Fans Page Facebook di Blog, sesudah saya jelaskan pada ulasan sebelumnya Fans Facebook mempunyai peranan cukup baik untuk Blog teman alasannya sanggup mendatangkan visitor gres 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 kalau icon disentuh oleh cursor, dan widget Fans Facebook melayang diatasnya. Baiklah teman kita pribadi 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, kemudian klik edit HTML
3. Selanjutnya teman cari kode ]]></b:skin>
4. Kemudian teman salin instruksi 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 kemudian pilih HTML/Javascrip. Kemudian Sobat salin instruksi 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="embuat Fans Page Facebook Dengan Efek Tooltip Membuat Fans Page Facebook Dengan Efek Tooltip " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYuTSwFd9tCTB-npVJj3w3JWHABw8RU95vBIlPTG0DhNBU9DnAmva9_xV8p3AA55y7Ndlf59QkqA-f5hPHkxa8gRhxQcjrbb-xJUapaaQIFKkX_jXmttCAS38zj0S_GvOHzyg1k9pivgap/s80/like+(1).png" title="Membuat Fans Page Facebook Dengan Efek Tooltip " /><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 instruksi 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 imbas Tooltip diatas Anda juga sanggup memasangnya di bawah postingan dengan meletakkan instruksi HTML di bawah kode <data:post.body/>. Sekian cara Membuat Fans Page Facebook Dengan Efek Tooltip, biar bermanfaat!

Sumber http://www.websiteedukasi.com/