Monday, March 2, 2015

ব্লগে অটো Scrolling পপ আপ ফেসবুক লাইক বক্স যুক্ত করুন - একদম ভিন্ন সাধের !!

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

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

<style type='text/css'>
#blogtariffFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#blogtariffFBpop a.bsclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#blogtariffFBpop').animate({top:"50px"}, 1000);
// Widget by www.blogtariff.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='blogtariffFBpop'>
<!-- Widget by www.computerjajot.com Start -->
<center><b><a class="Blogtariff">Don't Forget To Join With Our Community</a></b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fgeteverythingcomputers&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe></center>
<!-- Widget by www.computerjajot.com End -->
<a class='bsclose' href='#'>&times;</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://www.computerjajot.com/2015/03/add-tech-scrolling-facbook-popup-like.html">PCTipsTweets </a></center>
</div>
নোট -
  • আপনি পপ আপ ফেসবুক লাইক বক্সে কালার (রং) পরিবর্তন করতে চাইলে, FEFEFE লেখাটি মুছে দিয়ে অন্য কলার কোড ব্যবহার করতে পারেন। 
  • geteverythingcomputers মুছে দিয়ে আপনার ফেসবুক পেজের নাম টাইপ করুন ।
কোন সমস্যা হলে কমেন্ট করুন। ধন্যবাদ

Monday, January 26, 2015

কিভাবে টেবিল কন্টেন্ট অনুযায়ী ব্লগের পেজ বানাবেন ? Update কোড ব্লগারদের জন্য

আজ আমার দেখাবো কি ভাবে লেবেল কন্টেন্ট গুলিকে একই পেজে সম্মিলিত করা যায়। লেবেল কন্টেন্ট বলতে সাধারন কথায় বলতে পারি-অধ্যায় বা চ্যাপ্টার। সাইটের ক্ষেত্রে আমরা লেবেল অনুযায়ী পোষ্ট গুলিকে একই পেজে একত্রীকরন কে বলবো। যেমন কোন পুস্তকের অধ্যায় বা চ্যাপ্টার দেখে নির্বাচন করি কোন চ্যাপ্টারটা পড়ব। ঠিক সাইটের Table Contents বেলাতেও । যাক এবার হয়তো  আপনি ভাবছেন এত সুন্দর Table Contents পোষ্টি  কিভাবে আপনার ব্লগে যুক্ত করবেন ? কি ভাবে করবেন নিম্নে লক্ষ্য করুন-
এটিও পড়ুন -ব্লগস্পট ব্লগে পোষ্ট ভিউ কাউন্টার Plugin যোগ করুন সরল নিয়মে - নতুন !

কিভাবে টেবিল কন্টেন্ট

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

Table Contents পেজের জন্য যা যা করতে হবে-

  •  প্রথমে Blogger এ লগ ইন করুন
  • তারপর Design গিয়ে  Edit HTMLক্লিক করুন
  • এরপর ]]></b:skin>লিখে সার্চ করুন
  • এরপর নিম্ন প্রদত্ত কোডটি ]]></b:skin> উপরে পেস্ট করুন
