Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

Baca Juga

Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

Widget di Sidebar Blog biasanya berisi Popular Posts, Recent Posts.

Nah, judul postingan itu bisa dipercantik dengan kode di bawah ini.

Judul widget di Sidebar berpengaruh terhadap SEO karena biasanya menggunakan heading tah h2, h3, atau h4. Heading tags menjadi perhatian kususs mesin pencari maupun pengguna/pengunjung.

Cara Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

Berikut ini Cara Mempercantik Tampilan Judul Widget (H2) Sidebar Blog. Saya mulai dari tampilan judul widget sidebar yang saya gunakan (Model 1)

Model 1

Simpan kode Tampilan Judul Widget (H2) Sidebar Blog model 1 berikut ini di atas kode ]]></b:skin>

.sidebar h2, .sidebar h3 {
    overflow: hidden;
    position: relative;
    font-family: 'Roboto Condensed';
    font-size: 18px;
    font-weight: 400;
    padding: 12px 15px 12px 65px;
    margin: 0;
    border: 1px solid rgba(0,0,0,0.12);
    text-transform: uppercase;
    display: block;
    transition: all .3s ease-out;
}
.sidebar h2:before, .sidebar h3:before {
    background: #fdfdfd;
    content: '\f02e';
    font-family: fontawesome;
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    padding: 16px 18px;
    border-right: 1px solid rgba(0,0,0,0.12);
    line-height: normal;
}

Model 2

Simpan kode berikut ini di atas kode ]]></b:skin>

#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/AVvXsEhAj8bZ5FhyphenhyphenyPygvHMVY0OvqsVFch1k5ktlLBO0oa_5bbBKmq0ReO7UautZwlpT5EqF6xe_Jnk_Lka6JeurV-oCoLdaLGTqFe5DG14bRAN36pMphpOP09WGIrh8ldi_NUK-1j6yEWq3PsHX/s1600/repeat-bg.png)repeat;}

Model 3

Kodenya:

.sidebar h2,.sidebar h3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXYEJUKfliC8i4e9v3XMzd8CBEvyf79wlKAEs3mS57zg9SXuqaxKfncAO3rM6ViOCQ3hSwyf4C8c2whLrsxeeWp4BZr6DymRkLYBvsjqS_sLkKIuEYGICifmpZczCrm4EaqmVUBH4KmSi/s1600/BloggerSpice+SidebarH2.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
}

Model 4

Kodenya:

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

Demikian Mempercantik Tampilan Judul Widget (H2) Sidebar Blog. Biar lebih eye catchy sehingga menarik dan keren. (blogromeltea.blogspot.com).*