ব্লগস্পট ব্লগের জন্য স্টাইলিশ Popular Posts উইডগেট। দেখুন

আমি আজ এই পপুলার পোস্ট উইডগেটটিকে উপস্থাপন করব একটু ভিন্ন স্টাইলে। যা দেখতে অনেক আকর্ষণীয় এবং রয়েছে হোভার ইফেক্টও।

লাইভ ডেমো
চলুন তবে দেখে নেই কিভাবে একটি পপুলার পোস্ট উইডগেট ব্লগস্পট ব্লগে যোগ করবেন? নিচের ধাপগুলো অনুসরন করুনঃ

প্রথমে ব্লগস্পট ড্যাশবোর্ডে লগিন করুন এবং 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%}

ব্যাস, কাজ শেষ। এবার আপনার ব্লগ ভিজিট করে দেখে নিন আজকের স্টাইলিশ পপুলার পোস্ট উইডগেটটি !

ব্লগস্পট ব্লগের জন্য স্টাইলিশ,3D স্টাইলের পপুলার পোস্ট