Hot Articles


Membuat Popup Like FB di Blogspot

Joeshep 2018-01-06 254

Oke temen-temen pada kesempatan kali ini saya akan membagikan sebuah tips atau cara membuat sebuah popup dengan tombol close untuk like facebook/fb yang biasa temen-temen liat paa sebuag blog atau web muncul ketika temen-temen mengunjungi sebuah halaman web atau blog. tentunya ini sangat berguna sekali untuk menambah visitor atau pengunjung pada sebuah website atau blog dengan membuat fanspage di facebook.

 

Oke kita akan alangsung saja, sebelum temen2 menerapkan ini yang saya jelaskan pada tutorial kali ini adalah pada sebuah blogspot, jika temen-temen ingin menerapkan ini pada sebuah blog wordpress atau blog bikinan sendiri bisa temen-temen kustem saja, tinggal temen-temen copy/paste saja kode yang berada dibawah di bagian kode html pada sebuah website.

 

Cara Membuat Popup Like Facebook di Blogspot

 

Langkah-langkahnya adalah

1. Masuk ke akun blogger temen-temen

2. Pilih menu tata letak, pilih tambah widget silahkan taruh dimana saja 

3. Masukkan script dibawah ini biarkan judul di kosongkan dan taruh di content

 

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'>script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}
#fbox-display {
    border: 5px solid #1194f2;
    width: 339px;
    height: 212px;
    position: absolute;
    top: 30%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 1px;
}
#fbox-button:before {
    content: "x";
    padding: 1px 7px 4px 7px;
    background: #ff4e4e;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    border-radius: 10px;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:0px}
style>
<script type='text/javascript'>
//
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
script>
<div id='fbox-background'>
<div id='fbox-close'>
div>
<div id='fbox-display'>
<div id='fbox-button'>
div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/Medikre/120574614736021&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 212px;'>iframe>
div>
div>

 

Oke pengaturannya adalah silahkan ganti kode  https://www.facebook.com/Medikre dengan kode fanspage fb temen-temen dan kode #1194f2 bisa temen-temen ganti untuk mengubah warna.

 

4. Setelah itu silahkan Klik simpan dan silahkan dicoba hasilnya

 

Sekian tutorial kali ini semoga berhasil dan semoga membantu silahkan tinggalkan komentar anda bila menyukai tutorial ini. Terimakasih sudah berkunjung.

 

Memasang Page-level Ads Google di BlogspotCara Membuat Box Subscriber Responsive di Blog Cara Membuat Web/Blog di Google Blogger

Untuk berlangganan artikel silahkan masukan email anda


Delivered by FeedBurner


Masukan email Anda untuk mendapatkan artikel terbaru.


close