Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Cara Membuat Popup Like Facebook di Blog

Memasang widget Like Facebook di Blog adalah cara yang paling banyak digunakan dan diandalkan untuk memperbanyak orang yang menyukai halaman Blog di Facebook. Widget ini pun dipasang dengan berbagai cara dan posisi. Ada yang terus menetap di suatu tempat, sticky/menempel, like facebook melayang, show hide di samping Blog, dan lain-lain. Beberapa cara pemasangan widget tersebut ada yang memiliki sisi negatif, yaitu mengganggu pengelihatan pengunjung yang ingin membaca artikel di Blog kita. Saya akan memberikan salah satu cara pemasangan widget Like Facebook yang mungkin akan menjadi solusi dari permasalahan tersebut, yaitu dengan membuat dan memasang Popup Like Facebook.

Popup Like Facebook di Blog

Kalau mendengar nama popup pasti sobat menilai sesuatu yang mengganggu, iya kan? Memang widget ini masih mengganggu pengelihatan pengunjung Blog. Namun tidak akan terlalu mengganggu karena widget ini hanya muncul satu kali untuk satu Pengunjung Unik dalam waktu yang telah ditentukan. Bisa 3 hari sekali, 7 hari sekali, 30 hari sekali, dan lain-lain. Jadi selain akan menambah Likers Fans Fage Facebook kita karena terkesan membujuk untuk melakukan Like, dengan Popup Like Facebook ini juga setidaknya pengunjung tidak akan kesal dengan keberadaan popup ini.

Untuk tampilanya sendiri, widget ini akan muncul beberapa waktu yang telah ditentukan setalah halaman Blog selesai dimuat. Widget ini akan muncul di bagian muka monitor dengan bagian selain widget akan terlihat menjadi gelap. Tidak seperti sebagian widget popup Like Facebook yang akan tertutup hanya jika pengunjung melakukan like, widget ini mempunyai kelebihan lain. Yaitu widget ini dilengkapi dengan tombol Close. Pengunjung diberi 2 pilihan, apakah akan klik Like atau Close. Pengunjung bebas menentukan untuk menyukai halaman Facebook kita atau tidak.

Popup Like Facebook di Blog

Cara Membuat Popup Like Facebook di Blog

  • Login ke akun Blogger sobat.
  • Pada bagian Tata Letak, klik Tambahkan Gadget di posisi mana pun.
  • Pilih Mode HTML/Javascript dan masukan script di bawah ini.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
#fanback {
  display:none;
  background:rgba(0,0,0,0.8);
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:99999;
}

#fan-exit {
  width:100%;
  height:100%;
}

#fanbox {
  background:white;
  width:420px;
  height:270px;
  position:absolute;
  top:58%;
  left:63%;
  margin:-220px 0 0 -375px;
  -webkit-box-shadow: inset 0 0 50px 0 #939393;
  -moz-box-shadow: inset 0 0 50px 0 #939393;
  box-shadow: inset 0 0 50px 0 #939393;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: -220px 0 0 -375px;
}

#fanclose {
  float:right;
  cursor:pointer;
  background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;
  height:15px;
  padding:20px;
  position:relative;
  padding-right:40px;
  margin-top:-20px;
  margin-right:-22px;
}

.remove-borda {
  height:1px;
  width:366px;
  margin:0 auto;
  background:#F3F3F3;
  margin-top:16px;
  position:relative;
  margin-left:20px;
}

#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
  color:#80808B;
  font-size:10px;
  margin: 0 auto 5px auto;
  float:center;
}
 </style> 
 <script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
  // key and at least value given, set cookie...
  if (arguments.length > 1 && String(value) !== "[object Object]") {
    options = jQuery.extend({}, options);
    if (value === null || value === undefined) {
      options.expires = -1;
    }
    if (typeof options.expires === 'number') {
      var days = options.expires, t = options.expires = new Date();
      t.setDate(t.getDate() + days);
    }
    value = String(value);
    return (document.cookie = [
      encodeURIComponent(key), '=',
      options.raw ? value : encodeURIComponent(value),
      options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
      options.path ? '; path=' + options.path : '',
      options.domain ? '; domain=' + options.domain : '',
      options.secure ? '; secure' : ''
    ].join(''));
  }

  // key and possibly options given, get cookie...
  options = value || {};
  var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
  return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>

