লগার বা ওয়েব সাইটের পোস্টর ভিতরে কাস্টম CSS 3 স্টাইল নম্বরযুক্ত তালিকা যুক্ত করুন 

List style ব্লগ পোস্ট ব্যবহার করা যেতে পারে যে সংখ্যাবিহীন সিরিয়াল মানে।সাধারণত ডিফল্ট ব্লগ দুটি অথবা আরো লাইন নির্বাচন করে আমরা এটি স্বয়ংক্রিয়ভাবে প্রতি লাইনে সিরিয়াল নম্বর যোগ করি তালিকা বিকল্পের উপর ক্লিক করুন যেখানে List style বিকল্প ভাবে আসে।এই বিকল্প ব্যাপক টেমপ্লেট বৈশিষ্ট্য বা mp3 ট্র্যাক তালিকা তালিকা জন্য ব্যবহার করা সঙ্গীত ব্লগ হিসেবে টেমপ্লেট ব্লগ সবচেয়ে জনপ্রিয় পায়।

সাধারণত সঙ্গীত ব্লগে আমরা ম্যানুয়াল তালিকা ট্র্যাক তালিকা দেখতে পাই কিন্তু এটা আমরা এলোমেলোভাবে পোস্ট তৈরি করে প্রতি লাইনে সিরিয়াল নম্বর যোগ করা কঠিন।কিন্তু সমাধান আপনি এক ক্লিক করে প্রতি লাইনে সিরিয়াল নম্বর যুক্ত করতে List style এই উইজেট ব্যবহার করে।

তবে ডিফল্ট তালিকা List style  উইজেট আকর্ষণীয় বা  appealing হয় না এবং এটি পরিদর্শক আকর্ষণ করতে সক্ষম করতে পারেন না।তাই আমি ব্লগার বা ওয়েব সাইটের পোস্টর ভিতরে কাস্টম CSS 3 স্টাইল নম্বরযুক্ত তালিকা তৈরি করেছি।

১:CSS 3 ব্লগার জন্য RECTANGLE STYLE:
CSS 3 এর নিচে steps- অনুসরণ করুন আপনার ব্লগার টেমপ্লেট তালিকায় Rectangle style নিন।

১ ধাপঃ আপনার ব্লগার অ্যাকাউন্টে লগ ইন করুন এবং আপনার ব্লগার ড্যাশবোর্ড এ যান
২ধাপঃএখন  -> টেমপ্লেট -> HTML সম্পাদনা করুন
৩ ধাপঃ Ctrl + F চেপে: </b:skin>  খুজুন
৪ ধাপঃ নীচের থেকে কোড কপি করুন  </ b: skin>  আগে উপরের কোড কপি করে পেস্ট করুন

/* CSS3 ordered list Rectangle style by www.bloggerspice.com */ ol {counter-reset:li;list-style: none;font:15px ‘Roboto Condensed’, ‘Oswald'; padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);} ol ol {margin: 0 0 0 2em;} .post ol li{position:relative;display:block;padding:.4em .4em .4em .8em; margin:.5em 0 .5em 2.5em;background:#F5F5F5;color:#666;text-decoration:none; transition:all .3s ease-out;} .post ol li:hover{background:#EEEEEE;} .post ol li:before{content:counter(li);counter-increment:li;position:absolute; left:-2.5em;top:50%;margin-top:-1em;background:#FA8072;color:#FEFEFE;height:2em;width:2em; line-height:2em;text-align:center;font-weight:bold;} .post ol li:after{position:absolute; content:”;border: .5em solid transparent; left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;} .post ol li:hover:after{left:-.5em;border-left-color:#FA8072;} .post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;} .post ol li span:hover{background:#f9f9f9;}

৫ ধাপঃ অবশেষে টেমপ্লেট Save করুন।
2:CSS 3 ব্লগার জন্য ROUNDED STYLE
CSS 3 এর নিচে steps- অনুসরণ করুন আপনার ব্লগার টেমপ্লেট তালিকায় ROUNDED STYLE নিন।

১ ধাপঃ আপনার ব্লগার অ্যাকাউন্টে লগ ইন করুন এবং আপনার ব্লগার ড্যাশবোর্ড এ যান
২ধাপঃএখন  -> টেমপ্লেট -> HTML সম্পাদনা করুন
৩ ধাপঃ Ctrl + F চেপে: </b:skin>  খুজুন
৪ ধাপঃ নীচের থেকে কোড কপি করুন  </ b: skin>  আগে উপরের কোড কপি করে পেস্ট করুন

/* CSS3 ordered list Rounded style by www.bloggerspice.com */ ol {counter-reset:li;list-style: none;font:15px ‘Roboto Condensed’, ‘Oswald'; padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);} ol ol {margin: 0 0 0 2em;} .post ol li{position:relative;display:block;padding:.4em .4em .4em .8em; margin:.5em 0 .5em 2.5em;background:#F5F5F5;color:#666;text-decoration:none; transition:all .3s ease-out;} .post ol li:hover{background:#EEEEEE;} .post ol li:before{content:counter(li);counter-increment:li;position:absolute; left:-2.5em;top:50%;margin-top:-1em;background:#87CEEB;color:#FEFEFE;height:2em;width:2em;border-radius: 30px; line-height:2em;text-align:center;font-weight:bold;} .post ol li:after{position:absolute; content:”;border: .5em solid transparent; left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;} .post ol li:hover:after{left:-.5em;border-left-color:#87CEEB;} .post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;} .post ol li span:hover{background:#f9f9f9;}

৫ ধাপঃ অবশেষে টেমপ্লেট Save করুন।
কিভাবে ব্লগ পোস্ট এই তালিকা LIST STYLE উইজেট ব্যবহার করতে হয় দেখে নিনঃ
এই উইজেট করার জন্য প্রথমে সমস্ত আপনি তৈরি করতে বা আপনার ব্লগ পোস্ট সম্পাদনা করুন করতে হবে। এখন আপনার প্রয়োজনীয় লেখা সম্পূর্ণ।উদাহরণস্বরূপ, আপনি একটি সঙ্গীত অ্যালবাম ট্র্যাক তালিকা লিখতে চান।গানের তালিকা 8 সঙ্গতিপূর্ণ হতে হবে, তাই এবং 8 ট্র্যাক আছে।

শুধু পুরো 8 লাইন ব্লক এবং ব্লগার টুলস মেনু থেকে নম্বরযুক্ত তালিকা এ ক্লিক করুন. এটাই। এখন আপনার ট্র্যাক তালিকা আকর্ষণীয় কাস্টমাইজড ক্রমিক সংখ্যা প্রদর্শন করা হবে।তালিকায় মাউস দ্বারা আপনি উপর কার্সার রেখে দেখুন কার্যকর দেখতে হবে।