ব্লগের কোণগুলোকে বাঁকা করার পদ্ধতি

rounded or curvy corner with simple css codeউপরেরর ছবিটি দেখুন। হেডারের কোনাগুলো গোলাকার হয়ে গেছে। খেয়াল করেছেন কি "বাংলা হ্যাকস" ব্লগের বর্ডারের কোনাগুলোও গোলাকার দেখাচ্ছে। এটা করা কিন্তু খুব সহজ। খুব সামান্য পরিমাণ CSS কোড ব্লগের HTML কোডের মধ্যে বসিয়ে দিয়ে কোন ব্লগ বা ওয়েবসাইটের কর্ণারকে এইরকম বাঁকা করার কাজটি করা যায়। আমরা এই সামান্য একটি বৈশিষ্ট্য যোগ করে নিজের ব্লগের চেহারাকে আরও আকর্ষণীয় ও দৃষ্টিনন্দন করে পাঠকের সামনে উপস্থাপন করতে পারি। কিভাবে তা সম্ভব? আপনি কি আপনার ব্লগার.কম ব্লগের বিভিন্ন অংশের কোণাগুলো এরকম করে গোলাকার করতে চান? যদি আপনার উত্তর হ্যাঁ হয়, তাহলে নিচে লেখা পরামর্শ অনুসরণ করুন।

# আমাদেরকে এই কাজটি করার জন্য ব্লগের ড্যাশবোর্ডে লগইন হয়ে Layout> Edit HTML ট্যাবে কাজ করতে হবে। Make your blogger/ blogspot blog's corner round or curve with css code.
আপনার ব্লগের কোন অংশের কর্ণারকে গোলাকার করতে চান? তা আগে চিন্তা করে ঠিক করে নিন। তাহলে কাজ করা সহজ হবে।
১। মূল ব্লগশরীরের বাহিরের অংশকে বাঁকিয়ে ফেলার পদ্ধতিঃ
এরকম বাংলা হ্যাকস ব্লগে রয়েছে। #outer-wrapper লেখাটিকে খুঁজে বের করুন। এই লেখাটির ঠিক নিচে বিভিন্ন কোড রয়েছে। শেষে একটি দ্বিতীয় ব্রাকেট } রয়েছে। এই দ্বিতীয় ব্রাকেটের ঠিক উপরে নিচের কোডটি লিখে দিয়ে PREVIEW দেখুন। পছন্দ হলে SAVE TEMPLATE লেখাতে ক্লিক করে পরিবর্তনগুলো সংরক্ষণ করুন।
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
এখানে 10px মানটি পরিবর্তন করে 15, 20 ইত্যাদি করে নিয়ে পরীক্ষা করে দেখুন।

সাইডবারের কোণগুলিকে বাঁকা করার পদ্ধতিঃ
তাহলে #sidebar-wrapper1 লেখাটি খুঁজে বের করুন। এখানে 1 অথবা 2 অথবা 3 অথবা 4 যে কোন নম্বরের সাইডবার হতে পারে। এখানে থাকা কোডগুলোর নিচে দ্বিতীয় ব্রাকেট শেষ হবার আগে একই কোড বসিয়ে দিন।
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
এখানে 10px মানটি পরিবর্তন করে দেখুন কোনটা পছন্দ হয়।

৩। পোস্ট পাতার কোণগুলিকে গোলাকার করার পদ্ধতিঃ
তাহলে #main-wrapper { অংশের নিচে দ্বিতীয় ব্রাকেট শেষ হবার আগে একই কোড বসাতে হবে।

# যদি নির্দিষ্ট কোন একটি কোণকে বাঁকা করতে চান, তাহলে নিচের কোড ব্যবহার করুন।
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;

এই কোড ব্যবহার করলে উপরের বামপাশের কোন গোলাকার হয়ে যাবে। এভাবে শুধুমাত্র উপরের ডানপাশ, কিংবা নিচের ডান অথবা বামপাশ গোলাকার করতে পারবেন।

ব্লগবডির বিভিন্ন অংশের কোনগুলিকে বাঁকা করার পরে আরও একটি ইফেক্ট যোগ করা যায়। আপনি ইচ্ছে করলে "ছায়া" (Shadow) দিতে পারেন। এর জন্য উপরের কোডের নিচেই আবারো কিছু কোড যোগ করতে হবে।
-moz-box-shadow:0 0 15px #FFFF00;-webkit-box-shadow:0 0 15px #FFFF00;
এখানে 15px মানটিকে এবং #FFFF00; কালার কোডের মানটিকে পরিবর্তন করে দেখতে মনমতো একটি বৈশিষ্ট্য বেছে নিতে পারবেন। (বিভিন্ন রঙের কোড "কালার চার্ট" থেকে সংগ্রহ করুন)

# বিশেষভাবে উল্লেখ্য যে ব্লগের শরীরের এই গোলাকার বৈশিষ্ট্যটি সবচাইতে ভাল দেখা যায় মজিলার ফায়ারফক্স থেকে। আপনার কাছে কি ফায়ারফক্স ব্রাউজার নেই? তাহলে এক্ষুনি এখানে ক্লিক করে লেটেস্ট ভার্সনের ফায়ারফক্স ডাউনলোড করে নিন।
 

পাঠকের প্রতিক্রিয়া

কিছু কথা

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

Search This Blog

© 2009-2014 Bangla Hacks | Design by: Bangla Hacks. Powered by: Blogger