কিভাবে ব্লগারে হোমপেইজে ফিচারপোষ্ট যুক্ত করবেন?

সাধারণত এই ফিচার পোষ্ট ওয়ার্ডপ্রেসে খুব জনপ্রীয়তা অর্জন করছে। এই ফিচার-পোষ্ট এর মাধ্যমে খুব সহজেই Author’s/Editors এর পছন্দ মতো যোকোন পোষ্ট দিতে পারে।

এর মানে হলো Author’s/Editors এর মাধ্যমে ভিজিটরদের চমক দেখানে, ফিচার-পোষ্ট এর মাধ্যমে আপনার ভিজিটর রা বুঝতে পারবেন যে, এই ওয়েবসাইট টিতে অনেক ভালো তথ্য রয়েছে। যার ফলে একজন ভিজিটর এসে আপনার ওয়েবসাইটে অনেকক্ষণ সময় কাটাবে, যার ফলে Alexa Rank কমবে অনেক।

# ব্লগারে যে Featured Post যুক্ত করার অপশন রয়েছে তা শুধু Sidebar(Wrapper)/ Footer Wrapper এ, কিন্তু Post section এর উপরে যুক্ত করার মতো সুবিধা নেই। তাই আক আমরা দেখবো কিভাবে পোষ্ট এর উপরে  Featured Post যুক্ত করব।

Blogger Template এ নিচের CSS কোড যুক্ত করুনঃ

প্রথমেই আমদের Blogger Template এ CSS কোড যুক্ত করতে হবে, তাই নিচের ধাপ গুলো অনুসরণ করুনঃ

১ম ধাপঃ Blogger একাউন্টে Login করে ড্যাশবোর্ডে যান।

২য় ধাপঃ ক্লিক করুন >>>Template>>>>>Edit HTML.

৩য় ধাপঃ Ctrl+F চেপে ]]></b:skin>  লিখাটি খুজে বের করুন।

৪র্থ ধাপঃ এখন নিচের স্ক্রীপ্ট গুলো কপি করে ]]></b:skin>  লিখাটির উপরে পেষ্ট করুন।

