Tutorial : Post Title & Date Header style

Assalamualaikum

Gambar contoh.

Tested in a unedited simple template.


1) Mula-mula cari code .date-header span {

2) Lepas tu akan jumpa macam ni (lebih kurang) :

.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

3) Delete code tu dan gantikan dengan code bawah ni :

h2.date-header:hover{
background:#E0F0E3;}

h2.date-header{
background:#E8F9FE;
width:200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
font:8px tt;
color:#888;
padding:10px;
text-align:center;
margin-left:100px;-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-bottom:-28px;
}

@font-face{
font-family:lemonscanfly;
src:url(http://static.tumblr.com/dep4vzc/B9rmy7mca/lemons_can_fly.ttf);}

4) Kemudian cari code h3.post-title, .comments h4 {

5) Nanti akan jumpa code penuh macam ni :

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

6) Delete code tu dan gantikan dengan code ni :

.post-title{
background:url(http://i.imgur.com/gFKTI3z.png);
padding:px;font-family:lemonscanfly;
font-size:30px;
margin:5px;
text-shadow:0 0 2px #ccc;
color:#FFAFAF;
padding:0px;
text-align:right;
width:550px;
margin-bottom:10px;
}

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.post-title a:hover{
box-shadow:none;
}
.post-title a{
padding:px;font-family:lemonscanfly;
font-size:30px;
color:#FFAFAF;
} 

warna, background, semua boleh ubah sesuka hati. Eksperiment la eh. ehe wasalam