১৭ ডিসেম্বর, ২০১৫

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

কিভাবে Blogger Default Featured Post Widget Customize করবেন?
4/ 5 stars - "কিভাবে Blogger Default Featured Post Widget Customize করবেন?" আপনারা নিশ্চয় জানেন যে, গুগল ব্লগার ব্লগের জন্য Featured Post নামে একটি নতুন Widget যুক্ত করেছে। গত ১০/১২/২০১৫ তারিখ হতে এটি ব্লগার ড্যাশব...
-
আপনারা নিশ্চয় জানেন যে, গুগল ব্লগার ব্লগের জন্য Featured Post নামে একটি নতুন Widget যুক্ত করেছে। গত ১০/১২/২০১৫ তারিখ হতে এটি ব্লগার ড্যাশবোর্ডে দেখা যাচ্ছে। তাছাড়া সম্প্রতি গুগল ব্লগার টিম সবার ব্লগের ড্যাশবোর্ডে নোটিফিকেশনের মাধ্যমে এটির সম্পর্কে জানিয়ে দিচ্ছে। এটি ব্লগের জন্য অত্যান্ত কাজের একটি Widget.
কিভাবে Blogger Default Featured Post Widget Customize করবেন?
ব্লগার Default Featured Post Widget ব্লগে যুক্ত করার অপশন দিয়েছে ঠিকই ‍কিন্তু উইজেটটিতে কোন আকর্ষণ নেই। এটি ব্লগ পোষ্টের উপরে যুক্ত করে রাখলে পোষ্টটির ছবি অনেক বড় আকারে শো করে। যার জন্য এটি কেউ আপাতত ব্যবহার করতে দেখা যাচ্ছে না।

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

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

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

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • ব্লগার ড্যাশবোর্ড হতে Layout > Add a gadget এ ক্লিক করলেই Featured Post নামে উইজেটটি দেখতে পাবেন। এটিতে ক্লিক করলে আরও কিছু অপশন দেখতে পাবেন। সেগুলি হতে আপনার ব্লগের যে কোন একটি Label থেকে পছন্দমত একটি পোষ্ট সিলেক্ট করে Save করুন। বিষয়টি সহজ হওয়াতে আমরা বিস্তারিত লিখলাম না। তারপরও যদি আপনার কোন অসুবিধা হয় তাহলে এই পোষ্টটি দেখে আসতে পারেন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • তারপর কিবোর্ড হতে Ctrl+F চেপে FeaturedPost1 অংশটি সার্চ করলে নিচের চিত্রেরমত দেখতে পাবেন।
কিভাবে Blogger Default Featured Post Widget Customize করবেন?
  • উপরের লাইনটি যদি হুবহু দেখতে না পান বা তীর চিহ্নিত ঐ ছোট আইকনটি দেখতে না পান তাহলে তীর চিহ্নিত ফাঁকা জায়গায় ক্লিক করলেই লাইনটি হুবহু দেখতে পাবেন।
  • এখন উপরের লাইনটির জায়গায় নিচের কোডগুলি Replace করুন।
<b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost'>
 <b:includable id='main'>
<!-- Only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'><data:title/></h2>
 </b:if>
 <b:include name='content'/>
 <b:include name='quickedit'/>
 </b:includable>
 <b:includable id='content'>
<div class='post-summary'>
 <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
  <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
 </b:if>
 <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
<div id='image-thumb'>
 <img class='image' expr:src='data:postFirstImage'/></div>
<div class='summary-post'>
 <p><data:postSummary/></p>
</div>
</b:if>
</div>
</b:includable>
</b:widget>
  • তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের কাডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
#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 হতে বিভিন্ন ধরনের ডিজাইন যুক্ত করতে পারবেন।
Subcribe to our all updates

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

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

একটি মন্তব্য পোস্ট করুন

 
Subscribe for all Updates

Subscribe Now

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

Powered by: