Cara Membuat Like Box Facebook Auto Hide Pada Blog

Cara Membuat Like Box Facebook Slide Pada Blog
Cara Membuat Like Box Facebook Auto Hide Pada Blog - Sobat blogger, setelah beberapa waktu lalu saya share artikel mengenai bagaimana Cara Membuat Fanspage Facebook Untuk Blog, sekarang saya akan share artikel mengenai cara Membuat Like Box Facebook Auto Hide Pada Blog. Karena adanya permintaan dari sobat blogger yang menanyakan bagaimana cara membuat like box facebook auto hide, berikut saya kasih langkah-langkah bagaimana cara membuatnya.


Sebelum masuk ke langkah-langkah pembuatannya ada baiknya saya jelaskan sedikit mengenai like box facebook auto hide ini. Mungkin dari sobat blogger ada yang bertanya apa manfaat dan kegunaan like box facebook ini. Kegunaannya selain dapat menambah jumlah pengikut pada blog sobat, like box facebook ini juga bermanfaat untuk mengefisienkan halaman blog sobat agar lebih terlihat menarik dan tertata rapi.



Oke mungkin cuma itu yang bisa saya jelaskan mengenai like box facebook auto hide ini. Jika ada dari sobat blogger yang mau menambahkan silahkan ditambahkan. Baik, daripada berlama-lama lagi berikut langkah-langkah dalam membuat Like Box Facebook Auto Hide :


  • Masuk ke akun blog sobat.
  • Pilih Template =>> Edit HTML
  • Cari kode </head> Biar cepat gunakan Ctrl+F di kotak Edit HTML.
  • Jika sudah ketemu Copy kode dibawah ini kemudian Paste kode tersebut tepat diatas kode </head>

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

  •  Kemudian Simpan Template.

Keterangan : Jika sobat sudah memiliki kode tersebut di template, kode diatas ini tidak usah di copy. Langsung ikuti langkah dibawah ini.

  • Pilih Tata Letak.
  • Kemudian Pilih Add Gedget / Tambah Gedget.
  • Pilih HTML/Javascript.
  • Kemudian Copy kode dibawah ini.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{
background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;
}
.floatinglikebox div{
border:none;position:relative;display:block;
}
.floatinglikebox span{
bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;
}
.floatinglikebox span a{
color: #808080;text-decoration:none;
}
.floatinglikebox span a:hover{
text-decoration:underline;
}
</style>
<div class="floatinglikebox" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Mari-Berbagi/621944211167293&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://mari-berbagi244.blogspot.com/2013/04/cara-membuat-like-box-facebook-slide.html" target="_blank">.:Get Widget:.</a>
</span>
</div>
</div>

  • Paste Kode diatas ke widget HTML/Javascript.
  • Ganti kode yang berwarna Merah dengan URL Fanspage Facebook sobat.
  • Simpan dan lihat hasilnya.

Sekian artikel mengenai Cara Membuat Like Box Facebook Auto Hide Pada Blog. Semoga artikel ini berguna dan bermanfaat bagi sobat yang membutuhkan. Jika ada yang kurang jelas atau mengalami kesulitan dalam pembuatan, silahkan berkomentar di kolom komentar atau di chatbox. Salam Blogger.

Ditulis Oleh : Rosby Pranajaya M. Nandjan ~ Mari Berbagi

Mari Berbagi Sobat sedang membaca artikel tentang Cara Membuat Like Box Facebook Auto Hide Pada Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya


Silahkan masukan Email sobat untuk mendapatkan update artikel terbaru di blog ini :

Delivered by FeedBurner




9 komentar:

  1. Thanks Gan Ini bermanfaat dan terbukti bisa dipraktekan. (y)

    BalasHapus
  2. cara ini apa bisa digunakan untuk akun follow twiter gan?

    BalasHapus
  3. masih sob atas tutorialnya + scripnya . . .

    BalasHapus
  4. kalau autohide dari bawah keatas gmn caranya ya mas?

    BalasHapus
  5. makasih infonya gan

    WWW.GIRIBIG.COM

    http://adutburza.blogspot.com/

    BalasHapus
  6. mantap... GAN. tararengkyu...

    BalasHapus
  7. makasih infonya
    http://jajan-dan-jalan-jalan.blogspot.co.id/

    BalasHapus

Silahkan Sobat tinggalkan komentar dengan kata - kata yang Baik, Bijak dan Sopan.

Yang tidak diperbolehkan dalam berkomentar :
1. Komentar yang mengandung unsur SARA.
2. Komentar yang berbau PORNO.
3. Komentar Saling CACI MAKI.
4. Komentar yang Memasukan LINK IKLAN dan LINK AKTIF.

Saya harap Sobat dapat mematuhi aturan berkomentar yang saya buat. Jika ada komentar yang melanggar ketentuan tersebut diatas dan dianggap spam akan Saya Hapus. Atas kerjasama sobat sekalian saya ucapkan banyak Terima Kasih. Salam Sukses selalu untuk Sobat dan Salam Blogger.