লেখক: ব্লগার ব্লগে Featured Post ওয়েডগেট খুব মজার ও উপকারি একটি ওয়েডগেট আমাদের অনেক সময় অনেক পোস্ট পিন করার দরকার হয়ে পড়ে যেগুল আমারা ব্লগার এর ডিফল্ট সিস্টেম ব্যবহার করে সঠিক ভাবে ভিজিটর দের বুঝাতে পারিনা তাই আমাদের এই ধরনের Featured Post ওয়েডগেট খুব দরকার হয়। আসলে এই Featured Post ওয়েডগেট এর কাজ হল আপনি কিছু দরকারি পোস্টকে আপনার ব্লগের সব উপরে রেখে দিলেন যেগুল খুব দরকারি পোস্ট আপনি বিভিন্ন ওয়ার্ডপ্রেস ব্লগে এই বিষয়টি লক্ষ করবেন। যাই হোক এই ওয়েডগেট এর কাজ বুঝতে পারলে চলুন দেখে নেওয়া যাক কিভাবে এটা আপনার ব্লগার ব্লগে ব্যবহার করবেন। তাহলে নিচের স্টেপ গুল দেখুন খুব সহজ ভাবে বোঝান হয়েছে।
কিভাবে ব্লগার ব্লগে Featured Post ওয়েডগেট যুক্ত করবেন :
প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন এবং Add a Gadget এ ক্লিক করে HTML/Javascript এ ক্লিক করে নিচের কোড গুল Contant ঘরে বসিয়ে দিন টাইটেল ঘর ফাকা রেখে দিন।
<style>
#featured-posts{width:100%;height:200px;background:#34495e;margin-top:-1px}#featured-posts h3{color:#fff;font-size:20px;margin:0;font-weight:300;text-align:center;padding:15px}#featured-posts ul{margin:0;padding:20px}#featured-posts ul li{list-style-type:none;padding-left:10px;float:left;margin-right:20px;width: 249.5px;height:100px;border-left:3px solid rgba(255,255,255,0.5)}#featured-posts ul li span{color:rgba(255,255,255,0.5);display:block}#featured-posts ul li span i{padding-right:8px}#featured-posts ul li a{color:#fff;text-decoration:none;font-size:15px;line-height:25px}#featured-posts ul li:hover{border-color:#3498db;margin-top:-10px;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0}#featured-posts ul li:hover span{color:#3498db}
#featured-posts ul li:last-child { margin-right:0;}
@media screen and (max-width : 1200px) {
#featured-posts ul li {width: 224.5px;}
}
@media screen and (max-width : 1100px) {
#featured-posts ul li {width: 199.5px;}
}
@media screen and (max-width : 1000px) {
#featured-posts .item4 {display:none}
#featured-posts ul li {width: 243.6px;}
#featured-posts .item3 {margin-right:0;}
}
@media screen and (max-width : 900px) {
#featured-posts ul li {width: 210.3px;}
}
@media screen and (max-width : 800px) {
#featured-posts .item3 {display:none;}
#featured-posts ul li {width: 282px;}
#featured-posts .item2 {margin-right:0;}
}
@media screen and (max-width: 700px) {
#featured-posts ul li {width: 232px;}
}
@media screen and (max-width: 600px){
#featured-posts ul li {width: 182px;}
#featured-posts {height:220px;}
}
@media screen and (max-width : 500px){
#featured-posts{display:none!important;}
}
</style>
<div id='featured-posts'>
<div class='container'>
<h3>Featured Posts</h3>
<ul>
<li class='item1'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
<li class='item2'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
<li class='item3'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
<li class='item4'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
</ul>
</div>
</div>এবার উপরের কোড থেকে Your post URL here মুছে সেখানে আপনার পোস্ট লিঙ্ক দিন এবং Your post name here এটা মুছে সেখানে আপনার সেই পোস্ট এর টাইটেল দিন তারপর আপনার এই পোস্ট কোন বিভাগের সেটা দেবার জন্য Your label here মুছে সেখানে আপনার সেই পোস্ট কোন বিভাগের সেই বিভাগ নাম দিয়ে দিন।
আপনি যদি চান এক্সট্রা আইটেম বাড়াব তাহলে আপনি <li class='item4'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li> এই টুকু ব্যবহার করুন </ul> এর আগে এবং আগের মত নাম লিঙ্ক ঠিক ভাবে দিয়ে দিন।
তাহলে আজকের মত এই পর্যন্ত পোস্টটি ভাল লাগলে অবশ্যই বন্ধদের সঙ্গে শেয়ার করুন। কোন সমস্যা হলে অবশ্যই নিচে কমেন্ট করুন পোস্টটি ভাল লাগলে একটি কমেন্ট ও বন্ধুদের সঙ্গে শেয়ার করতে ভুলবেন না। ভাল থাকবেন সুস্থ থাকবেন। আসসালামু আলাইকুম।