/* Featured Post By www.allsectionbd.blogspot.com */ .ribbon { position: relative; top: 0; right: 0; } .ribbon a { color: #fff; text-decoration: none; } .ribbon .banner { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); color: #fff; -webkit-font-smoothing: antialiased; display: block; float: right; position: relative; right: -14px; top: 22px; width: 100px; } .featured-post-banner .banner { right: -8px; top: 15px; width: 65px; } .ribbon .banner::after, .ribbon .banner::before { content: ''; display: block; height: 12px; position: absolute; width: 30px; } .featured-post-banner .banner::after, .featured-post-banner .banner::before { height: 6px; width: 20px; } .ribbon .banner::before { -webkit-transform: skewY(-45deg) translate(50%,15px); -moz-transform: skewY(-45deg) translate(50%,15px); -ms-transform: skewY(-45deg) translate(50%,15px); -o-transform: skewY(-45deg) translate(50%,15px); -webkit-transform-origin: 100% center; -moz-transform-origin: 100% center; -ms-transform-origin: 100% center; -o-transform-origin: 100% center; left: -45px; } .featured-post-banner .banner::before { top: -5px; left: -30px; } .ribbon .banner::after { -webkit-transform: translate(100%,-100%) skewY(45deg) translateX(-58%); -moz-transform: translate(100%,-100%) skewY(45deg) translateX(-58%); -ms-transform: translate(100%,-100%) skewY(45deg) translateX(-58%); -o-transform: translate(100%,-100%) skewY(45deg) translateX(-58%); -webkit-transform-origin: 0 center; -moz-transform-origin: 0 center; -ms-transform-origin: 0 center; -o-transform-origin: 0 center; right: -17px; } .featured-post-banner .banner::after { top: 18px; right: -12px; } .ribbon .text { position: relative; z-index: 2; padding: 6px 0; font-size: 12px; font-weight: bold; min-height: 18px; line-height: 18px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20); white-space: nowrap; text-overflow: ellipsis; } /* text */ .featured-post-banner .text { padding: 3px 0; font-size: 8px; min-height: 14px; line-height: 14px; } .ribbon .text::before, .ribbon .text::after { content: ''; display: block; height: 30px; position: absolute; top: 0; width: 100%; z-index: -1; } /* text */ .ribbon.featured-post-banner .text::before, .ribbon.featured-post-banner .text::after { height: 20px; } .ribbon .text::before { -webkit-transform: translateX(-15%) skewX(-45deg); -moz-transform: translateX(-15%) skewX(-45deg); -ms-transform: translateX(-15%) skewX(-45deg); -o-transform: translateX(-15%) skewX(-45deg); } .ribbon .text::after { -webkit-transform: translateX(15%) skewX(45deg); -moz-transform: translateX(15%) skewX(45deg); -ms-transform: translateX(15%) skewX(45deg); -o-transform: translateX(15%) skewX(45deg); } /*--- RIBBON COLORS ---*/ .ribbon-color .banner::after, .ribbon-color .banner::before { background-color: #5BC3EE; } .ribbon-color .text::before, .ribbon-color .text::after, .ribbon-color .text { background-color: #5BC3EE; }

৫ম ধাপঃ এখন Template টি Save করুন।

Featured Post এর HTML কোড খুজে বের করার পদ্ধতিঃ

এই ধাপে আমরা HTML পোষ্ট কোডটি খুজে বের করব,যেটি আমরা Featured Post হিসাবে দেখতে চাচ্ছি।

১ম ধাপঃ  Blogger ড্যাশবোর্ডে যান।

২য় ধাপঃ এখন যে পোষ্ট টি আপনি ফিচার পোষ্ট হিসাবে দেখতে চাচ্ছি, তার টাইটেল এ মাউস পয়েন্টার নিয়ে মাউস এর ডান বাটনে ক্লিক করে Inspect Element অপশন সিলেক্ট করুন। এখন সেখবে আপনার ব্রাউজারের নিভে/ সাইডবারে Post Element দেখা যাচ্ছে।

এখন নিচের কোড টি খুজে বের করে, কোডটির উপর মাউস পয়েন্টার রেখে ডান-বাটনে ক্লিক করুন এবং “Edit As HTML” সিলেক্ট করুন। এখন বকের ভিততের সব-কোড গুলা COPY করে, আপনার ডেক্সটপে Notepad তৈরি করে পেষ্ট করুন।

৩য় ধাপঃ এখন নিচে দেওয়া কোড-গুলো COPY করে Notepad এ যে কোড-গুলো রেখেছিলাম তার ঠিক উপরে পেষ্ট করতে হবে। তাহলে কোড-গুলো দেখতে নিচের ছবির মতো হবে।

৪র্থ ধাপঃ এখন নিচের কোড গুলোতে দেখুন লেখা রয়েছে “Past your Posts HTML Coad Here” লিখাটি কেটে দিয়ে Notepad এর কোড গুলো রিপ্লেস করুন।

<div class="ribbon featured-post-banner ribbon-color"> <div class="banner"> <div class="text">Featured Post</div></div></div><div style='background:white;padding:10px;margin-top:10px;border-left:5px solid #5BC3EE; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.38);'> Paste your Post's HTML Code Here </div>

HTML/JavaScript গেজেট এ কোড গুলো সংযুক্ত করনঃ

১ম ধাপঃ Blogger ড্যাশবোর্ডে যান।

২য় ধাপঃ ক্লিক Layout>>>Add a Gadget। এখন একটি Popup উইন্ডো আসবে-এখান থেকে HTML/JavaScript সিলেক্ট করলে একটি HTML BOX আসবে। টাইটেল এর বক্সটি খালি রাখবেন।

৩য় ধাপঃ এখন Notepad এর কোড-গুলো কপি করে Content ফিল্ড এ পেষ্ট করে Save করে বেরিয়ে আসুন।

### এখন আপনার ব্লগার সাইট চেইক করে দেখুন সাবার উপরের পোষ্ট এর আগে একটি সুন্দর Featured Post তৈরি হয়েছে। আমি জানি এই টিউটোরিয়াল টি একটি জটিল তবুও যতোটুকু সম্ভব হয়েছে সহজ করের চেষ্টা করেছি। যদি আপনাদের কোন প্রশ্ন থাকে তবে কমেন্ট করতে ভুলবেন না। ধন্যবাদ।