Lompat ke konten Lompat ke sidebar Lompat ke footer

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.
Sahilluqman
Sahilluqman Hanyalah seorang blogger yang ingin bermanfaat untuk sesama

3 komentar untuk "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/

    BalasHapus
    Balasan
    1. bisa mas..asalkan kodenya benar gak masalah

      Hapus
  2. css cums bisa diisi satu link ya?

    BalasHapus

Berlangganan via Email