Customize Bullet List on Post Area For Blogger

Views

Adding an image as your new bullet list will surely add an impact to your readers. It is very catchy and professional looking. This post will guide you on how to easily modify your old and native bullet list look. This is an advanced tutorial but very easy to follow through. I am sharing 5 list icons so you could choose from but you can always changed on your own icon choice. The CSS style is set to work on your post area only.

Adding the Bullet List CSS

• Go To Your Blogger Dashboard
• Template
• Edit HTML
• Click Anywhere inside & Press CTRL+F the search box will pop up
• Find </b:skin>
• Click the Drop Down Arrow (See Screenshot Below)
• Paste The CSS Code Above/Before it

</b:skin>

 

Here are the Bullet list

  

ul
{
list-style:none;
}
.post ul li
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrye1thBIrPrwuGmjNR_QDLHKo4t72yGV8ddu3ETahMFzetetfpJJkR3fm9C7ARbsK0C69bu1WzBJTbtN5NdBGDJL3UcZ6sgZ_J9gYBMhjrNImekhuvPp2fepB1HyijLkEv_vo2gltqfM/s1600/list.png)no-repeat top left;
min-height: 52px;
padding-left: 60px;
list-style-type: none;
line-height: 2.3em;
font-family: Arial;
font-weight: bolder;
}

ul
{
list-style:none;
}
.post ul li
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vTVJHJ_GzWBoUF7tpIHvvZshqL5rLfLIpqmcq1E8wWj2d5_FFq6eNUn-1n8aATIkPUp0yj1lxFITtJ844w-XmEkQ0ljQQL6NEY1n_TqkwZfLNNK_nB5Cm2xr_42FgarsjWcpJBtirbU/s1600/list5.png)no-repeat top left;
min-height: 52px;
padding-left: 60px;
list-style-type: none;
line-height: 2.3em;
font-family: Arial;
font-weight: bolder;
}

ul
{
list-style:none;
}
.post ul li
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskEV231nKtTuXtGwT0IYfdtFP81q3Df_IC1QXFKQa3ip7DJ2bqbVDsj6oPvSE91obhO19BhVBJbowOwD9-IL2Z_D8y4NcZsicZHaCWpspdfnF6GovER-IjemGwSj5_aRAdiZNswTV2iQ/s1600/list2.png)no-repeat top left;
min-height: 52px;
padding-left: 60px;
list-style-type: none;
line-height: 2.3em;
font-family: Arial;
font-weight: bolder;
}

ul
{
list-style:none;
}
.post ul li
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXGGWzgslssUScaJ58YNUChlCd7xlfemg3PwIIW3Izv6t1T_FDnlYiRsCKS7RZ35LHIwpHbI4xeUfeMc5uRvA8o1J-UG-AwubT-mVhQY4pfD6A58yvnDj7tGPnmYU0OhEZEk-ksgVCi6s/s1600/list3.png)no-repeat top left;
min-height: 52px;
padding-left: 60px;
list-style-type: none;
line-height: 2.3em;
font-family: Arial;
font-weight: bolder;
}

ul
{
list-style:none;
}
.post ul li
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC-Y8puvOUvspmgrpewLXd0gEjfsOUyrcYVMzcRQ0FwxHOazIi8md0o9oF60WxbdGrYkIMPXHFO091u_RiINzPJgcXgoXAVmFJxAxkyMp1Pe9bf0yO2sLSyHnPzH-j7jddqFWkUVyBqu8/s1600/list4.png)no-repeat top left;
min-height: 52px;
padding-left: 60px;
list-style-type: none;
line-height: 2.3em;
font-family: Arial;
font-weight: bolder;
}

 

Optional

•  To Set The Font Size on your bullet List add

font-size: 12px;

Try it & Enjoy!