Change Default Post Unordered List Style for Blogger in Few Steps

We are talking about css or html list style default in blogger template. Before, I was wondering how to actually customized list style specially for unordered list. Through some experiments, am able to customized list with an image marker. Today, I will gonna teach you a quick step by step tutorial on how customized blogger unordered list style type. I will introduce 3 commonly used:

circle, square, image list marker

• How about changing your list into this type?

• How about this one?

• Or how about SB custom style? Like it? Use it.

Decided? Want to customize yours? Let's go...

In few steps, we will add a css style to your blogger template, and all your existing list post with unordered list style will be changed.

1. Go to your blogger template, back up your current theme, and proceed!
2. Search for ]]></b:skin> by CTRL+F.
3. Above ]]></b:skin>, paste the code below, choose one.
4. Save your template and you're done!

Code Choices

For Circle:

/* list style circle www.simplifiedblogging.com  */

.post ul {list-style:circle;

}

.post ul li {

line-height: 1.4em;

margin: 0.3em 0;

padding: 0 0 0.8em 10px;

}

For Square:

/* list style square www.simplifiedblogging.com  */

.post ul {list-style:square;

}

.post ul li {

line-height: 1.4em;

margin: 0.3em 0;

padding: 0 0 0.8em 10px;

}

For Image List Marker:

/* list style with backgroud image www.simplifiedblogging.com  */

.post ul {list-style:none;

}

.post ul {list-style:none;

}

.post ul li {

line-height: 1.4em;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO_aUlXC4b15udKEXbTSk30BSKZeF9UOVh1aW4K8fpGy_3NMY0Lfxs27kV95BMpnC7ZQorn8sTKjDP19wJL1CCtNz3wArFUV6eMFnf9k9pYKGDHVuSNjvfEsjmm2WYcKJe1_PKqbjhmc8/s16/bulletgreen1.png) no-repeat scroll 0px 4px;

margin: 0.3em 0;

padding: 0 0 0.8em 20px;

}

You can change the image source with another image you want. If you have on your PC, upload it to Picasa or your favorite photo hosting site and upload it. Right click on the uploaded image and copy the image location! Paste it instead the one I highlighted.

See you :)

Share it Please

Tweet

Prime Aque

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.