October 10, 2015

Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

October 10, 2015

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/AVvXsEjIvIkIOq482KVvK54xenm54ZrFSIrbqrnW0YH5fti1rvhl-yqRXVR-86BXOMdszA3P4JezyJl04Uvkj-YcWsTwv6FjgdN5dLFCaPU1m6AjipJSycN-ai3GIHXYd1IrjoA0EfhqkMDa7mNy/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/AVvXsEjIvIkIOq482KVvK54xenm54ZrFSIrbqrnW0YH5fti1rvhl-yqRXVR-86BXOMdszA3P4JezyJl04Uvkj-YcWsTwv6FjgdN5dLFCaPU1m6AjipJSycN-ai3GIHXYd1IrjoA0EfhqkMDa7mNy/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/).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

3 comments on Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

  1. Mantap Bos sudah diterapkan dan sukses...
    Thanks panduannya

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

    ReplyDelete
  3. Supaya bisa responsive judul plus background nya gmn bos? Mohon penjelasanya dong...

    ReplyDelete

Contact Form

Name

Email *

Message *