Membuat Like Fans Page Facebook Melayang di Blog

Blog dan social media, dijaman sekarang ini sepertinya adalah 2 hal yang tak bisa dipisahkan. Apalagi facebook, media social yang satu ini sangat banyak sekali penggunanya di seluruh dunia. Salah satu kelebihan facebook dibanding dengan media social yang lainnya adalah tersedianya layanan apps atau fans page bagi penggunanya. Sebelumnya juga saya sudah membagikan tutorial dengan judul cara membuat widget follow social media keren (ganti dengan link posting dengan judul tersebut pada post sebelumnya) yang mana disana salah satunya juga terdapat tombol join facebook.

Bagi kita seorang blogger yang jelih memanfaatkan peluang, tentu kita tidak akan memisahkan facebook dan blog. Karena dengan facebook visitor kita akan lebih banyak dan tentunya backlink dari facebook tersebut akan lebih bagus untuk blog kita sedangkan dengan memasang fans page facebook di blog, maka kita dapat membuat visitor blog kita lebih mudah untuk berlangganan artikel serta menambah like fans page tentunya.

Lantas bagaimana cara membuat kotak like fans page facebook melayang di blog kita? Langsung saja simak tutorialnya berikut ini. namun sebelumnya pastikan anda sudah mempunyai sebuah fans page facebook terlebih dahulu.

Cara membuat kotak like fans page facebook melayang di blog

1. Pertama masuk terlebih dahulu ke dashboard blogger anda masing – masing.

2. Jika sudah, masuk ke menu “Layout” atau “Tata letak”.

3. Lalu tambahkan widget “Javascript/HTML”.

4. Pastekan kode berikut ini pada kolom HTML yang tersedia

<style type='text/css'> /* Message Box */ #box-message { position:fixed !important; position:absolute; top:-1000px; left:50%; margin:0px 0px 0px -182px; width:300px; height:auto; padding:16px; background:#fff; font:normal Dosis, Georgia, Serif; color:#111; border:2px solid #333; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } #box-message a.close { position:absolute; top:-10px; right:-10px; background:#fff; font:bold 16px Arial, Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#111; border:2px solid #333; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:22px; -moz-border-radius:22px; border-radius:22px; cursor:pointer; } #twitterx { background: #EEF9FD; padding: 10px; text-align:center; border: 1px solid #C7DBE2; border-top: 0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type='text/javascript'> $(window).bind("load", function() { // Animate Top Value When Page Loaded Completed $('#box-message').animate({top:"50px"}, 1000); // Remove Mailbox When Close Button On Click $('a.close').click(function() { $(this).parent().fadeOut(); return false; }); }); </script> <div id='box-message'> <!-- HTML Start --> <center><a class="murub">Please Bantu Saya Like Ini</a></center> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Cirebon.Chikafe?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe> </center> <!-- HTML End --> <br/> <div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=fujianto21&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div> <div style="text-align: center;"> <a href="http://fujianto21-chikafe.blogspot.com/2013/10/cara-membuat-fanspage-melayang-di-blog.html" target="_blank">Get This Widget</a></div> <a class='close' href='#'>&times;</a> </div>

Keterangan :

Ganti kode yang bewarna hijau dengan kata – kata anda.

Ganti kode yang bewarna merah dengan link (URL) fans page facebook anda.

Ganti kode yang bewarna biru dengan username twitter anda, misalkan usernamenya adalah @Rudi_BangRud, maka nantinya hanya di tulis Rudi_BangRud.

5. Sekarang tekan simpan.

*Catatan : Jangan ada yang diganti kodenya selain keterangan diatas.

Sekarang cobalah lihat blog anda, apakah sudah berhasil atau tidak. Nah, keren sekali bukan? Saya rasa cukup sekian tutorial kali ini, semoga bermanfaat bagi anda.