কিভাবে ব্লগের যে কোন Images ও Thumbnails সাইজ ছোট-বড় করবেন?

Your Ads Here

বেশীরভাগ লোক ব্লগের Thumbnails ও Thumbnails Image এর সাইজ ছোট-বড় করার ক্ষেত্রে CSS ব্যবহার করেন। CSS কোড ব্যবহার করে যদিও Image এর সাইজ ছোট বড় করা সম্ভব হয় কিন্তু দেখা যায় CSS কোড Thumbnail Image এর Resolution নষ্ট করে দিচ্ছে কিংবা Image এর কিছু অংশ Thumbnail এর বাহিরে পড়ে থাকছে। এতেকরে Image টি Thumbnail এর সাথে ঠিকমত Adjust না হওয়ার কারনে দেখতে বিশ্রি লাগে।

আমরা আজ যেটি শেয়ার করছি সেটিতে ছোট্ট একটি Jquery ব্যবহার করেছি। এই Jquery এর সাহায্যে Popular Post, Recent Post, Related Post Widget সহ যে কোন ধরনের Thumbnails ও Thumbnails Image এর সাইজ ছোট-বড় করতে পারবেন। এটি ব্লগের Thumbnails Image এর সাইজ ঠিক রাখার পাশাপাশি Resolution ঠিক রেখে Image-কে Thumbnail Area এর বাহিরে যাওয়া থেকে বিরত রাখবে।

কিভাবে ব্লগে যুক্ত করবেন?

Your Ads Here

Read More :কিভাবে BlogSpot ব্লগে Facebook Comment Box যুক্ত করতে হয়?

• প্রথমে ব্লগে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।

• কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
• এখন নিচের Jquery কোডটি </head> ট্যাগের ঠিক উপরে পেষ্ট করুন।

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

Read More :কিভাবে BlogSpot ব্লগে Custom Domain সেটআপ করতে হয়?

<script type='text/javascript'>
   //<![CDATA[

Your Ads Here

Your Ads Here

Read More :কেন BlogSpot ব্লগে Custom Domain ব্যবহার করা প্রয়োজন?

   $(document).ready(function(){
   $(".item-thumbnail").find("img").each(function(b,a){a=

Read More :কিভাবে ব্লগার ব্লগে Custom Web Font যুক্ত করতে হয়?

   $(a);a.attr({src:a.attr("src").replace(/s72-c/,"w250-h150").replace(/default/,0)});a.attr("width",250);a.attr("height",150)})})
   //]]>
</script>

• সবশেষে Save Template এ ক্লিক করলেই কাজ OK.
• নোটঃ উপরের কোডটিতে ব্লগের Popular Post এর জন্য সেট করে দেয়া আছে। আপনি যদি অন্য কোন Widget এর Thumbnail ব্যবহার করতে চান তাহলে হলুদ কালারের .item-thumbnail ক্লাসের জায়গায় আপনার কাঙ্খিত উইজেটটির আইডি অথবা ক্লাস বসিয়ে দিলেই হয়ে যাবে।

কাষ্টমাইজেশনঃ

• আপনার ব্লগে যদি Jquery এর কোন ভার্সন যুক্ত করা থাকে তাহলে সবুজ কালারের লাইনটি যুক্ত করার কোন প্রয়োজন নেই।
• লাল কালারের w250 সংখ্যাটি Thumbnail Width এর সাথে মিল রেখে দেবেন।
• নীল কালারের h150 সংখ্যাটি Thumbnail Height এর সাথে মিল রেখে দেবেন।
• সর্বশেষ পিংক কালারের Width ও Height আপনার ইচ্ছামত বসাতে পারেন।

Your Ads Here