Cara membuat Widget Facebook Popup Like Box Blogger

Widget Facebook Popup Like Box adalah widget yang akan sangat membantu kita untuk mendapatkan Like dari Pengunjung untuk FanPage kita di Facebook. Sebagian blogger/visitor berpendapat bahwa Popup Widget Facebook Popup Like Box ini sangat mengganggu namun popup kali ini akan merubah pendapat tersebut karena widget ini hanya akan muncul sekali saja, yaitu ketika pengunjung pertama kali mengunjungi Blog kita. Selanjutnya tidak akan muncul lagi dengan catatan bahwa penggunjung menggunakan komputer/laptop/tablet/hp dan dengan  browser yang sama. Jadi, widget ini tidak akan terus muncul setiap pengunjung sehingga dapat mengganggu kenyamanan pengunjung.

Cara membuat Widget Facebook Popup Like Box Blogger
Widget Facebook Popup Like Box Blogger

Bagaimana cara memasang Widget Facebook Popup Like Box? 

Berikut cara pasangnya:

Langkah Pertama, Memasang Widget Facebook Popup Like Box ke Blog.
  1. Login ke Blogger.
  2. Lanjut ke Dashboard >> Tata Letak.
  3. Klik Link / Tombol "Tambahkan Gadget".
  4. Pilih widget HTML/Javascript.
  5. Copy semua Kode di Bawah ini  :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></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 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_user_login') != 'yes'){
    $('#fanback').delay(30000).fadeIn('medium');
    $('#fanclose, #fan-exit').click(function(){
    $('#fanback').stop().fadeOut('medium');
    });
    }
    $.cookie('popup_user_login', '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/koodipc&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><center>
    <span id="linkit"><a href="http://koodipc.blogspot.com" target="_blank">Widget Facebook </a></span></center>
    </div>
    </div>
  6. Paste di Widget HTML / JavaScript. Jangan dulu Di Simpan Karena Masih Ada Langkah Kedua...
Langkah Kedua, Merubah beberapa Kode.
  1. Ganti https://www.facebook.com/koodipc dengan alamat FanPage kamu.
  2. .delay(3000) Ganti Angka 3000 untuk merubah delay widgetnya (delay = detik kapan munculnya widget setelah halaman selesai dimuat). 1 detik = 1000 jadi, 3000 = 30 detik.
  3. Untuk merubah Widget agar tidak hanya Muncul Sekali tetapi akan muncul di setiap saat Halaman di Muat. Cari dan Hapus Kode ini :
    $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
  4. Simpan. dan Selesai.
Perhatian : Widget Facebook Popup Like Box Blogger ini hanya akan muncul sekali (*), jika Temen - temen blogger ingin melihatnya lagi untuk melihat apakah widget ini sudah bekerja atau belum, bersihkan Cookie Browser terlebih dahulu, dan Reload Halaman Blognya. Maka widget tersebut baru bisa muncul kembali.Selamat berkreasi. 

Catatan : (*), Langkah ke dua poin ke tiga

21 Comments

avatar

Nice Post
Go Back to my Blog
gilangprf.blogspot.com

avatar

gak work gan? ane udah terapin! ane coba yg lain dari situs orang bule work tp lemot bgt gak muncul2 tanpilanNya

avatar

Bagus Gan Dan Patut Dicoba Mampir Juga Di Blog Saya :
http://narutolovers75.blogspot.com - Download Video Naruto Terbaru Disini
http://duniamusik75.blogspot.com - Blog Untuk Download Lagu Mp3

avatar

oke mas..., kebetulan sy jg fans naruto

avatar

seharusnya blh deh gan, coba ikutin ulng tutor d atas....

avatar

mantap dah artikelnya saya mau coba mas

http://acemaxs31.com/
http://apotekgumilar.com/
http://acemaxs86.com/

avatar

oke gan,, thanks kunjungannya...

avatar

langsung di coba gan di pasang thanks ya sangat bermanfaat nih :)
visit my blog ya : http://ridwanip.blogspot.com

avatar

Kok gak bisa di pasang di blog saya gan. tolong dong
http://www.garasimovie.com

avatar

terima kasih banyak, blog koodipc sangat membantu saya :)
saya pasang di http://www.muslimahonline.net

avatar

Benar sekali Admin Jafar. Kadang sebagai pengelola blog, kita sendiri pun akan terasa terganggu bila memakai widget seperti pop up ini. Apalagi

Postingan bagus Min.

avatar

sama-sama. terima kasih juga atas kunjungannya..

avatar

ijin coba mas,,,
mudahan bisa kayak blog mas :D :D :D

jangan lupa mampir di web sya
www.bibitberkah.com/ tempat cari bibit dan tanaman hias beserta stockist resmi produk NASA

thanks sebelumnya

beast regards

avatar

Kalau yang model ada fb,google plus dan twitter ada gak ya?? makasih

avatar

thank you .. sangt membantu ...

avatar

malam agan...mau tnya nh?klo hasil psotingan g bsa ke indek google kesalahanya d mn ya?thank u

avatar

Sangat bermanfaat sob

Kunjungi balik gan http://www.masriaudi.com/
InshaAllah apa yang anda cari ada disana :)

avatar

Fail gan di blog ane .. mungkin perlu edit html Template
tutornya kurang tuh

avatar


Sungguh informasi yang sangat bagus, semoga tetap update terus min..
terima kasih

avatar

samasama gan, makasih kunjungannya

avatar

terimakasih infonya min..

Jadilah pengunjung yang baik hati, selalu nitip komentar yang sopan..!!

Click to comment