CSS Pop up Facebook Like Box ব্লগস্পট সাইটের জন্য। (ব্লগস্পট মাষ্টাররা মিস করবেন না)

আসসালামু আলাইকুম বন্ধুরা। আশা করি সবাই ভালো আছেন। ব্যস্ততার কারনে অনেকদিন হল কোন টিউন করি না। অনেক ব্যস্ততার ভিড়ে ও আজকে আপনার জন্য একটি টিউন নিয়ে আসলাম। এই টিউনটির মাধ্যমে আপনি আপনার ব্লগে অসাধারণ একটি Pop up Facebook Like Box যোগ করতে পারবেন। তার আগে ডেমোটি দেখে আসুনঃ

আশা করি বুঝতে পারছেন আজকে আপনাদের জন্য কি নিয়ে আসছি। যাইহোক সবাই আমার জন্য দোয়া করবেন যেন সব ব্যস্ততা কাটিয়ে আপনাদের মাধ্যে আবার ফিরে আসতে পারি। এবার মূল কাজে চলে যাইঃ

আপনি যদি আপনার ফেইসবুক পেইজের লাইক বাড়াতে চান তাহলে অবশ্যই আপনার পেইজকে প্রোমোট করতে হবে। আপনার টার্গেটেড ভিজিটরদের সামনে নিয়ে আসতে হবে আপনার পেইজ। কিন্তু কিভাবে নিয়ে আসবেন?

DEMO

সহজ!! পপ-আপ এর মাধ্যমে নিয়ে আসতে পারেন। তবে অনেকের কাছে পপ-আপ বিরক্তির কারণ হতে পারে। কিন্তু সেটা কখন? যখন আপনি পপ-আপে কোন বিজ্ঞাপন দেখাবেন। পপ-আপ ক্লোজ করতে গেলে যখন আরও কয়েকটি পপ-আপ উইন্ডো ওপেন হয় তখন একজন ভিজিটরের কাছে তা বিরক্তির কারণ হতে পারে। তবে আপনি যদি সুন্দর একটি পপ-আপের মাধ্যমে আপনার ফেইসবুক পেইজটিকে তুলে ধরতে পারেন তাহলে নিঃসন্দেহে আপনার ব্লগের ইউজাররা লাইক দিবে। তাহলে চলুন এবার কাজ শুরু করা যাকঃ

Go to your blogger dashboard Layout > Add a gadget > HTML/Javascript > Copy and Past below code and save widget.


<style scoped='' type='text/css'> 

#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}

#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}

#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}

#fb-boxview {background:#fff;border:8px solid #FD4343;width:340px;height:230px;position:absolute;top:33%;left:37%;}

#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}

#fb-closebox:before {content:"X";padding:5px 8px;background:#FD4343;color:#fff;font-weight:normal;font-size:12px;font-family:cursive;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {

var days = options.expires, t = options.expires = new Date();
// Pengaturan 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') {

options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',

return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){

<div id='fb-closebox'>
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}

});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
</div>

style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/msdesign.rtml&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
</div>
</div>