ব্লগার ব্লগ এ ​​খুব সুন্দর একটি জনপ্রিয় পোস্ট widget যোগ করুন ৩

2
388

আপনারা হয়ত অনেকেই জানেন কিভাবে ব্লগার এর পপুলার পোস্ট WIDGET পরিবর্তন করতে হয় । কিন্তু যারা ব্লগার এ নতুন তাদের blogspot ব্লগ কে সুন্দর করে সাজাতে আমার এই পোস্ট।

আর দুইটি ডিজাইন এর লিঙ্ক নিচে দেয়া হল যা আমার আগে পোস্ট করা…………

ব্লগার ব্লগ এ ​​খুব সুন্দর একটি জনপ্রিয় পোস্ট widget যোগ করুন ১

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

ব্লগার ব্লগ এ ​​খুব সুন্দর একটি জনপ্রিয় পোস্ট widget যোগ করুন ২

Adding Popular Post Widget To Your Blogger Blogঃ

To view another live demo click here

 Unnntitled ব্লগার ব্লগ এ ​​খুব সুন্দর একটি জনপ্রিয় পোস্ট widget যোগ করুন ৩

Just follow the following instructions.

  • প্রথম এ যান  Blogger >> Your Blog >> Layout.
  • তারপর Add a Gadget >> Popular Posts
  • এখন নিচের পিকচার অনুযায়ী আপনার Widget এর সেটিং ঠিক করে নিন।

Untitled ব্লগার ব্লগ এ ​​খুব সুন্দর একটি জনপ্রিয় পোস্ট widget যোগ করুন ৩

 

  • এখন Popular Post widget টি সেভ করুন ।

 

তারপর নতুন স্টাইল এর জন্য নিচের ধারা অনুযায়ী কাজ করুন ।

  • প্রথম এ Blogger >> Template >> এ যান ।
  • আপনার ফুল Template টি backup হিশেবে রাখার জন্য ডাউনলোড করে নিন । পরে যদি কোন সমস্যা হয় তাহলে আবার আপলোড করে সেভ করে আগের অবস্থায় ফিরতে পারবেন ।
  • Select Edit HTML >> Proceed.
  • তারপর Ctrl+F এর মাধ্যমে খুজে বের করুন  ]]></b:skin>
  • এখন নিছের কোড টি কপি করে  ]]></b:skin> এর উপরে পেস্ট করুন ।

 

/*— bditmela.blogspot.com — */

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF url(https://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif) no-repeat scroll 5px 10px;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 5px 20px !important;

border: 1px solid #ddd;

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 .item-thumbnail img {

webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

}

 

  • আপনি Background এবং border কালার পরিবর্তন করতে পারেন কোড পরিবর্তন এর মাধ্যমে #FFF and #6BB5FF
  • সব শেষে সেভ করুন এবং আপনার ব্লগ টি রিফ্রেশ করে দেখুন আপনার খুব সুন্দর পপুলার পোস্ট WIDGET

নতুন মোবাইল, ল্যাপটপ এবং ট্যাবলেট কম্পিউটার গুলো সম্পর্কে সব কিছু জানতে আমার ব্লগ টির সাথে থাকার জন্য অনুরোধ করসি…

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

2 মন্তব্য

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

1 + six =