আসসালামু আলাইকুম, কেমন আছেন সবাই ? আশা করি মহান আল্লাহ তায়ালার অশেষ রহমতে সবাই ভাল আছেন। আজ আমি আপানদের সাথে  blog design কিভাবে সুন্দর করতে হয় তা নিয়ে লিখব। তাহলে চলন শুরু করি ।

পর্ব -১ এর  টিউন টি দেখার জন্য এখানে ক্লিক করুন (মেগা টিউন)

পর্ব -২ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

পর্ব -৩ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন ( মেগা টিউন)

পর্ব -৪ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

পর্ব -৫ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন  (মেগা টিউন) [এ পর্বটা মিস করবেন না]

পর্ব -৬ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন  (গেমা টিউন)

পর্ব -৭ এর টিউন টি দেখার জন্য এখানে ক্লিক করুন ( মেগা টিউন)

পর্ব -৮এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

পর্ব -৯এর টিউন টি দেখার জন্য এখানে ক্লিক করুন

৫ নং টিউন টি মিস করবেন না।

১. কিভাবে আপনার ব্লগ এ পেজ নাম্বার এড(add) করবেন???

 আপনার ব্লগ এ sing in করে design>>>Page Elements>>>>Add a Gadget>>>HTML/JavaScript select করেন , তারপর নিচের codeটি past করন

<!-- Stylish colored  Navigation Widget For Blogger By Alamin @ http://freecall24.blogspot.com -->

<style type="text/css">

#blog-pager{padding:5px 0 !important;}

.showpageArea {font-weight: bold;margin:5px;}/* www.way2blogging.org */

.showpageArea a {text-decoration:underline;color: #fff;}/* www.way2blogging.org */

.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #f85032; background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); }/* www.way2blogging.org */

.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* www.way2blogging.org */

.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.way2blogging.org */

.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.way2blogging.org */

.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.way2blogging.org */

</style>

<script type='text/javascript'>

var home_page="/";

var urlactivepage=location.href;

var postperpage=5;

var numshowpage=5;

var upPageWord ='Previous';

var downPageWord ='Next';

</script>

<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging_bloggerpagenavi.js' type='text/javascript'></script>

<!-- Stylish colored Numbered Page Navigation Widget For Blogger By Alamin @ http://freecall24.blogspot.com -->

আখন সেভ করন ।

preview a demo

২. কিভাবে সুন্দর একটি Search Box এড(add) করবেন????

আপনার ব্লগ এ sing in করে design>>>Page Elements>>>> Add a Gadget>>>HTML/JavaScript select  করেন , তারপর নিচের codeটি past করন

<div>
    <form method="get" id="searchform" action="/search">
        <table width="100%">
            <tr>
              <td><input type="text" style="width:98%;padding:2px;" value="Search this blog..." onfocus="if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q" id="sbox"></td> <td width="75px"><input type="button" Value="Search" id="sbutton" alt=""></td>
            </tr>
        </table>
    </form>
</div>

preview a demo

৩. কিভাবে ব্লগ কমেন্ট বক্স এ replay to the post add করবেন।

আপনার ব্লগ এ sing in করে design>>>edit html>>>Expand Template Widgets এ টিক দিন>>>

তারপর search করন   <data:commentPostedByMsg/> এবং এই কোড এর নিচে(under) নিচের কোড টি past করন

<a href='http://www.spiceupyourblog.com'>
    <img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/>
</a>
    <span class='comment-reply'>
        <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=<span style="color: #ff0000;">YOUR-BLOG-ID-HERE</span>&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>
            <img src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMXpGUnq_lI/AAAAAAAAB50/s4Ox50TFl5E/s1600/Reply+Button+1.jpg' style='float:right;' title='Reply To This Comment'/>
        <a>
    </span>

লাল লেখার(YOUR-BLOG-ID-HERE) জায়গায় আপনার blogger ID লিখন...address barএ আপনারব্লগ Id টি পাবেন। তারপর SAVE TEMPLATE এ ক্লিক করন।

preview a Demo

৫. কিভাবে ব্লগ এর কমেন্ট বক্স এর design পরিবর্তন করবেন????

আপনার ব্লগ এ sing in করে design>>>edit html>>>Expand Template Widgets এ টিক দিন>>>

search করন

<data:postCommentMsg/>

এবং এই লেখাটি পরিবর্তন করন নিচের কোড টির মত

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><img alt='Comment here' border='0' src='http://4.bp.blogspot.com/_rKG-ziTSNUQ/TNre5kA-dzI/AAAAAAAACEM/zwpewBceVJ0/s1600/animated+comment+arrow.gif'/>

এখন সেভ করন।

৬. কিভাবে footer এর লেখা remove করবেন ?????

অনেক সময় ব্লগ এর নিচে লেখা থাকে copywriter By ---------এই লেখাটি remove করার জন্য  আপনার ব্লগ এ sing in করে design>>>edit html>>>Expand Template Widgets এ টিক দিন>>>

তারপর search করন

<!-- outside of the include in order to lock Attribution widget -->

কোড এর নিচের <div style= থেকে </div> ডিলিট করে দিন। অথবা আপনি যদি লেখাটি পরিবর্তন করতে ছান তাহলে করতে পারেন।

preview a demo

৭. কিভাবে subscription to Atom Remove করবেন??????

আপনার ব্লগ এ sing in করে design>>>edit html>>>Expand Template Widgets এ টিক দিন>>>তারপর search করন <data:f.feedType/>

এবং এই কোড টি delete করে দিন ।

অথবা searchকরন <b:include name=’feedLinks’/> এবং এটি delete করে দিন ।

ব্লগ নিয়ে ধারাবাহিক ভাবে আরও পোস্ট লেখা হবে।

কোনো সমাস্যা হলে কমেন্ট করে জানাবেন। আর ভাল লাগবে অবস্যই কমেন্ট করবেন।

ভাল থাকন সবসময়।