ব্লগারে কাস্টম নাম্বার লিস্ট স্টাইল যুক্ত করার উপায়

Nill ডিসেম্বর ০৮, ২০২২

ব্লগার প্লাটফর্মে আমরা যারা ব্লগিং করি তারা জানি যে,ব্লগারে অনেক কিছুই সীমিত।যেমন আমরা ওয়ার্ডপ্রেসে অনেক ধরনের প্লাগিন ইনস্টল করে অনেক কাজ সহজেই করতে পারি।কিন্তু ব্লগারে প্লাগিন ইনস্টল করা সম্ভব নয়।তাই আমাদের যা কাস্টোমাইজ করার সব থিমের ভিতর থেকেই করতে হয়।

আমাদের ব্লগার ব্লগকে আরো সুন্দর এবং অ্যাট্রাক্টিভ করতে অনেক স্ক্রিপ্ট/সিএসএস যুক্ত করতে পারি।আজকের পোস্টে আমি দেখাবো কিভাবে ব্লগারের ডিফল্ট নাম্বার লিস্টিং স্টাইল পরিবর্তন করবেন মাত্র কয়েক লাইন সিএসএস যুক্ত করে।

কাস্টম নাম্বার লিস্ট স্টাইল এর উপকারিতা :

এই সিএসএস কোডগুলো আপনার ব্লগার ব্লগের থিম কোডের ভিতর যুক্ত করার ফলে আপনি যখন কোনো নাম্বার লিস্ট ট্যাগ ব্যবহার করে পোস্ট করবেন,তখন আপনার ব্লগের নাম্বার লিস্ট অনেক সুন্দর দেখাবে।এটা যেমন আপনার ওয়েবসাইটের ভিজিটরদের আকৃষ্ট করবে ঠিক তেমনি আপনার ব্লগার ব্লগকে মডার্ন একটা লুক দিবে।

ডেমো দেখতে : এখানে ক্লিক করুন ।

ব্লগার ব্লগে যেভাবে কাস্টম নাম্বার লিস্ট স্টাইল যুক্ত করবেন :

- প্রথমে যাবেন Blogger Dashboard এ।
- তারপর যাবেন Themes এ।
- Drop-down মেনুতে ক্লিক করে Edit HTML অপশনে ক্লিক করলে আপনাকে থিমের ভিতর রিডাইরেক্ট করে নিয়ে যাবে।
- এখন সার্চ করুন ]]></b:skin> এবং নিচে দেয়া সিএসএস কোডগুলো ]]></b:skin> ট্যাগ এর উপরে পেস্ট করে দিন।

Style 1 CSS :

ol.style1{counter-reset:numbers;list-style:none;padding:0}ol.style1>li{counter-increment:numbers;margin-bottom:25px;position:relative;margin-left:55px}ol.style1>li img{margin:15px 0;width:100%;display:block}ol.style1>li #box-download img{margin:0}ol.style1>li::before{content:counter(numbers);line-height:23px;font-family:'Noto Sans',sans-serif;font-size:14px;font-weight:700;left:-45px;width:32px;height:32px;text-align:center;position:absolute;color:#eb3b5a;border:5px solid rgba(42,203,186,1);border-radius:50px;top:-2px}ol.standard li,ol.style0 li,ol.style1 li ul li,ol.style2 li{margin-bottom:15px}ol.style1 li ul{margin-top:15px}.drK ol.style1>li::before{color:#7efff5;border-color:rgba(50,255,126,1)}

