Home » » Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

Mempercantik Tampilan Judul Widget (H2) Sidebar Blog
Cara modifikasi atau mempercantik judul H2 widget sidebar blog.

SETIAP kali ada "hal baru" di tampilan (desain) CB Blogger, hampir selalu ada yang tanya: bagaimana cara membuatnya? Share dong! Termasuk ketika CB mengubah tampilan judul di sidebar dan footer blog ini.

Modifikasi Desain Blog termasuk mengubah tampilan elemen tertentu di blog, pada dasarnya yaitu dengan cara menambah atau mengedit kode Cascading Style Sheets (CSS). Kita bisa mempelajari penerapan kode CSS di CSS Tutorial.

Judul sidebar blog memang harus diperlakukan istimewa, karena ia bagian dari navigasi menu dan internal link, untuk memudahkan pengunjung membuka konten blog kita.

Biasanya, widget sidebar blog yang "wajib ada" a.l. Recent Posts dan Popular Post. Widget Related Posts biasanya ada di bawah posting. (Baca: Widget yang Wajib Ada di Blog).

Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

Langsung saja, ini kode CSS judul sidebar blog yang CB gunakan:

#sidebar-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 15px;font-weight: 500;color: #666;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}
#sidebar-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(http://4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/s1600/repeat-bg.png)repeat;}

Ini kode CSS judul Footer Widget yang CB gunakan:

#footer-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 15px;font-weight: 500;color: #fff;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}
#footer-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(http://4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/s1600/repeat-bg.png)repeat;}
#footer-wrapper ul,#footer-wrapper ol {list-style-type:none;margin:0 0 0 0;padding:0 0 0 0;}

Cara Mengubah Warna Background dan Huruf Judul Sidebar Blog

Jika Anda hanya ingin mengubah warna latar (background) dan huruf doang, misalnya latar hitam dan teks putih, ini kodenya:

.sidebar h2 {background:#000; padding:4px 2px 2px;color:#fff}

Jika Anda tidak menemukan kode sidebar h2, mungkin sidebar .widget h2 atau yang semisalnya. Intip aja kodenya dengan cara:

1. Arahkan cursor ke judul sidebar blog Anda
2. Klik kanan > pilih "inspect element"

Nah, kode itulah yang harus diubah. Untuk urusan warna, silakan gunakan Kode Warna HTML untuk mempercantik tampilan judul sidebar blog Anda. Good Luck! (http://www.contohblog.com/).*

Thanks for reading & sharing Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

Previous
« Prev Post

2 comments:

Comment Page:
  1. Mantap Bos sudah diterapkan dan sukses...
    Thanks panduannya

    ReplyDelete
  2. code css nya di pastekan di mana mas?

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox