Cara tepat Membuat Pop Up Facebook Blogger

Cara Membuat Pop Up Facebook Di blog - Salah satu optimasi yang paling efektif adalah menggunakan social media salah satunya facebook , ada 3 optimasi facebook yang digunakan facebook ads , group facebook dan fanpage facebook kali ini saya akan membahas bagaimana buat pop up berisi fanpage facebook di blog.

Cara Buat Pop Up Fanpage Facebook Di Blog

Sebelum membuat pop up fanpage facebook saya akan menjelaskan terlebih dahulu kelebihan penggunaan fanpage popup facebook blog

Facebook fan page Like Box

Kelebihan menggunakan Fanpage blog po pup
ada beberapa kelebihan namun kelebihan utama adalah menjaring fans melalui website maupun blog sehingga fanspage anda akan bertambah seiring makin banyak pengunjung yang datang ke blog anda dan ngelike pop up facebook fanpage anda .

Kekurangan penggunaan fanpages pop up blog
Mungkin ada kekurangan dalam penggunaan popup facebook ini kekurangan yang paling utama adalah terganggunya aktifitas browsing pengunjung dikarenakan timbulnya pop up facebook namun itu bisa kita minimalisir .

Buat fanpages facebook Pop Up di blog
Ada beberapa cara untuk membuat fanpages popup di blog ini adalah salah satu cara yang menarik .
1. Login dulu ke akun Blogger anda. Pilih Tata Letak.
2. Pilih Tambah gadget. Maka akan muncul jendela baru untuk memilih gadget.
3. klik Gadget HTML/Javascript pada jendela baru tersebut.
4. Mengkonfigurasi HTML/Javascript muncul, copy paste script dibawah ini dan isi kan kedalamnya

<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/AVvXsEiPikGdnXF4Ze8L99mH_lD1megpLeHAHsRx8rrESqHCa0aeISZqd6Ra0hYuHmRXbkHjEdaGQod2GmwC0FecyNWGfNmWEYJinjaMCbKB6bUZd0KrQwp2LOqHyJDOEor_TPGceuImglb-vC8/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFjfaj9jJiNbxo5S8uTT_wIzFZlnlSDI9xtvacfVCDaBsMM29QQt8CjED0Qcgl_on7AWopXL8fBirCd2Eg_ruWDYSGYxH2KYLhwijDrg9AvkRozLM26Y5XAZzV8GE_lOm1pjJAnAXYhaw/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPikGdnXF4Ze8L99mH_lD1megpLeHAHsRx8rrESqHCa0aeISZqd6Ra0hYuHmRXbkHjEdaGQod2GmwC0FecyNWGfNmWEYJinjaMCbKB6bUZd0KrQwp2LOqHyJDOEor_TPGceuImglb-vC8/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPikGdnXF4Ze8L99mH_lD1megpLeHAHsRx8rrESqHCa0aeISZqd6Ra0hYuHmRXbkHjEdaGQod2GmwC0FecyNWGfNmWEYJinjaMCbKB6bUZd0KrQwp2LOqHyJDOEor_TPGceuImglb-vC8/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFjfaj9jJiNbxo5S8uTT_wIzFZlnlSDI9xtvacfVCDaBsMM29QQt8CjED0Qcgl_on7AWopXL8fBirCd2Eg_ruWDYSGYxH2KYLhwijDrg9AvkRozLM26Y5XAZzV8GE_lOm1pjJAnAXYhaw/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPikGdnXF4Ze8L99mH_lD1megpLeHAHsRx8rrESqHCa0aeISZqd6Ra0hYuHmRXbkHjEdaGQod2GmwC0FecyNWGfNmWEYJinjaMCbKB6bUZd0KrQwp2LOqHyJDOEor_TPGceuImglb-vC8/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPikGdnXF4Ze8L99mH_lD1megpLeHAHsRx8rrESqHCa0aeISZqd6Ra0hYuHmRXbkHjEdaGQod2GmwC0FecyNWGfNmWEYJinjaMCbKB6bUZd0KrQwp2LOqHyJDOEor_TPGceuImglb-vC8/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPikGdnXF4Ze8L99mH_lD1megpLeHAHsRx8rrESqHCa0aeISZqd6Ra0hYuHmRXbkHjEdaGQod2GmwC0FecyNWGfNmWEYJinjaMCbKB6bUZd0KrQwp2LOqHyJDOEor_TPGceuImglb-vC8/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/AVvXsEh9C5quW-p2icWdvLSxmTsp3uNJtfQjf1Ymqbh1LCGfmCuRscegkDLijrfDyeTY2pQG59fX15m02-Qf50URpTDLkqQuA2q4ENuCIHxXl6iUAVdVSXvbmdC6oDylb7K_r6j_NpStODDonlU/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQFKC-glgfXvjB6HydkwN3H5KYjM8g3iRK-QaQdudkGASdeGHnQf6djU5eRBYKnyRfrIqMSZlaSh_gtIsIh_k92ztomPAq9WDHcaXH9JM9PnmWfrx_dX6tKNZlOznTIiH-HWA5XNjYlc0/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/AVvXsEiPikGdnXF4Ze8L99mH_lD1megpLeHAHsRx8rrESqHCa0aeISZqd6Ra0hYuHmRXbkHjEdaGQod2GmwC0FecyNWGfNmWEYJinjaMCbKB6bUZd0KrQwp2LOqHyJDOEor_TPGceuImglb-vC8/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 Blog 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%2Fpages%2FMaxs-Blog%2F233632693389663&amp;width=292&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowtransparency="true"></iframe>

</center>
<div style="float: right; font-size: 9px; margin-right: 35px;">
Like Box Generator by: <a href="http://juntenxblog.blogspot.com/" style="color: #3b78cd; font-size: 9px; text-decoration: none;">tutorial blog seo</a></div>

5. Pada bagian text biru anda ubah untuk kata pengantar title sedangkan pada text kuning anda ubah dan masukan script like facebook anda
6. Untuk membuat like facebook fans anda cukup masuk ke sini

https://developers.facebook.com/docs/reference/plugins/like-box/

7. selesai

Popup facebook ini tidak akan muncul setiap saat anda membuka blog maupun posting blog . tapi akan muncul berdasar satu kali per ip adders yang artinya sekali untuk 1 visitor dengan IP dan browser yang sama. Dan akan muncul lagi 30 hari kemudian , sehingga tidak mengganggu pengunjung yang datang dan membuka beberapa posting dan apabila anda ingin melihat lagi untuk kedua kali silahkan bersihkan cookies pada browser yang anda gunakan.

Itulah tadi sedikit informasi cara buat facebook popup di blog 

 Jika artikel ini bermanfaat bagi anda. Mohon klik tombol Google+ dan tombol Like dibawah ini untuk mendukung blog ini dan sebagai ucapan terima kasih dari anda. terima kasih