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

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

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

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

Read More

ব্লগার ব্লগের ডিফল্ট বুলেট লিষ্ট কাষ্টমাইজ করে 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/AVvXsEjevcaqTtlx45VeJSig4-MwOjOEMHvj-GmSnq4V3C1BoZzUNldDa97xcA19Pj3jPl1a-vmQ00eT4Ivgh3QvVJhdNRFeKNP3x6HuiM5xPj1wivLmpABX5nmLhJsSMz3gYyIp2bOHoFb7gvw/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/AVvXsEinVijFbYnYk2Edr-F5G4n1sjJTnN6s8BHbPMOs8YdDS0S-vMY61ODfE3SSh59IY9rEqn4QoLuz7UGcOGguyTcmB1tfx2z91oj0Q2svV3cc9v0pAJQ0AHQWSZfPEdhkVcHqdnSIER2ClwE/s1600/BloggerSpice+Star+Unfilled.png)
 no-repeat scroll 0px -1px;

}

.post ul li:active{

background: transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjevcaqTtlx45VeJSig4-MwOjOEMHvj-GmSnq4V3C1BoZzUNldDa97xcA19Pj3jPl1a-vmQ00eT4Ivgh3QvVJhdNRFeKNP3x6HuiM5xPj1wivLmpABX5nmLhJsSMz3gYyIp2bOHoFb7gvw/s1600/BloggerSpice+Star+Filled.png)
 no-repeat scroll 0px -1px;

}

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

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

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

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

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

Read More

আপনার ব্লগার ব্লগে যুক্ত অসাধারন একটি অটো এনিমেশন 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>

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

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

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

Read More

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

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

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

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

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

• প্রথমে আপনার ব্লগ সাইটে এ্যাডমিন প্যানেলে প্রবেশ করুন।
• তার পর ড্রাপডাউন মেনু হতে "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 বাটনে ক্লিক করনেই হবে। ব্যস এবার আপনার কাজ শেষ।

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

Read More

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

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

 

 

 

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

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

Read More

ফ্রি ডাউনলোড করুন অসাধারণ একটি রিপ্সসিভ ব্লগার থীম।

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

বন্ধুরা একটি না বলেল নয় আপনারা যে থীমটির ছবি দেখতে পারছেন SEO & Responsive Tamplate করা। শুধু মাত্র আপনার ব্লগ সাইটে ব্যবহার করে মজা উপভোগ করতে থাকুন। 

থীমের সাথে কি কি থাকছে এক নজরে দেথে নিন। 

Features	Availability
Responsive	True Cek
SEO	True Cek
Google Testing Tool Validator	True Cek
Custom Mobile Version	True Cek
Custom Threaded Comment	True
Dynamic Heading	True
2 Column	True
Light Base Theme Color	True
Simple Flat Design	True
Auto Read More with Thumbnail	True
Responsive Ad Slot	True
Breadcrumbs	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Mini Homepage Share Button	True
Sidebar Tab Widget	True
Recent Post Widget	True
Recent Comment Widget	True
Custom 404 Page	True
Smooth Scroll back To Top	True
Better Print Page Layout	True
Custom Subscribe Box Widget	True
Sitemap Widget	True Add
Contact Form Widget	True Add
Well Documentation	True Get

এবং থীমটি সম্পূর্ণ ভাবে CSS দিয়ে তৈরি করা।

ডেমো
ডাউনলোড লিংক

এছাড়া থীমটির আপডেট ভার্সন থাকছে একই সাথে। তো আপনারা নিচ থেকে থীমটির আপডেট ভার্সন সংগ্রহে রাখতে পারেন।

ডেমো
ডাউনলোড লিংক

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

Read More

আপনার ব্লগার ব্লগে ছবির উপরে যুক্ত করুর পিন্টারেষ্ট বাটন!! [মেগাপোষ্ট]

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

আসলে একটি কথা না বললে নয়। পিন্টারেষ্ট ব্যবহার করলে নিন্মোক্ত কিছু বৈশিষ্ট্য আপনারা লক্ষ্য করতে পারবেন। সেটা হলো ......

পিন্টারেষ্ট উইডেট ব্যবহারের কিছু বৈশিষ্টসমূহ। 

1. এটি উইজেটটি সহজভাবে ব্লগের শিরোনাম এবং URL সনাক্ত করতে পারবে। 
2. এটি সংক্রিয়ভাবে পোষ্ট শিরোনাম এবং বিস্তারিত বর্ণনা দখল করবে। 
3. ব্লগার তাদের নিজস্ব পিন বাটন সহজে ব্যবহার করতে পারবে। 
4. সহজে পিন বাটন Movable the pin button position।
5. এছাড়া ফায়ারবক্স, গুগল ক্রম, ওপেরা সহ সকল ব্রাউজারের সংঙ্গে সামঞ্জস্যপূর্ণ এই উইজেটটি।

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

