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, haha :D ..
Para blogger berlomba untuk membuat postingan seunik dan seindah mungkin, mulai dari drop cap, blockquote, warna-warni font tulisan, dan bullet & numbering. 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 ? :)
Para blogger berlomba untuk membuat postingan seunik dan seindah mungkin, mulai dari drop cap, blockquote, warna-warni font tulisan, dan bullet & numbering. 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 ? :)
Cara pemasangan kode CSS
- Seperti biasa mas bro, masuk ke akun blogger anda.
- Lalu masuk ke template dan edit HTML.
- Anda cari kode ]]></b:skin> , gunakan fungsi CTRL+F untuk pencarian.
- Lalu masukan 2 kode dibawah ini tepat diatas kode ]]></b:skin> dan save jika sudah selesai.
- 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/AVvXsEhgSDRM8Fu63dupK64zx4UxKNiE4q5Cdf556-6XVkrU9FDfIYxeCJ286chiDsHWGSOOQx_ss0mRrjOnkF7oVdi8OqZH0JfPrmr-m5CFgQny5kKumzpbZb2av784GqH-AR0gzXJnoFuDiik/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/AVvXsEjpIJ9abE0Q58rb5fZsVWAAzpWKGrneIPT2opIyWmod3K-QEW0J9esJS0iCX-A_TaUfoSJcxWvsC6uFNWhvFq9OoDPAj8QLt1oMcuO8bxHPjHo_y-umSZmXr-98KQr-OugJpe1z7GExUCk/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;}
Costumalisasi
- 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. Lihat kumpulan kode warna DISINI
Beberapa kumpulan gambar bullet
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVFl-GTonnOvWM_vaihTE2DpAy4No2ryMK3J7pymtv6KlTBFumNvIvQmu4PiPbo_q4aCGUg7N7DHje-zvehmgYFqDsNHbSA9KJ8hDLt5eQy48i9XWtmke3TqtJ_6gTKCWWxisfLmt2uB6/s1600/bullet_error.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpElwYeuL3KHHGf9TcCS0vANHEpTOF5Cvg-GufYJOcP6kIblREius7zfkX_6f_H1JRtM17fzOWvS0BPAixgOZ_bIDjy2-s9HPOnkgDf2wk2pQM_bYfY1oiYv-l3DY_rn1BdKACElgFqRnr/s1600/bullet_home.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9H7e_CNhlYW13tRYqMk8geXxp8PPVmiyHCcEK0QofIpYSWKZNBAtcjq5f8wsNk8Dxs4QqA7sMw4anN4w6Qu-wm7IRWAN5n0JFTn1k2fgmMKZ7Jwo2k-CBZzgPsLZZ1vKiM7-rb3jy_sa/s1600/bullet_tick.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-1LLv5noaL3wAKmkiUSWER29NO3e0EGIw7Amnpdy9wzNQcD77rDpnFTr-O5ot6X7RgecISg2rXhyDSZNPAJGIUCAmVzIEDdjZTcVcDMU712Jf3iaIscaV8BwhRUiJNMnesW0_m-5WWuE/s1600/star_bullet.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkTh32DocywjtQIL0GCK-oCTkZs19YkeXE9L7DbtGDX9xSHzrT907FyajIWlJzFFg6ZqwEZ2pa_GJMYhWHEr8jrgW5RiP4reJyWPzN83LO5RPVggSf8IKksqaqQvZOtJJY8bv01Y9YrlY/s1600/Love+icon.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZ3Ab2sA0VJdcpW-80mAqUPbDbkA__cIC5rFRaw58e1-hS8T0DhmTx7DJT59O2qdVqZLApvlJ8ZBcw0VYaYoqMY5Qrpp8nUwTu0BeAGf1k75k3Jum1kIatnkl0D2aWcj4Sr_8n-hNAII/s1600/Green+plus.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5oTsrV5eH2wkLtt6miJZyWxuRSKI3h2W2d43ibEWHOX5SzUYQMiEhHLSpA7StN-fFroVKEj0awjxlHCaLKC6XyVc73RbqZTCVChE-GafjaeDImb5f_3SPzIR4oXNoR7UfdC7ZGOj47pT7/s1600/11-dot-green.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUpY3dS2Usd_sUv6wOKRQtQpDCSR7RFpOGW7jxz3-Fzh38OFoFTQfNfqfINVWb4KuhHGZyHWh735lnXewXbh-kOyASK4DRDAsMv_OwZlmq20Rhk6SfQEl8zyGmuvg98m2N3zi6TrEXFbn/s1600/bullet_page_white.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwbowHkUGvfyM-GNE1pzjRy2BovPrOXlCuaX5JqcBpEveb4XZxAeiHdiy-u5CL25XxQRgq4FlNS0VnAHYmI-JYiOYC2qrdD6XuxfQGHOWHzUsTkJP1JoA4UVkQAlCfn_n26_8fn-xSA68j/s1600/chrome_icon.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewnvB8qCUYXzws9iojg8cAnTI9zu-8FyE70KDf_C77nkt3OzsQN35qnMjlTbvitiLil5GIfzgPN6oVHxyqm6yQYsnplqfY5LK6LGihFWffPOchm_4F8Aipq_gcTuQYdxrg9nl3hO2DFI/s1600/bullet-point-1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFPp1ALIBna9l33L50ogx9ljNGmwpcZJ38-qsy5rB0kRAh0Sz-JHCoWN1FgXVJsg___Y4q_PmqcPk8mpHbZ6dcVCIIr6n4xaFzR2mdPaOoRDnSzZ_qkTj9Ru6lYJNIOFuxl9tt6XFDlc/s1600/bullet-point-2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQS1pIZ_5-G_RILQy7pboyWk-8Qk1OFn_ZcyUFW-KVF1QsAxRPskXlOg4Cuc3qBCOGdwoDRwil18cnh-HSZMwsaBv_LFetsi41ADW_LrEql_QLiFF2XrEKa9RnihTVnP5NnYp80XTeIQ/s1600/shinemat-love-blue.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU8i7Gr9NiY3FWsbSiLaisb1DnvxNmhKdeRC3yKMJOpjFxL2h7L0oarl8-LCw3bLwbM-xWPRvGUbfKYOtysbdWPcDYo3EaAy8MUQaRU5tpUcKNPHKiV2Se8Ph07xNCWusdbz1C-Yp-KAA/s16/love-green.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQZLiXmT8ovYfJQlHbqdne8_6g6RePWOYAK0J-CFkn7T7KV3wEL3GJBiKrjbcxOumBllhj164rMd1Z0JxoXTQOAc_Eh7I7IkNYs7PXa_FKRWMdJdMXQR4Sh8330idVukmVF1wAk-fQBg/s1600/plus-blue-saimoom.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE0DcOx_SIV1byoqcRkSFV6q3mPhcrfS1VR9Zo3hzSsXON_tOUcsTknY9KvKbevNqtOqe_hjRwbpSKADEXuvGVrK9ucCL0RqZoE_SBAcwkPwUC-xK8N6RWNWRefSYAxNcasgXWI36R-c4/s1600/plus-green-saimoom.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiULAXbNNWXiT_yBhZz06xYHNxt1M2t5fwm0e_hby9g95Avs0bNzR6LsBQEBu9sxRwyV6yBta348nmNEMpYR_dfzXpYVbsUnZxInZHFtis5PaxhW3_mT0boxD5Dj4lK3RS_MnuvWKgTlQ/s1600/pp-icon-1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRxDu0u7Wy1fqUTcXlkhhjuaz4S_aViszC8uvDq-7xeEjMliuABJdq0rXuOsufmYsv1eYxmV0oRMOFF0oxxvAbbcYVWJT9i4fpr3pNQXz2NV8_oTH5tJo-jknKpjaS4rQUsemYDuPeyI0/s1600/rp-icon-1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIc_bRlfYkCStKCEW6u-LADCrkAjZN_SAYfRzN3d1Cw54bTY39vWKtIoBP0bhO494xuUM08XnfSfhnIOCnkphUWblRMU1bYUp-RW0X8fetbrWQX_N_BvIFWeext1lAP2VMXnCJ1mIHbLg/s1600/shinemat-bullet-green.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zPgQ6FaMXcieQoaKUzGCrck0QYkZeYDQIjkUwCLp4d3zgIbBdTcprLcrdzbLelNMsHZNWhRIJCXDjO5Ft3K1MAqP7JQRaBh_P_G8e_9nJD7gbHsivDSUrTwO3IXDgjvJvDUalXG8-f0/s13/251.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7EAGxOH7Xl7G8sVFLFtO1D5qTUDBN6S3SmZ1NZbNdxy12rPOg3NH5SxlrtBcW07OP_36mIiUT01NLEZRzq7kzVptG5KBVCHCluRcieQYFE3tgLtq2rpB_VRWiDCZU9XdUvCBtOm88ImA/s13/255.gif
Last Words
Bagaimana? sangat mudah sekali bukan? Jika anda punya icon atau gambar sendiri, pakai saja gambar tersebut dan kreasikan gayamu sendiri. Saya mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Cara Mengganti Bullet dan Numbering list pada blog. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan.
Sekian post tentang Cara Mengganti Bullet dan Numbering list pada blog. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!
AD-BLOCKER DETECTED!
