কিভাবে প্রতিটি পোস্ট ভিউ কাউন্ট ওয়েডগেট ব্লগার ব্লগে যুক্ত করবেন !

প্রতিটি পোস্ট ভিউ ওয়েডগেট ব্লগার ব্লগে কিভাবে ব্যবহার করবেন ? আশাকরি পোস্ট ভিউ ওয়েডগেট কি সেটা সবাই বুঝেগেছেন। যদি না বুঝে থাকেন তাহলে সহজ ভাবে বলি এটা হচ্ছে সহজ বাংলা ভাষাই কোন পোস্ট কতবার দেখা হয়েছে সেটাই। আপনি লক্ষ করবেন বিভিন্ন বাংলা ওয়ার্ডপ্রেস ব্লগে এই ধরমের কাউন্ট ওয়েডগেট ব্যবহার করে থাকে। এখুন থেকে আপনিও আপনার ব্লগার ব্লগে ব্যবহার করতে পারবেন। আসলে ওয়ার্ডপ্রেসে সব জিনিস খুব সহজে পাওয়া যাই কিন্তু ব্লগারে ওয়ার্ডপ্রেস এর মত সব কিছু ব্যবহার এর সুযোগ পাওয়া যাইনা তবে কিছু এক্সপার্ট ব্লগার দের কারনে আজকে আমারা সেই পোস্ট ভিউ কাউন্ট ওয়েডগেট আমাদের ব্লগার ব্লগেও ব্যবহার করার সুযোগ পেতে যাছি। তাহলে বন্ধুরা এই বিষয়ে বেশি কথা বলে সময় নষ্ট না করে চলুন দেখে নেওয়া যাক কিভাবে কাজটি করবেন।

Live Demo

কিভাবে প্রতিটি পোস্ট ভিউ কাউন্ট ওয়েডগেট ব্লগার ব্লগে যুক্ত করবেন :

প্রথমে আপনি এই লিঙ্কে ক্লিক করে Firebase  সাইটে যান এবং একটি অ্যাকাউন্ট করুন। অ্যাকাউন্ট করার জন্য একটি ইমেল এবং একটি পাসওয়ার্ড বসিয়ে দিন এবং অ্যাকাউন্ট তৈরি করুন। অ্যাকাউন্ট হয়েগেলেই লগইন অবস্থাই থাকবেন এবং Welcome to Firebase পেজ আসবে তার নিচে দেখুন Create my app অপশন থেকে আপনি APP NAME এর যাইগাই আপনার সাইট নাম বা আপনার পছন্দের নাম দিন এবং দেখুন নিচে একটি URL তৈরি হয়ে যাবে সব শেষে CREATE MY APP এ ক্লিক করে অ্যাপ তৈরি করেনিন। নিচের চিত্রে দেখুন।

উপরের চিত্রে দেখুন একটি URL তৈরি হয়েগেছে এখুন আমাদের ঐ URL টাই ব্যবহার করতে হবে এর পরের স্টেপে।  যাই হোক এবার Manage App এ ক্লিক করুন ডান পাশ থেকে।

এবার আপনি আপনার ব্রাউজার ট্যাব থেকে URL টি কপি করুন এককথাই APP URL টা কপি করুন নিচের চিত্রে দেখুন।

এবার আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Template এ ক্লিক করে Edit HTML এ ক্লিক করুন এবং এই ট্যাগটি সার্চ করে বের করুন ]]></b:skin> এই ট্যাগ খুজে পেলে তার ঠিক উপরে নিচের সিএসএস কোড গুল কপি করে পেস্ট করুন।

 .post-header-line-1 {overflow:hidden}
