Merubah penampilan format tanggal

Bagaimana caranya menampilkan tanggal postingan seperti yang ada pada blog ini ? :

Untuk menampilkan tanggal seperti yang saudara lihat pada blog ini, saya mendapatkan kode aslinya dari blogandweb. Siahkan saja saudara klik di sini.

Jika kesulitan karena kendala bahasa coba saudara gunakan google translator di sini untuk menerjemahkan-nya ke dalam bahasa inggris.

Namun jika masih ada kendala lagi, saya akan coba menjelaskan bagaimana cara menambahkan kodenya ke dalam blog.

INSTALL

Pertama : Dalam halaman layout buka Tab :

Pengaturan->Format->Format Header Tanggal. ganti format tanggal-nya seperti yang di tunjukan gambar di bawah.

Kedua : Dalam Halaman Layout Buka Tab :

Template -> Edit Html -. Kemudian tandai kotak kecil di samping tulisan Expand Template Widget.

Ketiga : Cari kode ini

</head>

kemudian masukan javascript ini di atas kode tersebut.

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>"; //Le otorgamos una clase al día
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>"; //Le otorgamos una clase al mes
anio = "<div class='fecha_anio'>"+da[2]+"</div>"; //Le otorgamos una clase al año
document.write(dia+mes+anio);
}
</script>

Keempat : Cari kode ini.

<data:post.dateHeader/>

Setelah ketemu ganti dengan kode di bawah ini.

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

Kelima : cari lagi kode ini 

]]></b:skin>

Masuka kode ini di atas kode tersebut.

#fecha {
display: block;
margin:0 10px;
float:left;
padding: 5px;
color: #464646;
background: #e4e3ad;
border:#d7d675 3px solid;
text-transform:capitalize;
}

.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}

.fecha_mes {
display: block;
font-size: 10px;
}

.fecha_anio {
display: block;
font-size: 10px;
}

Setelah beres kemudian tekan Simpan Template.

Namun perlu juga saudara ketahui, bahwa posisi tanggal mempengaruhi pada hasil penampilan bentuknya.

-. Jika ketika pertama kali posisi tanggal di atas judul
maka hasil akhirnya akan seperti ini.

-. Jika posisi tanggal di bawah judul
maka hasil penampilannya akan seperti ini.

 

dan mungkin ada beberapa variasi lagi.

Untuk memindahkan tanggal di atas atau di bawah judul kita hanya perlu memindahkan kode tanggalnya saja.

Technorati tags: New Blogger, Blogger Tutorial