mau dapat artikel terbaru blog ini? silahkan ikuti update blog ini

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:

.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 :D

14 komentar:

AndriRistiawan mengatakan...

thanks for the info
tapi takut maw nyoba :D

Anthony Harman mengatakan...

Bagus bro. Emang kliatan meah kalo judul sidebar dikasih efek 3D. Tetapi, tetap harus disesuaikan dengan warna template keseluruhan donk

Oentoe_09 mengatakan...

@ 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..

rian_raudhah mengatakan...

ok juga bro...blog ini jadi inspirasi banyak orang....salut bro..

Hendri A.M mengatakan...

bgs bro....tp knp gk bs di copy paste kode nya?klo mesti ngetik sendirikan kelamaan?

Bloggerkampungan mengatakan...

kalo nambahin sidebar menjadi 2 seperti blogku gimana boss,..

Oentoe_09 mengatakan...

silahkan baca di artikel yang ini:
http://oentoe09.blogspot.com/2008/09/mengubah-template-standar-blogspot-2.html

Nano-Nano mengatakan...

uMh,,,,,aPa gaG ada conToh tamPilaNa????

Oentoe_09 mengatakan...

@ NANO-NANO
tutorial di blog ini contoh applikasinya bisa langsung di lihat di blog ini lho ;)

Harun Supriatna S.PdI mengatakan...

waduh ga berhasil om........

donadzku mengatakan...

trims ya atas infonya, tapi kok gak bisa ya?? apa karena blog saya tiga kolom? sukses ya

I Love Magic mengatakan...

langsung coba kalo ga bisa w keos lu

Dahlia mengatakan...

keren ne info_a

xXx{ViperZeLienmzz}xXx mengatakan...

Mana Tutorial`a Sob dan Petunjuknya

Posting Komentar

Label

Blog support

Entri Populer