Navbar

Global Var

Jumat, 08 Februari 2013

Cara Memberi Latar Gambar Pada Judul Widget Blog

Cara Memberi Latar Gambar Pada Judul Widget Blog. Dalam mengedit blog, banyak hal yang bisa kita lakukan. Seperti menambah widget, mengedit postingan, mengedit tampilan blog, dan masih banyak lagi. Yang saya kali ini bahas adalah cara memberi latar gambar pada judul widget di blog. Yang perlu anda siapkan adalah URL gambar anda. Contoh widget blog yang berlatar gambar seperti di bawah ini:

Widget Entri Populer atau Popular Post Blogger

Terlihat digambar, bahwa di belakang tulisan "POPULAR POST" ada sebuah latar berwarna biru yang saya tambahkan sendiri. Mengapa diberi latar gambar? Saya memberi latar gambar pada judul widget tersebut karena awalnya judul widget dengan latar blog saya berwarna sama, yaitu berwarna putih. Tapi, itu pada template yang dulu, saya sudah ganti template. Ini hanya cara yang saya berikan untuk anda yang mengalami masalah seperti saya

Cara Memberi Latar Gambar Pada Judul Widget Blog

1. Login ke akun blogger anda, lalu pada dashboard blogger, pilih blog anda lalu klik Template > Edit HTML
2. Cari kode ###.sidebar h2### dengan menekan CTRL + F
3. Setelah itu, anda akan menemukan CSS yang menyusun rangkaian kode tersebut. Contoh kalau punya saya, CSS nya seperti ini
.sidebar h2 {background:#1757A8; color:#fff; font-size:15px; border:1px solid #fff;}
4. Ganti elemen background pada CSS anda hingga menjadi ####background-image:url(http://i.imgur.com/DbbM6XA.png)####
5. Sehingga rangkaian CSS menjadi seperti ini
.sidebar h2 {background-image:url(http://i.imgur.com/DbbM6XA.png); color:#fff; font-size:15px; border:1px solid #fff;}
6. Yang dalam kurung adalah URL dari gambar. Jika anda ingin mengganti latar gambar, gantilah dengan URL gambar anda
7. Terakhir, klik simpan template dan selesai.

Sekilas info:
Kesulitan mencari kode di tampilan edit html terbaru? Baca di Cara Mencari Suatu Kode Di Edit HTML Blog Tampilan Terbaru)

Mungkin dalam setiap template kode HTML nya berbeda beda. Seperti kode sidebar. Jika memang berbeda dan anda bingung mau mencari kode apa, saran saya cari saja kode "sidebar" (tanpa tanda petik) jika pada html "sidebar" terdapat rangkaian kode backgorund, font, warna dan lain lain yang sesuai dengan blog anda, maka itulah kode yang tepat. Jika anda masih ingin lebih banyak memahami tentang HTML dan CSS, mungkin artikel Tutorial Dasar Menggunakan HTML dan CSS dapat membantu.

Bagaimana? apakah anda sudah mendapatkan hasilnya? Sekian dulu postingan Jona Rendra yang berjudul Cara Memberi Latar Gambar Pada Judul Widget Blog, semoga bermanfaat untuk anda dan jika ada pertanyaan silahkan poskan komentar

0 komentar:

Comments Utility