কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে হয়?

কিভাবে Blog Posts Image ও Posts Thumbnail Image সহ সকল সেকশনের Image এর Resolution নষ্ট না করে Responsive করতে হয়?

আমরা ইতিপূর্বে Responsive Blog Design তৈরির কয়েকটি পোষ্ট শেয়ার করেছি। আজকের পোষ্টের মাধ্যমে আমাদের এ সিরিজের সকল পোষ্ট সমাপ্ত হবে। আমরা আজকের পোষ্টে শেয়ার করব কিভাবে Blog Posts Image ও Posts Thumbnail Image সহ সকল সেকশনের Image এর Resolution নষ্ট না করে Responsive করতে হয়? সাধারণত ব্লগের বেশীর ভাগ Image সাইজ বড় হওয়ার করনের ছোট মাপের ডিভাইসগুলিতে Image Adjust হয় না। ফলে পোষ্টের Image ব্রাউজারের বাহিরে অবস্থান নেয়। এতে ব্লগ পোষ্টগুলির Interface নষ্ট হয়ে যায়।
কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে  হয়?

কেন ব্লগের Images Mobile Friendly করতে হয়?

বেশীরভাগ মোবাইল বা স্মার্ট ফোন ছোট সাইজের এবং মোবাইল ইন্টারনেট Low Bandwidth এর হয়ে থাকে। এর ফলে মোবাইল ডিভাইস থেকে ভিজিট করার সময় Image লোড নিতে সময় নেওয়ার পাশাপাশি প্রচুর পরিমানে Bandwidth অযথা নষ্ট করে। যার দুটিই বিরক্তকর এবং ব্যয়বহুল। ব্লগের Image Responsive করার ফলে সকল ধরনের ছোট বড় ডিভাইসের সাইজ অনুযায়ী Image গুলি Auto Adjust হয়ে যায়। যার ফলে ব্লগের Interface ভাল হওয়ার পাশাপাশি দ্রুত লোড নিয়ে অযথা Bandwidth নষ্ট হওয়ার হাত থেকে রক্ষা করে। অধীকন্তু Responsive Image আপনার ব্লগের SEO Ranking এর ক্ষেত্রেও গুরুত্বপূর্ণ অবদান রাখবে।

অবস্থানবেধে Image Size এর পরিবর্তনঃ

সাধারণ Responsive ব্লগের Image গুলি ডিভাইসের সাইজবেধে বিভিন্ন রকমের হয়ে থাকে। বিশেষ করে ব্লগের হোম পেজের Image ছোট ডিভাইসের মাঝামাঝি অবস্থান করে এবং আর্টিকের Image এর নিচে অবস্থান করে, অন্যদিকে মাঝারি মাপের ডিভাইসে হোম পেজের Image বাম পাশে থেকে আর্টিকেল Float হয়ে ডান পাশে অবস্থান নেয়। এতেকরে সকল ডিভাইস থেকে ব্লগের হোম পেজকে আকর্ষনীয় দেখা যায়। তাছাড়া ব্লগের পোষ্ট পেজের Image Responsive করার পর সকল ধরনের ডিভাইসের সাইজ অনুযায়ী Automatic ছোট বড় হতে থাকে। যার ফলে পাঠকের চাহিদা সহজে মেঠানো যায়। নিচে আমরা তিনটি Screenshot এর মাধ্যমে আপনাদের ধারনা দিচ্ছি Responsive ব্লগের Image অবস্থানবেধে কি রকম হয়?

ছোট ডিভাইসের হোম পেজ হবে নিচের চিত্রের মত-
কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে  হয়?
মাঝারি মাপের ডিভাইসের হোম পেজ হবে নিচের চিত্রের মত-
কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে  হয়?
ব্লগের পোষ্ট পেজের Image নিচের চিত্রেরমত সকল ডিভাইসে Auto Adjust হতে থাকবে-
কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে  হয়?

কিভাবে ব্লগের Image Responsive করবেন?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • তারপর নিচের Media Queries টি ]]></b:skin> এর উপরে পেষ্ট করুন।
@media only screen and (max-width:768px) {

.headerleft a img, .headerright a img {max-width:75%!important;margin-left:0;position:absolute;height:auto;left:30px}

.post img, .post a img {max-width:95%;height:auto}

#sidebar .widget-content img, #sidebar .widget-content a img {max-width:98%;height:auto}

#footer-wrapper img, #footerbar-wrapper a img {max-width:98%;height:auto}

}
  • উপরের সবগুলি সেকশনেরই Max-Width ব্যবহার করা হয়েছে। এটি Image Responsive করার জন্য খুব গুরুত্বপূর্ণ একটি মাপ। এটি সবসময় 100% এর কম রাখবেন। তাহলে প্রত্যেকটি Image মূল জায়গার চেয়ে কিছুটা ছোট হয়ে ঠিকমত অবস্থান করবে।
  • নোটঃ উপরের সবুজ কালের ID ও Class গুলি আপনার ব্লগের টেমপ্লেটের সাথে হুবহু মিল থাকতে নাও পারে। কাজেই আপনার ব্লগের সঠিক ID ও Class খোঁজে নিয়ে ঐ জায়গাগুলিতে বসাতে হবে।

কিভাবে Home Page এর Post Thumbnails Image কে Responsive করবেন?

  • আবার কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • তারপর নিচের Media Queries টি ]]></b:skin> এর নিচে পেষ্ট করুন।
