Percantik Bullet dan numbering list pada posting blog

bullet and numbering blog
Membuat tampilan blog menjadi lebih unik,modis merupakan kebutuhan pokok dari para blogger sekarang setelah artikel posting , mencari ilmu sana-sini demi tampilan blognya menjadi lebih unik.
sebenarnya tak perlu keseluruhan dalam memodif template blog, blog yang unik juga bisa kita buat melalui merubah/memodifikasi hal-hal ataupun element-element yang kecil dari blog misalnya bullet and numbering kita bisa mengganti simbol default dari bullet numbering tersebut dengan icon yang kita suka demonya bisa anda lihat pada bullet and numbering yang saya pakai.

bullet and numbering blog

Tutorial

  1. Langkah pertama masuk e akun blog anda
  2. Masuk dari menu dashboard ke Template kemudian pilih EditHTML
  3. Dengan menggunakan Ctrl+F anda cari kode ini ]]></b:skin>
  4. Jika sudah ketemu Kemudian masukan 2 buah kode ini di atasnya
Kode #1 : 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/AVvXsEj3T4QA9D2bthMk4i6WN8HvobmYxVNAnLBHflID3Ipd1gzkjh0GpQZLHFwbClE1oCRVFprZb_kywnDSmSZ_X2TRMf9imRiNc3zRSS7YqpflGzs7UVnpieez3LhV86fs7rdQ8rbFw1WEMWI/s1600/shinemat-bullet-brown.png);}
.post li {
margin: 0 0 0 10px;padding: 3px;}
.post li:hover {
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiex12h8L98BV-QPyTnsTc2JTJvNQvFDCKZsyEkQviotugQWrp8G2e-ENHd2fhvHDVGAMpLVNIjVpp8xjiC_8gvqcmx2L7nqQe6buFa121dZWScC2m3fZ_N7glAJsRVjmQs1iapXLW8LO1q/s1600/shinemat-bullet-brown.png);cursor: pointer;}

Kode #2 : 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;}
KET :
# Kode yang berwana biru adalah  URL icon yang dapat anda ganti dengan icon sesuka anda     # Kode yang berwarna merah adalah jenis font yang di gunakan
#Kode yang berwarna kuning adalah warna font

Beberapa Icon bullet & numbering :

251
255
bullet_blue_arrow
bullet_error
plus-blue-saimoom
plus-green-saimoom
pp-icon-1
pp-icon-2
star_bullet
untuk melihat URL nya silahkan anda klik kanan kemudian copy link location

Last note


Silahkan anda modif dengan kreasi anda,Untuk Icon lainnya dapat anda cari sendiri di om google masih banyak kok . Jika anda masih kesulitan silahkan tinggalkan pesan anda di bawah komentar ini Semoga dapat membantu , mungkin anda juga ingin membaca mempercantik tampilan label tag cloud :c:
Referensi : Ujangyoyo.blogspot.com

Comments

Post a Comment

Popular posts from this blog

Membuat Poster Foto Kita Sendiri dengan Photoshop

Teknik PING Agar Blog Cepat Terindeks Oleh Google

Cara mengatasi koneksi wifi di Windows 7 yang bermasalah