Home » » Cara Mempercantik Judul Widget Sidebar H2 Blogger

Cara Mempercantik Judul Widget Sidebar H2 Blogger

Cara Mempercantik Judul Widget Sidebar H2 Blogger
Cara Mempercantik Judul Widget Sidebar H2 Blogger

POSTING ini melengkapi posting sebelumnya, Mempercantik Tampilan Judul Widget (H2) Sidebar Blog.

Judul sidebar blog memang harus diperlakukan istimewa, harus menarik perhatian (eye catchy),
karena ia bagian dari navigasi menu dan internal link, untuk memudahkan pengunjung membuka konten blog kita.

Biasanya, widget yang dipasang di sidebar blog dan "wajib ada" a.l. Recent Posts dan Popular Post. Widget Related Posts biasanya ada di bawah posting. (Baca: 15 Widget Wajib & Tidak Perlu Dipasang di Blog).

Kode-kode sidebar heading alias judul widget sidebar (h2) ini CB share dari Blogger Spice. Anda bisa memodifnya kembali sesuai dengan selera.

Cara Mempercantik Judul Widget Sidebar H2 Blogger

Berikut ini beberapa tampilan Judul Sidebar H2. Kita mulai dari tampilan seperti dalam gambar ilustrasi di atas.

1. Template > Edit HTML
2. Cari (Ctrl+F) kode .sidebar h2 atau .sidebar-wrapper h2 dan yang semisalnya.
3. Ganti kode tersebut dengan salah satu kode di bawah ini:

Judul Widget Sidebar H2 Blogger

.sidebar h2 {
background: url(http://1.bp.blogspot.com/-j6XH6qTgJmY/VKosf7AbT7I/AAAAAAAAI1w/N3H7_Pg8x_0/s1600/BloggerSpice%2BSidebarH2.png) no-repeat scroll 0 0 transparent;
    color: #f5f5f5;
    height: 66px;
    font-size: 140%;
    font-weight: 300;
    margin: 0 0 -25px 0;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    text-align: left;
    padding: 15px 10px 0px 15px;
    font-family: 'Oswald',Sans-Serif
}


.sidebar h2 {
padding:5px;
background:#000000;
color:#FFFFFF;
font:140% 'Oswald',Sans-Serif;
}

Judul Widget Sidebar H2 Blogger


.sidebar h2 {
padding:5px;
border-bottom:5px solid #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}

Cara Mempercantik Judul Widget Sidebar H2 Blogger


.sidebar h2 {
padding:5px;
border-bottom:3px dashed #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}


.sidebar h2 {
padding:5px;
border:2px solid #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}

Cara Mempercantik Judul Widget Sidebar H2 Blogger


.sidebar h2{
background:#333;
margin:5px 4px 5px 0;
padding:9px 0 9px 10px;
border:0;
color:white;
font-size:16px;
line-height:16px;
font-family:'Oswald',sans-serif;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}

Judul Widget Sidebar H2 Blogger

.sidebar h2 {
background: url(http://1.bp.blogspot.com/-j6XH6qTgJmY/VKosf7AbT7I/AAAAAAAAI1w/N3H7_Pg8x_0/s1600/BloggerSpice%2BSidebarH2.png) no-repeat scroll 0 0 transparent;
color: rgb(213,213,213);
height: 66px;
font-size: 140%;
font-weight: bold;
margin: 0 0 -28px;
position: relative;
left: -30px;
top: 0;
width: 362px;
text-align: center;
padding: 15px 0 0;
font-family: 'Oswald',Sans-Serif;
padding-bottom: 15px;
}

Cara Mempercantik Judul Widget Sidebar H2 Blogger

.sidebar h2 {
padding:10px;
text-align:center;
border-top-right-radius:30px;
border-bottom-left-radius:30px;
background:#000000;
color:#FFFFFF;
font:140% 'Oswald',Sans-Serif;
}

Demikian Cara Mempercantik Judul Widget Sidebar H2 Blogger. Silakan dipilih sesuai dengan template dan selera Anda.

APA? Ingin seperti judul sidebar yang di blog CB ini? Oke, ini dia kodenya:

Judul Widget Sidebar H2 Blogger

.sidebar h2 {
    font: normal 300 16px 'Oswald',Arial,sans-serif;
    margin: 0 0 10px 0;
    padding: 0;
    border-bottom: 2px solid #222222;
    text-transform: uppercase;
    position: relative;
    color: #2b2b2b;
}

#sidebar h2:after {
    content: " ";
    width: 90px;
    height: 0;
    position: absolute;
    left: 0;
    bottom: -2px;
    border-bottom: 2px solid #e74c3c;
}

 #sidebar-wrapper h2:after {
    content: " ";
    width: 90px;
    height: 0;
    position: absolute;
    left: 0;
    bottom: -2px;
    border-bottom: 2px solid #e74c3c;
}

Good Luck & Happy Blogging! (http://www.contohblog.com/).*

Thanks for reading & sharing Cara Mempercantik Judul Widget Sidebar H2 Blogger

Previous
« Prev Post

5 comments:

Comment Page:
  1. Sudah bisa :) Thx berat CB.

    ReplyDelete
  2. ane wor di b:skin KARENA BELUM ADA H2 NYA HEHE

    ReplyDelete
  3. kok gk jadi yah gan ?
    aku pake template nya yg ini juga padahal

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox