ব্লগার Home Page এ যুক্ত করুন Auto Read More Button গুলিকে ইচ্ছামত Style করুন

প্রায় সব ধরনের ব্লগের পোষ্ট সেকশনে Read More Button যুক্ত করা থাকে। ব্লগে এই Read More Button যুক্ত করার ফলে ব্লগ অনেক দ্রুত লোড হয় এবং পাশাপাশি এক সাথে অনেক পোষ্টও দেখানো যায়। সাধারণত এই পদ্ধতীতে ব্লগের হোম পেজে পোষ্টের কিছু অংশ দেখানো হয় এবং বাকী অংশটুুকু Embed অবস্থায় রাখা হয়। এই Read More Button এ ক্লিক করার মাধ্যমে বাকী অংশ পড়া হয়।

আমি আজ আপনাদের দেখাবো কিভাবে ব্লগের এই Read More Button টি-কে মনের মত করে Style করবেন। এখানে আমি ০২ টি পদ্ধতীতে দুই স্টাইলের বাটন যুক্ত করার কৌশল দেখাবো। ১ম পদ্ধতীতে Blogger Variable Definitions যুক্ত করার মাধ্যমে Button টি স্টাইল করা এবং ২য় পদ্ধতীতে শুধুমাত্র Css কোড যুক্ত করার মাধ্যমে Read More Button টি স্টাইল করবো। উল্লেখ্য যে, Blogger Variable Definitions এবং Read More Button সম্পর্কে বিস্তারিত জানার জন্য নিচের পোষ্ট দু’টি পড়তে পারেন।

• আরোও পড়ুন - কিভাবে ব্লগারে Custom Variable Dfinitions যুক্ত করতে হয়
• আরোও পড়ুন - ব্লগার Home Page এ যুক্ত করুন Auto Read More with Thumbnail

 কিভাবে Read More Button স্টাইল করবেনঃ

• প্রথমে আপনার ব্লগে লগইন করুন।
• তারপর Template > Edit Html এ ক্লিক করুন।
• এরপর কিবোর্ড হতে Ctrl+F চেপে <data:post.body/> অংশটি সার্চ করুন।
• এই ট্যাগটির পরে নিচের কোডগুলি দেখতে পাবেন। (নোটঃ টেমপ্লেট বেধে কোডগুলি একটু ভিন্ন হতে পারে।

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="text-align: right;">Read More ->></div></a>
</b:if>

• উপরের লাল কোডটির জায়গায় এই class="prozokti-readmore" কোডটি Replace করুন।
• এরপর ব্লগার টেমপ্লেটের এই /* Variable definitions অংশটি সার্চ করুন।

• এখন নিচের কোডগুলি উপরের চিত্রে যেভাবে দেখানো হয়েছে ঠিক সেই জায়গায় পেষ্ট করুন।

<Group description="Read More" selector=".prozokti-readmore">
 <Variable name="readmore.bg.color" description="Read More Background" type="color" default="#66bbdd" value="#2288bb"/>
 <Variable name="readmore.hover.bg.color" description="Read More Background Hover" type="color" default="transparent" value="#000000"/>
 <Variable name="readmore.border.color" description="Read More Border Color" type="color" default="transparent" value="#086632"/>
 <Variable name="readmore.a.color" description="Read More a Color" type="color" default="#000000" value="#ffffff"/>
 <Variable name="readmore.a.hover.color" description="Read More a Hover" type="color" default="#000000" value="#ffffff"/>
</Group>

• তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
• এখন নিচের কোডগুলি ]]></b:skin> এর উপরে পেষ্ট করুন।

 প্রথম স্টাইলঃ

.prozokti-readmore {
    background:$(readmore.bg.color);
    text-align:right;
    cursor:pointer;
    margin:5px 0;
    float:right;
    padding:5px;
    border:2px solid $(readmore.border.color);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    font:bold 11px sans-serif;
}

.prozokti-readmore:hover {
    background:$(readmore.hover.bg.color);
    font:bold 11px sans-serif;
    border:2px solid $(readmore.hover.bg.color);
}

.prozokti-readmore a {
    color:$(readmore.a.color);
    text-decoration:none;
}

.prozokti-readmore a:hover {
    color:$(readmore.a.hover.color);
    text-decoration:none;
}

• Save Template এ ক্লিক করুন।
• এখন Template > Customize > Advanced অপশনে গেলে নিচের চিত্রের মত দেখতে পাবেন।

• এখানে উপরের লাল চিহ্ন দ্বারা মার্ক করার অংশগুলি হতে বাটনটির Background, Border Color, Border Hover Color, Button a color and Button a hover color পরিবর্তন করতে পারবেন। এই অংশ হতে আপনি বাটনগুলিকে ইচ্ছামত কালার ইফেক্ট দিতে পারবেন।

 দ্বিতীয় স্টাইলঃ

.prozokti-readmore {
    background:#FFF;
    text-align:right;
    cursor:pointer;
    margin:5px 0;
    float:right;
    border-right:2px solid #D6B;
    border-left:2px solid #D6B;
    padding:5px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    font:bold 11px sans-serif;
}

.prozokti-readmore:hover {
    background:#FFF;
    font:bold 11px sans-serif;
    color:#066DB5;
    border-right:2px solid #066DB5;
    border-left:2px solid #066DB5;
}

.prozokti-readmore a {
    color:#D6B;
    text-decoration:none;
}

.prozokti-readmore a:hover {
    color:#066DB5;
    text-decoration:none;
    font:bold 12px sans-serif;
}

• যুক্ত করার পর অবশ্যই Save Template এ ক্লিক করে Save করে নিবেন। (নোটঃ আপনি যদি শুধুমাত্র ২য় স্টাইলের বাটনটি ব্যবহার করেন তাহলে Variable definitions যুক্ত করার কোন প্রয়োজন নেই।

 কাষ্টোমাইজেশনঃ

• প্রথম স্টাইলের বাটনটির কালার পরিবর্তনের জন্য Template > Customize > Advancedঅপশনে যেতে হবে।
• দ্বিতীয় স্টাইলের বাটনটি আপনি ইচ্ছে করলেই নরমালি কালার পরিবর্তন করতে পারবেন।