Memberi image pada List [sidebar] - Hallo Sob Jody Blog, artikel kali ini berjudul Memberi image pada List [sidebar], kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Memberi image pada List [sidebar]
link : Memberi image pada List [sidebar]

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/AVvXsEhBEpBxDxxrW9aaUI6bsbs5puCVnvw2vj5ukmB_kKwEMC0e64a7gM7XKB9vscngd4IfeCcItKgEgFXvmOEW-JEy_LnrCZHo64HbN4_UY7GXgXAU9D_Oj4v-09Y2-ZPgBTAUyoFCp0HDlJc/
   
   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/AVvXsEhBEpBxDxxrW9aaUI6bsbs5puCVnvw2vj5ukmB_kKwEMC0e64a7gM7XKB9vscngd4IfeCcItKgEgFXvmOEW-JEy_LnrCZHo64HbN4_UY7GXgXAU9D_Oj4v-09Y2-ZPgBTAUyoFCp0HDlJc/?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.

Demikianlah Artikel Memberi image pada List [sidebar]

Sekian Memberi image pada List [sidebar], mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Memberi image pada List [sidebar] dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2009/11/memberi-image-pada-list-sidebar.html Semoga artikel ini bisa bermanfaat.

Tweet