Membuat Tampilan Judul sidebar berbeda-beda

Bissmillahirrohmaanirrohiim... Akhirnya setelah berlibur ngeblog karena harus silaturahmi ke sodara, kini saya bisa melakukan kegiatan posting lagi. Sebelumnya saya ucapkan minal aidzin wal faidzin kepada sahabat semuanya. Untuk Postingan kali ini saya akan mencoba menjawab pertanyaan teman saya :

kang ane mau tanya gimana caranya menambahkan gmbr pada artikel tebaru??dtunggu kang jwbnnya

Kemudian saya jawab pertanyaannya itu dengan memberikan link artikel saya yang berjudul membuat artikel terbaru dengan gambar/thumbnail. terus dia jawab lagi begini:

bukan begitu sob yang aku tannyain pas di klik tutor itu kan diatasnya ada gambar gimana cara buatnya.kasih tau dunk mas

Setelah saya cerna, mungkin maksud teman saya ini adalah gambar pada judul sidebar artikel terbaru saya. untuk tampilannya sendiri kalian bisa KLIK menu tutorial diatas atau lihat gambar dibawah ini:

Sebenarnya untuk membuat berbeda judul sidebar ini hampir sama dengan trik artikel saya yang berjudul Menghilangkan widget dihalaman depan/Homepage, yaitu mengambil ID dari sidebar yang akan kita buat berbeda. Saya akan jelaskan kembali untuk mengingatkan kalian, untuk contoh pada Artikel Terbaru saya :

<b:widget id="HTML5" locked="false" title="Artikel Terbaru" type="HTML">

Keterangan bagian2nya:
HTML5 ==> ID widget
false ==> Widget tidak dikunci ( bisa diedit )
Artikel terbaru ==> Judul widget (yang biasa tampil sebagai judul sidebar)
HTML ==> Type dari widget (type yang lainnya seperti HTML,Profile, Category,dll)

dari kode diatas, yang kita butuhkan adalah ID widget sidebarnya. Jadi kita ambil Kode HTML5 nya saja. Selanjutnya, kita tinggal menambahkan kode tadi kedalam kode CSS template blogger kita. Karena yang akan dibuat berbeda adalah judul sidebarnya, maka kode yang ditambahkan adalah sebagai berikut :

#HTML5 h2 {
background:url("URL GAMBAR KALIAN") no-repeat scroll left center transparent;
padding-left:55px;
margin-top:15px;
color:#000000;
font-family:arial;
font-size:19px;
font-weight:bold;
height:51px;
letter-spacing:-1px;
text-transform:none;
}

Keterangan :

# URL GAMBAR KALIAN : ganti dengan URL gambar milik kalian
# Untuk padding-left:55px;margin-top:15px;color:#000000;font-family:arial;font-size:19px;font-weight:bold;height:51px;letter-spacing:-1px; Bisa kalian ganti sesuaikan dengan template kalian.

** PENYIMPANAN KODE CSS PADA TEMPLATE

Setelah kita mendapatkan ID sidebar dan kode CSS nya sekarang kita tinggal memasangnya pada template blogger. silahkan baca tahap-tahapnya berikut ini:

1. Login ke Blogger kalian
2. Pilih Rancangan
3. Pilih EDIT HTML (centang expand template widget)
4. Simpan kode berikut diatas kode ]]></b:skin>

#HTML5 h2 {
background:url("URL GAMBAR KALIAN") no-repeat scroll left center transparent;
padding-left:55px;
margin-top:15px;
color:#000000;
font-family:arial;
font-size:19px;
font-weight:bold;
height:51px;
letter-spacing:-1px;
text-transform:none;
}

5. Simpan Template kalian

Tambahan :

• Untuk ID HTMLnya silahkan sesuaikan dengan ID sidebar kalian, begitupun dengan gambarnya.
• Untuk sidebar yang lainnya, kalian tinggal copy kode CSS diatas dan ganti ID sidebarnya

Untuk Contoh kode CSS pada sidebar milik saya:

#HTML5 h2 {
background:url("URL GAMBAR KALIAN") no-repeat scroll left center transparent;
padding-left:55px;
margin-top:15px;
color:#000000;
font-family:arial;
font-size:19px;
font-weight:bold;
height:51px;
letter-spacing:-1px;
text-transform:none;
}
#HTML7 h2 {
background:url("URL GAMBAR KALIAN") no-repeat scroll left center transparent;
padding-left:55px;
margin-top:15px;
color:#000000;
font-family:arial;
font-size:19px;
font-weight:bold;
height:51px;
letter-spacing:-1px;
text-transform:none;
}
#HTML12 h2 {
background:url("URL GAMBAR KALIAN") no-repeat scroll left center transparent;
padding-left:55px;
margin-top:15px;
color:#000000;
font-family:arial;
font-size:19px;
font-weight:bold;
height:51px;
letter-spacing:-1px;
text-transform:none;
}

Sekali lagi saya ingatkan: ID harus disesuaikan dengan ID sidebar kalian.

Selain cara diatas, kalian juga bisa menggunakan cara yang lainnya, silahkan baca kelanjutannya DISINI dan baca juga cara untuk membuat sub judul dibawah sidebar.

Semoga bermanfaat dan semoga bisa membantu.