<script type='text/javascript'>
jQuery(document).ready(function($){
  if($.cookie('popup_facebook_like') != 'yes'){
    $('#fanback').delay(5000).fadeIn('medium');
    $('#fanclose, #fan-exit').click(function(){
      $('#fanback').stop().fadeOut('medium');
    });
  }
  $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
  <div id='fan-exit'></div>
\
  <div id='fanbox'>
\
   <div id='fanclose'></div>
   <div class='remove-borda'></div>
   <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/braderblog&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
  </div>
</div> 

  • Ubah https://www.facebook.com/braderblog dengan ID Halaman Facebook sobat.
  • Jika tidak diubah, widget ini akan muncul 5 detik setelah halaman Blog selesai dimuat. Ubah angka "5000" di dalam kode $('#fanback').delay(5000).fadeIn('medium'); . 1 detik = 1000, 5 detik = 5000, 10 detik=10.000.
  • Jika tidak diubah, widget ini akan muncul 7 hari sekali untuk satu pengunjung unik. Jika ingin mengubahnya, ubah angka "7" di dalam kode $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 }); . 1 hari = 1, 5 hari = 5, 7 hari = 7.  
  • Banyak kode tampilan yang bisa sobat edit, salah satunya pada kode yang saya beri warna biru. Silakan berkreasi. 
  • Jika telah selesai, klik Simpan.
Cukup sekian sedikit ilmu yang bisa saya sampaikan kali ini, semoga bermanfaat.
Silakan berikan komentar baik yang sudah berhasil atau pun masih gagal.

Artikel terkait : Cara Membuat Popup Like Facebook di Blog

Artikel Blog Regi Brader Lainnya :

