Cara Membuat Pop Up Fanspage Facebook Di Blogger Mudah
Kali ini saya akan berbagi tutorial cara membuat popup fans page facebook. Mungkin bagi anda yang belum memiliki fanspage silakan buat terlebih dahulu.Banyak keuntungan yang bisa anda dapatkan dari fanspage facebook selain bisa sebagai media promosi juga bisa sebagai halaman official bagi pengunjung dari media sosial. Mereka bisa mengakses fanspage anda dan bertanya melalui fp facebook anda.
Selain itu anda juga harus mencari like untuk fp facebook anda. Ada cara yang berbayar dan yang gratis tentunya. Yang berbayar anda bisa menggunakan facebook ads,selain meningkatkan like fp juga meningkatkan visitor blog anda. Untuk cara gratisnya anda bisa memasang widget fp facebook dan menambahkan popup fanpage facebook saat situs dibuka.
Baca juga : Cara Memasang Kotak Fanspage Facebook (Like Box)
Dengan begitu maka anda bisa menambatkan banyak like fanspage facebook. Menambahkan popup fanspage facebook juga memiliki manfaat bagi kalian yang memiliki blog download dan memasang iklan karena bisa menjadi trik untuk meraup banyak dollar dari iklan popunder. Tertarik untuk menambahkan popup fans page facebook. Yuk ikuti langkah dibawah.
Cara Membuat Pop UP Fanspage Facebook
Langkah 1
Silakan buka blogger, pilih Template → Edit HTML. Salin kode dibawah ini dan pastekan diatas kode </body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=562901580420523&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Lalu simpan template.
Langkah 2 (Buat Widget Baru)
Buka Tata Letak → Tambahkan gadget → HTML/Javascript. Salin kode dibawah dan masukkan/pastekan kode yang sudah disalin kedalam widget baru.
<style scoped='' type='text/css'>
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan 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(''));
}
// Dapatkan 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_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<div class='fb-like-box' data-href='https://www.facebook.com/anggasaveblog' data-width='402' data-height='255' data-colorscheme='light' data-show-faces='true' data-header='true' data-stream='false' data-show-border='false' style='border:none;overflow:hidden;width:339px;height:200px;'></div>
</div>
</div>
Ganti https://www.facebook.com/anggasaveblog dengan url fanspage facebook anda.
Jangan lupa untuk menyimpan gadget. Sekarang coba buka blog anda. Tunggu apakah popup fanspage facebook sudah muncul di blog anda. Jika sudah maka cukup sekian artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat.
Related Posts :
Cara Memasang Script Anti Adblock Untuk Blogger - Adblock UC BrowserSiapa sih yang tidak tahu adblock? Banyak para pengembang browser yang juga mengembangkan adblocker untuk diletakkan di browser buatan merek… [Read More]
Manfaat Berkomentar / Blog Walking Untuk SEO BlogTak habis-habisnya jika kita membahas tentang SEO blog.Kali ini kita akan membahas salah satu cara/teknik SEO Off Page. Banyak cara untuk me… [Read More]
Tips dan Cara Menemukan Ide Kreatif Untuk Membuat Artikel - Inspirasi MenulisBingung Mau Buat Artikel? Baca artikel ini. Kali ini kita akan membahas tentang artikel. Membahas tentang cara membuat artikel. Pasti kalian… [Read More]
Cara Supaya Tampilan Blog di Mobile/HP Sama Seperti di Desktop PC/WebCara Supaya Tampilan Blog di Mobile Seluler Sama Seperti Versi Web/PC - Untuk membuat supaya tampilan blog anda sama seperti di desktop/pc/k… [Read More]
Cara Menghapus URL Artikel Dari Google Search - Menghilangkan Artikel Yanng TerindexKebanyakan orang suka dengan artikel dan juga blognya yang sudah terindex google. Supaya terindexnya aja susah kenapa harus dihapus. N… [Read More]
itu responsive ga di versi mobile?
ReplyDeleteTidak,tapi jika ingin agar tidak muncul di mobile seluler bisa ditambahkan tag kondisional
Deletekode tag conditionalnya gimana mas?. bisa di share. trims
Delete