Mempercantik Tampilan Judul Widget (H2) Sidebar Blog

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(http://4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/s1600/repeat-bg.png)repeat;}

Model 3

Tampilan Judul Widget (H2) Sidebar Blog


Kodenya:

.sidebar h2,.sidebar h3 {
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
}

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

Thanks for reading Mempercantik Tampilan Judul Widget (H2) Sidebar Blog | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

No Spam, Please!