MEMODIFIKASI JUDUL SIDEBAR DENGAN EFEK TOMBOL


Masih ingin mempercantik judul sidebar blog anda? Pada hal mungkin sebelumnya anda sudah memberi warna background pada judul sidebar tersebut, tapi tetap saja anda merasa belum puas (itu mungkin karena cita rasa seni anda sangat tinggi). Sebab efek background datar memang masih terkesan biasa. Contohnya seperti gambar di bawah ini (lihat pada tulisan Tips dan Trik)



Nah, apakah judul sidebar tersebut masih bisa lebih dipercantik? Jawabannya adalah bisa! Misalnya dengan menyulap judul sidebar tersebut menjadi seperti tombol. Caranya pun cukup mudah. Jika anda tertarik anda bisa lakukan beberapa langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.







2. Kemudian klik pada

 Edit HTML.


Cara Menjadikan Judul Sidebar Seperti Tombol

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.


Cara Memberi Warna Background pada Judul Sidebar
4.  Kemudian carilah kode:     h2 {

5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekanEnter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau. 


Cara Memberi Warna Background pada Judul Sidebar

6. Selanjutnya perhatikanlah beberapa baris kode di bawahnya. Lebih kurang akan tampak seperti di bawah ini. 


h2 {
background:#A9D0F5;
font-family:verdana; 
font-weight:bold;
font-size:14px;
letter-spacing:-0.2px;
margin:0px;
padding:4px 15px 3px;
text-transform:none;
}

(Anda tidak perlu bingung jika semua kode di atas tidak persis sama dengan kode yang terlihat pada blog anda, karena itu tergantung pada template yang kita gunakan)

7. Sekarang gantilah semua kode tersebut dengan kode di bawah ini (agar lebih mudah copy saja, lalu paste (timpal) di atasnya):

h2 {
background:url("http://3.bp.blogspot.com/_YXi3vp96gww/S9igmxIdJsI/AAAAAAAAAS8/2_voe73WBnY/s1600/navscreen.png") repeat-x scroll left bottom #d7e8ff; 
font-family:verdana; 
font-weight:normal;
font-size:13px;
letter-spacing:-0.2px;
margin:0px;
padding:4px 15px 3px;
text-transform:none;
border-bottom: 2px solid #95a4b9;
border-right: 1px solid #7c8a9f;
border-top: 1px solid #ffffff;
}

(Catatan: yang berwarna merah adalah kode dari warna tombolnya dan warna biru adalah kode dari warna garis bayangannya. Anda bisa ganti semuanya sesuai warna blog anda. Jika kesulitan mencari kode warna anda bisa lihat pada Daftar Kode Warna) 

8. Jika sudah jangan lupa klik SIMPAN TEMPLATE dan tunggu hingga proses selesai. 

Cara Memberi Warna Background pada Judul Sidebar
9. Sekarang anda sudah bisa melihat hasilnya dengan mengklik Lihat Blog. 


Cara Memberi Warna Background pada Judul Sidebar
10. Sebagai contoh hasilnya akan tampak seperti ini (lihat background tulisan Tips dan Trik sudah seperti tombol):




Selamat mencoba dan semoga berhasil!


Sumber: Blogernas Univertas Dunia Maya


Artikel Yang Berhubungan Badan:


0 Response to "MEMODIFIKASI JUDUL SIDEBAR DENGAN EFEK TOMBOL"

Posting Komentar

powered by Blogger | WordPress by Newwpthemes | Converted by BloggerTheme