Design is always a main constraint for the success of any business and if it is online its need is more. Few article before I wrote about how to select the best template for your blog and today I am going to tell you how we can change the style of bullet points in blogger.
This article has been framed in such a way that anyone without having technical skills also any one can add and change the style. To add the bullet points in HTML, you have to use the <ul> and </ul> tag like below in your blog post-
This is a default bullet list style in HTML but isn’t it looks odd? So here I am going to show you few attractive designs which you can add in your blog and get visitors attraction.
Step #1: Log in to Blogger dashboard and select ‘Template’ tab and then select Edit HTML.
Step #2: Use Ctrl+F to find ‘]]></b:skin>’ tag in the code.
This article has been framed in such a way that anyone without having technical skills also any one can add and change the style. To add the bullet points in HTML, you have to use the <ul> and </ul> tag like below in your blog post-
<ul>
<li>This is first point </li>
<li>This is second point </li>
<li>This is third point </li>
And the output of the above code will be like below-This is a default bullet list style in HTML but isn’t it looks odd? So here I am going to show you few attractive designs which you can add in your blog and get visitors attraction.
Design #1: Changing default to Square
Using just few steps you can change the default circle design to Square.Step #1: Log in to Blogger dashboard and select ‘Template’ tab and then select Edit HTML.
Step #2: Use Ctrl+F to find ‘]]></b:skin>’ tag in the code.
Step#3: Finally add the below code before ‘]]></b:skin>’
tag –
.post ul li
{
list-style: square;
}
{
list-style: square;
}
And save the changes. This will convert the design of bullets to Square and will look like below-
Design #2: Changing default bullet points to Circle
Follow the steps 1 & 2 as discusses above and just change the code to –
.post ul li
{
list-style: circle;
}
{
list-style: circle;
}
And save the changes. It will give you the design like –
Design #3: Changing bullet points with attractive image
Here we will change the entire bullets itself and will place a good looking image over there. For this select any image which you want to use like bullet design. Follow the steps 1 & 2 as explained in first design and change the code to-
.post ul li
{
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6xFhpLyy3jP3Euh5-ImhJZ3O_BwoblE_7YZwIM_26b7YTRBvbkISqqhuKLNAdsLCXWCREUIY_aFCZUz_8WjK4r3nJlOhF8cQytv8-A49fEMWa7AlJ13zFbAHzvp7sezRme5K6fkktsUk/s1600/bullets-point-image.gif');
}
{
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6xFhpLyy3jP3Euh5-ImhJZ3O_BwoblE_7YZwIM_26b7YTRBvbkISqqhuKLNAdsLCXWCREUIY_aFCZUz_8WjK4r3nJlOhF8cQytv8-A49fEMWa7AlJ13zFbAHzvp7sezRme5K6fkktsUk/s1600/bullets-point-image.gif');
}
Here 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6xFhpLyy3jP3Euh5-ImhJZ3O_BwoblE_7YZwIM_26b7YTRBvbkISqqhuKLNAdsLCXWCREUIY_aFCZUz_8WjK4r3nJlOhF8cQytv8-A49fEMWa7AlJ13zFbAHzvp7sezRme5K6fkktsUk/s1600/bullets-point-image.gif' is the url of image that I am going to use. You can replace this image with the one you want. This design will look like below-
Isn’t this looking cool? :)
Design #4: Changing bullet points with attractive image with mouse hover effect
The beauty of this customization is that whenever you point your mouse cursor on the list, the image color will change. This is the design I am using in my blog. Here also follow the first two steps of Design #1 and search ‘]]></b:skin>’ tag. Then place the below codes just above the ‘]]></b:skin>’ tag.
.post ul
{
list-style:none;
}
.post ul li
{
line-height: 1.4em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQtDXbivLRMpGpjar78oPkuOWbt1WTs8Y756mrifcJE4Znn270eewlW2IejYE_8g-1ztudZ21pB79UWEDCmO15a0LwBe7YJKq5IPka_9i8F2Mui15eLYIwzgmrnwne98_rd8p3aRQO-90/s400/251.gif) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.post ul li:hover
{
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqiMLUjhS87Tx0nrzQaYaPZOBxMsQI148NLUTbbsZqPYwGqL5cbs0gMmep7ecm-KAE2TMdAlhNCgU9ovTMEvjr9U59Z8PCq8epidJtxkBKdR74fAx0yyLvLxRYSrtlU1liBuigMjAuyY/s400/255.gif) no-repeat scroll 0px 4px;
}
Here also you can change the image as you want. Just replace the image url. Now save the template and open the post, you will find the design like below-
That’s all about how to add bullet points and changing its style in Blogger. Doing this little effort you can impress your blog visitor with attractive bullets point design. Try to add cool bullet design in your blogs and websites and let me know if you face any difficulty. Also let me know which design you liked most and if you are using any else, do let me know.
If this post has helped you, don’t forget to share with your friends and also subscribe us for such cool blogging resource and tips.
Ashutosh Jha
Ashutosh Jha is a professional blogger, Blog and IT Consultant. He writes about Blogging, SEO, Making Money, Internet Marketing and Web Design.
If you liked the post, You can follow him on the below social media.
Website: TricksRoad
No Comment to " How To Add And Change The Design Of Bullet Points In Blogger "
Please make your real thoughts/comments and don't spam. Spam comments will be removed immediately.