Membuat Background efek 3d di sidebar tittle.
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 ;) contoh sederhananya bisa dilihat pada judul tanggal posting dan judul sidebar blog ini.
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 :D .
Agar lebih mudah saya mengambil sample code CSS template minima white, silahkan cari CSS yang mengatur property sidebar content seperti kode dibawah ini:
Kemudian tambahkan kode berikut ini tepat dibawah kode diatas, sehingga menjadi seperti ini:
Keterangan kode tambahan diatas:
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 bisabasi 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 :D
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;
}
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
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
Trims sudah mau ke blog ini dan semoga make overnya sukses :D
15 komentar:
thanks for the info
tapi takut maw nyoba :D
Bagus bro. Emang kliatan meah kalo judul sidebar dikasih efek 3D. Tetapi, tetap harus disesuaikan dengan warna template keseluruhan donk
@ Andri:
sama-sama ndri, its OK kok..btw klo takut nyoba backup dulu templatenya ntar klo gagal tinggal di upload balik template yang lama.
@ Anthony H:
Bener buanget tuh..kita mesti bisa kasih kesan kontras biar keliatan adem di mata yang liat..
ok juga bro...blog ini jadi inspirasi banyak orang....salut bro..
bgs bro....tp knp gk bs di copy paste kode nya?klo mesti ngetik sendirikan kelamaan?
kalo nambahin sidebar menjadi 2 seperti blogku gimana boss,..
silahkan baca di artikel yang ini:
http://oentoe09.blogspot.com/2008/09/mengubah-template-standar-blogspot-2.html
uMh,,,,,aPa gaG ada conToh tamPilaNa????
@ NANO-NANO
tutorial di blog ini contoh applikasinya bisa langsung di lihat di blog ini lho ;)
waduh ga berhasil om........
trims ya atas infonya, tapi kok gak bisa ya?? apa karena blog saya tiga kolom? sukses ya
langsung coba kalo ga bisa w keos lu
keren ne info_a
Mana Tutorial`a Sob dan Petunjuknya
josss...
Posting Komentar