TIPS MENGGANTI FORMAT TANGGAL DENGAN ICON KALENDER

Dunia blogging dan seluk-beluk blogging, memang membuat kita tidak pernah puas. Ibarat orang kehausan meneguk air garam, semakin diminum justru semakin haus rasanya. Seperti ini pula yang terjadi pada diri saya. Sudah pasang ini, pasang itu, utak sana utik sini, bongkar sana-bongkar sini (asal jangan bongkar rumah orang ha...ha...ha), terasa masih ada saja yang kurang. Coba sahabat blogger perhatikan artikel ini, ada yang baru gak?, ada khan? he...he...he. Itu yang saya maksud dengan ketidakpuasan. Selalu saja muncul keinginan untuk mencari sesuatu yang baru untuk blog ini, yang dapat membuat hati ini tenang, tentram, mata teduh jika memandangnya (cihuuuui, suit-suit, puitis amir!!!). Apa ini yang disebut demam ngeblog ya?.

Kita lanjutkan sahabat!. Dari hasil walking-walking saya beberapa hari yang lalu (Bahasa Englandnya apa udah betul tuh? ), saya menemukan tips baru berupa asesoris untuk mempercantik blog, yaitu tips mengganti format tanggal posting dengan icon kalender (perhatikan icon yang terdapat di sebelah kanan judul posting ini). Tips ini saya temukan di blognya Mas Kendhin (numpang coba triknya ya mas!!!), seorang senior blogger Indonesia. Melalui artikel ini, saya ingin coba berbagi dengan sahabat sekalian, barangkali saja ada yang berminat mencobanya, yah...hitung-hitung sambil belajar bro.

Sekarang mari kita mulai. Sebagai langkah awal, silahkan login dulu ke blog sahabat (www.blogger.com). Setelah login, klik "pengaturan" atau "setting" (sama saja), kemudian klik "format". Temukan tulisan "format tangal header" (date header format), pilih format penulisan tangal seperti ini, "06.05.2009" (Tanggal hari ini), lalu klik "simpan pengaturan" (save setting).

Langkah kedua, klik "tata letak" (lay out) kemudian klik "Edit HTML". Beri tanda contreng pada kotak kecil dengan tulisan "Expand widget template" di sampingnya, tunggu beberapa saat sampai semua kode template blog muncul. Untuk menghindari hal-hal yang tidak diinginkan terhadap blog sahabat blogger, dari halaman template tekan "control A" lalu klik kanan mouse untuk mengkopi semua kode template tersebut, lalu paste pada notepad. Cara lain dapat dilakukan dengan download template ke komputer.

Langkah ketiga, kopi kode script di bawah ini :

<SCRIPT type='text/javascript'>
//<![CDATA[
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>

lalu paste tepat di bawah kode HTML berikut :

<title><data:blog.pageTitle/></title>

(Letak kode ini di bagian atas halaman template blog).

Langkah keempat, cari kode berikut :

h2.date-header {
background:none;
margin:1.5em 0 .5em;
border:0px;
font-size:80%;
color:#b33c3c;
font-style:normal;
}

(Biar cepat menemukan kode ini, tekan ctrl F, dan pada kotak yang bertuliskan "find", ketik kode "h.2date-header {").

Kopi dan paste kode berikut tepat di bawah kode di atas.

