Cara Modifikasi Judul Posting dan Judul Sidebar

Assalamualaikum... Ini pertama kalinya Muhammad Rizki Fadillah ngeblog di blognya Mas Doyok. Sebuah kehormatan besar tentunya untuk saya seorang newbie menulis menjadi guest blogger di blognya master.

Udah ah... kebanyakan basa-basi jadi garing deh... Langsung saja ya kita mulai tutorialnya.

Judul blog dan judul sidebar dapat diganti. Untuk pemula, anda bisa memulainya dari menu Tata Letak > Font dan Warna. sedangkan yang sudah mahir, anda bisa menuju Tata Letak > Edit HTML.

Untuk pemula, pertama-tama buka dulu menu Font dan Warna.

Lalu, ada bisa mengubah beberapa elemen. Seperti warna dan font judul blog/judul sidebar.

• Untuk mengubah warna judul posting, klik pada bagian Warna Judul Posting, lalu ubah dengan warna yang diinginkan.
• Untuk mengubah warna judul sidebar, klik pada bagian Warna Judul Sidebar, lalu ubah dengan warna yang diinginkan.
• Untuk mengubah font judul sidebar, klik bagian Font Judul Sidebar lalu utak atik sesuai keinginan.

Kalau sudah klik Simpan Perubahan.

Untuk yang mahir, bukalah menu Edit HTML dan silakan backp dulu templatenya. Kalau sudah, cari kode:

1. Untuk judul posting, cari kode yang mirip:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

2. Untuk judul sidebar, cari kode yang mirip:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Lalu editlah sesuai keinginan. Misalnya anda ingin menambahkan background pada judul postingan, maka kodenya menjadi:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background:#000000;
}

Ket: kode background:#000000; adalah kode yang ditambahkan. Ganti #000000 dengan warna yang diinginkan. O, ya. Atau anda juga bisa membuat garis batas dibawah judul sidebar, maka kodenya menjadi:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
border: 1px solid #00FF00;
}

Ket: Kode border: 1px solid #00FF00; adalah kode yang ditambahkan. Ganti #00FF00 dengan warna yang diinginkan. Anda juga bisa membuat variasi lain, seperti menambahkan background berupa gambar, membuat huruf judul postingan membesar ketika mouse melintasinya, atau berbagai variasi lain sesuai dengan keinginan dan kreatifitas anda.

Kalau sudah klik Simpan Template.

Akhir kata, semoga bermanfaat.