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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhb2IENKAmuSuYMRN5fZoAgZUjmGrF3ireB9xCqHu7EO_GngDD7uA83qXcaNDaYc19oGv2xGkQUBA73rCyM4xnM1cyjRl6klE1leJKa2zOGsrHFwuJEA1AL5cWNVO_HQ7x_W8d4Ktqbp7/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhb2IENKAmuSuYMRN5fZoAgZUjmGrF3ireB9xCqHu7EO_GngDD7uA83qXcaNDaYc19oGv2xGkQUBA73rCyM4xnM1cyjRl6klE1leJKa2zOGsrHFwuJEA1AL5cWNVO_HQ7x_W8d4Ktqbp7/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.