February 15, 2014

Cara Membuat Kotak Popup Facebook Like Page di Blogspot

February 15, 2014

 Kotak Popup Facebook Like Page
Cara Mudah Memasang Kotak Like FansPage Facebook di Blog Blogspot.

MEMASANG Fanspage Facebook Like Box "Popup" alias Kotak Like FB yang muncul atau melayang di halaman blog adalah salah satu tips & trik untuk meningkatkan "Likeer" Fans Page.

>>> Lihat DEMO

Jika Anda berminat memasang Kotak Popup Facebook Like Page di blog Anda, seperti tampak dalam ilustrasi posting ini, dan seperti dalam demo, silakan ikuti langkah sangat mudah di bawah ini.

Cara mudah membuat Kotak Popup Like Box FansPage Facebook di Blogspot berikut ini CB kopas dari Helper Blogger. Disebut "mudah" karena gak usah masuk ke template. Cukup ke "Layout" seperti menambah widget biasa.

Cara Mudah Membuat Kotak Popup Facebook Like Page di Blogspot

1. Layout > Add a Gadget > pilih "Edit HTML/JavaScript"
2. Kosongkan judul widget.
3. Copy dan Paste kode berikut ini di kolom "Content".

<!-- FB FANS PAGE LIKE BOX -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
<style>
    #hbfanback {
        display: none;
        background: rgba(0, 0, 0, 0.8);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
    }
    #hbfan-exit {
        width: 100%;
        height: 100%;
    }
    #hbfanbox {
        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;
    }
    #hbfanclose {
        float: right;
        cursor: pointer;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzSin9CvLp_gFhuYkMGr-s9POiL6-wRfPhC7_k6R5q1c6WSxRGTurCPWUazjy3BU8Mg94YCOj16VDnXeIisaQOBscwTEPT4iNyDoCZ97ZD6LXiqSD8jFbHSBf70OU8yqNqRqCkajuX6M/s1600/hb-fanclose.png) repeat;
        height: 15px;
        padding: 20px;
        position: relative;
        padding-right: 40px;
        margin-top: -20px;
        margin-right: -22px;
    }
    .hbremove-borda {
        height: 1px;
        width: 366px;
        margin: 0 auto;
        background: #F3F3F3;
        margin-top: 16px;
        position: relative;
        margin-left: 20px;
    }
</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') {
            $('#hbfanback').delay(100).fadeIn('medium');
            $('#hbfanclose, #hbfan-exit').click(function() {
                $('#hbfanback').stop().fadeOut('medium');
            });
        }
        $.cookie('popup_user_login', 'yes', {
            path: '/',
            expires: 7
        });
    });
</script>
<div id='hbfanback'>
    <div id='hbfan-exit'></div>
    <div id='hbfanbox'>
        <div id='hbfanclose'></div>
        <div class='hbremove-borda'></div>
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fcbblogger&amp;width=340&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:258px;margin-left: 8%;" allowtransparency="true"></iframe>
    </div>
</div>
<!-- FB FANS PAGE LIKE BOX -->

4. GANTI tulisan cbblogger dengan username Page Facebook Anda sendiri
5. Save!

PENTING!
  1. Jika kode script jQuery warna merah paling atas sudah ada di tempalet Anda, HAPUS! 
  2. Jika ingin Kotak Like Fans FB itu muncul setiap kali halaman dibuka, maka hapus kode warna biru (Not Recommended!)
Kini Kotak Like Fans Page Facebook Anda sudah muncul. Dijamin tidak ganggu pengunjung karena hanya muncul sekali. Tidak disarankan memunculkannya setiap kali halaman dibuka karena akan mengganggu kenyamanan pengunjung.

Good Luck!

Jangan lupa klik LIKE/SUKA Fans Page Forum Blogger Indonesia agar kita saling berbagi untuk meningkatkan traffic blog kita. Thanks!

Demikian Cara Membuat Kotak Popup Facebook Like Page di Blogspot. Muah 'kan? (http://www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

23 comments on Cara Membuat Kotak Popup Facebook Like Page di Blogspot

  1. Replies
    1. iya, punya CB sudah dihapus, ganggu soalnya :)

      Delete
  2. knapa ga ngefek ya mas ?
    kira kira masalahnya dimana ? . thx infona :)

    ReplyDelete
    Replies
    1. biasanya karena ada dua kode jquery min js, bentrok dia, hapus kode jquery min js yang ada di bawah kode < / style >

      Delete
  3. mas biyar saat popupnya muncul terus display belakangnya ke blok hitam transparan fimana ya?

    ReplyDelete
    Replies
    1. pilih kode DARK di setingan Facebooknya

      Delete
  4. mana ada ? capelah tutornya gimana coba

    ReplyDelete
    Replies
    1. kalo admin yang sering buka blog sendiri, jadi gak muncul, cba buka dengan browser lain atau clear history / browsing data

      Delete
  5. kagak ngefek bang udah dihapus codenya.

    ReplyDelete
  6. saya pakai template dinamis yg ada di bloger
    pop up facebook kok gx bisa ya
    live facebook jg gx bisa

    ReplyDelete
  7. klau udah muncul terus udah di like, misalnya sama satu orang, nah gimana caranya biar popup facebook ini tidak muncul untuk orang yang udah ngelik itu?

    ReplyDelete
    Replies
    1. tips di atas memang begitu, hanya sekali muncul, silakan baca lebih teliti, jangan copas kode doang :)

      Delete
  8. thank u gan, sudah ane pasang :D

    ReplyDelete
  9. Mas, saya coba ganti kode fp jd gambar. Cara menghilangkan kotak yang buram yang ada itu g mn ya? Apakah popup nya g bakalan muncul lagi oleh pengunjung dengan ip yang sama, atau ada jedah waktu ketika pengunjung tersebut kembali lagi?

    ReplyDelete
    Replies
    1. sekali aja munculnya, yang sudah pernah kunjung tak akan lagi ngeliatnya

      Delete
  10. Terima Kasih Gan Masih Work 100000% Hehehe Walaupun Postingan Dari 2014 Tetep Bermanfaat aja :D

    ReplyDelete
    Replies
    1. Syukurlah... semoga likersnya tambah banyak

      Delete
  11. Replies
    1. WP mah gak ribet main kode, pake aja plugin, banyaaaak....

      Delete

Contact Form

Name

Email *

Message *