Memberi shading pada judul postingan

Banyak hal unik yang dapat kita lakukan melalui blog salah satunya berkreasi dengan apa yang ada di imajinasi di sini saya pengen memberi salah satu tips untuk memberi bayangan pada judul postingan yang kita buat 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;

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
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;
*ini untuk warna efek hijau

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;
}


0 komentar:

Posting Komentar