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 dapat dipercantik dengan aba-aba di bawah ini.

Judul widget di Sidebar kuat terhadap SEO alasannya biasanya memakai 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 aku gunakan (Model 1)

Model 1

Simpan aba-aba 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 aba-aba berikut ini di atas aba-aba ]]></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/AVvXsEh9DmRUB-JFPoMxMq1vCp55VU1YyK4X0HLmnJ14feb_CaGjL-rp8Tq4zwT6Cx4Gafh6zO9amBrP5CS8U8TuLw5ZMNVL-nA7DTeiFGc2iXXWcKXLCrMZOcRh6WGv5w9gVG7WObciNbEn7M1K/s1600/repeat-bg.png)repeat;}

Model 3

Kodenya:

.sidebar h2,.sidebar h3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKrBPnPeywLYPbRBcdpKe5_HSUbr4zuRILMKJ4NPlFGue2UpaY4BJb660I0CAufJz46Zl80qgosh3sZ6TlmNbmBZK_7tfKiZM0wLO3jpn_Z4D3z5x-veRZu_0FiQwxPJc7LIlz2Yz3uiNe/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).*