আপনার ব্লগ সাইটে ব্যবহার করুন অনটাইম ফেসবুক পপআপ লাইক বক্স!!!

বন্ধুরা আমার সালাম নিবেন। আশা নয় বিশ্বাস করি আপনারা সকলে ভাল আছেন। আর আপনাদের ভাল লাগাকে কেন্দ্র করে আমার ভিন্ন ধারার পোষ্ট। আমরা যথন অন্যে ...

বন্ধুরা আমার সালাম নিবেন। আশা নয় বিশ্বাস করি আপনারা সকলে ভাল আছেন। আর আপনাদের ভাল লাগাকে কেন্দ্র করে আমার ভিন্ন ধারার পোষ্ট। আমরা যথন অন্যে কোন ওয়েব সাইট ভিডিট করি তখন একটা বিষয় লক্ষ্য সেটা বিভিন্ন স্টাইলে ফেসবুক লাইক বক্স। কিন্তু আসলে আমরা জানি না কিভাবে আমাদের ব্লগ সাইটে ব্যবহার করা যায়। তো বন্ধুরা এই পদ্ধতি শুধুমাত্র One IP থেকে একবার মাত্র দেখতে পারেন। যাতে করে ভিজিটর গণ বিরক্ত হবেনা। তো দেখুন 

Live Demo

উপরের লাইক বক্স ডেমো হতে দেখে নিতে পারেন। কিন্তু আপনারা IP হতে একবার দেকতে পাবেন। আর দেখা মাত্র যদি পেজটি আপনার ভাল লাগে তাহলে লাইক দিবেন।

কিভাবে আপনার ব্লগে ব্যবহার করবেন।  

• প্রথমে আপনার ব্লগার একাউন্ট লগিন করুন।
• ড্যাশবোড হতে লেআউট নির্বাচন করুন।
• তারপর এ্যাড এ ওয়েডগেট বাটনে ক্লিক করুন। 
• এবার HTML/JavaScript বাটনে ক্লিক করুন এবং নিউ ইউন্ডোজ দেখতে পাবেন।
• কনটেন্ট ঘরে নিচে কোডটুকু কপি করে পেষ্ট করুন। 

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbcontainer-bg {
background: #444444;
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#close-button {
width: 100%;
height: 100%;
}
#widget-display {
background: #FFFFFF;
padding-top:7px;
padding-left:8px;
border:5px dotted #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
width: 340px;
height: 228px;
position: absolute;
top: 30%;
left: 35%;
}
#button-position {
float:right;
cursor: pointer;
position: absolute;
right: 2px;
top: 5px;
}

#button-position:before {
content: "Close";
padding: 4px 6px;
background: #000000;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
color: #eaeaea;
font-weight: bold;
font-size: 10px;
font-family: Trebuchet MS;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
color: # BAB9B9;
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 to 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_ box') != 'yes'){
$('#fbcontainer-bg').delay(3000).fadeIn('medium');
$('#button-position, #close-button').click(function(){
$('#fbcontainer-bg').stop().fadeOut('medium');
});
}
$.cookie('popup_ box', 'yes', { path: '/', expires: 6 });
});
</script>
<div id='fbcontainer-bg'>
<div id='close-button'>
</div>
<div id='widget-display'>
<div id='button-position'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/bloggingjagatbd&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://bloggingjagat.com" rel="nofollow">Blogging Jagat</a></div>
</div>
</div>

 

 

 

উপরের ব্লু কালার হতে আপনার  ফেসবুক নেম ব্যবহার করুন। ব্যস আপনার কাজ শেষ। এবার আপনারা ব্লগ সাইট ভিডিট করে দেখুন কাজ হয়েছে।

তো বন্ধুরা আপনাদের জন্য আজ এই পর্যন্ত। আল্লাহ হাফেজ।