Jul 1, 2015

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

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

কিভাবে 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> এর উপরে পেষ্ট করুন।

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

Blogger Read More Button
.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 অপশনে গেলে নিচের চিত্রের মত দেখতে পাবেন।
Blogger Read More Button Style
  • এখানে উপরের লাল চিহ্ন দ্বারা মার্ক করার অংশগুলি হতে বাটনটির Background, Border Color, Border Hover Color, Button a color and Button a hover color পরিবর্তন করতে পারবেন। এই অংশ হতে আপনি বাটনগুলিকে ইচ্ছামত কালার ইফেক্ট দিতে পারবেন।

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

Blogger Read More Button
.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 অপশনে যেতে হবে।
  • দ্বিতীয় স্টাইলের বাটনটি আপনি ইচ্ছে করলেই নরমালি কালার পরিবর্তন করতে পারবেন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

2 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. ভাই আমি আপনাদের এই ইন্ট্রাকশন গুলো ফলো করছি, কিন্তু সত্যি বলতে ব্লগকে নিজের মনের মত সাজাইতে পারছি না!

    ReplyDelete
    Replies
    1. আমাদের সকল টিপস ফলো করলে, যে কেউ তার ব্লগকে প্রফেশনাল রূপ দিতে পারবে।

      Delete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: