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 :)

Posted by Editorial Team on 7/04/2012 08:00:00 PM in How to Customize Blogger Template, Post List Style

How to Correctly Customize Your Blog Template and Embed Free Plug-Ins

Learn blog tricks slowly!

Are you interested in customizing your blog design? Well, perhaps you are in the right place now. As blog beginners, you should take things slowly. And you know, "time" will show you the way.

Learning is a "process", and you should not worry if right now you learn only few things in the blogosphere. What you need to do today? Choose one thing you want to know and:

• focus
• experiment

One thing I know, knowledge and intelligence are not enough if you don't enjoy the process, so make blogging unforgettable for you, whether you are writing about pets, about foods or about computer tricks.

Anyway, this would be the start for customizing your blog right now. If you want to know about HTML and many tricks on making your blog alive, you should not apply tutorials you found anywhere at your beloved blog directly.

You should create another test blog!

Create another blog and you can name it like "My Test Blog". Purposely, it's created to let your learn to customize your own design according to your taste.

• Do you want to have a colorful template?
• Do you want to have a simple and light theme for your blog?

And I tell you, can always make changes if you already learned the basic. If you directly apply changes to your blog, readers might be disturbed by such unofficial changes, think about them.

Caution:

As you may found several easy to embed blogger plug-ins anywhere, consider using them. Do not copy paste the code without looking for users' reviews. Most of the times, third party applications will make your blog loads slower, well, I don't want much waiting and so you do, I guess.

Consider the looks of your blog, do not make it look like a dump-site, and that is why, using your test blog for testing several blog customization and free plug-ins are advised.

Well, see you.

Posted by Editorial Team on 4/17/2012 06:34:00 PM in How to Customize Blogger Template, Tutorials Made Easy for Blogspot Blogs