Untuk pembuatanya terbilang sederhana, hanya sedikit menambahkan kode pada CSSnya, misalnya kita ingin menambahkannya pada Judul blog maka sobat harus mencari kodenya yang di tandai dengan h1
Untuk tanggal entri dan judul dari sidebar ditandai dengan h2
, sedangkan untuk judul postingan di tandai dengan h3
, dan terahir adalah komentar yang di tandai dengan h4
.
Di bawah ini adalah kode dari masing-masing CSSnya yang terdapat pada template Minima Ochre baru :
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
Untuk menambahkan efek bayangan pada teks, kita hanya perlu menambahkan kode seperti ini :text-shadow:1px 1px 1px #006400;
efek bayangan untuk warna hijau dengan ketebalan bayangan 1 pixel.
Sebagai contoh kita ambil h1
untuk judul Blog, maka kurang lebih akan menjadi seperti ini :
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
text-shadow:1px 1px 1px #006400;
}
Untuk langkah pemasangan pertama-tama :
- Login ke Blogger
- Tata letak
- Edit HTML
- Terahir klik 'simpan Perubahan'.
Setelah itu cari dari masing-masing kode judul
h1 h2 h3 h4
yang ingin ditambahkan. Sebagai contoh yang kedua adalah 'judul posting' atau h3
. Setelah menemukan kode CSSnya, sobat tinggal menambahkan kode ini :text-shadow:1px 1px 1px #006400;
tepat di bawahnya, sehingga menjadi seperti ini :.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
text-shadow:1px 1px 1px #006400;
}
Silahkan klik disini untuk melihat contohnya.
28 komentar (Membuat efek bayangan pada judul (h1, h2, h3, h4))
ku copy dulu ya kodenya.. Dan langsung ke TKP.. thx ya..
Wah hebat kawan bisa bikin blog bagus
Efek2 melayang bisa membuat blog tampil ciamik sob
Wah boleh juga tuh SOb....kayanya asik juga klo ada bayangannya hhe......makasih sob ilmu'y...
Oiya ada Award buat sobat...tolong diambil N diterusin.....
keren tipsnya, nice tips :D
Info bagus sob :-)
ntar coba praktekkin ahhh
Makasih triknya sob, dan makasih pula templatenya dah dicoba.
nice ipoh nih..saya suk oprak opreks web dan Blog
makasih tutorialnya...tapi lagi males edit nih...hehe...
perlu dicoba ne
Cara Jitu Mengecilkan Alexa Ranking
Keampuhan Backlink Blog Edu
Puluhan Backlink Dalam Sekejap
Domain Baru Bisa Laku Sampai $100
Google Adsense Semakin Galak
Wach sepertinya keren nich tutorialnya,ijin simpan dulu sob dan klo ada waktu langsung dipraktekkan...:D
Slm knl dan semoga sukses selalu...:D
makasih yaw tipz nya
boleh nuy kapan2 dicoba
:D
makasih tutorialnya
saya akan mencobanya
hehhe
tengkyu
:D
Aku save.aku pahami dan akan aku coba dulu kawan
Trims tutorny sob
makasi buat infonya yuuaaa,....
sip..save dulu..tinggal nanti dipraktekin, makasih kawan..
menarik juga kalau judul blog ada bayangannya ....
makasih sharingnya .....
Info disini selalu maknyus serta mantap2 tutornya,bnr2 komplit bgt penjelasannya dan makasih sdh share sobat...:D
iya keren tipsnya... cuma sayang saya pakai wordpress
mangtabs infonya, langsung dicoba...izin ngopy codenya sob.
makasih infonya bro! bermanfaat nih!
salam kenal & met sukses slalu 0_0
menarik..menarik..perlu dicoba nich..
makasih bang...trik yang sangat bermanfaat. mohon ijin belajar di sini...makasih
@bloekoetoek
kebalik kayaknya sob, seharusnya saya yg banyak belajar di blog sobat......
makasih ya infonya, salam kenal
Thanks gan.. berhasil :)
http://infoiki.blogspot.com
Back to form