Total Tayangan Halaman

Jumat, 13 Maret 2015

Cara Modifikasi Bulletlist di Sidebar Blogger Dengan Gambar

?ِ?ْ?????????????????ِ ??ِ???َّ?ْ?َ?ِ ???َّ?ِ??

Selamat pagi sahabat blogger, sudah lama saya tidak update  berkaitan tentang blog, pada kesempatan kali ini saya akan memberikan tutorial Cara Mengganti/Mengubah Default Icon Bullet list di Blog Dengan Gambar para bogger biasanya menganti bullet list agar lebih menarik beda dari yang lain bisa denga font Awesome atau Gambar, setiap template biasa nya sudah memodifikasi bullet list pada sidebar dan postingannya dengan icon awesome panah sperti template EVO MAGZ milik mas sugeng,



tetapi ada juga template yang bullet lits pada sidebar nya masih bawaan contoh template yang saya gunakan ini awalnya bawaan bahkan suka tidak muncul juga bullet list bawaan nya, kemudian saya ganti denga gambar. Gimana menurut sobat keren tidak? Jika kalian tertarik untuk memodifikasi nya, silakan ikuti langkah-langkah di bawah ini. Mudah kok gan pemula aja pasti bisa,

Baca juga : Membuat Back To Top Sederhana Di Blog
Sebelum melakukan cara ini di sarankan untuk mem-backup template sobat masing-masing agar tidak acak-acakan  atau  terjad hal yang tidak diingkan.
Langkah-Langkah
  1. Seperti bisa login ke blogger > Template > Edit HTML
  2. Tekan CTRL - F untuk pencarian kode Masukan kata kunci sidebar li jika tidak ada, coba yang sama namanya atau mendekati namanya nya yang penting ada tulisan sidebar sama li Karena setiap template mungkin berbeda-beda
  3. Jika sudah ketemu kurang lebih kodenya sperti ini di template sobat
    sidebar li { margin:0; padding:0 0 2px 0; text-indent:0px; line-height:1.5em; }
  4. ganti kode di atas dengan dengan kode di bawah ini

    .sidebar li { font-size: 12px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmaQtrufXkYJmz8NWGCIAuclBYukSN6ym-G_s42t3vFSx5YF5TfKJdOyAgIL0W0SxQwzKBGM-UUX5umyIK_r13VoW0_sEuMa4WS_RoCm3PLr_ukf04-dzcUYOe-jGDGqdRQ5h-qrR83eY/s1600/star_bullet.png) no-repeat left top; bo rder-bottom: none; line-height:1.25em; padding-left:1.5em; padding-right:1.5em; }

  5. Jika sudah KLIK SIMPAN TEMPLATE dan lihat hasilnya
    Sekian dari saya semoag bermnafaat bagi kalian semua, tolong tinggalkan jejak komentar ya mohon maaf bila ada kesalahan kata-kata maupun bahasanya tidak mengerti :) wassalam
    ??ْ?َ?ْ?ُ ?ِ?َّ?ِ ?َ?ِّ ??ْ?َٰ?َ?ِ??

    Artikel Terkait

    0 komentar

    Posting Komentar

    Cancel Reply
    Share It