কিভাবে Blogger Default Featured Post Widget Customize করবেন?

আপনারা নিশ্চয় জানেন যে, গুগল ব্লগার ব্লগের জন্য Featured Post নামে একটি নতুন Widget যুক্ত করেছে। গত ১০/১২/২০১৫ তারিখ হতে এটি ব্লগার ড্যাশবোর্ডে দেখা যাচ্ছে। তাছাড়া সম্প্রতি গুগল ব্লগার টিম সবার ব্লগের ড্যাশবোর্ডে নোটিফিকেশনের মাধ্যমে এটির সম্পর্কে জানিয়ে দিচ্ছে। এটি ব্লগের জন্য অত্যান্ত কাজের একটি Widget.

ব্লগার Default Featured Post Widget ব্লগে যুক্ত করার অপশন দিয়েছে ঠিকই ‍কিন্তু উইজেটটিতে কোন আকর্ষণ নেই। এটি ব্লগ পোষ্টের উপরে যুক্ত করে রাখলে পোষ্টটির ছবি অনেক বড় আকারে শো করে। যার জন্য এটি কেউ আপাতত ব্যবহার করতে দেখা যাচ্ছে না।

এ ধরনের Featured Post বা নির্বাচিত পোষ্ট সাধারনত ব্লগের Homepage এর পোষ্টের সবার উপরে ব্যবহার করা হয়ে থাকে। ব্লগার ডিফল্ট Featured Post উইজেটটি প্রথম পাতার উপরে ব্যবহারের সম্পূর্ণ অনুপোযুক্ত। কাজেই আমরা আপনাদের সাথে শেয়ার করব কিভাবে এটিকে Customize করে আপনার মনেরমত ডিজাইন করে ব্লগের প্রথম পাতার উপরে ব্যবহার করবেন। নিচের ছবিতে আমাদের কাষ্টমাইজ করা Widget এর ডোমো দেখুন। লাইভ দেখার জন্য-  Live Demo

 কিভাবে করবেনঃ

• প্রথমে আপনার ব্লগে লগইন করুন।
• ব্লগার ড্যাশবোর্ড হতে Layout > Add a gadget এ ক্লিক করলেই Featured Post নামে উইজেটটি দেখতে পাবেন। এটিতে ক্লিক করলে আরও কিছু অপশন দেখতে পাবেন। সেগুলি হতে আপনার ব্লগের যে কোন একটি Label থেকে পছন্দমত একটি পোষ্ট সিলেক্ট করে Save করুন। বিষয়টি সহজ হওয়াতে আমরা বিস্তারিত লিখলাম না। তারপরও যদি আপনার কোন অসুবিধা হয় তাহলে এই পোষ্টটি দেখে আসতে পারেন।
• তারপর Template > Edit Html এ ক্লিক করুন।
• তারপর কিবোর্ড হতে Ctrl+F চেপে FeaturedPost1 অংশটি সার্চ করলে নিচের চিত্রেরমত দেখতে পাবেন।

• উপরের লাইনটি যদি হুবহু দেখতে না পান বা তীর চিহ্নিত ঐ ছোট আইকনটি দেখতে না পান তাহলে তীর চিহ্নিত ফাঁকা জায়গায় ক্লিক করলেই লাইনটি হুবহু দেখতে পাবেন।
• এখন উপরের লাইনটির জায়গায় নিচের কোডগুলি Replace করুন।

 

 
 

 
 
 
 
 

 
 

 
 

 

 

• তারপর কিবোর্ড হতে Ctrl+F চেপে ]]>

অংশটি সার্চ করুন।

এখন নিচের কাডগুলি ]]>

ট্যাগের উপরে পেষ্ট করুন।

#FeaturedPost1 {background:#FFF; margin-bottom:10px; border:1px solid #2d3e50; border-radius:2px; padding:0px 0px 10px}
#FeaturedPost1 h2 {background:#2d3e50; padding:3px; margin:0px 0px 1em; font:bold 18px Arial,Tahoma,Helvetica,FreeSans,sans-serif; color:#FFF; text-align:center}
#image-thumb {float:left; margin-top:10px; width:40%}
.summary-post {width:55%; float:right; margin-top:5px; margin-left:25px; text-align:justify; font-size:15px}
.image {width:99%; border:1px solid #C5C5C5; padding:5px; float:left; height:130px}
.image:hover {opacity:0.7}
.post-summary {padding: 8px; margin-top:-20px}
.post-summary a {color:#3AF; font:20px Arial,Tahoma,Helvetica,FreeSans,sans-serif; text-decoration:none}
.post-summary a:hover {color:#000}
.summary-post p {margin:0px; font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:26px}

• সবশেষে Save Template এ ক্লিক করে Template টি Save করুন।

 পরিবর্তনঃ

• #FeaturedPost1 হতে Background এবং Border কালার পরিবর্তন করা যাবে।
• #FeaturedPost1 h2 হতে উইজেট এর টাইটেল এবং Background কালার পরিবর্তন।
• .post-summary হতে Margin ও Padding এডজাস্ট করে নেওয়া যাবে।
• এছাড়াও উপরের Css হতে বিভিন্ন ধরনের ডিজাইন যুক্ত করতে পারবেন।