Cara Mudah Memperindah Tampilan Judul Sidebar Widget

Menurut blogger kawakan maupun pakar seo judul widget pada sidebar berpengaruh terhadap SEO karena biasanya menggunakan heading tag h2, h3, atau h4. Semua blogger baik luar maupun luar negeri sangat memahami bahwa heading tags menjadi perhatian khusus mesin pencari untuk meng-crawl artikel suatu blog maupun memudahkan pengunjung menemukan identitas dan isi suatu blog.

Terlepas dari berbagai pendapat blogger kawakan maupun pakar seo tentang judul widget pada sidebar blog, judul widget pada sidebar memang mesti diperlakukan istimewa dan tampilannya menarik perhatian, karena ia bagian dari navigasi menu dan internal link, untuk memudahkan pengunjung membuka konten blog kita.

Kira-kira seperti itulah kegunaan dan nilai dari judul widget pada sidebar, bagi yang ingin memodifikasi judul widget yang ada di sidebar Blogger, setidaknya kamu harus paham sedikit tentang CSS. Oleh karenanya alangkah baiknya mari kita langsung saja mendesainnya ya sob... :)

OK... lansung ke TKP saja sob...
1. Masuklah ke akun blogger sahabat, awas jangan masuk ke akun milik teman hehehe...
2. Klik Tema
3. Klik [Edit HTML] jangan [Sesuaikan]
4. Cari kode #sidebar h2 untuk mempercepat pencarian sobat silahkan gunakan [Control+F]
5. Ganti semua kode nya [semua kode yang dimulai dengan #sidebar h2] dengan kode-kode berikut sesuai dengan desain widget sidebar yang sobat inginkan.


1. Desain pertama, jika sobat menginginkan desain judul widget sidebar seperti milik CB BLOG silahkan sobat ganti seluruh kode untuk widget sidebar pada blog sobat dengan kode berikut:

.sidebar h2 {
    font: normal 300 16px 'Poppins',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 #003366;
}

2. Desain kedua, jika anda menginginkan seperti judul sidebar pada template VioMagz AMP Mas Sugeng, silahkan ganti dengan kode berikut:

.sidebar h2 {
background: #5b86e5;
background: linear-gradient(to right, #5b86e5, #36d1dc);
color: #fff;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
}

3. Desain ketiga, jika anda menginginkan judul widget pada sidebar berbayang, silahkan ganti dengan kode berikut:

.sidebar h2 {
background:#111;
padding: 5px;
color: #ffffff;
margin: 0px 0px 8px 0px;
box-shadow: 0 0 0 4px #111, 0px 11px 11px 0px rgba(10, 10, 0, 0.5);
border-radius: 3px;
 -moz-border-radius: 0px;
 -webkit-border-radius: 0px;
text-align:left;
}

Dari ketiga desain yang saya sajikan silahkan sahabat kembangkan dengan berkreasi sesuai keinginan sehingga  bisa menghasilkan desain baru :)

uongduro

Blogger wangi dan baik hati :)

Silahkan berbagi

Postingan Terkait

Ditulis uongduro — August 04, 2019 — Add Comment — Tutorial