Hari ini saya akan mecoba share atau update postingan kembali di blog tercinta ini yaitu blog O.W alias Oto Website, hehehe . . .
Dan kali ini saya akan mencoba share tentang widget Facebook yang saya beri judul Cara Membuat Facebook Like Auto Hide Di Blog - V2. Sebelumya blog ini pernah membahas Cara Membuat Facebook Like Auto Hide Di Blog yang memanfaatkan bantuan dari jQuery, kali ini juga sama kita juga menggunakan bantuan jQueri tapi widget kali ini lebih simple dan lebih mudah sedikit memasangnya.


Widget ini sebenarnya adalah gabungan dari empat wigets yang saya pisahkan menjadi satu widget yang khusus untuk facebook saja, untuk postingan articles mendatang saya pasti akan share empat widget gabungan dari wiget ini.
Untuk lebih jelasnya tentang widget ini sobat bisa lihat dulu demonya dulu dengan menekan tombol berikut ini:


Nah sudah jelaskan? kalo begitu sekarang mari kita bahas Cara Membuat Facebook Like Auto Hide Di Blog - V2 ini :

1. Login ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget (saya sarankan di bagian paling bawah dan jangan di beri judul)

3. Lalu sobat pilih HTML/Java Scrip ➨ Setelah itu copy kode berikut dan paste atau letakkan di dalamnya!

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetB7sC2Qxt1bbb35W2UgVowOtusCPETXL-A3193iqgh0eTPLfSIzAMz1mvoabvPKBoEv5WfaySI8ba90uqUmLF-EwEPA8A-OJOilfkmmFFKMUYWGKhkItS1YlLZuD6q7LoU7sw5lH3ac/s1600/otowebsite.blogspot.com-facebook.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdekrif&&width=200&height=348&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe></div></div></div>

Ganti dekrif dengan url facebook fans page sobat.
Contoh url facebook fans page Oto Website adalah "http://www.facebook.com/dekrif" maka cukup ambil url belakangnya saja ya itu "dekrif"

4. Lalu simpan.

Selesai !

Sekarang sobat bisa lihat sendiri hasilnya pada blog sobat!

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan komentar/tanggapan sobat tentang postingan/articles di atas!

Posting Komentar Blogger Disqus

  1. SAYA NYERAH KLAU BUAT Facebook Like Auto Hide Di Blog - V2 SELALU GAGAL TRUS,,,TLNG KSH PETUNJUK KA RIF

    BalasHapus
  2. @rama banten Rb Anda ksulitan d bgian mnanya? di situ kan sudh sya jlaskan caranya!

    BalasHapus
  3. Thanckzzzzzzzzzz veryyy muchhhhh Visit back http://www.zlayerkiller.blogspot.com/

    BalasHapus
  4. terimakasih ilmu nya berguna bgt ^^

    fisit my blog ya
    http://amikboekittinggi.blogspot.com/

    BalasHapus
  5. Nice INfo, Kunjungan Baliknya d'tunggu dan jangan lLupa Follow

    BalasHapus
  6. thanks sob udah share sangat bermanfaat...

    BalasHapus
  7. sipp..thanks sob,,,udah qw pasang triknya...

    BalasHapus
  8. Bang bro setiap orang yg ngelike..
    kan seharusnya gambarnya poto profil nya 1
    tapi ini ada 2
    setiap orang muncul poto profilnya ada dua
    liat disini http://nawwafcom.blogspot.com/

    BalasHapus
  9. @nawwaf gokilSaya telah melihat blog Anda.
    Tapi di sini Saya tidak menemukan gambar profil yang lebih dari 1, seperti maksud Anda!

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top