<b:if cond='data:blog.pageType == "index"'>
<style>
   @media only screen and (max-width:786px) {
   .post img, .post a img {max-width:50%; height:auto; float:left; margin: 0px 10px 10px 0px}
}
   @media only screen and (max-width:480px) {
   .post img, .post a img {width:95%; float:none; height:auto; clear:both; margin-bottom:10px}
}
</style>
</b:if>
  • উপরের কোডটিতে একটি Conditional Tag ব্যবহার করা হয়েছে। এটি আপনার ব্লগের Home Page এর Thumbnails Image -কে সকল ধরনের ডিভাইসের উপযোগী করে নেবে, যেটি আমরা উপরের প্রথম দুটি মোবাইল Screenshot এ দেখিয়েছি।
  • সবশেষে Template Save করে নিন।
সাহায্য জিজ্ঞাসাঃ এখন আপনি ইচ্ছে করলে আমাদের ০৭ টি টিউটরিয়ালের মাধ্যমে আপনার ব্লগকে পরিপূর্ণ Responsive করে নিতে পারবেন। কারণ আমরা সবগুলি পোষ্ট বিশ্লেষণ করে ধারাবাহিকভাবে বর্ণনা করেছি। তারপরও যদি কোন পোষ্টের অংশ বুঝতে অসুবিধা হয় তাহলে আমাদের জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের পরিপূর্ণ চেষ্টা করব।

COMMENTS

BLOGGER: 3
  1. ভাই ব্লগারে কিভাবে পোষ্টের ভেতর screenshot যুক্ত করবো?
    এন্ড্রয়েড দিয়ে কি যুক্ত করা যাবে?
    মানে পোষ্টের মাঝখানে অনেক সময় screenshot দেওয়ার প্রয়োজন হয়। আর তখন কিভাবে screenshot যুক্ত করতে পারবো? প্লিজ একটু বলেন।

    ReplyDelete
  2. আসসালামু আলাইকুম। ভাইয়া আপনার ব্লগের টিউটোরিয়াল অনুসরন করে অনেক কিছু শিখতে পেরেছি এবং শিখছি। সেই জন্য আপনাকে ও আপনার টীমকে অজস্র ধন্যবাদ। তথাপি ব্লগস্পট বিষয়ে একটি বিষয় জানার ছিল যথারুপঃ ব্লগস্পট সাইটে পোস্ট করার সময় যে ছবি গুলো ব্যবহার করি সেখানে অপ্রয়োজনীয় আপলোডেড ছবিগুলো রিমুভ করব কিভাবে? অর্থাৎ সহজভাবে বলতে হচ্ছে যে, যেহেতু ব্লগস্পট সাইটে ১ জিবি জায়গা দেয়। সেখানে অপ্রয়োজনীয় ছবি গুলো ডিলেট করে জায়গা কিভাবে ফ্রি করব?? আরেকটি বিষয় জানার ছিলঃ যে পোস্টটি করেছি সেই পোস্টটি যদি ডিলেট করে দিই তাহলে সেই পোস্টের আপলোডকৃত ছবিগুলো কি রিমুভ হয়ে যাবে? এই বিষয় নিয়ে একটি টিউটোরিয়াল করলে উপকৃত হই। পরিশেষে আপনাকে শুভ কামনা।

    ReplyDelete
    Replies
    1. গুগল ব্লগস্প এ আপলোডকৃত ছবিগুলো সাধারণত Google album archive এ জমা হয়। আপনার অপ্রয়োজনীয় ছবি Google album archive হতে ডিলিট করতে পারবেন।

      ব্লগস্পট ব্লগের কোন একটি পোস্ট ডিলিট করলে শুধুমাত্র পোস্ট ডিলিট হয়, ছবিগুলো Google album archive এ থেকে যায়।

      ধন্যবাদ...আমাদের সাথে থাকুন, ভবিষ্যতে এ বিষয়ে একটি পোস্ট শেয়ার করার চেষ্টা করব, ইনশাআল্লাহ্।

      Delete

Name

Adsense,16,Affiliate,1,Android Tricks,1,Blog Design,35,Blogger Theme,9,Blogger Widgets,25,Create Blog,3,Earnings,19,Mim,5,Pro News,8,Responsive,5,SEO,55,Social Media,2,Tech,1,WordPress,3,YouTube,3,
ltr
item
ব্লগার বাংলাদেশ: কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে হয়?
কিভাবে ব্লগের Images ও Post Thumbnails Responsive করতে হয়?
কিভাবে Blog Posts Image ও Posts Thumbnail Image সহ সকল সেকশনের Image এর Resolution নষ্ট না করে Responsive করতে হয়?
https://1.bp.blogspot.com/-peIKR02yPz8/VqTivX0yYoI/AAAAAAAAGrE/vDimRj20stk/s400/blogger-responsive-images.png
https://1.bp.blogspot.com/-peIKR02yPz8/VqTivX0yYoI/AAAAAAAAGrE/vDimRj20stk/s72-c/blogger-responsive-images.png
ব্লগার বাংলাদেশ
https://www.bloggerbangladesh.com/2016/01/how-to-make-responsive-images-in-blogger.html
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/2016/01/how-to-make-responsive-images-in-blogger.html
true
1297988252866731047
UTF-8
Loaded All Posts Not found any posts VIEW ALL বিস্তারিত পড়ুন Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy