ব্লগস্পট



সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ [পর্ব-০১] :: আপনার ব্লগস্পট ব্লগের লেবেলকে ড্রপডাউন বা পপআপ মেনুতে রূপান্তর করুন
আজ আমি আপনাদের দেখাবো কিভাবে আপনার ব্লগস্পট ব্লগের লেবেলকে ড্রপডাউন বা পপআপ মেনুতে রূপান্তর করবেন। এটি অনেকেরই জানা থাকতে পারে। তবে ব্লগের মন্তব্য পরে যা বুজতে পারছি, এখানে অনেকেই আমার মত নতুন ব্লগার। আমি মনে করি তাদের এই পোস্টটি অনেক উপকারে লাগবে।
এভাবে ব্লগের লেভেল কে দেখালে আপনার ব্লগ ডিজাইন সুন্দর দেখাবে এবং পাশাপাশি আপনার ব্লগের পেইজ লোড হওয়ার সময়ও কমে আসবে। আর আপনার ব্লগে যদি বিষয়ের সংখ্যা অনেক বেশি হয়ে যায়, যদি এটা আপনার নিয়ন্ত্রণের বাইরে চলে যেতে ধরে, তাহলে এখনি এই গেজেটটিকে ড্রপডাউন মেনুর মতো করে নিন। ব্লগের জায়গা বাঁচবে। আসুন তবে দেখে নেয়া যাক কিভাবে করবেন আপনার ব্লগস্পট ব্লগের লেবেলকে ড্রপডাউন বা পপআপ মেনুতে রূপান্তর।
  • ১) প্রথমে ব্লগার.কম এ লগইন করে dashboard থেকে আপনার desired ব্লগটার layout এ যান ।
  • ২) add a Gedjet ট্যাব এ ক্লিক করে সেখান থেকে একটি লেবেল গেজেট নিয়ে সেভ করুন।
  • ৩) এবার আপনাকে Layout থেকে Edit HTML ট্যাবে যেতে হবে।
  • ৪) Expand Widget Templates লেখার পাশের চেকবক্সে টিক চিহ্ন দিবেন না।
  • ৫) এবার contrl+F চেপে নিচের লাইনটি খুঁজে বের করুন ।

টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’>
৬) আশা করি পেয়ে গেছেন এখন খুঁজে পাওয়া লাইনটি সম্পূর্ণ মুছে দিয়ে নিচের কোডটি স্থাপন করুন।
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
<br/>

<select onchange=’location=this.options[this.selectedIndex].value;’ style=’width:200px’>
<option>Label Gadget Name</option>
<b:loop values=’data:labels’ var=’label’>
<option expr:value=’data:label.url’><data:label.name/>
</option>
</b:loop>
</select>

<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>




পরীক্ষা করে দেখার জন্য নিচের PREVIEW তে ক্লিক করুন। আশা করি সব ঠিক ঠাকই আছে।
যদি সব ঠিকি থাকে তবে SAVE TEMPLATE এ ক্লিক করে শেভ করুন। উপরের কোডটির দুটো জায়গায় সম্পাদনা করতে হবে।যে সাইডবারে রাখবেন, তার মাপ অনুযায়ী 200px মানটি পরিবর্তন করুন। লেবেল গেজেটটির নাম পরিবর্তন করার জন্য Label থেকে বিভাগ বা ক্যাটাগরি নাম দিয়ে দিন । ব্যাস কাজ শেষ।

সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ [পর্ব-০২] :: আপনার ব্লগস্পট ব্লগে “রিলেটেড পোস্ট” (Related Posts) গেজেট যুক্ত করুন

আজ আমি দেখাবো কিভাবে আপনার ব্লগে খুব সহজে রিলেটেড পোস্ট অপশন যোগ করবেন। পুরাতন ব্লগাররা ব্যপার টা জানেন কিন্তু অনেক নতুন ব্লগার আছেন যারা মাত্র শুরু করেছেন। আর তাদেরকে উদ্দেশ্য করেই আমার আজকের এই পোস্ট টা।এটি খুব সহজেই করা যায়। আসুন দেখে নেয়া যাক কিভাবে কি করতে হবে…
http://earntricks.com/wp-content/uploads/2011/07/related-post3.png
১) প্রথমে আপনার ব্লগার.কম এ সাইন ইন করে ড্যাশবোর্ডে প্রবেশ করে Layout >Page elements এ গিয়ে Add Gadget এ ক্লিক করুন।
২) তারপর কোডিং বসানোর জন্য HTML/ Javascript এ ক্লিক করুন। তার পর বক্সে নিচের কোডটুকু কপি করে নিয়ে পেস্ট করে দিন। গেজেটটি সাইডবার বা পোস্টের নিচে বা ফুটার যেখানে খুশি রাখতে পারেন, যে খানেই রাখেন না কেন ঠিকমতোই কাজ করবে।
 <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script> <script src=”http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js” type=”text/javascript”></script> <script type=”text/javascript”> relatedPostsWidget({ ‘containerSelector’:'div.post-body’ ,’loadingText’:'Loading Related Posts…’ });</script>
৪) এবার সেইভ করুন।
এবার প্রতিটি পোস্টের নিচের ছবিটার মতোই ৫টি একই রকম রিলেটেড পোস্ট দেখা যাবে।
http://earntricks.com/wp-content/uploads/2011/07/related-post2.png
এই রিলেটেড পোস্ট অংশটিকে আপনি চাইলে একটু রঙিন করে তুলতে পারেন। না করলেও কোন অসুবিধা নেই। আচ্ছা চলুণ দেখে নেই কিভাবে রঙ্গিন করতে হবে…
সেক্ষেত্রে Layout > Edit HTML অংশে গিয়ে cont+F চেপে  ]]></b:skin> এই কোড টুকু খুঁজে বের করুন। পেয়ে গেলে এই কোড টার ঠিক উপরে নিচের কোডটুকু কপি করে নিয়ে পেস্ট করে দিন।
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#related-posts{
margin:4px;
padding:10px;
}
#related-posts h2{
background: #BDEDFF;
color: #000000;
}
#related-posts ul{
background: #e0ffff;
color: #2008AF;
font-size: 12px;
}
#related-posts-loadingtext{
color:#ff0000;
}



বিভাগ
^উপরে যেতে ক্লিক করুন