• প্রথমে আপনার ব্লগার ব্লগে ড্যাশবোর্ডে প্রবেশ করুন। 
• তার পর ড্যাশবোর্ড হতে ড্রাপ ডাউন মেনু থেকে টেমপ্লেট নির্বাচন করুন। 
• এবং এডিট টেমপ্লেটটি ক্লিক করুন। 
•  এবার আপনারা Ctrl+F চেপে </body> খুজে বের করুন।
• </body> ট্যাগের উপরে এবার আপনারা নিচের কোডটুকু হুবাহু কপি করে পেষ্ট করুন।

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj372re3T8ZwsOXOUw0BxsDCy14Mxe-IUPggjp-z1070sdgq_dMKas3yb7MIp-FYmVNFSvaKvt9Iyp_LBPD8Hzhc6OQ5LkxoGe6bEoDnsWnpYwlRM1f-TnGAmgvkH4AzDWSG_ZaQF6DGf-r/s1600/BloggerSpice+Pinterest-Pinned.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script id='spice-pin' type='text/javascript'>
/*<![CDATA[*/
jQuery(document).ready(function($){$('body').append('<img style="visibility:hidden;" class="loadpinitbutton" src="'+custom_pinit_button+'" >');$('#spice-pin').hide();var l;var m;var n;$('.loadpinitbutton').load(function(){m=$('.loadpinitbutton').outerWidth(true);n=$('.loadpinitbutton').outerHeight(true);$('.loadpinitbutton').remove()});var o=$('#spice-pin').html().indexOf("helplogger.blogspot.com");o!=-1&&hoverCheck();function hoverCheck(){$('.entry-content img,.post-body img,.entry-summary img').not('.nopin,.nopin img').mouseenter(function(){$('.pinit-visibility').css("visibility","hidden");clearTimeout(l);var a=$(this);var b=parseInt(a.css("margin-top"));var c=parseInt(a.css("margin-left"));var d;var e;switch(pinit_button_position){case'center':d=a.position().top+a.outerHeight(true)/2-n/2;e=a.position().left+a.outerWidth(true)/2-m/2;break;case'topright':d=a.position().top+b+5;e=a.position().left+c+a.outerWidth()-m-5;break;case'topleft':d=a.position().top+b+5;e=a.position().left+c+5;break;case'bottomright':d=a.position().top+b+a.outerHeight()-n-5;e=a.position().left+c+a.outerWidth()-m-5;break;case'bottomleft':d=a.position().top+b+a.outerHeight()-n-5;e=a.position().left+c+5;break}var f=a.prop('src');var g=a.closest('.post,.hentry,.entry').find('.post-title,.entry-title,.entry-header');var h=g.text();if(typeof pinit_button_before==='undefined'){pinit_button_before=''}if(typeof pinit_button_after==='undefined'){pinit_button_after=''}if(g.find('a').length){pinitURL=g.find('a').attr('href').replace(/\#.+\b/gi,"")}else{pinitURL=$(location).attr('href').replace(/\#.+\b/gi,"")}var i='<div class="pinit-visibility" style="display:none;position: absolute;z-index: 9999;" ><a href="http://pinterest.com/pin/create/button/?url='+pinitURL+'&media='+f+'&description='+pinit_button_before+h+pinit_button_after+'" style="display:block;outline:none;" target="_blank"><img class="pinimg" style="-moz-box-shadow:none;-webkit-box-shadow:none;-o-box-shadow:none;box-shadow:none;opacity: 0.8;background:transparent;margin: 0;padding: 0;border:0;" src="'+custom_pinit_button+'" title="Pin on Pinterest" ></a></div>';var j=a.parent().is('a')?a.parent():a;if(!j.next().hasClass('pinit-visibility')){j.after(i);if(typeof l==='undefined'){j.next('.pinit-visibility').attr("onmouseover","this.style.opacity=1;this.style.visibility='visible'")}else{j.next('.pinit-visibility').attr("onmouseover","this.style.opacity=1;this.style.visibility='visible';clearTimeout(pinitOnHover)")}}var k=j.next(".pinit-visibility");k.css({"top":d,"left":e});k.css("visibility","visible");k.stop().fadeTo(300,1.0,function(){$(this).show()})});$('.entry-content img,.post-body img,.entry-summary img').on('mouseleave',function(){if($.browser.msie){var a=$(this).next('.pinit-visibility');var b=$(this).parent('a').next('.pinit-visibility');l=setTimeout(function(){a.stop().css("visibility","hidden");b.stop().css("visibility","hidden")},3000)}else{$('.pinit-visibility').stop().fadeTo(0,0.0)}})}});
//]]>
</script>

• এবার আপনার ব্লগারের টেমপ্লেটটি সেভ করুন এবং প্রিভিউ করে দেখুন কাজ হয়েছে।

এবার বন্ধরা আপনাদের একটি কাজ অবশ্যই করতে হবে। সেটা আপনার ব্লগার টেমপ্লেটটিতে একটি সাধারন জাভাস্কিপ্ট আছে সেটা পরিবর্তন করতে হবে। 

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

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

Read More

আপনার ব্লগার ব্লগে ব্যবহার করুন Floating/Pop-up অ্যাড ব্যানার সঙ্গে ফেসবুক লাইক বক্স !!

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

Live Demo

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

বিজ্ঞাপন ব্যবহার করার জন্য নিচের ধাপ গুলো অনুসরন করুন।

• আপনার ব্লগ সাইটের ড্যাশবোর্ড লগিন করুন। 
• ড্যাশবোর্ড হতে লেআউট নির্বাচন করুন। 
• Add a Gadget এ ক্লিক করে HTML/Javascript এ ক্লিক করুন।
• টাইটেল ঘর ফাকা রেখে Content ঘরে নিচের কোড গুল বসিয়ে দিন।

<style>
#BloggerSpices.com{
height:0px;
width:auto;
background:transparent url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:0px;
}
#Biggapon{
height:280px;
margin:0 auto;
width: 620px;
background:#FEFEFE;
text-align:center;
padding:4px;
}
#BiggaponArUpore{
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:30%;
left:30%;
background:transparent;
padding:0px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("BiggaponArUpore").style.display = 'none';
}
</script>
<div id="BiggaponArUpore">
<div id="BloggerSpices.com">
<span style="color:#333333;font-size:13px;font-weight:bold;float:right;padding-top:1px;padding-right:10px"><a href="http://www.esobondhu.com/" target="_blank" onclick="getValue()">close(x)</a></span>
</div>
<div id="Biggapon">
<p>
<table border='0' cellpadding='0' cellspacing='0' color='#FFFFFF' width='610' style='margin: 5px 5px 0 0'>
<tr>
<td align='center' style='background-color: #FFFFFF; padding: 5px;' width='300'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fblogginjagat&amp;width=300px&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=155204787972563" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:250px;" allowtransparency="true"></iframe>
</td>
<td align='left' style='background-color: #FFFFFF; padding: 5px;' width='300'>
<script type='text/javascript' src='http://ads.qadservice.com/t?id=ef539717-f25f-4e90-aa4f-7c9a47be2c0c&size=300x250'></script>
</td>
</tr>
</table>                        
</p>
</div>
</div>

উপর থেকে নীল রঙের কোড গুল পরিবর্তন করতে হবে যেমন - সব উপরে 620 পরিবর্তন করে আপনার পছন্দ মত দিয়ে দিন , তারপরে top এবং left এর সাইজ ঠিক করে নিতে পারে সেটা আপনার ব্যাপার , bloggingjagat মুছে সেখানে আপনার ফেসবুক এর user নাম বসান সব নিচে দেখুন দুই লাইনের কোড আছে সেটা মুছে সেখানে আপনার বিজ্ঞাপন কোড বসান ।

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

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

Read More

আপনার ব্লগার ব্লগে বিভিন্ন স্টাইলে Most Commented ওয়েডগেট যুক্ত করবেন (সিএসএস স্টাইলসহ)

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

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

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

1. প্রথম ডেমো কোড হলো।

<style>
.comment-count {
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
margin-top: -10px;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
margin-top:10px;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
padding-top:-15px;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://bloggingjogot.blogspot.com&amp;NumberofPosts=7&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

1. 2 ২য় ডেমো হলো।

<style>
.comment-count {
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
margin-top: -10px;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
margin-top:10px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
padding-top:-15px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://bloggingjogot.blogspot.com
&amp;NumberofPosts=7
&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

1. 3 ৩য় ডেমো দেখুন।

<style>
.comment-count {
border-radius: 30px;
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
margin-top: -10px;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
margin-top:10px;
border-radius: 30px;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
border-radius: 30px;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
border-radius: 30px;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
padding-top:-15px;
border-radius: 30px;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
border-radius: 30px;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://bloggingjogot.blogspot.com
&amp;NumberofPosts=7
&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

1. 4 চার নং ডেমো দেখুন।

<style>
.comment-count {
border: 8px inset #0572F8;
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
border: 8px inset #0572F8;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://bloggingjogot.blogspot.com
&amp;NumberofPosts=7
&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

কাষ্টমাইজ করবেন কিভাবে দেখে নিন?

• বোল্ড কালার কৃত লেখাটি পরিবর্তন করবেন। আপনার ব্লগ সাইট লিংক এবং পোস্ট সংখ্যা আপনার মনের মত করে পরিবর্তন করে নিবেন।

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

Read More

কিভাবে আপনার ব্লগার ব্লগের ব্লগপোষ্টের উপরে 2 Column বিজ্ঞাপন যুক্ত করবেন। [মেগা পোষ্ট]

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

এই টিউটোরিয়াল আমি আমরা বিজ্ঞাপন থেকে সর্বোচ্চ আয় জেনারেট করার জন্য ব্লগ পোস্ট উপরের বিজ্ঞাপন স্থাপন করতে পারেন। কিভাবে আপনি প্রদর্শন করবে. এই কৌতুক প্রয়োগের দ্বারা আপনি সক্ষম ব্লগ পোস্ট উপরের 2 কলাম বিজ্ঞাপন প্রদর্শন হবে এবং বিজ্ঞাপন সব পাতায় দৃশ্যমান হবে। ভাল ফলাফলের জন্য, যার আকার 300px প্রস্থ এবং 250px উচ্চতা বিজ্ঞাপন কোড নিতে পারেন। শুধু এডসেন্স বিজ্ঞাপন স্থাপন করতে পারেন কিন্তু বিজ্ঞাপনদাতার বিজ্ঞাপন যে কোন ধরণের আপনি সেখানে স্থাপন করতে পারেন।

ব্লগ পোস্ট উপরের একটি উইজেট ধারক যোগ করার পদ্ধতি।

প্রথম আমরা ব্লগ পোস্ট উপরের একটি উইজেট ধারক তৈরি করা আছে। তাই কল্যাণকামী নীচের পদক্ষেপগুলি অনুসরণ করুন।

ধাপ 1 আপনার ব্লগার অ্যাকাউন্টে লগ ইন করুন এবং আপনার ব্লগার ড্যাশবোর্ড এ যান

ধাপ 2 ক্লিক করুন ক্লিক করুন -> টেমপ্লেট -> HTML সম্পাদনা করুন

ধাপ 3 এখন এইচটিএমএল এডিটর এর উপর থেকে বাটন উইজেট থেকে ঝাঁপ দাও এ ক্লিক করুন এবং Blog1 নির্বাচন করুন।

ধাপ 4 আপনি নচের কোডটুকু থুজেঁ বের করুন <b:section class='main' id='main' showaddelement='no'> এবং তারপর এই কোডটি স্থানে কোডটুকু কপি পেষ্ট করুন।
<b: widget id = 'Blog1' locked = 'true' title = 'Blog Posts' type = 'Blog'>

 ধাপ 5 এবার আপনি উপরের কোডটুকু হতে সামান্য কিছু অসংখ্য পরিবর্তন করে নিবেন। সেটা হলো <b:section class='main' id='main' showaddelement='no'> এর পরিবর্তে
<b:section class='main' id='main' showaddelement='yes'> ব্যবহার করবেন। 

ব্যস এবার কাজ শেষ। আপনার ব্লগের টেমপ্লেটটি সেভ করে বের আসুন। আপনাদের সকলে অসংখ্য ধন্যবাদ। 

ব্লগ পোস্ট উপরের 2 কলাম বিজ্ঞাপন কোড স্থাপন।

সফলভাবে উইজেট টি ব্যবহার করার জন্য নিচের পদ্ধতি অনুসরন করতে হবে। 

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

• তারপরে নিচের কোডটুকু কপি করে পেষ্ট করুন এবং নির্ধারিত স্থানে বিজ্ঞাপনের কোড ব্যবহার করলে আপনার ব্লগের হোম পেজে দেখা যাবে। 

<table border='0' cellpadding='0' cellspacing='0' color='#FFFFFF' width='610' style='margin: 5px 5px 0 0'>
<tr>
<td align='center' style='background-color: #F5F5F5; padding: 5px;' width='300'>
FIRST ADVERTISING CODE HERE
</td>
<td align='left' style='background-color: #F5F5F5; padding: 5px;' width='300'>
SECOND ADVERTISING CODE HERE
</td>
</tr>
</table>

কাষ্টমাইজ করবেন কিভাবে?

• ১ম কোডটুকু আপনার বিজ্ঞাপনের দৈর্ঘ্য ৩০০পিক্সেল এবং প্রস্থ ২৫০ পিক্সেল ব্যবহার করবেন। 

পোষ্টটি যদি আপনাদের সামান্যতম কাজে আসে তাহলে মন্তব্য করে লেখক কে উৎসাহিত করতে ভূলবেন না। কেননা আপনার একটি মন্তব্য লেখক কে সুন্দর সুন্দর লেখা উপহার দিতে উৎসাহিত করে। ধন্যবাদ।

 

Read More

আপনার ব্লগার ব্লগে যুক্ত করুন "টুইটার ফিড উইগেট বাটন" !!!!

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

এবার আপনারা কিভাবে কাজটি করবেন তা দেখুন ধাপে ধাপে?

• প্রথমে আপনার এই লিংকটিতে প্রবেশ করুন। 
• তারপর আপনারা নিচের চিত্রটি লক্ষ্য করুন। 

  

• এবার আপনার ব্লগার ব্লগের ড্যাশবোর্ডে প্রবেশ করুন। 
• সেখান থেকে লেআউট বাটনটি নির্বাচন করুন। 
•  নিচের চিত্রটি দেথতে পাবেন।
• এবার আপনি ব্লগার ড্যাশবোর্ড হতে লেআউট নির্বাচন করার এড উইগেট বাটনে ক্লিক করুন। 
• এড এ উইগেট বাটন হতে HTML/ JavaScript Tab  নির্বাচন করুন। 

 

• সেভ বাটনে ক্লিক করুন। ব্যস এবার আপনার কাজ শেষ।

 <a class="twitter-timeline"  href="https://twitter.com/Anwar_hossain1" data-widget-id="549327853666304000">Tweets by @Anwar_hossain1</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
         

আপনাদের সকলে শুভকামনা। আজকের মত এই পর্যন্ত আল্লাহ হাফেজ।

Tweets by @Anwar_hossain1

Read More

আমার ব্লগারে মত আপনার ব্লগস্পট ব্লগে Feedbunner Recent Posts ওয়েডগেট যুক্ত করুন!!!

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

Live Demo দেখতে এখানে ক্লিক করুন?

কিভাবে আপনার ব্লগস্পট ব্লগে Feedbunner Recent Posts যুক্ত করবেন?

• প্রথমে আপনারা এই সাইটে প্রবেশ করুন। 

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

• এবং আপনারা এই ধরনের এই লিংক দেখতে পারেন। 

http://bloggingjogot.blogspot.com/feeds/posts/default

 

• উপরের লাল কালার করা স্থানে আপনার সাইটের URL ব্যবহার করবেন। তার Next বাটনে ক্লিক করবেন। তার নিচের চিত্রের মত একটি পেজ দেখতে পাবেন। 

• এবার আপনার আবার Next বাটলে ক্লিক করার পর নিচের মত একটি পেজ দেখতে পাবেন। 

• উপরের চিত্রে দুইটি ঘর মার্ক করা স্থানে টিক চিহৃ দিয়ে তার পর Next বাটনে ক্লিক করুন। 

• এবার আপনারা উপরের চিত্রে মার্ক করা স্থানে ক্লিক করুন এবং তার নিচের চিত্রের বাম পার্শ্বে বেশ কয়টি অপশন দেখতে পাবেন। সেখান থেকে BuzzBoost বাটনে ক্লিক করার পরে নিচের ছবি দেখতে পাবেন। 

• আপনারা সকলে আপনাদের প্রয়োজন মোতাবেক অপশন গুলো নির্বাচন করবেন এবং তারপর Save/Next বাটনে করলে নিচের চিত্রের মত একটি পেজ দেখতে পাবেন। 

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

আপনার কিভাবে যুক্ত করবেন।

• আপনার ব্লগের ড্যাশবোর্ডে প্রবেশ করুন। 

• সেখানে ড্রাপ ডাউন মেনু হতে লেআউট বাটনে ক্লিক করুন্ 

• তার Add Gadget নির্বাচন করুন। 

• এবার আপনার নতুন একটি উইন্ডোজ দেখতে পাবেন। সেখানে হতে HTML/JavaScript + ক্লিক করার পরে নতুন একটি উইন্ডোজ দেখতে পাবেন। 
• Content ঘরে আপনার তৈরি করা কোডটুকু কপি পেষ্ট করবেন।

সেভ দিয়ে বের হয়ে আসবেন এবঙ তার আপনার কাজ শেষ হবে । তো আপনাদের সকলকে অসংখ্য ধন্যবাদ দিয়ে আজকের মত বিদায় আল্লাহ হাফেজ।

Read More