Sobat blogger harus bisa membedakan Tag untuk bagian-bagian utama dalam template sobat seperti Footer dengan tag <footer>, Header dengan tag <header> dan Sidebar dengan tag <aside>. Untuk Sidebar sendiri, pada template blogger yang lama memiliki kode seperti ini : #sidebar-wrapper h2 dan untuk blogger template baru, tidak ada (tidak terdapat) kode yang seperti itu. Kembali ke template blogger lama, kita tidak akan pernah mengalami kesulitan untuk memodifikasi tampilan sidebar template lama karena kode-nya sudah jelas. Misalnya kode Sidebar kita seperti ini :
#sidebar-wrapper h2 {Untuk menambahkan Background pada judul sidebar, kita tinggal masukkan kode ini : background: #000; dan untuk menambahkan border atau bingkai kita tinggal tambahkan kode ini border: 1px solid #fff;
margin:4px;
padding: 5px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
}
Sangat mudah kan? Bagaimana dengan template bawaan blogger yang baru? Bagaimana cara kita merubah background pada judul Sidebar, Merubah posisi Judul supaya berada di tengah atau merubah Font-nya?
Tidak ada cara lain yang bisa kita lakukan selain dengan menggunakan kode CSS (Cascading Style Sheet) untuk merubah tampilan sidebar. Sobat blogger bisa lihat sendiri tampilan Sidebar blog ini yang sudah saya rubah menggunakan kode CSS.
Ada salah seorang teman saya yang bertanya seperti ini : "Bos, pada template dengan doctype HTML5 sudah terdapat kode h2 {, kenapa tidak dari sana saja kita sisipi kode?". Hal itu bisa-bisa saja kita lakukan, akan tetapi yang akan berubah bukan hanya background di judul Sidebar saja, tapi juga background tanggal yang terdapat di atas judul postingan. Blog kita akan tambah hancur kelihatannya kalau seperti itu.
Cara Merubah Atau Memodifikasi Tampilan Judul Pada Sidebar Pada Template Blogger Baru
- Sign in di blogger.com
- Pada menu drop down pilih template
- BackUp Template sobat terlebih dahulu.
- Kalau sudah di BackUp, Klik Edit HTML dan klik Proceed
- Cari kode ]]></b:skin>
- Tempatkan kode berikut tepat di atasnya :
.sidebar h2 {
font-size:110%;
font-weight:bold;
color:#ffffff;
text-transform:uppercase;
text-align:center;
background:#2281C4;
border-radius: 15px;
}
- Simpan template sobat
Untuk Kostumisasi:
- Kode #ffffff adalah kode warna teks dan #2281C4 adalah background judul sidebar. Silahkan di ganti dengan warna yang sobat blogger inginkan. Lihat kode Warna disini : Hex Color Code
- Ganti kata center menjadi left kalau sobat blogger ingin merubah posisi judul sidebar menjadi sebelah kiri.
- Untuk merubah lengkungan atau border, hapus kode border-radius: 15px; dan ganti dengan kode berikut :
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
Saya rasa sudah cukup tutorial tentang Cara Merubah atau Memodifikasi Tampilan Judul Sidebar pada blogger template baru. Jika sobat blogger masih bingung atau ada pertannyaan, silahkan mamfaatkan kolom komentar yang tersedia.
Advertisment
0 komentar:
Posting Komentar