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/AVvXsEjRufdyXVrgHhAd4Bw7d_3iWCnxfTesOWROkYwwdTl9QDEUgEIMKUUNwo4jTzo2DhkaOGHMFvRCj9JoBE0sqKulGj8plgJ0KAO8S4jvuRef4Hfs58rgd4VExttMEEfDJPI6TB7dVfy0Hpw/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0ILHZFZFiUPOcseBvXpogvgx5YAIEjmRSxSSn5fvH0q33yJz7OuJcxJ3PUyN7NK8x96Cuw_whrzhhPJ1L5TyVNrBHYxouVpjyAoIb0KvqmlE2byuc-RT0S7lw61cqcPCSwDbH2TBLc4/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRufdyXVrgHhAd4Bw7d_3iWCnxfTesOWROkYwwdTl9QDEUgEIMKUUNwo4jTzo2DhkaOGHMFvRCj9JoBE0sqKulGj8plgJ0KAO8S4jvuRef4Hfs58rgd4VExttMEEfDJPI6TB7dVfy0Hpw/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRufdyXVrgHhAd4Bw7d_3iWCnxfTesOWROkYwwdTl9QDEUgEIMKUUNwo4jTzo2DhkaOGHMFvRCj9JoBE0sqKulGj8plgJ0KAO8S4jvuRef4Hfs58rgd4VExttMEEfDJPI6TB7dVfy0Hpw/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0ILHZFZFiUPOcseBvXpogvgx5YAIEjmRSxSSn5fvH0q33yJz7OuJcxJ3PUyN7NK8x96Cuw_whrzhhPJ1L5TyVNrBHYxouVpjyAoIb0KvqmlE2byuc-RT0S7lw61cqcPCSwDbH2TBLc4/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRufdyXVrgHhAd4Bw7d_3iWCnxfTesOWROkYwwdTl9QDEUgEIMKUUNwo4jTzo2DhkaOGHMFvRCj9JoBE0sqKulGj8plgJ0KAO8S4jvuRef4Hfs58rgd4VExttMEEfDJPI6TB7dVfy0Hpw/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRufdyXVrgHhAd4Bw7d_3iWCnxfTesOWROkYwwdTl9QDEUgEIMKUUNwo4jTzo2DhkaOGHMFvRCj9JoBE0sqKulGj8plgJ0KAO8S4jvuRef4Hfs58rgd4VExttMEEfDJPI6TB7dVfy0Hpw/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRufdyXVrgHhAd4Bw7d_3iWCnxfTesOWROkYwwdTl9QDEUgEIMKUUNwo4jTzo2DhkaOGHMFvRCj9JoBE0sqKulGj8plgJ0KAO8S4jvuRef4Hfs58rgd4VExttMEEfDJPI6TB7dVfy0Hpw/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/AVvXsEhxbayOfE6MsLSONud4gGAmY9nQ9QKt32QnQN22w49PQYnpThG_qkYZhbtAj-Uhe8nonZIFf-khUZWdsuMPC3frZbAlFQZg2-2WdMcehbp2E0AKx96PEB_v_Blhdpsy1paArLEP1DXD9gk/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8kS_pcl-3ld6N6g_hL1ZdCJyOeWL5Yuq2rVaUzMaO26-SZuJ3SdzLOAcJf0OjMx5cGGMNZuYyFMR5wfdeM3twZF40JzeBnnEI6YvtNGCxxXy7FMw-V-WrjrjV8CsUwVjkcY6r_oU4arY/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/AVvXsEjRufdyXVrgHhAd4Bw7d_3iWCnxfTesOWROkYwwdTl9QDEUgEIMKUUNwo4jTzo2DhkaOGHMFvRCj9JoBE0sqKulGj8plgJ0KAO8S4jvuRef4Hfs58rgd4VExttMEEfDJPI6TB7dVfy0Hpw/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&width=292&height=290&colorscheme=light&show_faces=true&border_color&stream=false&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
Ini adalah contoh beberapa blog saya buat beberapa hari yang lalu yang menggunakan facebook fanspage popup Dan jangan lupa di like y !
Busana muslim
Toko sepatu online
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 apabila ada pertanyaan silahkan anda bertanya di bawah ini
7 komentar:
keren yang satu ini mas, akan di praktekkan. trima kasih.
msh bingung juga, kira2 salah dimana ya..?? thx
kemungkinan besar saat membuat script like facebook nya
ga bisa nih :(
iya nih sama, error dimananya ya? aku tambah pusing nyari error nya x_x
errol ini mas bro..., coba di bantu dulu donk..
coba liat kayak punyaku , bisa kok ?? mantap pula
Posting Komentar