Pada kali ini Haikal akan share Cara Membuat Widget Like Fans Page Pop Up Keren. Widget adalah salah satu fasilitas yang di berikan oleh blogger untuk mempermudah mas/mbak memasukkan kode html dan script lainnya.
Widget itu sendiri adalah sebuah kotak yang berisi kode-kode di mana mas/mbak bisa memindahkan ke dalam sidebar di manapun yang mas/mbak sukai.
Mas/mbak dapat menggunakannya untuk personalisasi blog dan memperoleh informasi yg diinginkan hanya dengan melihatnya dari widget sidebar.
Baca Juga: PicSay Pro v1.8.0.5 - Ringan untuk editing foto
Mas/mbak juga dapat memasukkan kode - kode untuk memperindah blog anda seperti tanggal, jam, radio dan lain - lain. Naah pada artikel kali ini Haikal akan share sedikit cara sederhana membuat widget dari html/javascript yaitu Like Fans Page Pop Up Melayang.
Memasang Fanspage Facebook Like Box "Popup" alias Kotak Like FB yang muncul atau melayang di halaman blog mas/mbak adalah salah satu tips & trik untuk meningkatkan "Likers" Fans Page blog juga lho.
Kalo mas/mbak berminat memasang Kotak Popup Facebook Like Page di blog, seperti contoh diatas, yuuk ikuti tutor yang sangat mudah di bawah ini :
1. Login ke Home Blogger mas/mbak
2. Dan pilih Layout > Add a Gadget > pilih "HTML/JavaScript"
3. Kosongkan judul Widget-nya
4. Copy dan Paste kode dibawah ini di kolom "Content".
<style>
#hbfanback { display: none;background: rgba(0, 0, 0, 0.8);width: 100%;height: 100%;position: fixed;top: 0;left: 0; z-index: 99999;}
#hbfan-exit {width: 100%;height: 100%;}
#hbfanbox {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;
}
#hbfanclose {
float: right;
cursor: pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfPNDVY8tKWLO1JD8tKstHTypjP-n77eS7bs9ADaHTgTX_DCpthJ1NQL5peKczD-gHa5XL031YFRX5tcRqWXGyRKw8AO9XB2U8g-Gs2UcHFbUG1wSyDkoRthtXvl8G4q-27sGLsg1fVLM/s1600/hb-fanclose.png) repeat;
height: 15px;
padding: 20px;
position: relative;
padding-right: 40px;
margin-top: -20px;
margin-right: -22px;
}
.hbremove-borda {
height: 1px;
width: 366px;
margin: 0 auto;
background: #F3F3F3;
margin-top: 16px;
position: relative;
margin-left: 20px;
}
</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') {
$('#hbfanback').delay(100).fadeIn('medium');
$('#hbfanclose, #hbfan-exit').click(function() {
$('#hbfanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', {
path: '/',
expires: 7
});
});
</script>
<div id='hbfanback'>
<div id='hbfan-exit'></div>
<div id='hbfanbox'>
<div id='hbfanclose'></div>
<div class='hbremove-borda'></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fmustofahaikalblog&width=340&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:258px;margin-left: 8%;" allowtransparency="true"></iframe>
</div>
</div>
5. Ganti mustofahaikalblog dengan username halaman fanspage FB mas/mbak.
6. Setelah save dan enjoy :)
Cuman segitu aja teman postingan yang bisa Haikal informasikan kepada kalian.
JANGAN LUPA Like dan Komentar nya ya agar blog saya bisa berguna bagi anda
SEMOGA BERMANFAAT ^_^
Terima Kasih atas kunjungannya
Wassalamualaikum wr.wb
EmoticonEmoticon