Cara Mudah Memasang Fanspage Facebook Melayang Pada Blog

Kali ini, akan saya berikan tutorial singkat Cara mudah Memasang Fanspage Pada Blog, Memasang fanspage pada blog ini berfungsi untuk mempermudah pengunjung blog sobat untuk mengetahui fanspage blog sobat dan mempermudah pengunjung juga untuk mengetahui arikel terbaru blog sobat.

Seperti yang kita ketahui, sebagian besar orang saat ini memiliki akun sosial media yang memiliki warna biru gelap ini, jadi sangatlah efektif jika sobat mempromosikan blog sobat dengan Fanspage.

Jika sobat tertarik untuk menambahkan wiget fanspage ini pada blog sobat, dibawah ini merupakan langkah-langkahnya.

1. Sobat harus terlebih dahulu memiliki Fanspage pada Facebook
2. Kemudian sobat login ke blog sobat.
3. pada dasbor blogger klik Layout/ Tata Letak (lihat gambar)

4. Pada Tata Letak, untuk menambahkan widget facebook ini, klik Tambahkan Gadget.

5. Kemudian akan muncul jendela kumpulan gadget, pilih HTML/Javascript

6. Pastekan kode di bawah ini pada kolom yang telah disediakan, kemudian Simpan ( untuk lebih jelas lihat pada gambar)

Kode Widget Fanspage Facebook

<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%;}#fanbox { 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;}#fanclose { float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlYf0fFXtcnrF5ayYWzK-WCP4bOkOxyQEC8a5Ujh6uWOTzP_GofN9FfzAKgBVm2ry5ifQFWeCNmlkF4JQqZxgsZHw_9DcFpEnh8wX35lVwhwMtbKwFlWBeNvOGPkgn8skgNdnmGmpisCCF/s1600/fanclose.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_facebook_like') != 'yes'){ $('#fanback').delay(1000).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_facebook_like', 'yes', { path: '/', expires:0});});</script><div id='fanback'> <div id='fan-exit'></div> <div id='fanbox'> <div id='fanclose'></div> <div class='remove-borda'></div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/dhermatechnology&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> </div></div><script src="https://safelinkconverter.com/js/safelinkconverter.js" type="text/javascript"></script>