List Style Checklist in Blog Post

CSS style list on the blog there are 2 kinds, namely the list-style-type and list-style-image.

list-style-type 

CSS Syntax

list-style-type: value;

Property Values

1. disc - Default value. The marker is a filled circle
2. armenian - The marker is traditional Armenian numbering
3. circle  - The marker is a circle
4. cjk-ideographic - The marker is plain ideographic numbers
5. decimal - The marker is a number
6. decimal-leading-zero - The marker is a number with leading zeros (01, 02, 03, etc.)
7. georgian - The marker is traditional Georgian numbering
8. hebrew - The marker is traditional Hebrew numbering
9. hiragana - The marker is traditional Hiragana numbering
10. hiragana-iroha - The marker is traditional Hiragana iroha numbering
11. katakana -  The marker is traditional Katakana numbering
12. katakana-iroha -  The marker is traditional Katakana iroha numbering
13. lower-alpha -  The marker is lower-alpha (a, b, c, d, e, etc.)
14. lower-greek -  The marker is lower-greek
15. lower-latin -  The marker is lower-latin (a, b, c, d, e, etc.)
16. lower-roman -  The marker is lower-roman (i, ii, iii, iv, v, etc.)
17. none -  No marker is shown
18. square -  The marker is a square
19. upper-alpha -  The marker is upper-alpha (A, B, C, D, E, etc.)
20. upper-latin  - The marker is upper-latin (A, B, C, D, E, etc.)
21. upper-roman -  The marker is upper-roman (I, II, III, IV, V, etc.)

CSS blog jika ingin memberi list style berbentuk lingkaran/circle

list-style-type: disc;

list-style-image

CSS Syntax

list-style-image: none|url|initial|inherit;

Contoh CSS

list-style-image:url('http://blablabla.gif');

Well, now to the point that makes the list style checklist on the blog post.
Live Demo like the top picture.
How to install in a template:

template> edit html> put the following CSS code above ]]></b:skin>

.post-body ul li,
.post-footer ul li{margin-left:20px;list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjICW-YC4KcDobreFfEbI2F_8tGoSaPKBtYjvNYnA11O_RYjIblT35tUnkRGos6ILRxDVJGGonyyObaN7VHR3D2wn084VG_hVia6MkfTH8P2J3tnPvAe8MHryVY1SqIbAr02VDjePWBdKk/s1600/uncheck.gif);padding:.2em 0 .2em .5em}
.post-body ul li:hover,.post-footer ul li:hover{background-color:#fff;cursor:pointer;list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWoBX-fcWIA82ZfFZM-dEQvOMibTCYN0HRbA_qcA-aCxJ0XkYiud38Iq_1rRqt_rUjTsYRuCG5CMLMsJTwzEHoa_CJYIaoFthyjDl6GGMvcyhNOVoZlHi6FcJ41vJvwvkk5XqG4LrdiwA/s1600/check.gif);border:1px dotted #ccc}

save the template and check the results. Good luck, hopefully blogger tutorials about making a list style checklist in the blog post helpful.