Memberi image pada List [sidebar]

Seorang pemula blog tentunya kesulitan untuk mengkostumisasi sebuah atau beberapa blognya. seperti saya ini, bagaimana membuat agar blognya lebih enak dan indah dipandang mata?. dan bagaimana agar pengunjung terkesan setelah mengunjungi blognya.bagi yang sudah senior atau ahli blog tentunya happy aja.di suasana hujan gini saya bingung mau ngapain?. seharian bingung bagaimana cara memberi gambar pada list sidebar. akhirnya..bisa juga. setelah sekian waktu aku coba-coba. nah...giliran teman-teman mencoba. OK,

IMAGE PADA LIST SIDEBAR

  1. Pertama,login ke account blogger kamu

  2. Pada menu dashboard, pilih Tata letak - Edit HTML

  3. Pada halaman edit HTML, jangan lupa centang Expand Template Widget. Tapi untuk berjaga-jaga dari hal yang tak terduga,back up dahulu template kamu dengan dengan cara mengklik Download Template Lengkap

  4. selanjutnya cari kode di bawah ini. untuk mempercepat pencarian klik Ctrl + F [untuk kata kunci misalkan cari aja kode yang berwarna biru]

    .sidebar li {
    margin: 0px 0px 0px 0px;
    padding: 3px 5px 3px 24px;
    line-height: 1.8em;
    list-style-type: none;
    border-bottom: 0px solid $sidebarListLineColor;
    }

  5. Berikutnya, tambahkan kode ini

    background:url('url gambar?imgmax=800') no-repeat;

    url gambar [isi dengan URL alamat gambar kamu], misal url gambarnya https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ9AymYRRCofV_-hcaJxaTjxBagc8tQsNPeBsk0gqUG-W4tFa6FbFcjZ99Gfuk25MdIgCHfGnThcrEDV2TToSTvZGKuI1vQqgtX_R9UxYdgaXSZo-rMp5t00st3jhOQbqkQiLxMiDOrS0/

    maka jadinya akan seperti ini::


    .sidebar li {
    margin: 0px 0px 0px 0px;
    padding: 3px 5px 3px 24px;
    line-height: 1.8em;
    list-style-type: none;
    border-bottom: 0px solid $sidebarListLineColor;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ9AymYRRCofV_-hcaJxaTjxBagc8tQsNPeBsk0gqUG-W4tFa6FbFcjZ99Gfuk25MdIgCHfGnThcrEDV2TToSTvZGKuI1vQqgtX_R9UxYdgaXSZo-rMp5t00st3jhOQbqkQiLxMiDOrS0/?imgmax=800') no-repeat;
    }



  6. Klik Pratinjau / langsung klik Simpan Template.


Perhatian: sebaiknya gambar/image yang digunakan sebagai list sidebar ini berukuran icon misal 16 x16 px / 20 x 24 px/lain2

untuk mengatur jarak gambar dengan tulisan kita bisa mengatur padding, semuanya tergantung kreatifitas teman-teman semua.


salam kenal dariku dan jangan lupa tinggalkan komentar ya. sampai bertemu di postingan berikutnya.


Bookmark and Share

Posted by: Mas Eko
Download info - Tips trik - update - sharing, Updated at: 18:34

7 - komentar:

asep canda said...

makasih atas infonya sob berguna banget buat aku

Didik M.A said...

sami-sami bos...ni juga baru belajar ngeblog...

chugy said...

ok bozzz bt info-y, tp ad sdkt kluhan ni klau di pk border bottom gambarnya tidak center sm teks-y gm y,, mhon pncrahanya thanks....

Didik M.A said...

chungry: terima kasih telah berkunjung..kalau masalah itu masalah tidak centernya atau keserasian..kita perlu mengatur padding sob..kita mengatur padding atas dan padding bawahnya..aja...n kanan...

toko bunga semarang said...

Terimakasih ilmunya... kebetulan saya ingin gambar bunga floral dipojokan List

flash card can talk said...

nice artikel ..

asiapoker said...

Nice info. Thanks for sharing.

Asia Poker99 merupakan agen Poker Terpercaya di Indonesia,
Poker Gampang Menang serta Poker Tanpa Bot akan membuat Anda betah untuk bermain di AsiaPoker 99!

Ayo cobain sekarang juga!

Post a Comment

Tiada gading yang tak retak, baka banyak pula hal yang salah dari aku. maka, tinggalkan walau hanya secoret komentar sebagai lankah ke depanku untuk lebih maju

NO SPAM NO PORN!