Style 2 CSS :

 ol.style2{counter-reset:numbers;list-style:none;padding:0}ol.style2>li{counter-increment:numbers;margin-bottom:25px;position:relative;margin-left:55px}ol.style2>li img{margin:15px 0;width:100%;display:block}ol.style2>li::before{content:counter(numbers);line-height:23px;font-family:'var(--fontB)';font-size:14px;font-weight:700;left:-45px;width:32px;height:32px;text-align:center;position:absolute;color:#9c27b0;border:5px solid rgb(254 202 87);border-radius:50% 0 50% 50%;top:-2px}ol.style2 li ul li{margin-bottom:15px}ol.style2 li ul{margin-top:15px}.drK ol.style2>li::before{color:#fff200;border-color:rgba(24,220,255,1)}

Style 3 CSS :

ol.style3{counter-reset:numbers;list-style:none;padding:0}ol.style3>li{counter-increment:numbers;margin-bottom:25px;position:relative;margin-left:55px}ol.style3>li img{margin:15px 0;width:100%;display:block}ol.style3>li::before{content:counter(numbers);line-height:23px;font-family:'var(--fontB)';font-size:14px;font-weight:700;left:-45px;width:32px;height:32px;text-align:center;position:absolute;color:#eb3b5a;border:5px solid rgb(42,203,186,1);border-radius:50% 0 50% 50%;top:-2px}ol.style3 li ul li{margin-bottom:15px}ol.style3 li ul{margin-top:15px}.drK ol.style3>li::before{color:#7efff5;border-color:rgba(24,220,255,1)}

এখন থিমটি সেভ করে দিন।

আপাতত থিমের ভিতর আপনার কাজ শেষ।এখন যখন আপনি নতুন কোনো পোস্ট লিখবেন তখন আগের মত করে যেমন নাম্বার লিস্ট করতেন সেভাবেই করে পোস্টের Compose view থেকে HTML view এ ক্লিক করবেন।তারপর নাম্বার লিস্ট এর HTML কোডগুলো খুঁজে বের করবেন।এবং সেখানে <ol> ট্যাগ খুঁজে পেলে <ol> ট্যাগ এর ভিতর আপনার যে স্টাইলটি পছন্দ সেটি লিখে দিন।যেমন আমি style 3 দিবো। তাহলে এভাবে লিখবো : <ol class=”style3″> । তাহলেই আপনার কাস্টম নাম্বার লিস্ট তৈরি হয়ে যাবে।

আমি উপরে যে ডেমো লিংক দিয়েছি,সেখানে গেলে আপনি ৩টি স্টাইল দেখতে পারবেন।স্টাইল ৩টির সিএসএস কোডগুলোর ডাউনলোড লিংক আমি নিচে দিয়ে দিচ্ছি। আপনি চাইলে যেকোনো একটি কিংবা ৩টিই থিমের ভিতর যুক্ত করে দিতে পারেন।

ডাউনলোড করতে : এখানে ক্লিক করুন।

উপরে দেয়া সিএসএস কোডগুলো আপনার থিমের ]]></b:skin> ট্যাগ এর উপরে পেস্ট করে দিন।এবং যেমনটা আমি বলেছি যে পোস্টের HTML view এ গিয়ে লিস্ট স্টাইল এডিট করতে সেটা যদি করতে না পারেন তবে HTML view এ গিয়ে নিচে দেয়া ৩টি স্টাইল এর যেকোনো একটি কিংবা ৩টিই পেস্ট করে ইচ্ছে মত এডিট করে ব্যবহার করতে পারেন।

Style 1 HTML

<ol class="style1">

<li>Content</li>

<li>Content</li>

<li>Content</li>

<li>Content</li></ol>

Style 2 HTML

<ol class="style2">

<li>Content</li>

<li>Content</li>

<li>Content</li>

<li>Content</li></ol>

Style 3 HTML

<ol class="style3">

<li>Content</li>

<li>Content</li>

<li>Content</li>

<li>Content</li></ol>

উপসংহার

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

প্রিমিয়াম ব্লগার টেমপ্লেট , ব্লগিং টিপস , ব্লগার উইজেট স্ক্রিপ্ট , এসইও টিপস পেতে ভিজিট করুন আমার Blogen ব্লগ।আল্লাহ হাফেজ।