Cara Mengganti Bullet dan Numbering list pada blog|panduan lengkap tentang blogger.

panduan lengkap tentang blogger - Membuat postingan yang unik merupakan sebuah keharusan setiap blogger untuk memenuhinya. Selain postingan unik menjadi kesukaan akang google, juga disukai oleh pengunjung karena postingan yang unik itu berarti beda dari yang lain. Bedanya jelaslah dari segi positif. 

Pengunjung atau pembaca akan nyaman dan tentram dalam membaca postingan unik tersebut. Para blogger berlomba untuk membuat postingan seunik dan seindah mungkin, mulai dari drop cap, blockquote, warna-warni font tulisan, dan bullet & numbering.

baca juga : TIPS AGAR BLOG KITA SELALU RAME PENGUNJUNG

Nah yang akan saya bahas sekarang ini adalah bagaimana cara mengganti bullets dan Numbering pada list di dalam postingan blog. Memang tidak begitu jelek sih bullet dan numbering bawaan blogger, tetapi banyak blogger yang sengaja menggantinya. Dengan mengganti bullet dan numbering ini, saya rasa dapat membuat postingan anda lebih indah dan unik dari biasanya. Bagaimana ? apakah anda tertarik untuk menggantinya ? jika ya, anda dapat mengikuti postingan kali ini dan baca sampai tuntas oke. 

Ini lah Cara pemasangan kode CSS :

1. Anda masuk dulu ke blog anda.

2. Setelah anda  masuk ke dasboard blog lalu cari lambang segitiga kebalik di samping tanda pencil. Dan pilih tulisan template. Untuk lebih jelas nya perhatikan gambar di bawah ini : 

3. Jika sudah masuk di di dalam kotak pengeditan, lalu cari kode </b:skin> untuk mencari dengan cepat klik satu kali di dalam kotak HTML lalu anda tekan saja CTRL + F nanti akan ada kolom kecil di pojok kanan atas di dalam kotak HTML tersebut. Lalu anda copy kan saja </b:skin> di kolom tersebut lalu tekan ENTER. pasti langsung ketemu.

Jika sudah tingal masukan java script di bawah ini tepat di atas kode yang kita cari tadi yaitu kode  </b:skin>. 

Kode pertama : kode bullet list + efek hover

.post ul {

margin: 5px 0px 5px 10px;padding: 0 0 0 20px;list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtb1DJGp2HuDwDZea03AK99OMGXIslS3xopIvkm3InWp1etaJhuAx2EIJpw-SiJBd2gPzoOJfyd4Wp_eP2UgqCXaD49ewcYFuI8QFwRbTse8h5fya9GcmAe-mcIHYdysMNHigCMZlYfpU/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/AVvXsEh1mGPSXyEBNl9njdX7p_yiGlSwTqz1nlL3uEfskutKT1gzhaMGcrL5-5l2NzbMOYfw26UwwOGa2w4Q1ix90d0G7d-ds2B7j4qdtKxlWk3bPomegBrQ8BrVaBKm_FVEicqd6RxTwUOwpTc/s12/Ul%2520li%2520hover.png);cursor: pointer;

}

 Kode kedua : kode numbering list + efek hover

.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;}

Catatan !!!

• Kode berwarna merah adalah alamat url gambar.
• Kode berlatar kuning adalah alamat url gambar yang jika disentuh kursor (hover)
• Kode berlatar hijau adalah menunjukan bagian kode hover. Misalnya .post ol li:hover {  bla bla bla  }  Bila tidak ingin menggunakan efek hover, anda cukup menghapus kode berlatar hijau sampai penutupnya " } " 
• Kode berwarna ungu adalah jenis font yang digunakan.
• Kode berwana orange adalah kode warna.

