Membuat Pop Up Like Box Facebook Auto Hide di Blogspot

Untuk membuat pop up like box facebook auto hide di blogspot seperti gambar di atas syaratnya sobat harus sudah punya Fans Page sendiri. Saya rasa sobat pasti sudah bisa membuat sebuah halaman di facebook, jadi pada sesi ini ga akan dijelaskan. Ok... langsung aja kita mulai

Cara membuatnya:

• Login ke Blogger
• Masuk Tab Rancangan => Edit HTML => Lanjutkan => centang Expand Template Lengkap
• Cari tag </Head> Tambahkan script Jquey dibawah ini tepat di atasnya. Jika sebelumnya sobat sudah memasang script jquery ini maka abaikan aja.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"/>

• Simpan Template
• Masuk ke Tab Tata Letak
• Tambahkan gadget HTML/JavaScript, kemudian masukan script di bawah ini

 <script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".bdslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.bdslikebox{background: url("http://i1336.photobucket.com/albums/o649/aghasgennaga/bdfacebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.bdslikebox div{border:none;position:relative;display:block;}
.bdslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.bdslikebox span a{color: gray;text-decoration:none;}
.bdslikebox span a:hover{text-decoration:underline;}
</style>
<div class="bdslikebox" style="">
    <div>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FGennagasoft%3Fref%3Dtn_tnmn&amp;width=270&amp;height=290&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=red&amp;stream=false&amp;header=true&amp;appId=293184024127120" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:270px; height:290px;" allowtransparency="false"></iframe><span><a href="http://gennagasoft.blogspot.com">Gennagasoft</a></span>
    </div>
</div>

• Tulisan berwarna merah diganti dengan code fans page sobat yang didapat dari facebook developer.

Selesai dan semoga bermanfaat!!!  

Posted in: Blog,Tutorial