Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

Romeltea | Follow @romel_tea

Mempercantik Tampilan Judul Widget (H2) Sidebar Blog
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

Judul Widget (H2) Sidebar Blog


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
Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

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

Tampilan Judul Widget (H2) Sidebar Blog


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

Tampilan Judul Widget (H2) Sidebar Blog

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).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

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

Post a Comment

No Spam, Please!