Cara Membuat Pop Up Like Box Fanpage Facebook di Blogger

Fanpage facebook atau halaman facebook biasanya di gunakan agar kita lebih dekat dengan para penggemar kita. Dalam sebuah blog biasanya kita memiliki fanpage facebook sendiri, namun tidak terlalu banyak like. Untuk itu pada artikel kali ini saya akan membahas mengenai cara membuat pop up like box fanpage facebook di blogger.

Untuk menambah like fanpage facebook kita tidak hanya harus memposting saja di fanpage yang kita miliki.

Kita juga bisa menggunakan pop up yang di gabungkan dengan fanpage facebook

Pop up sesungguhnya tidaklah sangat di minati oleh para pengunjung.

Untuk itu kita harus hati-hati dalam memasannya, dan jangan sampai berlebihan.

Hal negatif yang akan di dapatkan bila kita terlalu sering atau masif memperlihatkan pop up ini, kita malah akan kehilangan visitor.

Sedikit cerita, script ini saya dapatkan dari sebuah website.

Dan saya pernah membahasnya di blog lama saya, jika kalian tahu tutorial umum.

Tampilannya juga sudah saya modifikasi agar berbeda dengan website lain, kurang lebih tampilannya seperti ini.Hasil Telusur Hasil web Cara Membuat Pop Up Fanpage Facebook Responsive di Blog

Cara Membuat Pop Up Like Fanpage Facebook di Blogger

  1. Langkah pertama masuk ke akun Blogger kalian.
  2. Masuk ke menu Tata Letak » klik Tambahkan Gadget di sidebar.
  3. Kemudian klik tanda + pada HTML/JavaScript » biarkan kolom Judul kosong » masukan script di bawah ini pada kolom Konten.
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
    <style type="text/css">
    #fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}
    #fbox-display {
        border: 5px solid #1194f2;
        width: 339px;
        height: 212px;
        position: absolute;
        top: 30%;
        left: 37%;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #fbox-button {
        float: right;
        cursor: pointer;
        position: absolute;
        right: 5px;
        top: 1px;
    }
    #fbox-button:before {
        content: "x";
        padding: 1px 7px 4px 7px;
        background: #ff4e4e;
        color: #fff;
        font-weight: 700;
        font-size: 10px;
        border-radius: 10px;
    }
    #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:0px}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
    //]]>
    </script>
    <script type='text/javascript'>
    jQuery(document).ready(function($){
    if($.cookie('popup_facebook_box') != 'yes'){
    $('#fbox-background').delay(5000).fadeIn('medium');
    $('#fbox-button, #fbox-close').click(function(){
    $('#fbox-background').stop().fadeOut('medium');
    });
    }
    $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
    });
    </script>
    <div id='fbox-background'>
    <div id='fbox-close'>
    </div>
    <div id='fbox-display'>
    <div id='fbox-button'>
    </div>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
    href=https://www.facebook.com/hendriblog/120574614736021&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
    style='border: none; overflow: hidden; background: #fff; width: 339px; height: 212px;'></iframe>
    </div>
    </div>
  4. Ganti terlebih dahulu link https://web.facebook.com/hendriblog yang ada di script di atas, dengan link fanpage facebook kalian.
  5. Selanjutnya untuk merubah warna sisi widget, silahkan ganti kode #1194f2 dengan warna yang kalian inginkan.
  6. Jika sudah selesai, klik Simpan.Cara Membuat Popup Like Facebook di Blog - Blog Regi Brader

Demi kepentingan pengunjung kalian, saya sudah mengatur Pop Up Like Box Facebook ini hanya akan tampil 1𝗑 pada setiap pengunjung.

Jadi pengunjung kalian tidak akan terganggu dengan adanya pop up like fanpage facebook ini.

Baca juga: Cara Membuat Widget Random Post (Artikel Acak) di Blog

Dimana bisa menggambil link fanpage facebook?

  1. Langkah pertama masuk ke akun Facebook kalian melalui browser.
  2. Buka fanpage facebook yang kalian miliki.
  3. Copy link fanpage yang ada di kolom link.Cara Membuat Pop Up Like Facebook di Blog

Dimana bisa mencari code warna?

Buka link https://htmlcolorcodes.com/.

Silahkan kalian atur dan cari warna yang kalian inginkan.

Untuk mengambilnya, kalian copy code yang ada di samping teks Hex.Cara Pasang Widget Pop Up Like Fanpage di Blog

Penutup

Demikian artikel dari saya mengenai cara membuat atau memasang pop up like box fanpage facebook di blogger.

Jangan lupa share artikel ini agar bermanfaat untuk orang lain.

Jika ada pertanyaan, silahkan masukan ke dalam kolom komentar di bawah.

Tinggalkan komentar