TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Mengganti Tanggal Postingan Dengan Icon Kalender

Original by IFX Adrian | 26 November 2009 2 Comments

Setelah bertahun-tahun, bahkan berabad-abad melakukan penelitian di berbagai benua (lebai banget nih.. :$), akhirnya saya menemukan cara untuk mengganti tanggal postingan dengan icon kalender. Hmm.. Menarik juga nih Tapi apa fungsinya? Fungsinya ya supaya blog anda lebih ekspresif dan menarik tampilannya (huft, dodol banget sih, gitu aja nanya! :O ). Mau tau gimana caranya?

Berikut Cara Mengganti Tanggal Postingan Dengan Icon Kalender


1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML, lalu centang Expand Widget Templates. Jangan lupa backup dulu template anda. Bagi yang belum tahu cara backup template, klik disini.

3. Cari kode <title><data:blog.pageTitle/></title>, jika sudah paste kode berikut tepat dibawahnya:

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://tips-blogger-zacky.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>



4. Cari kode dibawah ini:

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



Atau

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



5. Jika sudah, paste kode berikut tepat di bawahnya:

.dateblock {
background: url("http://tipsbloggerzacky.googlecode.com/files/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://tipsbloggerzacky.googlecode.com/files/bluecalend.gif adalah url icon kalender. Anda bisa menggantinya sesuai keinginan.

Berikut icon calendar lain yang bisa anda gunakan:

greendcalend.gif orangecalend.gif pinkcalend.gif purplecalend.gif redcalend.gif yellowcalend.gif


Kode #3366CC adalah kode warna tanggal. Anda bisa menggantinya sesuai keinginan. Klik disini untuk melihat kode warna html.

6. Selanjutnya, cari kode <data:post.dateHeader/>, ganti kode tersebut dengan kode di bawah ini:

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



7. Terakhir, klik Save Template.

NB: JIka tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode padding: 4px 0px 0px 0px; dibawah kode .month { dan dibawah kode .day {.

Gimana? Pusing? Minum Bodrex..!!! Hehehe…

Selamat mencoba…

Jangan lupa kasih komentar ya…

Technorati token code: NDV3WYGM3DPB

Label:

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

2 komentar:

Arminapen Gayo 13 November 2012 00.54  

yakin usaha sendiri,,,hehehhe...nice info gan

Giribig.com 31 Mei 2015 12.10  

terima kasihbanyak atas ifonya sob
giribig.com
blog.giribig.com
duniagame.info
idcheat.com

Posting Komentar