সবাই কেমন আছেন? আমি বেশি একটা ভালো নেই। সামনে পরীক্ষা। পরীক্ষার প্রস্তুতির কারণে ব্লগিং এ সময় দিতেই পারছিনা। আজ কিছুটা সময় খুঁজে বের করে ছোট একটি উইডগেট নিয়ে পোস্ট লিখতে বসলাম।
আজকের পোস্ট লিখব ব্লগস্পট ব্লগের পপুলার পোস্ট উইডগেট নিয়ে। কিন্তু ব্লগের ডিফল্ট পপুলার পোস্ট উইডগেট খুবই সাধারণ একটি গেজেট। কিন্তু একটি ব্লগে পপুলার পোস্ট অর্থাৎ সর্বাধিক পঠিত পোস্ট তালিকা খুবই গুরুত্বপূর্ণ একটি গেজেট। আপনি একজন ব্লগ পাঠক হিসেবে চিন্তা করলেই এর গুরুত্তটি বুঝতে পারবেন। কারণ একটি ব্লগের সর্বাধিক পঠিত বা ভালো লেখাটিই চায় পাঠক পড়তে। তাই আপনার ব্লগে একটি পপুলার পোস্ট গেজেট যুক্ত করার গুরুত্ব বাড়িয়ে বলার কিছু নেই।
আমি আজ এই পপুলার পোস্ট উইডগেটটিকে উপস্থাপন করব একটু ভিন্ন স্টাইলে। যা দেখতে অনেক আকর্ষণীয় এবং রয়েছে হোভার ইফেক্টও।
লাইভ ডেমো
চলুন তবে দেখে নেই কিভাবে একটি পপুলার পোস্ট উইডগেট ব্লগস্পট ব্লগে যোগ করবেন? নিচের ধাপগুলো অনুসরন করুনঃ
প্রথমে ব্লগস্পট ড্যাশবোর্ডে লগিন করুন এবং Layout প্যানেলে যান।
সেখান থেকে যে জায়গায় গেজেটটি যোগ করতে চান সেখানে Add a Gadget ক্লিক করে Popular Posts নামক গেজেটটি ক্লিক করুন।
এখন Configure Popular Posts আসবে। সেখানে Title এর ঘরে আপনার ইচ্ছেমত টাইটেল লিখুন। বাংলা ব্লগ হলে লিখুন " সর্বাধিক পঠিত পোস্ট " । আর ইংরেজি ব্লগ হলে লিখতে পারেন " Popular Posts " । Most Viewed এর জায়গায় All Time, Last 30 days অথবা Last 7 days সিলেক্ট করুন। Show এর জায়গায় image thumbnail এবং snippet এ টিক দিন। আর Display up until এর জায়গায় কতটি পোস্ট দেখাতে চান সেটি নির্বাচন করে Save বাটন ক্লিক করুন। নিচের ছবি দেখে আরও স্পষ্ট বুঝে নিন।
এবার ড্যাশবোর্ড থেকে Template সেকশনে গিয়ে Edit Html ক্লিক করুন।
টেমপ্লেট কোড থেকে নিচের কোডটি খুঁজে বের করুন।
</b:skin>
উপরের কোডটির ঠিক আগেই নিচের কোডগুলো বসিয়ে Template সেভ দিন।
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {
font-size: 90%;
line-height: 1.2em;
position: absolute;
width: 230px;
background-color: whiteSmoke;
padding: 7px;
border-top: 2px solid #FF0202;
z-index: 2;
left: 300px;
top: 60%;
height: 4.5em!important;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
ব্যাস, কাজ শেষ। এবার আপনার ব্লগ ভিজিট করে দেখে নিন আজকের স্টাইলিশ পপুলার পোস্ট উইডগেটটি !
আজকের পোস্টের এখানেই সমাপ্তি। উইডগেটটি ভালো লেগে থাকলে অবশ্যই জানাবেন। সমস্যা হলে সেটাও জানাবেন। আল্লাহ হাফেজ।
