তবে ডিফল্ট তালিকা 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 লাইন ব্লক এবং ব্লগার টুলস মেনু থেকে নম্বরযুক্ত তালিকা এ ক্লিক করুন. এটাই। এখন আপনার ট্র্যাক তালিকা আকর্ষণীয় কাস্টমাইজড ক্রমিক সংখ্যা প্রদর্শন করা হবে।তালিকায় মাউস দ্বারা আপনি উপর কার্সার রেখে দেখুন কার্যকর দেখতে হবে।

[[ বিঃদ্রঃ পোস্টটি ২.২.১৪ তারিখে সর্বপ্রথম টিউনসহট ব্লগ