কোডটি হল-
/*--------MBT TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}
  • এরপর টেম্পলেটিকে সেভ করুন। 
  • এরপর New Page অপশনে ক্লিক করুন
  • এরপর EDIT HTML মোডে ক্লিক করুন।
  • এরপর Blank পেজে নিচের কোডটি পেস্ট করুন

UPDATED কোডটি হল নিম্নরূপ-

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.computerjajot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
নোট- http://www.computerjajot.com এর জায়গায় আপনার সাইটের URL টাইপ করুন। 
সবশেষে পেজটিকে পাবলিশ করুন। সমস্যা হলে কমেন্ট করুন। ধন্যবাদ।

Wednesday, November 19, 2014

ব্লগের প্রতিটি পোস্টের নীচে সহজে Subscribe বক্স যুক্ত করে নিন

ব্লগ Subscribe কি এবং কেন ?

Subscribe বতাম ব্লগ বা সাইট এর ট্রাফিক ভিজিটর বাড়াতে সাহায্য করে। এত কোন ভিজিটর আপনার ব্লগ বা সাইট Subcribe বতামে ক্লিক করলে পরবর্তীতে আপনি আপনার ব্লগে কোন আর্টিকেল লিখলে Subcriber অর্থাৎ আপনার ভিজিটর সেটি email এর মাধ্যমে সে বার্তা পেয়ে যাবেন। এক কথায় Fecebook ফ্যান পেজ লাইক বতামের মতো। সেজন্য ব্লগে বা পোস্টে Subcribtion বতাম যুক্ত করা আবশ্যিক। এতে ভিজিটর এবং ব্লগারের উভয়ের লাভ। কেননা ব্লগার পরবর্তীতে পুনরায় সেই ভিজিটর ফিরে পেতে পারে আর ভিজিটর ব্লগে নতুন কিছু যুক্ত হলে সেও জানতে পারবে। Subscription বতাম ব্লগে দুই ভাবে যুক্ত করতে পারি (এক) Widget কিংবা সরাসরি (দুই) টেম্পলেটের মাধ্যমে। এই পোস্টে কীভাবে টেম্পলেটের মাধ্যমে Subcribtion বতাম যুক্ত করবো তা দেখানো হয়েছে।
Scribetion

কিভাবে যুক্ত করবো Subscribe বতাম?

  • প্রথমে ব্লগে লগ ইন করুন 
  • তারপর ড্যাশবোর্ড থেকে Template এ ক্লিক করে Edit HTML ক্লিক করুন ।
  • এবার কীবোর্ড এর Ctrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।
<data:post.body/>
উপরের কোডটি খুঁজে পেলে ঠিক তার নিচে নিচের কোডটি পেস্ট করুন।

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fieldset style='border:1px dashed #444;'>
 <legend align='left' style='border:1px dashed #444;; padding: 4px 4px; margin-  left: 20px;'>Subscribe Us</legend>
 <style>
 .TVBstyle{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-H2DqLv01Uw4xZ9gTdwoBf4igIkH2Zx_wPhuqjwgOQU37El0iBx6Vf6_6CZ23wEctH3fJR_BSgsC_O7i0e9PIdIGkOeReHSw78NnfsAPIKGNeGxz02dAEYwSPGmJGARJTMdBnIcyffTHr/s1600/email_icon.png) no-repeat scroll 4px center transparent;padding:7px 15px 7px 35px;border:1px solid #D3D3D3;-moz-border-radius: 4px;-webkit-border-radius: 4px;color:#666;font-weight:bold;text-decoration:none;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}.TVBsubmit{color:#666;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #D3D3D3;cursor: pointer;-moz-border-radius: 4px;-webkit-border-radius: 4px;-goog-ms-border-radius: 4px;border-radius: 4px;background: #fbfbfb;background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}
 </style>
 <center>
 <div id='emailwidget-outer'>
 <div id='emailwidget'>
 <table width='97%'>
 <tbody>
 <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
 <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 15px;'>
 <p style='color:#444; font-size: 16px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
 <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri= asobondhu&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
 <input name='uri' type='hidden' value='asobondhu'/>
 <input name='loc' type='hidden' value='en_US'/>
 <input class='TVBstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;}' type='text/' value='Enter your email'/>
 <input alt='' class='TVBsubmit' title='' type='submit' value='Submit'/>
 </form>
 </td>
 <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#444; font-size: 16px; margin:0px 0px 5px 0px; '>Follow us!</p>
 <a href='http://feedburner.google.com/fb/a/mailverify?uri=computerjajot' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMEEBWPxUMxhMKNoN8Y2axle-8yabL0OhOhC7ShKibIkHf3lYsuuuoy4qq8WJxu7PmjYmWoF7wx017EY_AZpAXBjaBDpgSBWsLxltyN5BfVbQfQo_iAisFuTl81qVSIfg0uvNT0W4xXeok/s1600/rss.png'/>
 </a>
 <a href='http://twitter.com/sarkarmalin' rel='nofollow' target='_blank' title='Follow us on Twitter'>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsCoSMGVh1QRlaoUB8lNhcGnGu7wxUa_7D3-yH5Wx5aOmZ5o7HgZhZ7zAtNTOV-nQAxlVj9pYCcEDxTHJGpQqAaM8932De_fIz7UdTDSpjtUa_qAG3M1c4Rxp6MM-D1pSLS0wusfAQIIN1/s1600/twitter.png'/>
 </a>
 <a href='http://www.facebook.com/geteverythingcomputers' rel='nofollow' target='_blank' title='Follow us on Facebook'>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidsmi5s9Zz4v_0bOxBijHJdrW4Tkyy8IeVKwLYWGGKUtgT2ItwQZW2WVXLt2ql2wIW0j3LoozAYMA5vSckAJNj1S02gQqRwS-hSenHmrNpTuydUSjLnXBebAJniAPXuUJ0ZTN9_uw5PIRY/s1600/facebook.png'/>
 </a>
 <a href='https://plus.google.com/১২৩৪৫৬৭৮৯১২৩৪৫৬৭৮৯' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHufyu9uD5McAQ9kSRUb2b0x49vFD-jIMM6fFLJe3rUb7sALPWvau624cwpJtOi1b7udvRs5U607QTkrUdu0PaHgqii-NRcVx3Ee8qWjkAtNK3VVuKmc1n3PoCQFy-CuZtqIjwEGOS_8zs/s1600/gplus.png'/>
 </a>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </center>
 </fieldset>
 </b:if> 
বিঃ দ্রঃ - লাল চিহ্নিত লেখা গুলি পরিবর্তন করে আপনার গুগল, ফেসবুক, টুঁটার অ্যাকাউন্ট এর অ্যাড্রেস যুক্ত করুন। 
এবার Template টিকে সেভ করুন। তারপর একবার আপনার অয়েব সাইট কিংবা ব্লগ টিকে চালিয়ে দেখুন। সমস্যা হলে জনাবেন। ভালো লাগলে শেয়ার করবেন। সুস্থ থাকুন ভালো থাকুন ধন্যবাদ।

Friday, November 14, 2014

বানিয়ে ফেলুন একটি ডাইনামিক ব্লগের সাইট মাপ

সাইট মাপ কি ?

সাইটম্যাপ মূলত দু'ধরণের হয় । একটি হল XML (এক্সএমএল) সাইট ম্যাপ অন্যটি HTML (এইচটিএমএল সাইট ম্যাপ) সাইট ম্যাপ ।  XML (এক্সএমএল) সাইটম্যাপ সাধারণত সার্চ ইঞ্জিনগুলোকে আপনার ব্লগ ক্রল বা ইনডেক্স করতে সাহায্য করে। আমি এখানে HTML সাইট ম্যাপ নিয়ে আলোচনা করছি। HTML সাইট ম্যাপ মূলত আপনার সম্পূর্ণ সাইট পোস্ট বা সম্পূর্ণ ব্লগ পোস্ট গুলিকে একত্রে এক পেজে বা একটি পোস্টে উপস্থাপন করে । এতে একজন পাঠকের কাছে সহজে ব্লগ বা সাইট এর উপর স্বচ্ছ ধারনা জন্মায়। আমার যেমন কোন বই পড়ার আগে সুচি পত্র বা Content দেখেই বুঝি, যে বইটি কি কি বিষয় নিয়ে লেখা। এতে কিছুটা হলেও ঐ বই সমন্ধে বেসিক ধারনা একজন পাঠকের  জন্মায়। অপর পক্ষে ঠিক সাইটম্যাপ ও অনুরুপ বলতে পারি। কম্পিউটার জগৎ এর সাইট ম্যাপ দেখতে এখানে ক্লিক করুন।
সাইট ম্যাপ

কিভাবে সাইটম্যাপ বানাবেন ?

  • প্রথমে Blogger এ লগ ইন করুন ।
  • এরপর Dashboard প্রবেশ করুন ।
  • এরপর Pageঅপশনে ক্লিক করুন।
  • এরপর Create New Page ক্লিক করুন।
  • এরপর HTML Tab ক্লিক করুন।

এরপর নিচের কোডটি কপি করে পেস্ট করুন।
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>

<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.YOURBLOGDOMAIN.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
নোট-  YOURBLOGDOMAIN এর পরিবর্তে নিজের ব্লগ নেম  লিখবেন।
এরপর পেজ বা পোস্ট কে Publish করুন। এরপর ব্লগটিকে  একবার Browse করে দেখুন। কোন প্রবলেম হলে অবশ্যই জানাবেন। ভালো লাগলে শেয়ার করে আমাকে অনুপেরনা দিবেন। ভালো থাকুন সুস্থ থাকুন ধন্যবাদ। 

Monday, October 27, 2014

কিভাবে ব্লগস্পট ব্লগে তিনটি বা তার বেশি সুন্দর ফুটার বার যুক্ত করবেন

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


কিভাবে ব্লগস্পট ব্লগে তিন সারীতে footer বার তৈরি করবো?
  • প্রথমে আপনার Blogger ব্লগের ড্যার্শবোর্ডে প্রবেশ করুন।
  • তারপরে ড্রাপ ডাউন বাটন হতে Template নির্বাচন নির্বাচন করুন ।
  • Template নির্বাচন করার পরে আপনাকে Edit HTML ট্যাব ক্লিক করে body Tags খুঁজে বের করতে হবে।
  • Body Tags হতে ফুটার বা নিচের Code টুকু খুঁজে বের করতে হবে। অথবা Ctrl+F চেপে নিচের কোডটি search বক্সে পেস্ট করুন।
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div
  • যদি উপরের code টি খুঁজে না পান তাহলে নিচের code গুলো হুবাহু কপি করে আপনার ব্লগ Template ফুটার বারে পেষ্ট করবেন। বা </body> ট্যাগ এর উপরে পেস্ট করবেন ।
    <!-- three column footer HTML Start by projuktimela.blogspot.com -->
    <div id='new-footer-wrapper'>
    <div id='column1-wrapper'>
    <b:section class='new-footer' id='new-footer1' preferred='yes'/>
    </div>

    <div id='column2-wrapper'>
    <b:section class='new-footer' id='new-footer2' preferred='yes'/>
    </div>

    <div id='column3-wrapper'>
    <b:section class='new-footer' id='new-footer3' preferred='yes'/>
    </div>
    <div style='clear: both;'/>
    </div>
    <!-- three column footer HTML End -->
নোট - ফুটার বার কালার করার জন্য CSS Style কোড ব্যবহার করতে হবে। নিম্নে কোডটি দেওয়া হল।
  • এবার কালার করার জন্য আপনাকে Template হতে নিচের দেওয়া কোডটি খুঁজে বের করতে হবে।
    ]]></b:skin>
  • তারপরে নিচের CSS কোডটুকু কপি করে  ]]></b:skin> এর উপরে পেষ্ট করুন।
    /* three column footer CSS Start by computeruptodate.blogspot.com */
    #new-footer-wrapper {background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px  10px 0;}
    #column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;} 
    .new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;}
    .new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}
    .new-footer .widget-content { padding: 0px 5px 5px 5px; }
    .new-footer ul { list-style-type:square; margin-left:15px; }
    /* three column footer CSS End by computeruptodate.blogspot.com */
  • এবার আপনি Template টিকে সেভ করে বের হয়ে আসবেন। ব্যস এখন আপনার  কাজ শেষ।
কোন কিছু জানার বা অসুবিধে হলে কমেন্ট এর মাধ্যমে জানতে ভূলবেন না। তাই আজ এই পর্যন্ত ভালো লাগলে শেয়ার করবেন । আপনারা সকলে ভাল থাকুন ধন্যবাদ ।