Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Cara Mengganti Tanggal Posting dengan Icon Calender

Cara Mengganti Tanggal Posting dengan Icon Calender-Bingung mau modifikasi blog? Atau mau bikin blog terlihat jadi lebih keren dan menarik? Bingung juga cara modifikasinya? Tenang saja kali ini saya mau berbagi tips cara mempercantik blog agar terlihat jadi lebih rapi dan tentunya akan terlihat lebih keren.

Untuk trik kali ini saya ingin membuat Trik Mengganti Tanggal Posting deengan Icon Calender, jelas ini berbeda dengan artiel sebelumnya yang dimana pada artikel terdahulunya saya juga pernah membahastentang pernak pernik blog seperti pemasangan widget kalender diblog dan tentunya trik tersebut tidak kalah keren dengan trik sekarang.

Artikel yang berhubungan: Cara Memasang Widget Kalender Lucu di Blog

Untuk tahap memulai silahkan lakukan login ke akunblogger sobat lalu pada dahshboard blog pilih Setelan  ›  Bahasa dan pemformatan dan ganti “date header format” atau “format tanggal menjadi (mm.dd.yyyy).

Jika sudah langkah selanjutnya melakukan pengeditan template agar tampilan tanggal postingan berubah. Pilih Template⇒Edit HTML dan cari kode <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagianatas). Setelah ketemu letakan script dibawah ini di bawahnya:

<SCRIPT type=’text/javascript’>
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split(‘.’);
var day = da[1], mon = da[0], year = da[2];
var month =
[‘0′,’Jan’,’Feb’,’Mar’,’Apr’,’May’,’Jun’,’Jul’,’Aug’,’Sep’,’Oct’,’Nov’,’Dec’];
document.write(“<div class=’month’>”+month[mon]+”</div> <div class=’day’>”+day+”</div>”);
}
//]]>
</SCRIPT>

Selanjutnya cari kode berikut:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

Jika gak ketemu cari kode:

h2.date-header {
margin:1.5em 0 .5em;
}

Setelah ketemu silahkan copy dan paste script dibawah ini tepat dibawahnya:

.dateblock {
background: url(“http://img600.imageshack.us/img600/3576/bluecalend.gif“)
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Masih belum selesai sob, sekarang cari lagi kode <data:post.dateHeader/> (untuk memudahkan pencarian gunakan CTRL+F). Jika sudah ketemu ganri kode tersebut dengan kde dibawah ini:

<DIV class=’dateblock’>
<SCRIPT>date_replace(‘<data:post.dateHeader/>’);</SCRIPT></DIV>

Terakhir silahkan simpan dan lihat hasilnya. Jika mengala kegagalan silahkan coba perhatikan kembali langkah-langkah diatas.

Loading...

Add a Comment

Your email address will not be published. Required fields are marked *

More in Blogger
Cara Menampilkan / Pasang Emoticon di Kotak Komentar

Cara Menampilkan / Pasang Emoticon di Kotak Komentar-Memsangan emoticon pada...

Close