57 komentar:

  1. om regi, klo buat kaya punya om yang ada tulisan gini gmana??

    Jika anda ingin membagikan artikel ini, silakan tulis ulang dengan narasi sendiri. Jika ingin copy paste secara keseluruhan jangan lupa meyertakan link di bawah ini sebagai sumbernya.

    dibantu ya om

    ReplyDelete
    Replies
    1. Kalau punya saya, saya tidak tau cara buat-nya. Itu sudah bawaan dari Template, saya hanya edit kata-katanya.
      Kalau sobat ingin buat, sobat bisa kunjungi halaman ini "http://regibrader-free.blogspot.com/2013/03/cara-membuat-permalink-di-blog.html"

      Delete
  2. thanks brader blog. popup like facebook nya bagus. saya mohon izin pakai di http://www.tokosoftware.blogspot.com

    ReplyDelete
  3. wah terimakasih banyak mas telah membantu saya membuat pop up facebook ini. kalau agan tidak keberatan kunjungi lah situs saya sederhana ini http://netiplisiskom.blogspot.com/

    ReplyDelete
  4. Thanks bang regi jadi nambah pengetahuan nih. mohon izin ya saya copy di blog saya http://dendy-site.blogspot.com.Udah pakai sumber ko

    ReplyDelete
  5. Om, kalau bikin seperti blog http://adf.ly/e6kSF ini, kaya gimana ya, mohon bimbingannya, tanks

    ReplyDelete
  6. thanks ya jangan lupa kunjungan balik
    http://94fadelarya.blogspot.com

    ReplyDelete
  7. Replies
    1. ane praktekin dulu sob, sebelumnya thx atas artikelnya
      giribig.com
      blog.giribig.com
      idcheat.com
      duniagame.info

      Delete
  8. mas regi kalo like boxnya supaya keluar setiap kunjungan gimana caranya ...?

    ReplyDelete
    Replies
    1. Ada dalam keterangan pengeditan. Ubah angka 7 menjadi angka 1. Jadi widget ini akan muncul 1 hari sekali untuk satu pengunjung.

      Delete
    2. oh jd 1x1 pngunjung, pantesan ko pas buka halaman yg laen ga muncul kirain po upnya ga support sm template blognya. jd klo mau muncul stiap buka page lain gmn gan?

      Delete
    3. kalo setiap beralih halaman tidak bisa, karena setelanya tidak ada. Maksimal 1 hari sekali...

      Delete
    4. kalau mau muncul trs stiap buka page, hapus script ini :

      , { path: '/', expires: 7 }

      Delete
  9. info yang bermanfaat.. terima kasih

    ReplyDelete
  10. Gan kenapa kalau saya pasang di blog saya Slide show-nya malah hilang

    ReplyDelete
  11. infonya brmanfaat tentang cara memasang like box facebook melayang di blog

    ReplyDelete
  12. makasih mas widgetnya dan berhasil lagi thanks http://fvker-project321.blogspot.com/

    ReplyDelete
  13. om kok popup nya gaada gambarnya?

    ReplyDelete
  14. Gan aku juga sama pendapatnya Ahmad Panji : Gan kenapa kalau saya pasang di blog saya Slide show-nya malah hilang

    ReplyDelete
  15. Wahh.. ini dia yang ane cari.
    Widget ini sangat bermanfaat untuk menambah like fans page kita :)

    ReplyDelete
  16. mantappp gannnnn terimakasihhhhh... ini dia hasilnya gannn Blog ane

    ReplyDelete
  17. berhasil gan... nongol dah fan page blog ane ... kalo mau liat hasil tongolanya http://nighto13.blogspot.com/

    ReplyDelete
  18. thx om ehehehe bisa . setelah saya utek utek . ga harus 1 hari sekali ternyata .
    makasi inpohnya :)

    ReplyDelete
  19. www.suryaebony.co.vu
    kerajinan kayu hitam asli sulawesi

    ReplyDelete
  20. mudah di pahami dan hasilnya bagus bisa lihat contohnya http://www.bisniskaraoke.com/

    ReplyDelete
  21. Terimakasih gan, kinjung balik aja :)
    s.id/5Fz

    ReplyDelete
  22. mantap gan, berhasil cuma belum diedit resize nya aja gan hehe
    kunjungi juga http://di-sehat.blogspot.com/

    ReplyDelete
  23. wah makasih mas, work dan langsung meluncur, kunjungi juga di jhonmiduk8.blogspot.com ya, terimakasih, sukses untuk anda

    ReplyDelete
  24. Thanks gan.,, kunung balik yah.... http://www.mirwans.com/

    ReplyDelete
  25. kalau pingin tambah tulisan semisal MAAF BANTU SHARE YA DENGAN KLIK LIKE ATAU KELUAR DENGAN KLIK TANDA SILANG bisa ndakya

    ReplyDelete
  26. pop saya tidak mau keluar kenapa ya? mohon bantuan nya gan

    ReplyDelete
  27. yang muncul dari bawah ato dari samping ga ada ya gan?jadi kaya melayang gitu..blog gue

    ReplyDelete
  28. sangat membantu, terimah kasih mass, good job

    ReplyDelete
  29. mantap bgt, seharus nya dari kemarin kesini aja ya

    ReplyDelete
  30. sipp.. work di blog aq mas https://solusicaratepat.blogspot.co.id/ , Tapi kalau misalnya aq mau nambah G+,caranya gimana mas ?

    ReplyDelete
  31. lumayan nambah pengetahuan nih. ditunggu kunbalnya hehe
    http://muhammadroyyan96.blogspot.co.id

    ReplyDelete
  32. berhasil dengan sangat baik...
    terima kasih..

    www.uchiha-uzuma.com

    ReplyDelete
  33. tks mas atas tipsnya.

    ijin dicopy scriptnya ke kawananinfo.blogspot.com

    ReplyDelete
  34. Mancap :D

    kunjungi https://syariforganizer.blogspot.co.id

    ReplyDelete
  35. masih bingung gan , koq di pisah2 sih gan ? maaf saya newbe

    ReplyDelete
  36. Anjer, work 100 % Brader

    saya udah keluar masuk blog dan baru berhasil berkat blog ini

    Thanks Brader :D mampir di blog kecil saya ya ultimateblog28.blogspot.com

    ReplyDelete
  37. makasih gan,, 100% work..

    kunjungi : tubiantocompile15(dot)blogspot(dot)co(dot)id

    ReplyDelete
  38. kalo membuat klik like saja untuk close gimna gan?

    ReplyDelete
  39. Simple tapi sangat mengena sekali caranya , like it :)

    ReplyDelete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved