Cara Mudah Membuat Widget Facebook Popup Like Box Stilysh Di Blog

Hai sobat blogger. pada kesempatan yang berbahagia ini, saya akan mengulas Cara mudah membuat widget Facebook popup like box stilysh di blog. Facebook merupakan sosial media yang paling diminati umat ibu pertiwi, dan menjadi sarana untuk menambah teman, mencurahkan isi hati, berbisnis, dan menjadi tolak ukur dari sesuatu, misalnya sebuah produk atau merk tertentu yang sobat miliki, dan sobat membuatkan sebuah fanspage untuknya. Semakin banyak jumlah member atau penyuka pada fanspage itu, maka semakin tinggi kedudukan maupun posisinya dimata publik maupun teman anda sobat, jika itu sebuah produk, maka akan lebih dikenal oleh khalayak (orang banyak).

Maka dari itu kali ini saya akan memberikan tips agar penyuka atau member fanspage milik sobat bertambah dengan mudah, yaitu dengan cara memasang widget facebook popup like box pada blog sobat. Cara ini merupakan salah satu strategi yang sangat jitu. Tidak hanya ringan untuk blog, widget yang satu ini juga elegan, stilysh, dinamis dan simple yang akan menarik minat pengunjung blog sobat untuk menyukai fanspage milik sobat.

Untuk mempersingkat waktu, bagaimana jika kita langsung masuk pada step-step nya sob. Simak baik-baik tutorial yang satu ini yaa!

1. Login ke akun blogger sobat.

2. Pada menu dasbor, sobat klik "Tata Letak" atau "Layout".

3. Lalu sobat klik "Tambahkan Gadget" atau "Add a Gadget".

4. Setelah itu sobat pilih "HTML/JavaScript".

5. Lalu masukkan kode berikut.

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

<style>

#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 {
#

   background: #eaeaea;

   border: 5px solid #828282;

   width: 340px;

   height: 230px;

   position: absolute;

   top: 32%;

   left: 37%;

   -webkit-border-radius: 5px;

   -moz-border-radius: 5px;

   border-radius: 5px;

}

fbox-button {
#

   float: right;

   cursor: pointer;

   position: absolute;

   right: 0px;

   top: 0px;

}

fbox-button:before {
#

   content: "CLOSE";

   padding: 5px 8px;

   background: #828282;

   color: #eaeaea;

   font-weight: bold;

   font-size: 10px;

   font-family: Tahoma;

}

fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link 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) {

// 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_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/Mukeu.Blogspot.Com.MUKEUcorp&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>

<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com" rel="nofollow">Helplogger</a></div>

</div>

</div>

6. Klik "Simpan" atau "Save".

Kostumisasi :

- Ganti kode berikut dengan URL Fanspage Facebook sobat.

https://www.facebook.com/Mukeu.Blogspot.Com.MUKEUcorp

- Widget ini akan tampil 5 menit setelah loading selesai. Jika sobat ingin mengubah waktu jedanya, sobat hanya perlu merubah angka 5000 pada kode berikut.

.delay(5000)

- Widget ini hanya tampil pada saat pengunjung pertama kali mampir ke blog sobat. Jika sobat ingin membuat widget ini tampil setiap kali halaman dimuat, maka sobat harus menghapus kode berikut.

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

Sekian dulu tutorial kita kali ini sob, semoga artikel ini membantu sobat, dan terimakasih karena sudah mau mengunjungi blog saya, jikasobat punya keluh kesah dan pendapat, silahkan sampaikan dengan cara berkomentar

http://mukeu.blogspot.co.id/2015/02/cara-mudah-membuat-widget-facebook.html