Sunday 15 July 2012

Membuat Pop - up Facebook Like box



       Membuat pop up Facebook like box. hay sob,kini saya akan kasih tau bagaimana cara membuat pop - up facebook like box.


Dengan widget pop - up facebook like box seperti ini, pengunjung sobat nantinya akan langsung terfokus melihat facebook like box sobat blogger. untuk preview widget pop - up facebook yang kita pasang, silahkan sobat blogger lihat gambar dibawah ini:


Klaw sobat blogger kepengen buat pop - up facebook like box kayak diatas, silahkan ikutin langkah - langkahnya di bawah ini :
  1. Login dulu ke akun Blogger Sobat blogger.
  2. setelah berada di Dasbor blogger, Pilih Tata Letak. 
  3. Kemudian Pilih lagi Tambah gadget. Maka akan muncul jendela baru untuk memilih gadget.
  4. Kemudian cari dan klik Gadget HTML/Javascript pada jendela baru tersebut.
  5. Setelah jendela Mengkonfigurasi HTML/Javascript muncul, copy paste script dibawah ini dan isi kan kedalamnya 
    6. <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/AVvXsEgyz99ph6X_5BxiVa7Pr3EvnDN6_W9Bk99jU8CmNstfmJ0mkE4F90WB62AHzvfP9HRm6ZDbTzW8yQlxCacUlI-pDNnHplznWtuA4qer4xgomWSnSHF9TqS9vvpiZCpSH9Tnkxsx09xjFjk/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80BkAaW8MytMpcm0YiFHAtAaalA3t15ZHXA9t4CU7uOxq3Cdo90cQS_VfKpKdnp2f3uBEq4Esr03onFcwBnwdb4fIsmUPiExE0T3kLwIv8dr8Jl2pCLQn8czRgQHcNxjZbwFsLSPJ4mc/s400/border.png) repeat-x top left;}
         #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyz99ph6X_5BxiVa7Pr3EvnDN6_W9Bk99jU8CmNstfmJ0mkE4F90WB62AHzvfP9HRm6ZDbTzW8yQlxCacUlI-pDNnHplznWtuA4qer4xgomWSnSHF9TqS9vvpiZCpSH9Tnkxsx09xjFjk/s1600/controls.png) no-repeat -36px 0;}
         #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyz99ph6X_5BxiVa7Pr3EvnDN6_W9Bk99jU8CmNstfmJ0mkE4F90WB62AHzvfP9HRm6ZDbTzW8yQlxCacUlI-pDNnHplznWtuA4qer4xgomWSnSHF9TqS9vvpiZCpSH9Tnkxsx09xjFjk/s1600/controls.png) no-repeat 0 -32px;}
         #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80BkAaW8MytMpcm0YiFHAtAaalA3t15ZHXA9t4CU7uOxq3Cdo90cQS_VfKpKdnp2f3uBEq4Esr03onFcwBnwdb4fIsmUPiExE0T3kLwIv8dr8Jl2pCLQn8czRgQHcNxjZbwFsLSPJ4mc/s400/border.png) repeat-x bottom left;}
         #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyz99ph6X_5BxiVa7Pr3EvnDN6_W9Bk99jU8CmNstfmJ0mkE4F90WB62AHzvfP9HRm6ZDbTzW8yQlxCacUlI-pDNnHplznWtuA4qer4xgomWSnSHF9TqS9vvpiZCpSH9Tnkxsx09xjFjk/s1600/controls.png) no-repeat -36px -32px;}
         #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyz99ph6X_5BxiVa7Pr3EvnDN6_W9Bk99jU8CmNstfmJ0mkE4F90WB62AHzvfP9HRm6ZDbTzW8yQlxCacUlI-pDNnHplznWtuA4qer4xgomWSnSHF9TqS9vvpiZCpSH9Tnkxsx09xjFjk/s1600/controls.png) repeat-y -175px 0;}
         #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyz99ph6X_5BxiVa7Pr3EvnDN6_W9Bk99jU8CmNstfmJ0mkE4F90WB62AHzvfP9HRm6ZDbTzW8yQlxCacUlI-pDNnHplznWtuA4qer4xgomWSnSHF9TqS9vvpiZCpSH9Tnkxsx09xjFjk/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/AVvXsEgBO4VzZY7hXK3s49OcvrDJ4ulDsgQZIyS0XhrQrNfzilkYITR9MgwWM-2EgKlUm-rS_CRHgGHAgAdMtgxD5s0TYCnaLmcIsg8wM4t3LI0iAn79VxneHNo_j11y7gOCTIjqBbpUBwOFaD4/s400/loadingbackground.png) no-repeat center center;}
             #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7SoCOU2m9W3A801aN5v7_ujSM7zrXG1rFnSCt8iBJmFbIFIhSBp8xmR297MIgKMQvwJh559W36jnraAz-UCXfOYbY9ovNmp8AF5VCp5HS5ZuF8fyL3BzjJjNOZ7XZz5pwQuoR6kbbic/s400/loading.gif) no-repeat center center;}
             #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:normal; 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/AVvXsEgyz99ph6X_5BxiVa7Pr3EvnDN6_W9Bk99jU8CmNstfmJ0mkE4F90WB62AHzvfP9HRm6ZDbTzW8yQlxCacUlI-pDNnHplznWtuA4qer4xgomWSnSHF9TqS9vvpiZCpSH9Tnkxsx09xjFjk/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: #2266BB;
       font-size: 18px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 3px 3px 3px #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">Dapatkan info terbaru dari Indonesiablogger via Facebook. Silahkan klik LIKE / SUKA.<center><p style="line-height:3px;" >▼</p></center></h3>
          <center>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FSadewaYogaM.Z&amp;width=292&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=215128795191036" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowtransparency="true"></iframe> </center>
    </div>
    </div>
    ** Ganti kode yang berwarna merah dengan kode like box sobat blogger dan silahkan ganti kata - kata yang berwarna kuning sesuai dengan kata yang sobat blogger inginkan.
  6. Yang terakhir klik simpan.
Catatan :
Widget ini tidak selalu muncul pada tiap halaman atau postingan, melainkan hanya sekali saja untuk 1 visitor dengan IP dan browser yang sama. Dan akan muncul selanjutnya 30 hari kemudian, jadi sobat blogger tidak usah khawatir tampilan widget ini akan mengganggu visitor. Widget ini bisa muncul pada halaman utama atau pun postingan, tergantung darimana visitor mengunjungi web sobat blogger. Apabila ingin melihat untuk kedua kalinya, silahkan sobat blogger bersihkan / clear cookies pada browser yang sobat blogger gunakan.
Posted by at
Labels: ,

1 comment:

silahkan berkomentar :)

Subscribe to: Post Comments (Atom)

Apa yang anda cari ??

Loading

My Best Friend