Membuat Background Efek 3D di Sidebar Title

Buat rekan-rekan pengguna Blogspot yang ingin membuat tampilan blognya lebih sedikit bergaya dengan efek 3d “emboss” (efek timbul) pada judul sidebar tanpa menggunakan image yang bisa memperlambat waktu loading page blog mudah-mudahan cara ini bisa menjadi solusi buat yang suka me-make over wajah sendiri blognya .

Berhubung cara ini sedikit mengubah CSS code template blog maka yang harus dilakukan adalah langsung tuju akun blogger anda, pilih tata letak, kemudian pilih Edit HTML dan sebelum melakukan perubahan apapun jangan pernah lupa untuk terlebih dahulu mem-backup template Anda coz segala resiko tutorial ini ditanggung sendiri .

Agar lebih mudah saya mengambil sample code CSS template minima white, silahkan cari CSS yang mengatur property sidebar content seperti kode dibawah ini:

.sidebar h2{ font-size:14px;
margin:1px 0 4px;
font-weight:bold;
text-transform:none;
text-align:justify;
}

Kemudian tambahkan kode berikut ini tepat dibawah kode diatas, sehingga menjadi seperti ini:

.sidebar h2{ font-size:14px;

margin:1px 0 4px;

font-weight:bold;

text-transform:none;

text-align:justify;

background:$bordercolor;

padding: 2px;

border-top: 2px solid #FFCC99;

border-right: 2px solid #333300;

border-bottom: 2px solid #333300;

border-left: 2px solid #CC9933;

}

Keterangan kode tambahan diatas:

• Kode warna biru adalah kode lama dan kode warna merah adalah penambahan
• Padding: 2px = mengatur jarak atas, kanan, bawah dan kanan huruf sebesar 2 pixel.
• border-top: 2px solid #FFCC99; = tebal dan kode warna (hexa) border atas
• border-right: 2px solid #333300; = tebal dan kode warna (hexa) border kanan
• border-bottom: 2px solid #333300; = tebal dan kode warna (hexa) border bawah
• border-left: 2px solid #CC9933; = tebal dan kode warna (hexa) border kiri

Untuk melihat hasil sementara perubahan kode diatas silahkan tekan Pratinjau.
Jika sudah sesuai jangan lupa tekan tombol Simpan.
Btw Anda bisa bereksperimen dengan ukuran dan warna yang sebaiknya kontras dengan tampilan wajah blog anda.
Semoga tutorial ini bisa basi bermanfaat , jika ada pertanyaan seputar artikel ini manfaatkan saja form comment dibawah ini ya
Trims sudah mau ke blog ini dan semoga make overnya sukses