Beberapa kumpulan gambar bullet

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9XjSN3skGotPqR3gQ-1QuUV1n1m3cJfea_wVEY7BPE5PU953hedhrO4gWyV1lmjolPP7QSjXKLTDiBVgANSIGlnP0i2BQrxVgtyaN0GHrja_ibAgUQF_UX39rlZG2G-yXvI_Rm8iHDeg0/s1600/bullet_blue_arrow.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9_SNoYr7P78ORUYsUc02iWirzskNNxA3_prYPBGZxJii8J9MAWP0O8mZtkmSTEt4AhXBJUbM1oBaxEfdrKhbxt3Yvp9XHOKPODpcxYEJocR-8dw6c3Om1IYDLWK3Se2_pRmaUpAFzE7UJ/s1600/bullet_error.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitHhlca8gWl_LKmP9Bn-GGeN4hkOfSiUJ2PMIFVF-If-NviDBSCDwTF0D5X5bPRNfQHw0JnQ5oiWs4PJaisedz1a14u5s001RLgC6mvAvtfb3-y_ja4wyy4gtvu2QW05x-sneZCB5fZevC/s1600/bullet_home.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrDreEK-JLf-9AUinugWMd1jj3NdDRjSpQA5Fqczd6dFd8D4Uh5QgqEvtJreAVSJVv8cmyHFotfXzIUrzlTt3fJLVKGb_rMHiReF27qss1HRkZOhq3fejTplYlRq9_E3Fk3PJ6j31PCtq4/s1600/bullet_tick.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8MzyfM39YZdRXzdlNbCMyyK1OZHd5wCe_sfbVr08BAJNB8Wwyxmt9hxp98MTfxCI6BgcdSVnTh1OtjrC4HPvUOuMP0u-siqvVeuYLzChswxj4U8SgXrycyXaD-a7yV3fTyf3YXUxjjw/s1600/star_bullet.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCjJTwBIp0O1C4uXH-DKqC1LbCE3mPwDOxUntavRIYAN0CvKK__r4zappsWfhEp6WmtcTtkh47oecCYeWfdeq-K9vRTrNp4B_UPWMkwS8ieQDMIwLfqhRytXB8N-l5u-K_LvXj7PeMtMw/s1600/Love+icon.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9qRBJImWqcf24g7Z18TDr32BpQ-XeyZkfX4EHM2nsyc0t8B2AJXpPN6fH9GTSlufstBGJbMpmvAyW9wPm0jhn2RIkQmJP1vrJ74dMe_MEGdLMyZQyx48Z6R0JlIMAG_WLJYDmaFkx1BE/s1600/Green+plus.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZef72-cQ8oUgNJFclF7SjaylYB8S0gwI9UoPG-WKhfv5sKZlEcxxXftVhqqrtFNSnJxbY5sfCvASYs7pzrhSQrD7Uyuix1FbOE0p2Raz3or9Zad8BoMv8fg817NdrcGKOI9McdK4uskZg/s1600/11-dot-green.png
 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihtQtSmWUlic7f2smeFqWoogku8ZtB7KOdvh6IchwxLIEqdxPcDA8ZLbRavmgdCKklm7p6HsQCDmC7SjhJUOwrHkxlE4o1olc_m0EsITbUck4Jbdkxg9JDrmLiXQ482oKLDPIyafEsYX7/s1600/bullet_page_white.png
 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzoTvb56I98thQX_t5S2raG0yhh06tCmh2pmxLIv8ykc0Lc92wVwHC4YllVQkOLfr6xEHg1wVhFLH3yGb8y74PF_2GpKVf3waUj4YEOQ3ZgETYOLK7oNiWHAENsKhWQe2qMXgW7Gf1G0wB/s1600/chrome_icon.gif

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZwOBGTM9sypyYkxrIr-UR2e2tCp-I9fRZ2oAA8xkJ3R9na-oaCcneK1TEpQu0OirlFdM0bTBaZm5IzrdksL8Eht-oeP9MSgPnxF9kflhuX1JcbM7PLlPH1ptBY626ykQVDkBFEHCg0Lc/s1600/bullet-point-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuEZEPyV3Oo4xU8kAEVb0_mbZLxNDNL-jXiF6zCIs31eZKiKxGTHh-WtKzytyBSJdDCsb8o480zoIg7qd9vuwx7t9atz2jf4hREoaeh34sIAfZW5nL0FD-CJ3QCyf0MBdw4ovv7xV6iPU/s1600/bullet-point-2.gif

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZQTpqovegcUALtIxg2Sa1BG5qvy9mCgkTGxSY7iVfo4bzWKBtg517Rz0LNrSp0lcpyksBNX-FKtMm8gVxOfo-XUiC87ZhZCnw4JB0Aiq9tAwCJsxiSY9zvKj6GEiAZNDC5xx_IiT0ELY/s16/love-green.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiskVytuqF5rAPp74iuy3y5QmQOfIyIlz2KLH3QyYJdjQQH0W0VQwBcR4yoHBhcx4Wo0Jo3T3mYHm1pN3WnM2cqpQUnONh9mJH2ijlR4PdXss2u60ZfN-6pfj-le97gHW_1_13hD8PYdzw/s1600/plus-blue-saimoom.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQO1gBUeAp_Zls5MWXIiZvOhfS0OFeKnz6WqiJi9uL8dudk7dWyU9hpNbUpLJXePABZPG3lajX0yUNagxdY-jyPMhM85yqfjzNFnudeykrRW4upcTzDrDsnViWNph0AzW7TB7obiqRlo0/s1600/plus-green-saimoom.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWBgMPdDiw2rJEvt3kiiLb909y0sXol-9fEPNPEoNEeZaHrDp0mEpefgimy3D_qVljN9sNxMrK7WdUykg3Jm8EGXCW2gk1YucsiLczHfqAu7w9abtRRV6-633gC_f6-mk56jCae1JO3C4/s1600/pp-icon-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyvyuG1do1-4oGww8vgOMF8O-QH1pYsP68y21s9AX3p5OsYMAvoOCqVX1sQ-_EFv-5MjYV8i2Zu8VcT9JMPt_Gp-j1vpLtHBZP7sVvV8-S8oEieCzm4SvMPuzXqd42qj2f0-hzBZk6VV4/s1600/pp-icon-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2c0rqs31Ct2MUI712E-Q9i86jo6lqtnvkZzRPzpWgUjETC-NeADJUD7Mw5X8hB9IW5Tg_SpNyRCt8XyiQHntqL1BCNWHn09PmaDINKHKfQnEkPisjRt9-qCjADJ6e5Uj3OE3OithlM4/s1600/rp-icon-2.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxDG8DOeQoZwF_qyTl3ZL2M0dHEKn7G3WPKzP3gy8KyhBFfa5CijzkGDXzow0NnLRHxeht-Rd1FbucQaru380zlIceRofegga34YkLs6cZH7L1-h80VODpEOGHSE3C7xmS9qDu-qWhfcI/s1600/rp-icon-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOxzQ8VkRaWXVSs68dC6Z4rJLdqO_4JsYEUjsEgs3XsZQw0G_LMQFnZV-OAyEvEjgy7WgV7avbkdBrTHgydEsazfcWJU8fj1bNuj10l5hgH8aQNNjSrjFs7Uw0wOFxdGJPASVJFpGpI4/s1600/shinemat-bullet-green.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC4cHssnZHDzBG3JrZ1iSK7j_9uw_lMRZJKy1vpRjSh7zcO-hRZlFbEj_dgmnVFlcIawkJOb3KxQZ9Lq2v-oXIBZb62cv5abZlkOfYyR7CiDpvzNINSpHGTBAxnMdK-ExKod3FK0_tTjc/s1600/shinemat-bullet-brown.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo9swVN1JL2Cx7WCpM00mZKdp7d-eBtjUksb1YwRPC1tKgHbDYnUPfTQisiXkLS0_FDuZbiBe_xY9OEY1YsXZttkRlMgT1U_N78u6bZ167TvEVBhIUcBV3lXVK2CIrekLdeyCNj45pKD8/s13/251.gif

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

Ditulis Oleh : Unknown

Sobat sedang membaca artikel tentang : Cara Mengganti Bullet dan Numbering list pada blog|panduan lengkap tentang blogger.. Jangan lupa yah kritik saran nya karna itu sangat berguna. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya karena blog ini di lindungi OLEH : DCMA kita sesama blogger harus saling mendukung bukan saling menyingkirkan salam blogger.<a href="http://berbagi-ilmu-terlengkap.blogspot.com/2013/12/cara-mengganti-bullet-dan-numbering.html" target="_blank">Cara Mengganti Bullet dan Numbering list pada blog|panduan lengkap tentang blogger.</a>

:: Get this widget::

Jangan lupa baca juga :