ব্লগার ব্লগে ব্যবহার করুন CSS স্টাইল জনপ্রিয় পোস্ট ওয়েডগেট ! নতুন স্টাইল !!

আজকে আপনাদের সঙ্গে একটি নতুন Popular পোস্ট বাংলাই জনপ্রিয় পোস্ট ওয়েডগেট শেয়ার করবো আশাকরি আজকের এই পোস্ট আপনাদের ভাল লাগবে এবং ওয়েডগেট ও আপনাদের পছন্দ হব । এটা নতুন স্টাইল জানিনা এর আগে আপনি কোন সাইটে এই স্টাইল দেখেছেন কিনা তবে মনে হয় না দেখেছেন যাই হোক নিচে থেকে ডেমো দেখে নিন যদি মনে হয় ভাল লাগছে তাহলে আপনার ব্লগে ব্যবহার করতে পারেন । চলুন শুরু করা যাক ।

Popular Post Demo

উপরে ডেমোতে দেখুন ওখানে ইমেজ সহ দেওয়া আছে আপনি যদি ইমেজ ব্যবহার করবেন না তাহলে সেটাও ব্যবহার করতে পারবেন, তাহলে চলুন দেখেনিন কিভাবে আপনার ব্লগে ব্যবহার করবেন এই স্টাইল ওয়েডগেট টি -

কিভাবে আপনার ব্লগার ব্লগে ব্যবহার করবেন

• প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন

• ড্যাশবোর্ড থেকে Template → Edit HTML এ ক্লিক করুন

• এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে নিচের ট্যাগ খুজুন

]]></b:skin>

• উপরের ট্যাগ এর ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করুন

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px dashed #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

• এবার Save Template এ ক্লিক করুন এবং বেরিয়ে আসুন । 

কিভাবে ব্লগে সঠিক ভাবে ব্যবহার করবেন 

• আপনার ব্লগের ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন 

• এবার Add a Gadget এ ক্লিক করুন এবং Popular post এ ক্লিক করুন 

• স্ক্রীনশর্ট দেখতে এখানে ক্লিক করুন 

• এবার সেখানে আপনি যদি ফটো দেখাতে চান তাহলে Image এ ক্লিক করুন 

• স্ক্রীনশর্ট দেখতে এখানে ক্লিক করুন 

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