Cara Memasang Icon Gambar Di Judul Sidebar
Oleh
Ini mungkin salah satu dari beratus ratus cara dalam menghias blog yaitu dengan memasang gambar yang berupa icon di samping sidebar, atau mungkin lebih tepatnya disamping judul sidebar. Posisi penempatan icon gambar ini bisa disamping kiri ataupun disamping kanan dari judul sidebar .
Sekarang bagaimana caranya memasang icon gambar tersebut ?. Langkah pertama adalah siapkan icon gambar itu sendiri . Untuk mendapatkan icon gambar tersebut bisa dengan membuatnya sendiri ataupun dengan mencari dan mengunduhnya dari internet , misalnya bisa di unduh disini " bieicons " .
Bila icon gambar sudah di dapat, kemudian upload ketempat penyimpanan di internet atau istilahnya " file hosting ". setelah itu catat alamat url nya . Nantinya alamat url ini dipakai untuk menampilkan icon gambar tersebut .
Sekarang tinggal cari kode css berikut :
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Didalam default template Minima, kode css diatas terdapat dua class yaitu, class untuk sidebar widget dan class untuk main widget . Yang perlu dilakukan buat kedua class tersebut adalah memisahkannya, caranya yaitu tinggal mengcopy class main widget dari class sidebar widget sehingga nanti kode yang di dapat seperti ini :
.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Setelah itu buat dan masukkan property dan value background kedalam class sidebar widget . Sehingga kode yang didapat seperti ini :
.sidebar .widget {
background: url ( alamat url gambar ) no-repeat left top;
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Sekarang klik Simpan Template . Terus coba lihat hasilnya .
Bila icon gambarnya nanti hasil nya tidak berdempetan dengan judul sidebar, berarti pekerjaan memasang icon sidebar sudah berhasil . Tetapi bila berdempetan harus diperbaiki caranya, dengan mendefenisikan class untuk judul sidebar. Seperti diketahui judul sidebar termasuk kedalam heading h2 . Jadi untuk membuat class judul sidebar tinggal membuat kode style heading h2 dengan css , contohnya seperti berikut :
.sidebar h2 {
padding-left:10px;
font-size:13px;
text-align:left;
font-family:arial, verdana;
}
Sebagai catatan : " class " selalui di mulai dengan tanda ( . ) sedangkan " id " di mulai dengan tanda ( # ).
Setelah selesai kemudian Simpan Template , sekarang coba lihat hasilnya apa ada perubahan .
+
1 komentar:
gan ko diane mgak keluar yah.....
cabo di cek blog ane gan.
Posting Komentar Untuk Artikel Ini :