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.

3 Responses to "Modifikasi Sidebar Blog pada Tampilan Judul Widget (H2) "

  1. Gan kalo buat pakai notepad terus pakai kode html bikin sidebar bix bisa gak? http://www.jakartacctv.co.id/id/

    ReplyDelete
    Replies
    1. bisa mas..asalkan kodenya benar gak masalah

      Delete

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Hosting Unlimited Indonesia