CSS TutorialsWordpress

Numbered List Ko Stylish Banaye [CSS Tutorial]

WordPress par default number list se bored ho gaye hain?

Kuch different look me show karna chahte hain apni numer list?

To bus yah post aapke liye hai.

Yaha main aapko kuch CSS styles se wordpress me numbered list ko customize karke different look kaise de iske bare me bata raha hu.

Blogger users bhi below css styles ka use kar sakte hain.

By default wordpress or blogger kuch below style me number list show karte hain.

  1. Number list example 1
  2. Number list 2
  3. Number list 3

Agar aapko above numer list ka look pasand nahi hai to don’t worry aap CSS se style ko change kar sakte hain aur more attractive look de sakte hain.

Aaiye dekhte hain kaise?

Customize Numbered List with CSS

Aapko kuch special nahi karna hai bus CSS style code apni site me add karna hai and done!

Style 1 – Round button style

Sabse pahle wordpress me below CSS code add kare, add karne ke liye Dashboard me Appearance » Edit CSS par click kare.

Edit CSS me below code paste kar save kare.

Now see Result below:

CSS number list

  • Agar aapko button ka colour change karna hai to background: teal ki jagah other CSS color add kare. for example background: red
  • Agar number text ka color change karna hai to #fff ki jagah other css color add kar sakte hain.


Style 2: Square Button style

Same way me below CSS code add kare, edit CSS me.

Now See Result Below:

CSS number list

  • Agar aapko background change karna hai to red ki jagah other CSS color ka use kar sakte hain like #fff, #000


Style 3: Number lists with line breaks

WordPress Appearance » Edit CSS me below CSS code add kar save kare.

Now see Result Below:

CSS number list

  • Above code me agar text ka background change karna hai to code ka background color #f6f6f6 kisi other css color se change kare.
  • Agar aapko number button ka color change karna hai to background #666 ki jagah other color ka use kare.


For Blogger users

Blogger users bhi above CSS style ko apne Blog me add kar Number lists style change kar sakte hain.

Blogger par Template » Customize par click kare.

Customize me Advanced option par click kare.

Advanced me Add CSS par click kare.

Bus aapko Add CSS me above CSS style add karna hai and you are done.

Read More CSS Tutorials:

I hope you liked this article so just click share button and share it on your social profile.


Related Articles


    1. Nahi, aap jaise hi number list add karenge wo automatic styled show karega koi shortcode add nahi karna padta. ha agar aap Number list ka use nahi kar rahe hain aur manually number add karte hain to uska CSS code alag hota hai aur sath me aapko post me shortcode add karna padta hai.