প্রথমেই বলে নেয়া ভাল- এটা Miss করার মত কোন টিপস না। আশা করি যারা
Blogger Blog ব্যবহারকারী তারা অবশ্যই দেখবেন। পোস্টের টাইটেল দেখেই বুঝতে
পারছেন কি বিষয়ে লেখা হবে। এবার ভাল করে নিচের ছবিটি লক্ষ্য করুন-
এখানে
অবশ্য ছবি একটাই। কিন্তু আমি দুটি ছবি ধরে নিচ্ছি। বাম দিকের ছবিটি লক্ষ্য
করুন। এখানে কোন বর্ডার নেই। আর ডান দিকের ছবিটিতে বর্ডার আছে। এবং আপনি
যখন আপনার Blogger Blog এ কোন পোস্ট এর সাথে ছবি Upload করে তখন স্বাভাবিক
ভাবেই একটা বর্ডার চলে আসে। এটা তেমন কোন ব্যাপার না।
কিন্তু
আপনি যখন কোন ছবিকে Transparent রাখতে চান তখন কিন্তু Border থাকাটা খুবই
বিরক্তিকর। অন্তত আমার জন্য। কারণ বর্ডার থাকলে Image এর Transparency নষ্ট
হয়ে যায়। কিছুদিন আগে আমি এক ব্লগার এর কাছ থেকে একটা কোড পাই। সেটা
নিজের ব্লগে Apply করে একটা পোস্টও লিখেছি। এখন আপনাদের সাথে Share করব।
আশা করি ভাল লাগবে।
কাজটা খুবই সহজ। এ কাজটা করার জন্য অবশ্য Edit HTML এর সাহায্য নেয়া হয়নি। Template Designer দেয়েই সেরে ফেলতে পারবেন। আপনাকে শুধুমাত্র একটা CSS Code এড করে দিতে হবে।
তাহলে এবার কাজে নেমে পরুন। আমি ধরে নিচ্ছি আপনি আপনার Blogger এর Dashboard বা Design এ সাইনড ইন অবস্থায় আছেন।
- Template বাটন এ ক্লিক করুন।
- এবার Customize
- বাম দিক থেকে Advance সিলেক্ট করুন
- এবার একটা ছোট্ট লিস্ট আসবে। এখান থেকে Add CSS নির্বাচন করুন। (ছবি দেখতে পারেন)
- এরপর ডানদিকে Custom CSS বক্স পাবেন। নিচের কোডটি কপি পেস্ট করে এখানে বসিয়ে দিন। Apply to Blog এ ক্লিক করে আপনার সাইটে যান।
- এবার দেখুন ম্যাজিক! আপনার আপলোড করা কোন ছবিতেই এখন আর Border দেখবেন নাহ!
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img {padding: none !important;border: none !important;background: none !important;-moz-box-shadow: 0px 0px 0px transparent !important;-webkit-box-shadow: 0px 0px 0px transparent !important;box-shadow: 0px 0px 0px transparent !important;}
Shortcut Method:
Template > Customize > Advance > Add CSS > Add Custom CSS Box (Copy and Paste the above code here) > Apply to Blog.