.viewers{margin:10px 0;display:table;background:#fefefe;color:#333;padding:6px 12px;box-shadow:inset 0 0 0 1px #c9c9c9;cursor:default;font-weight:bold;transition:all .3s ease-out}
.viewers:hover {background:#aaa;color:#fff;box-shadow:inset 0 0 0 1px #888;}
.viewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXUdmI6YIevmOasTtiyPaqPpgLnUpem0lIwBeviFHBuPLDFaMRQb6vM9dH5kW_2HirwMGce0IQkqo5V5ot1HANCQL4oEoAKUnrzBeFA9Lb4nw2G9rFEjVqXK3_ivt6W5co7x-2qo1Okdqv/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}

এবার আপনি একি ভাবে এই ট্যাগটি সার্চ করে খুজে বের করুন </body> খুজে পেলে এই ট্যাগ এর ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন।

 <b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// View counter
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://esobondhu.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</script>
</b:if>

এখানে লক্ষ করুন https://esobondhu.firebaseio.com/ একটি URL আছে এখুন আপনি সেই URL মুছে সেখানে আপনি যে APP URL করলেন দুই নাম্বার ফটোতে সেই URL এখানে বসিয়ে দিন।

আগের মত একি ভাবে এই ট্যাগটি সার্চ করুন <data:post.body/> তবে লক্ষ রাখতে হবে এই ট্যাগ আপনি আপনার টেম্পলেটে ২/৪ বার পেতে পারেন কিন্তু আপনি যতবারি পান না কেন ২ নাম্বরে যেটা পাবেন তার ঠিক উপরে নিচের কোড গুল বসিয়ে দিন।

 <div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Dilihat&amp;nbsp;<span class='loading'/>&amp;nbsp;Kali</div>
</b:if>
</div>
</div> 

এবার সব শেষে এই jquery লিঙ্ক যদি আপনার থিমে ইন্সটল থাকে তাহলে অ্যাড করতে হবে না।আর যদি ইন্সটল না থাকে তাহলে এই ট্যাগ </head> এর ঠিক উপরে নিচের লাইনটি বসিয়ে দিন।

 <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

সব কিছু সঠিক ভাবে বসানোর পর Save Template এ ক্লিক করুন তার আগে অবশ্যই আপনার থিম ব্যাকউপ নিয়ে নিবেন। অথবা সব কাজ শেষে সেভ করার পূর্বে থিম প্রিভি দেখে নিবেন। যাই হোক আশাকরি কাজ টি করতে আপনি সফল হয়েছেন। যদি উপরের টিপস থেকে বুঝতে কোন সমস্যা হয় বা কাজ না হয় জানাবেন আমি পোস্ট আপডেট করতে চেস্ট করবো এবং হেল্প করতে চেস্ট করবো। তাহলে ভাল থাকবেন পোস্ট ভাল লাগলে বন্ধুদের সঙ্গে শেয়ার এবং কমেন্ট করতে ভুলবেন না। আসসালামু আলাইকুম।

তথ্য : এসো বন্ধু

সম্পূর্ণ পড়ুন

ব্লগার ব্লগের ডিফল্ট বুলেট লিষ্ট কাষ্টমাইজ করে CSS স্টাইলে যুক্ত করুন।

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

উপরের স্টাইলের মত দেথতে হবে। তাহলে ডেমো দেখার কোন প্রয়োজন নাই। নিচ থেকে দেখে নিন নতুন এই স্টাইল।

কিভাবে ডিফল্ট বুলেট লিষ্ট কাষ্টমাইজ করে CSS স্টাইলে যুক্ত করবেন।

• প্রথমে আপনার ব্লগার একাউন্ট লগিন করুন।
• তার পর ড্যাশবোর্ড হতে ড্রাপ ডাউন মেনু থেকে টেমপ্লেট নির্বাচন করুন। 
• এবং HTML Edit নির্বাচন করুন। 
• নিচের কোডটুকু খুজে বের করুন। 

]]></b:skin>

• এবার নিচের কোডটুকু হুবাহু কপি করে পেষ্ট করুন।

 CSS
.post ul {

list-style:none;

}

.post ul li {

line-height: 1.4em;

background: transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1tWSU-CNXOEYgebx93Ufiewe6PfbmvHhVkueJK-wnCBfVV_hJD3Z6HN5asW3vtGTRqLrp73JyWPagxZTmN8CtLZuHFMT-Bx807rOg-SiKFKiKlchSE4sOisTwbD1t-T3ljoA8wKX9jU8/s1600/BloggerSpice+Star+Filled.png)
 no-repeat scroll 0px -1px;

font:14px "Oswald",sans-serif;

margin: 0.3em 0;

padding: 0 0 0.8em 20px;

}

.post ul li:hover {

background: transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fkTksAnS8-i6EuqsUAv0ODXOUIcfwnBl84j6kZNRBHAgYHASSGdd6T9Ng4TUWmVcpyJFIwE53wP-nlMPIM7vfMFUC_YvXVOuTxTAoDs4_Zw89zz7_ab_52A3Ob0lXeN7h-dc6JMiuNw/s1600/BloggerSpice+Star+Unfilled.png)
 no-repeat scroll 0px -1px;

}

.post ul li:active{

background: transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1tWSU-CNXOEYgebx93Ufiewe6PfbmvHhVkueJK-wnCBfVV_hJD3Z6HN5asW3vtGTRqLrp73JyWPagxZTmN8CtLZuHFMT-Bx807rOg-SiKFKiKlchSE4sOisTwbD1t-T3ljoA8wKX9jU8/s1600/BloggerSpice+Star+Filled.png)
 no-repeat scroll 0px -1px;

}

• সর্বশেষ টমেপ্লেটটি সেভ করে বের হয়ে আসুন।

 কিভাবে এই বুলেট লিষ্ট ব্যবহার করবেন।

 আপনি পোষ্ট লেখার অপশনে যান এবং সেখান আপনি যে অংশটুকু বুলেট লিস্ট করতে চান সেই অংশটুকু নির্বাচন করুন। তার পর বুলেট লিষ্টে ক্লিক করুন। 

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

আজ এই পর্যন্ত আল্লাহ হাফেজ। 

সম্পূর্ণ পড়ুন

আপনার ব্লগার ব্লগে যুক্ত অসাধারন একটি অটো এনিমেশন Latests Posts ওয়েডগেট। সকলের ভাল লাগবে!!!

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

লাইভ ডেমো দেথতে ভিডিট করুন।

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

• প্রথমে আপনার ব্লগার ড্যাশবোর্ডে প্রবেশ করুন। 
• তার পর ড্রাপ ডাউন মেনু হতে লে আউট নির্বাচন করুন।
• এবং Add widget বাটনে ক্লিক করুন। 
• তার পর HTML/JavaScript ক্লিক করুন। 

• টালটেল ঘর ফাকা রেখে কনটেন্ট ঘরে হুবাহু নিচের কোডটুকু করি কে পেষ্ট করুন।

<style> .gfg-root { width: 100%; height : auto; position : relative; overflow : hidden; margin: 0 auto; text-align : center; font-size: 12px; border: 1px solid #DBDBDB; } .gfg-title { font-size: 16px; font-weight : bold; color : #6B6B6B; background:#F3F3F3; background-repeat: repeat; line-height : 1.4em; overflow : hidden; white-space : nowrap; padding: 5px; text-shadow: 0px 2px #fff; } .gfg-entry { background-color: #FFFFFF; width : 100%; height : 9.2em; position : relative; overflow : hidden; text-align : left; margin-top : 3px; } .gf-title a { text-transform: capitalize; color: #0000ff; font-size: 14px; } .gfg-subtitle { display: none; } .gfg-list { position : relative; overflow : hidden; text-align : left; } .gfg-listentry { line-height : 1.5em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; padding-left : 15px; padding-right : 5px; } .gfg-listentry-odd { background-color : #F3F3F3; border-bottom : 1px dotted #CCCCCC; padding: 5px; } .gfg-listentry-even { background-color : #F3F3F3; border-bottom : 1px dotted #CCCCCC; padding: 5px; } .gfg-listentry-odd a{ color: #595959; padding: 0 0px 0 10px; } .gfg-listentry-even a{ color: #242424; padding: 0 0px 0 10px; } .gfg-listentry-highlight { background: #FFFFFF; } .gfg-listentry-highlight:before { position: absolute; left: 0; content: '\25BA '; font-size: 14px; color: #DBDBDB; } .gfg-listentry-highlight a { color: #242424; } .gfg-root .gfg-entry .gf-result { position : relative; background-color: #ffffff; width : auto; height : 100%; padding-left : 20px; padding-right : 5px; } .gfg-root .gfg-entry .gf-result .gf-title { font-size: 14px; line-height : 1.2em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; margin-bottom : 2px; margin-top: 5px; } .gfg-root .gfg-entry .gf-result .gf-snippet { height : 3.8em; color: #000000; margin-top : 3px; } .clearFloat { clear : both;}</style> <script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> <script type="text/javascript"> function showGadget() {var feeds = [{title:'List',url:'http://bloggingjogot.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},]; new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1"); google.setOnLoadCallback(showGadget); </script> <div id="feedGadget">Loading...</div>

[ বি: দ্র: হাই লাইট কালার করা স্থানে আপনার ওয়েব সাইট লিংক ব্যবহার করুন।

• ব্যস এবার সেভ দিয়ে বের হয়ে আসুন।

এবার আপনার কাজ শেষ । বন্ধুরা তাহলে আজ এই পর্যন্ত । কোন কিছু  জানার থাকলে নিচের কমেন্ট এর মাধ্যমে জানাবেন। আল্লাহ হাফেজ।

সম্পূর্ণ পড়ুন

অসাধারন একটি সাইটম্যাপ যুক্ত করুন আপনার ব্লগ সাইটে!! নতুন ফিউচার

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

লাইভ ডেমো দেখতে এখানে ক্লিক করুন।

কিভাবে আপনার ব্লগ সাইটে "সাইটম্যাপ যুক্ত করবেন?

বন্ধুরা আপনাদের বুঝার সুবিধার জন্য নিচে একটি স্কীনসর্ট দেখে নিন। স্কীনসটটি হলো। 

• প্রথমে আপনার ব্লগ সাইটে এ্যাডমিন প্যানেলে প্রবেশ করুন।
• তার পর ড্রাপডাউন মেনু হতে "Page" অপশনটি নির্বাচন করুন।
• সর্বশেষ পোষ্ট বাটন হতে "HTML" মুড়ে ক্লিক করুন। 
• এবং নিচের কোডটুকু হুবাহু কপি করে পেষ্ট করুন।

<style scoped="" type="text/css">
#bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#comments {display:none;}
</style>
<div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;">
</div>
<script src='https://googledrive.com/host/0B3jgs-7rv9eUNFdPU2RyeDZKakU' type='text/javascript'></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

Page  এ Publish বাটনে ক্লিক করনেই হবে। ব্যস এবার আপনার কাজ শেষ।

আজ আপনাদের সাথে এই পর্যন্ত। আগামীতে আরো নতুন কিছু নিয়ে আপনাদের সাথে হাজির হব ততদিন পর্যন্ত আপনারা আমাদের সাথে থাকুন। আল্লাহ হাফেজ।

সম্পূর্ণ পড়ুন

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

বন্ধুরা আমার সালাম নিবেন। আশা নয় বিশ্বাস করি আপনারা সকলে ভাল আছেন। আর আপনাদের ভাল লাগাকে কেন্দ্র করে আমার ভিন্ন ধারার পোষ্ট। আমরা যথন অন্যে কোন ওয়েব সাইট ভিডিট করি তখন একটা বিষয় লক্ষ্য সেটা বিভিন্ন স্টাইলে ফেসবুক লাইক বক্স। কিন্তু আসলে আমরা জানি না কিভাবে আমাদের ব্লগ সাইটে ব্যবহার করা যায়। তো বন্ধুরা এই পদ্ধতি শুধুমাত্র 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>

 

 

 

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

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

সম্পূর্ণ পড়ুন