Membuat Facebook LikeBox Muncul Secara Tiba-Tiba

Huft setelah beberapa hari bingung mau update apa akhirnya ada ide juga hehehe, yap pada tutorial kali ini saya akan membagikan cara bagaimana membuat Kotak Like Fan Page yang muncul tiba2 seperti pop-up. Kamu tahu kan apa itu pop up, kalau kalian tidak tahu bisa kalian cari di google :p hehehe. Oke begini caranya :

1. Sign In Blogger.com

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript dan masukan kode CSS dibawah ini :

    <style>

    /*
       ColorBox Core Style:
       The following CSS is consistent between example themes and should not be altered.
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    /*


       User Style:
       Change the following styles to modify the appearance of ColorBox.  They are
       ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }
     

    #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVp8Ssi1bykBg8NTfrXSlMwaShyphenhyphenBbtV9GxT9HxYLX28TqfDMoOR4HjFjrfWNYmvDbId-SlzmbeBhq3bAyq-TJMyrqMEBt0sAflSlQYEVKvfm10X69nZ_bkl9g83SWqLj00pwsGXsrqOGQ/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8x_24PQk5HgwbyPhGFboeZAW8C8uNJt_BvT2dqYJtk-yGpnjZITR9w-AELfEtds-fRx6BMbrAr6hOyDtZmzF9WvOACnoblfkvRORKXsGkZv616xQg789B8gMex8KUfJY2K7kMaEpJzA/s400/border.png) repeat-x top left;}
         #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVp8Ssi1bykBg8NTfrXSlMwaShyphenhyphenBbtV9GxT9HxYLX28TqfDMoOR4HjFjrfWNYmvDbId-SlzmbeBhq3bAyq-TJMyrqMEBt0sAflSlQYEVKvfm10X69nZ_bkl9g83SWqLj00pwsGXsrqOGQ/s1600/controls.png) no-repeat -36px 0;}
         #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVp8Ssi1bykBg8NTfrXSlMwaShyphenhyphenBbtV9GxT9HxYLX28TqfDMoOR4HjFjrfWNYmvDbId-SlzmbeBhq3bAyq-TJMyrqMEBt0sAflSlQYEVKvfm10X69nZ_bkl9g83SWqLj00pwsGXsrqOGQ/s1600/controls.png) no-repeat 0 -32px;}
         #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8x_24PQk5HgwbyPhGFboeZAW8C8uNJt_BvT2dqYJtk-yGpnjZITR9w-AELfEtds-fRx6BMbrAr6hOyDtZmzF9WvOACnoblfkvRORKXsGkZv616xQg789B8gMex8KUfJY2K7kMaEpJzA/s400/border.png) repeat-x bottom left;}
         #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVp8Ssi1bykBg8NTfrXSlMwaShyphenhyphenBbtV9GxT9HxYLX28TqfDMoOR4HjFjrfWNYmvDbId-SlzmbeBhq3bAyq-TJMyrqMEBt0sAflSlQYEVKvfm10X69nZ_bkl9g83SWqLj00pwsGXsrqOGQ/s1600/controls.png) no-repeat -36px -32px;}
         #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVp8Ssi1bykBg8NTfrXSlMwaShyphenhyphenBbtV9GxT9HxYLX28TqfDMoOR4HjFjrfWNYmvDbId-SlzmbeBhq3bAyq-TJMyrqMEBt0sAflSlQYEVKvfm10X69nZ_bkl9g83SWqLj00pwsGXsrqOGQ/s1600/controls.png) repeat-y -175px 0;}
         #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVp8Ssi1bykBg8NTfrXSlMwaShyphenhyphenBbtV9GxT9HxYLX28TqfDMoOR4HjFjrfWNYmvDbId-SlzmbeBhq3bAyq-TJMyrqMEBt0sAflSlQYEVKvfm10X69nZ_bkl9g83SWqLj00pwsGXsrqOGQ/s1600/controls.png) repeat-y -211px 0;}
         #cboxContent{background:#fff; overflow:visible;}
             #cboxLoadedContent{margin-bottom:5px;}
             #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJe6THqfv9ukCRc1POv5iiZmM4uT1l4hEhf4EPe8dSzsQcstGsmyQalXkOPabtnxU4mxRYepvUiym7KX2mN4Vx4WQGzwOFG-cwqOwsqMALhrqDZMyfuTBRd0HQaro0spSUmt4FsuCHlsg/s400/loadingbackground.png) no-repeat center center;}
             #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVCtqWWYrnZeCNlJlev1YrKw_4726wnSgxHVGHVx-So55NjqhMBY_xaXbmivPmvsc05liCQuWFIbVA6aWBpHneMDzaF30ca0Xi8hUnPy9jEcH4s5siXHoUdlJca6_ns3GMUQV_Wt3hYbY/s400/loading.gif) no-repeat center center;}
             #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
             #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
             #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVp8Ssi1bykBg8NTfrXSlMwaShyphenhyphenBbtV9GxT9HxYLX28TqfDMoOR4HjFjrfWNYmvDbId-SlzmbeBhq3bAyq-TJMyrqMEBt0sAflSlQYEVKvfm10X69nZ_bkl9g83SWqLj00pwsGXsrqOGQ/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
             #cboxPrevious{left:0px; background-position: -51px -25px;}
             #cboxPrevious.hover{background-position:-51px 0px;}
             #cboxNext{left:27px; background-position:-75px -25px;}
             #cboxNext.hover{background-position:-75px 0px;}
             #cboxClose{right:0; background-position:-100px -25px;}
             #cboxClose.hover{background-position:-100px 0px;}
             .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
             .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
             .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
             .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}


    /*-----------------------------------------------------------------------------------*/
    /*   Facebook Likebox popup For Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
        text-decoration:none;
    }
    .box-title {
       color: #F66303;
       font-size: 20px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .box-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #subs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }
    </style>


    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

    <script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
       if (document.cookie.indexOf('visited=true') == -1) {
           var fifteenDays = 1000*60*60*24*30;
           var expires = new Date((new Date()).valueOf() + fifteenDays);
           document.cookie = "visited=true;expires=" + expires.toUTCString();
       $.colorbox({width:"400px", inline:true, href:"#subscribe"});
           }
    });
    </script>
        <!-- This contains the hidden content for inline calls -->
    
            <div style='display:none'>
       <div id='subscribe' style='padding:10px; background:#fff;'>
            <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
          <center>

  MASUKAN KODE JAVASCRIPT LIKE FANS PAGE KAMU DISINI

    </center>
    <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
    </div>
    </div>

NOTE : kamu ganti kode kode yang berwarna biru dengan kode HTML/Javascript Facebook Fanpage kamu, jadi sebelumnya kamu harus membuat halaman fans page-nya terlebih dahulu setelah itu kamu masukan ganti kode yang berwarna biru dengan kode HTML/Javascript kamu. Dan untuk mendapatkan kode HTML-nya kamu bisa kesini. Kamu juga bisa memasukan iklan kamu disitu loh, tinggal kamu edit saja hehe dan Di Mohon untuk tidak mengubah kode javascript yang berwarna biru untuk menghormati pembuat kode tersebut :)

3. Simpan Template, mudah bukan ?

Postingan Terkait:

Widget

• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan
• Cara Membuat Lencana Facebook Melayang Untuk Blogger
• Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar
• Cara Membuat Widget Popular Post Warna Warni V.2
• Menambahkan Widget Bookmark Otomatis di Blog
• Menambahkan Widget Social Share Melayang Keluar Tiba-Tiba
• Cara Membuat Twitter Box Untuk Blogger
• Membuat Kotak Email Subcription Muncul Tiba-Tiba
• Cara Memasukkan Tanda Tangan Kedalam Setiap Postingan Blog
• Membuat Widget Social Subcription Bergaya Wordpress
• Membuat Widget Artikel Terpopuler Dengan Bermacam Warna
• Cara Membuat 6 Animasi Twitter Melayang Untuk Blogger
• Menambahkan WIdget Sosial Bookmark dari Shareholic
• Menambahkan Widget Sosial Bookmark + Kotak Pencarian Di Blogger
• Cara Menaruh Facebook Like Box Secara Tiba-Tiba
• Cara Memasang Widget Sosial Bookmark Melayang Versi AddThis.com
• Menaruh Kotak Fanpage Facebook di Blogger - V3
• Menaruh Kotak Email Subscription Dengan 3 Warna Berbeda
• Menaruh Widget Sosial Bookmark di Side Bar
• Membuat Scroll Gambar Dengan Plugin jCarousel di Blogger
• Cara Menambahkan Widget Sosial Bookmark Berbentuk Segitiga
• Menambahkan Facebook Recommendations Bar kedalam Blogger
• Menambahkan Widget Icon Sprite Media Sosial di Blog
• Membuat Recent Comments dengan Avatar di Blogger

Social Sharing

• 5 Widget yang Wajib Dimiliki Oleh Blogger
• Cara Membuat Blog Terindeks Google dengan Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan
• Menambahkan Widget Social Share Melayang Keluar Tiba-Tiba
• Cara Membuat Widget Social Sharing Berputar di Bawah Postingan
• Cara Menambahkan Floating Social Bookmark
• Cara Membuat Scrolling Sticky Bar Lengkap Untuk Blogger
• Cara Membuat Twitter Box Untuk Blogger
• Cara Membuat 6 Animasi Twitter Melayang Untuk Blogger
• Menambahkan WIdget Sosial Bookmark dari Shareholic
• Menambahkan Widget Sosial Bookmark + Kotak Pencarian Di Blogger
• Cara Menaruh Facebook Like Box Secara Tiba-Tiba
• Cara Memasang Widget Sosial Bookmark Melayang Versi AddThis.com
• Menaruh Kotak Fanpage Facebook di Blogger - V3
• Menaruh Widget Sosial Bookmark di Side Bar
• Menambahkan Fitur "Like" Facebook di Kotak Komentar Blogger
• Cara Menambahkan Widget Sosial Bookmark Berbentuk Segitiga
• Menambahkan Facebook Recommendations Bar kedalam Blogger
• Menambahkan Widget Icon Sprite Media Sosial di Blog
• Menaruh Widget Flipper Sharing Untuk Blogger
• Menambahkan Widget Touch Me di Blogger
• Membuat Widget Sassy Social Bookmark di Blogger
• Membuat Scroll Jquery Sosial Bookmark Untuk Blog
• Menaruh Widget Eksklusif Sosial Bookmarking

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Posted in: Blogger,Social Sharing,Widget