Catatan Pendek Penulis | Sebenarnya trik ini sudah ada dan dipakai sudah sangat lama oleh para blogger, tapi karena saya baru menemukan dan mempraktekannya di blog saya hari ini makanya saya tulis ulang di blog saya mengenai trik cara membuat tanggal postingan dengan icon kalender.
Script ini bisa mempercantik blog anda, karena yang akan tampil adalah icon kalender pada tanggal postingan kita.

membuat-icon-kalender
membuat icon kalender pada postingan

Perhatikan satu-persatu langkahnya, karena ketika ada error “Undefine” itu tandanya anda tidak mengikuti instruksi dan langkah yang akan saya informasikan di sini.
1. Setting tanggal pada blog anda. Masuk ke Setting > Formating > Date Header Format menjadi dd.mm.yyyy atau 01.12.2013
2. Masuk ke Template > Edit HTML > jangan lupa centang kotak Expand Widget Templates.
3. Cari kode dan simpan kode dibawah ini tepat dibawahnya.

//<![CDATA[
/*********************************/
/* http://www.pakepe.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(“

“+month[mon]+”
“+day+”

“);
}
//]]>

4. Selesai. Lalu cari kode dibawah ini.

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

atau cari kode dibawah jika tidak ditemukan

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

5. Kalau sudah ketemu lalu simpan kode 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;

}

Kode http://img600.imageshack.us/img600/3576/bluecalend.gif adalah kode untuk warna kalender dapat anda ganti sesuai keinginan anda. Dibawah ini saya berikan beberapa warna pilihan.

lalu kode color:#3366CC; adalah kode warna tanggal, bisa anda ganti sesuai keinginan. Untuk melihat kode warna ada DISINI.

6. Setelah semuanya selesai lanjut ke tahap selanjutnya yaitu cari kode dan ganti dengan Script


date_replace(”);

7. Simpan templates kamu dan liat hasilnya.
Jika tanggal dan bulannya terlalu keatas atau tidak center, silahkan sisipkan kode padding: 4px 0px 0px 0px; dibawah kode .month { dan .day {

Sekali lagi jika ada error “Undefine” mungkin ada langkah anda yang salah, perhatikan dan ulangi lagi langkahnya.

Selamat mencoba.

Iklan

About djosave

3S (Simple, Sabar, Sayang)

2 responses »

  1. softwikia berkata:

    pas bgt aku lagi nyari yg kya gini

  2. pake herbal berkata:

    makasih udah mampir gan.
    semoga bermanfaat..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s