.dateblock {
background: url("http://kendhin.890m.com/kalender/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
right: 0;*/
float: right;
text-align: center;
}

.month {
font-size: 11px;
width: 34px;
margin-top:4px;
margin-bottom:3px;
margin-left:5px;
margin-right:5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 17px;
width: 35px;
margin: 0 5px;
}

Perlu saya jelaskan sedikit, bahwa kode ("http://kendhin.890m.com/kalender/bluecalend.gif"), adalah gambar icon kalender berwarna biru dengan latar belakang putih. Sahabat blogger dapat menggantinya jika ingin. Ada beberapa pilihan warna yang tersedia antara lain :

  • redcalend untuk warna merah

  • blackcalend untuk warna hitam

  • blue2calend untuk warna biru laut

  • greencalend untuk warna hijau

  • orangecalend untuk warna oranye

  • yellowcalend untuk warna kuning

  • pinkcalend untuk warna pink

Untuk mengganti warna sesuai dengan selera sahabat, ganti saja "bluecalend" dengan warna yang disukai.

Icon kalender sesuai dengan kode yang saya sampaikan di atas, akan tampil di sebelah kanan judul posting sebagaimana yang tampak pada artikel ini. Jika sahabat blogger menginginkan untuk ditampilkan di sebelah kiri, tulisan "right: 0;*/" dan "float: right;" silahkan ganti dengan "left".

Langkah kelima, cari kode ini, "<data:post.dateHeader/>" (gunakan ctrl F biar cepat), kemudian hapus, lalu kopi dan paste kode berikut :

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

menggantikan kode tadi. Simpan pengaturan, silahkan lihat hasilnya, dan tugas saya selesai. Agak rumit dan bikin mumet ya? he..he..he. Jadi sahabat, di sinilah seninya berkiprah dalam dunia blogging. Ada aturan tidak tertulis yang mengharuskan kita untuk mempelajari seluk-beluk blogging, dan untuk itu kadang-kadang menuntut pengorbanan. Minimal korban waktu dan rasa nyut-nyut di kepala karena saking rumit, ribet bin jelimet ha...ha...ha. Karena kepala saya juga mulai nyut-nyut, sampai di sini dulu deh, insya Allah jumpa lagi di kesempatan mendatang dengan episode yang lain (sinetron kale!!!). Selamat mencoba semoga sukses.

Baca juga artikel berikut :



Comments :

18 komentar to “TIPS MENGGANTI FORMAT TANGGAL DENGAN ICON KALENDER”

JengSri mengatakan...
on 

hehehe, udah tau bang ;).

S.BAHRY.B mengatakan...
on 

Baguslah kalau udah tau, saya memang hanya mau kasi tahu yang belum tahu!!!

Muhammad Alfiansyah mengatakan...
on 

Langsung di coba.. kalo sempet sih...

SRIE N' OEDHIEN mengatakan...
on 

wes...wes.. keren euy..

SRIE N' OEDHIEN mengatakan...
on 

wes...wes.. keren euy..

kolibri4info mengatakan...
on 

saya udah buat, seperti yang diarahkan, tapi judul dan tanggal g sejajar..mohon masukan bagaimana cara mensejajarkannya..barangkali melipat judul yang panjang... mhn cek blog sy pak..masih belajar..barangkali ada masukan dan usulan koreksi...tq info yang bermanfaat ini

Seti@wan Dirgant@Ra mengatakan...
on 

Nice info bro,... aku sudah coba. disini

Haniseh mengatakan...
on 

Ass...info yang keren mas..lanjutkan u/ saling berbagi dalam pengetahuan..walaupun banyak komentar yang gak enak..tapi ini lah dunia mya..bebas berekspresi.ok mas..bravo

Seri mengatakan...
on 

apa sesuai untuk templateku ya... aq coba dulu mas. terima kasih infonya.

GURU INDONESIA JADI KAYA mengatakan...
on 

saya coba terapkan diblog saya ya>>>

Wiwin mengatakan...
on 

thx infonya ya..

IKBANI mengatakan...
on 

nuhun pak...

Yupiter mengatakan...
on 

Semua informasi dalam blog ini sangat bermanfaat
Terima kasih pak atas infonya.

wiratmo eko jati mengatakan...
on 

saya mau coba tapi ko di find gak ada "data:post.dateHeader/" nya gimana ya ??? tolong bantuanya.... thank's::: momo-blogforall.blogspot.com

Ramlan mengatakan...
on 

mas fotonya sudah ngak ada di host, dan sudh ngak bisa, tolong di update neh info

Angga mengatakan...
on 

wah mas suwun terima kasih banyak tips-nya mantab..

linktea mengatakan...
on 

Siip sobatkebetulan lagi nyari nih.. btw.. kok link saya beum di add ya.. atau dah gak terima tukar link nih.. saya pasang linknya di daftar khusus blog dofollow dengan nama Media inspirasi lho..

Vega Aridani mengatakan...
on 

Bos Susah ndak bisa!tks

Posting Komentar

Template by - Abdul Munir | Daya Earth Blogger Template