Add 6 stylish list/bullet to Blogger posts

Blogger’s default list/bulleting system is using dots, dotting style is cool but not that much cool if you are little bit of stylish and want to stay trendy and also want to represent your lists with high-end taste. That’s reason here I am publishing 6 different style of bullet system calls Arrow, Minus, Check, Plus, Carrow and Star. Made with CSS, Google font, Sprite images and they are super easy to add; designed that way. Let’s see how they look like and how to add them to your Blogger blog.

Arrow style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-303px -322px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Minus style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-101px -520px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Check style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-461px -163px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Plus style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-141px -480px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Carrow style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-619px -3px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Star style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-580px -44px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

How to add:

• Log in to your Blogger, select your blog

• Go to ‘Template’ tab, select ‘Edit HTML’

• Search for ]]>< into code snippet (using Ctrl+F or Cmd+F)

• Before ]]>< copy paste any of style you want to use

• Save template, and see the changes by visiting blog or new post editing

Caution and FAQ:

• Most of Template have default list/bullet style designed into template codes; and those code stays in

.post-body ul {} and .post-body ul li {}

So you your template already have these lines; mark them and delete them. And set my given codes.

• You can’t use two or more style. But if you know little bit of coding then change the CSS class,

.post-body ul {} and .post-body ul li {}
to
.1 ul {} and .1 ul li {}

And in post editor switch to HTML, after listing being done; and add CSS class to following ul (like: <ul class="1">)

So what you opinion, feedback about this tutorial don’t forget mention. Goodluck.....