Cara Membuat Pop Up Like Facebook di Blog

Artikel pada kesempatan kali ini mengulas perihal Cara Membuat Pop Up Like Facebook di Blog Anda. Inilah langkah yang paling tepat bila anda ingin tingkatkan facebook like situs (blog) anda, dengan widget popup like box Facebook ini bakal bikin tiap-tiap pengunjung situs (blog) anda bisa lansung lihat like box halaman Facebook anda serta bisa lansung menghimpit tombol like. Hal itu sudah pasti bisa tingkatkan like halaman situs (blog) anda di Facebook. Bagaimanakah langkahnya menempatkan popup like box Facebook di situs (blog) anda? berikut ini langkahnya, silakan disimak dengan baik. 

Langkah Pertama

Tambahkan kode dibawah ini dimanapun dibagian body pada blog anda atau lewat menambahkan widget untuk menampilkan JavaScript/HTML yang ada pada layanan blog anda.

<!-- Facebook Popup Widget Mulai -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<style>

#fanback {

display:none;

background:rgba(0,0,0,0.8);

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

z-index:99999;

}

#fan-exit {

width:100%;

height:100%;

}

#JasperRoberts {

background:white;

width:420px;

height:270px;

position:absolute;

top:58%;

left:63%;

margin:-220px 0 0 -375px;

-webkit-box-shadow: inset 0 0 50px 0 #939393;

-moz-box-shadow: inset 0 0 50px 0 #939393;

box-shadow: inset 0 0 50px 0 #939393;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

margin: -220px 0 0 -375px;

}

#TheBlogWidgets {

float:right;

cursor:pointer;

background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgloF5N4AsCt7jaFoUhSyWYqkUtQ3cbE71c88Q6QTieUV6ixQoriRTrbR26H1ldn_6n06oDwPNkJLMKkjcrwULtS6ZAwFRyE2qtp7kLaOUaEx83OAv2xsJS-VX8rEf4aFkDnAtqf7V_-Rt1/s1600/TheBlogWidgets.png) repeat;

height:15px;

padding:20px;

position:relative;

padding-right:40px;

margin-top:-20px;

margin-right:-22px;

}

.remove-borda {

height:1px;

width:366px;

margin:0 auto;

background:#F3F3F3;

margin-top:16px;

position:relative;

margin-left:20px;

}

#linkit,#linkit a.visited,#linkit a,#linkit a:hover {

color:#80808B;

font-size:10px;

margin: 0 auto 5px auto;

float:center;

}

</style>

<script type='text/javascript'>

//<![CDATA[

jQuery.cookie = function (key, value, options) {

// key and at least value given, set 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(''));

}

// key and possibly options given, get 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_user_login') != 'yes'){

$('#fanback').delay(10000).fadeIn('medium');

$('#TheBlogWidgets, #fan-exit').click(function(){

$('#fanback').stop().fadeOut('medium');

});

}

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

});

</script>

<div id='fanback'>

<div id='fan-exit'>

</div>

<div id='JasperRoberts'>

<div id='TheBlogWidgets'>

</div>

<div class='remove-borda'>

</div>

<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/url-facebook-anda&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>

<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by<a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Blog Widget</a></span>and shared by <a style="color:#a8a8a8;font-size:8px;" href="http://www.tutorkeren.blogspot.blogspot.com">TUTOR KEREN</a></center>

</div>

</div>

<!-- Facebook Popup Widget Selesai -->

Langkah Kedua (Kustomisasi Widget Anda)

Menambahkan URL Halaman Facebook Anda

Temukan kode http://www.facebook.com/url-halaman-facebook-anda, dan ganti dengan URL Halaman Facebook anda.

Mengganti Jeda Waktu 10 Detik

Dasarnya widget Facebook ini hanya muncul selama 10 detik setelah halaman blog anda selesai loading. Untuk merubahnya cari kode delay(10000) dan ganti angka 10000 dengan angka yang lebih besar atau lebih kecil.
1 detik = 1000.  10 detik = 10000. 60 detik = 60000.

Popup Setiap Kali Halaman Blog Anda terbuka/dikunjungi

Dasarnya, widget Facebook ini hanya muncul saat pertama kali blog anda dikunjungi oleh orang(kecuali menghapus cookie browser). Jika anda ingin widget Facebook ini muncul setiap saat blog anda dikunjungi hapus kode dibawah ini.

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Membuat Widget Facebook Popup Hanya Muncul di Beranda Blog Anda

Bukalah editor template anda dan tambahkan kode dibawah ini tepat diatas kode </body>.

&lt;b:if cond='data:page.type == "index"'&gt;Ganti Dengan Kode Widget Popup Facebook Like Box diatas&lt;/b:if&gt;

Itulah langkah-langkah Cara Membuat Pop Up Like Facebook di Blog anda, jika anda memiliki masalah dalam menambahkan widget ini, silahkan tinggalkan komentar anda atau hubungi saya disini.

Tweet