রাঙিয়ে তুলোন আপনার ব্লগস্পট ব্লগকে [পর্ব-৩]

By : Unknown

On : 8:34 PM

In : ওয়েব ডেভেলপমেন্ট, ব্লগার

0 comments

ব্লগার টিউটোরিয়াল রাশেদের সাথে

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

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

 

আপনার ব্লগ এ sing in করুন । তারপর যে ব্লগ এর design এ ক্লিক করুন

 

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>

৩…… কিভাবে old post, new post, home লেখা মুছে ইমেজ দিবেন ????

 

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

তারপর search করন   <data:newerPageTitle/> এবং এই লেখাটা পরিবর্তন ((Search for <data:newerPageTitle/> tag and replace with below code)))) এই লেখায়      <img src='http://icons.iconarchive.com/icons/pixelmixer/basic/64/left-icon.png' style='border: 0 none;vertical-align: middle;'/>

তারপর search করন   <data:olderPageTitle/> এবং এই লেখাটা পরিবর্তন ((((Search for <data:olderPageTitle/>and replace with below code)))) এই লেখায়   <img src=' http://icons.iconarchive.com/icons/pixelmixer/basic/64/right-icon.png' style='border: 0 none;vertical-align: middle;'/>

তারপর search করন   <data:homeMsg/> এবং এই লেখাটা পরিবর্তন ((((Search for <data:homeMsg/>tag and replace with below code)))) এই লেখায়   <img src='http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/64/Home-icon.png' style='border: 0 none;vertical-align: middle;'/>

৪……কিভাবে ব্লগ কমেন্ট বক্স এ replay to the comment অ্যাড করবেন।

আপনার ব্লগ এ 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=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm1mEPq3d-GLBlLbOO3Fc3NLqqQ19PnabRNK9UTPoCvje0zXnsNppBZId6BxH2AAG8ol25i1gqFaHWPbwAgdZko2Dudj9uXiGvMEqZ5HTy7KX4uOwpO__XLG9RqPFH9Ae6kBqcwKu78TkC/s1600/best+blogger+tips.png’/></a><span class=’comment-reply’><a expr:href=’&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&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=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheCmWasVSybDy3BPQ4skFAybnz-C_JTtCnzH4aBp_UeSmhP-4bBtwsBy7HW0m3gmV5SQWC7WWhQ8GxZqoerwWPsHF03jan1f3pHWizjW6HSC-fiJbSvUOP4_rXmp8x6HRKaL8HRu9re3py/s1600/Reply+Button+1.jpg’ style=’float:right;’ title=’Reply To This Comment’/></a></span>
লাল লেখার জায়গায় আপনার blogger ID লিখন…address barএ আপনারব্লগ Id টি পাবেন। তারপর SAVE TEMPLATE এ ক্লিক করন।
preview a Demo

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

আপনার ব্লগ এ sing in করে design>>>edit html>>>Expand Template Widgets এ টিক দিন>>>
search করন <data:postCommentMsg/>                    ((( সার্চ করার পর এরকম দেখাতে পারেন    <h4 id=’comment-post-message’><data:postCommentMsg/></h4>)))
এবং এই লেখাটি পরিবর্তন করন নিচের কোড টির মত
<a href=’http://www.spiceupyourblog.com’><img alt=’Best Blogger Tips’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm1mEPq3d-GLBlLbOO3Fc3NLqqQ19PnabRNK9UTPoCvje0zXnsNppBZId6BxH2AAG8ol25i1gqFaHWPbwAgdZko2Dudj9uXiGvMEqZ5HTy7KX4uOwpO__XLG9RqPFH9Ae6kBqcwKu78TkC/s1600/best+blogger+tips.png’/></a><img alt=’Comment here’ border=’0′ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZrYtjs6zC9KQfgjXrFNzxSssy88wvBEHImsVQjNreFsbh3JkRHUkdnoSY0D2zdTA6GNbQV_k6D4ooRCYcUFT6Wq3BPRwUMT9-XgZTJh2CO35sFnixUtfRJDYlIwoER26r0LBvXHFy_bRv/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 করে দিন ।

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

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