Modifikasi Sidebar Blog pada Tampilan Judul Widget (H2)

Jika kita mengamati salah satu situs blog yang berisi panduan SEO dan Internet Marketer yakni MyBlogsIdeas, pada bagian sidebar akan terlihat desain tampilan yang unik.


Tanpa garis bawah atau kotak dengan warna berbeda, namun lebih terlihat tampilan khas di samping kanan judul widget pada sidebar tersebut.


Hal ini juga bisa dilihat pada salah satu template EvoMagz yang fenomenal tersebut, salah satunya ya yang kami pakai dalam situs ini.


Lalu bagaimana cara membuatnya?


Cara Modifikasi Tampilan Widget (h2) Sidebar Blog


Berikut ini kode CSS pada sidebar blog yang akan disgunakan:

#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;}

Sedangkan berikut kode CSS yang akan digunakan untuk memodifikasi Judul Footer:

#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 menggunakannya:


1. Masuk akun blogger > Pilih template
2. Pilih mode sesuaikan > pilih CSS
3. Copas kedua kode di atas dan > simpan


Demikian cara mudah Merubah Tampilan Judul Widget (H2) Sidebar Blog. Untuk mempercantik dan merubah jenis warnanya, silakan gunakan kode warna HTML yang telah disediakan pada situs ini.


Salam.