Mar 6, 2016

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

বেশীরভাগ লোক ব্লগের 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 এর বাহিরে যাওয়া থেকে বিরত রাখবে।

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

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
কিভাবে ব্লগের যে কোন Images/Thumbnails সাইজ ছোট-বড় করতে হয়?
  • কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • এখন নিচের Jquery কোডটি </head> ট্যাগের ঠিক উপরে পেষ্ট করুন।
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

<script type='text/javascript'>
   //<![CDATA[
   $(document).ready(function(){
   $(".item-thumbnail").find("img").each(function(b,a){a=
   $(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 আপনার ইচ্ছামত বসাতে পারেন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

3 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. ওয়াও....সুপার ট্রিক্স দাদা....খুব সুন্দর কাজ করছে....

    ReplyDelete
  2. ভাই আমি একটু সমস্যায় পড়েছি সমস্যাটি হলো বুঝতে পারছিনা কিভাবে এডমিন প্রোফাইল ইমেজ যোগ করবো। পোস্ট টাইটেল এর নিচে।

    ReplyDelete
    Replies
    1. বিষয়টি আমার To Do List এ রাখলাম। খুব শীঘ্রই এ ধরনের একটি পোষ্ট আমাদের ব্লগে পেয়ে যাবেন। ধন্যবাদ...

      Delete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: