Cara Mengganti Bullet dan Numbering di Blog

Hay sobat kali ini saya akan membagikan tips/cara untuk mengganti tampilan atau men-design ulang bullet dan numbering template sobat agar lebih bagus, dengan tutorial ini sobat bisa mengkostumisasi tampilan bullet dan numbering sobat sesuai keinginan.

Bullet dan Numbering kali ini mendapatkan efek hover / sorotan mouse, sehingga tampilannya bisa berubah jika disorot oleh mouse.

Dari pada banyak omong mendi langsung ke materi saja deh...

1. Login ke blogger sobat

2. Masuk ke Template kemudian pilih Edit HTML

3. Cari kode ]]></b:skin> (untuk mempermudah gunakan CTRL + F)

4. Lalu masukan Dua kode dibawah ini tepat diatas kode  ]]></b:skin>

• Kode untuk Bullet list 

.post ul {
margin: 5px 0px 5px 10px;padding: 0 0 0 20px;list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVBwnlQEqcVHwiJy5bvqUk0uz3fUHRUD5whnGwPgoCQEqwjHt6juZBQewFTpJTLAkqjVoBIWJ1_1tHcY5EnQ8CYOj3cT1LOpVgUvFVWduYqdIwsh50SoIemOJvuXxZh3LnmWJ-yKr9tDQ/s12/Ul%2520li.png);}
.post li {
margin: 0 0 0 10px;padding: 3px;
}
.post li:hover {
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXwqkdWvK1WCjnA9nOGTuPAxREIvcfqI-uD5oJZKoFpcxVcGNfAhYbPMjThR0fe-r8nSM2KChOmEVkmIG17AxnhhpSS2mXTu3xNJM6hUlddDILUUP8s_B_HVP0ce-NQAjmjY5fmjP6i5c/s12/Ul%2520li%2520hover.png);cursor: pointer;
} 

•  Kode untuk Numbering list

.post ol { font-family: sans-serif; color: #706969; } .post ol li { line-height: 1.2em; font-family: sans-serif;color: #289728; } .post ol li:hover { font-family: sans-serif;font-style: italic; font-weight: bold; color: #0080ff; } .post ol p { font-family: sans-serif;font-weight: normal; font-style: normal; color: #0F0E0E; line-height:1.2em;} 

5. Kode yang berwarna MERAH ganti dengan gambar sobat.
6. Kalo sudah selesai tinggal klik Save Template


DIbawah ini saya sertakan icon-icon nya boleh sobat pilih sendiri

      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUoh4_c9GfK5uwHdOUxM3X_gLIHJJj_9HKaiYMChVpiuIn7ZqrTNdXIYaDtFOfZTB8RpGG7o6y5PPqsZJhPA-aEghiN_CK3eeI62i-wI9xau3jcPB8Kcp2tLftHLbi48p6inhfInv-oDYx/s1600/bullet_blue_arrow.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJuVyYHY8wCnl4lRFC7o_o1cggS5g5yNfWuLD4DUF98yJGUxs2IxH14n0-olCwlFIqGZlxkaA0MgdiVQN4DBXA7r5KKP1hiNmia4oJ0HZvtuAcqAG6etCv5l38xc_sGkhctQ5-VYSvtXp/s1600/bullet_error.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprCbuF8pGw4UUnth_NGQC8-wqoiH9hWJ9FtJ-e9Ry54UH4KmosdYP7qeWkGOItq_k7BeOGu_UTRu3cT5JFWGUu0b8cgCz-ce8U2SVKMh0TFyGwDIdUBxXXRSybcAxg-lXFPB2ifDZ1M2Q/s1600/bullet_home.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg17CdpTRRl4kw_pEtyIDrpEJkBRBQ6O9EYbNKF6dQuSMVMQPQwygZN96MeQZWzZNTiK7Zy0wG2fGk0AlBpH_qE3mQrR_E0SK1i6PQcixSX19yWpALLPm-GWoLI0cHCJCznVXAZR98gQbvH/s1600/bullet_tick.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwKScWpTVF7_3sSqmlcYdpLkttk9-fNoJpcKSFhEy8adHJ3CXGTP4g9Y7jsL8pg8_vkCbqQzu6U5lh1Q_kf4OqQNuRulhpxuFVDzooEMJZNYreQa3hXfWIImoz8So4jBmMacauBf1X4Qg/s1600/star_bullet.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UMASydyf2hhOCYcUVSj8iojGDpRFhjjmVdlkAwIkrta1O-b61ACE0rnxN_i23JOFbmKhmUC7MzMgjT33cIHULva75DJPwiL5u6q0kdFM-lVvtjPqX-iynRGk9lgz75sMBnGABBu5e6I/s1600/Love+icon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK1B3_CI0N4gNOeMi2ULFVRi6EAYqTLxOPBUElBo5GokkidGUzBWrM0WWoWjtQftO9piopDoR_38jEaI-p4uPKlEO82XPFiLNFo1WYvSAf2qJEm2BehLkx-Hr9HqK_DRkoIu2CdAEDn0A/s1600/Green+plus.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVTE5-rcm7SR2ntnE2A6mtc1UqB1ZmhZu46aNdNuQeU9lt2_UE2NbrqVlU09IcrdsOJ2Mr5ElFh3HvCSRWyB_kqIcdqZwUByfaDtiq11fi-Re92uYMKvgpclUACytIYX-2jHEtVEEI5jsr/s1600/11-dot-green.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6XkahGgRmT0cMVSgrDBOPXp17J6QYk5dXRmlnis40Fwd2i9-fXIMO_ZnZE7AedBw7lFxC7mgwYjTjDq6U2G6J7PmVv-HPtuWWnchyPrAyfms_ClTvHWoNUF97zl4Xw3OD3RJ_LlnqGuqn/s1600/bullet_page_white.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglX2gFRAp-kyd9dy2YEpfFGmXLVpOxQRnV8toXwEQ0ZOpeJK5fQCpbdLg_Uv3H6o5GqpFDPTkga8lfcz6VYGSsa5k0fOXi1vKBHnA92OfqelRJklCoA_QoQw80U7gI_qAyqJBs8XkcULN_/s1600/chrome_icon.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3RBGpYAvrI-qYN-FJdK5Ij2Mwcy5mo0DcFazYOeQhq120ao5DjI88WCfQCvKrPb2Fj895hEvn1uF8DAzYegkSnEZRy9s7kgyVsNuTMQeq8GXNrHnJsjH06Ju5vIKb64XpqKlOP2_b7Y/s1600/bullet-point-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXQLyMOE6j0y3PPaQ4VLi6V080W9Jr4zh6EM0_iju8r-4LyqUktzbezlVuKWFY1TL1FgW0bMPq0GYsSczsXUObme9ouG6x4_JpaeMEtuIjDCBaMkzxJrNgYkbhXVf8ktIq5WvN1hUF_s/s1600/bullet-point-2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVB3qPfwNr8if4zfcv_ODdJe9dgQgWDjmV93tP8lslE6zDtcz5p0ACFHTnJJDA1TzR3WGIXdsD5xKuRuKfE5nQNpicIPGauzBFuztXzegew2wjatLCAfT_oxICYGjnjthj1GzxdNBkC_s/s1600/shinemat-love-blue.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwOGkxhVdI6aM24r5FyCmwRJhWe2P4nj1FH5EhgJMuOBpMaihqOim7x42Xua0PsiePtR5T0DaxgMNEscvksD5RVHz04CEXHxFRgz8PGF-es72j3MFz5LwGvi8tM46szkUYIgXD8_u_rh4/s16/love-green.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXSFKrtDq-F7Q03Kq5yot8RKnHm4mRNlaFAV-jwQYK4Te7H8LGHa9KXlSRf_Da1ZrBakpoGo9E-ZfASjHn-5WWiThZOJYah8egxSw_W7i_Vmm1J4GBODassIQzH8lbgRBLmSitkkR0nxc/s1600/plus-blue-saimoom.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyHlceT90aqE9RzIRbEK-GmQdbNRdLdw0tJCLg885KcD_IkVP3U-7fxm-8ipaMZMXDimT57900vi9sxswc0cP-cTz_CUdbkkh-ah_Sf5H9ZZC2fiJ4s4oJFK_8poSBRCdPwyWIlmoKNWU/s1600/plus-green-saimoom.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkl21SaGuEg64KeobrV1zTVwai6xhRBJrIghal7bQgRy3IoGsU92O_vah2tm_HSZ9Om-1tfGEYbbIdUfPavUGl7pQF23DWI1jUQY0XBxLcDC_Yucp0bm8b_ZzEnO-g1yWbHd85231RL5E/s1600/pp-icon-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXoJXssNWwNF2i5tFP2-oGIU4t1OBFTUanIAibeq79cK8OCXKQffRnZ6GHd5UgICMyNeU7XU9kf6IsdCTtADCGbSKlmriXFvTn6jCIxv0QkUqy41qsf6Shg14P_qbz3YiKCFGo2XUmQY/s1600/pp-icon-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOhggnnKTTxJMgWGyThoB_1O6rNG-kWPZl2u2br4stv3r4PyED-9gET6fVJ-r4AnKSMMqMlSnfo0kf0eaevSwjrb5QgOgEk3BUMr-ay5VK_s6-nHI7mGXj4coHZKGppNUgBN9iAkzS5Nk/s1600/rp-icon-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGas0ZvxO_mPkkbObtRKGxopzOM3AEIY1gNnyI5sMrMMHUnEdW5-Cj_A105f2dHsyO9zw9c-oFJtcFNqX57DGlt1JIkdHkhTLMEE1mzw6mVoTTRnQXaQ0vXtuUdhdbT74JsF6DVVC6o8/s1600/rp-icon-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mlvLXUhvqure6bwlImO0tlHl6K6qLCiG1gZvZ9hbLsezX47nr3KjkQOdhju-5vRCqMvbJ4Nbi1GOBkM-ZRfoFlwDXtJtJNyf1-m5pqYszdCkXslG8M3j3K3W-ly3xskD8q7k_tvmmPg/s1600/shinemat-bullet-green.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoEY24QAOsK1vGzMIStoZSFtNxAYI7HCjWpWEF12CeGGFsPXcMP9BY1pwc3cybVmUDQZvh2XejdT0UWGcndx7bScp_tjZohdjUqz10FMrgKf61koY82Z9UCyDhERS1ZSwGwBvET4qIFMg/s1600/shinemat-bullet-brown.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOhYpBWO_qRQD9_lPtiUpv_-A2ckdBRh5VXB7gXcBxHiSgJS594EXCsiyy6849hjo3WrwprXWog5ONUxj_s56Zt3lljjLm_QX0xXo7MbifullN6nzkpfoXyFexMfHB1NpC7LZQa4qj7k/s13/251.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUVUV1AiyhdcDrh2q0h1KGcA0wtv28iQ3j58AYc1oy0Vl8WbHbIwKeT0AZHSwVVPjgcj3WCsOy_gbGPhRjAH69GNWj6KqQvzp3_oOYbD4TRZif5AmJGDoUxrhgxdSlTtz3dSsw31X6nh8/s13/255.gif