Posted by : ahman " creativ" Minggu, 14 April 2013

Posting ini akan bahas bagaimana sobat dapat mengubah tanggal posting menjadi icon kalender. Trik yang satu ini lumayan panjang cara kerjanya namun jika ingin tau bagaimana cara membuatnya berikut adalah langkahnya....

1. Masuk ke Pengaturan klik Format
2. Klik pada kotak drop down dan ganti formatnya bulan.hari.tahun (mm.dd.yyyy)
3. Simpan hasilnya
4. Masuk ke Rancangan dan pilih Edit Html
5. Klik Expand widget template dan backup template sobat.

6. Kopi kode dibawah ini lalu letakkan diatas kode </head>
<!-- Kalender Icon Blogtrikdantips -->
<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>
7. Cari kode seperti ini .date-header kalau tidak ada, coba cari kode h2.date-header {
8. Kalau udah ketemu letakan kode ini dibawahnya
/* ------ Kalender Icon Blogtrikdantips ----- */
.dateblock {
background: url("http://i647.photobucket.com/albums/uu191/ariamsi/Icon/bluecalend3.gif") no-repeat;
margin: 0 10px 0 0;
font-weight: bold;
width: 33px;
height: 36px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 8px;
width: 34px;
margin: 0 auto;
padding-top: 2px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 12px;
width: 34px;
margin: 0 auto;
padding-top: 2px;
}
11. Kode http://i647.photobucket.com/albums/uu191/ariamsi/Icon/bluecalend3.gif adalah gambar icon kalender sedangkan kode berwarna merah adalah kode warna tanggal, sobat bisa ganti dengan warna yang lain. Untuk mengubah kalender ganti url gambar dengan akhiran kode seperti dibawah ini:

greencalend3.gifyellowcalend3.giforangecalend3.gif
pinkcalend3.gifungucalend3.gifredcalend3.gif

12. Langkah terakhir yaitu sobat cari kode ini <data:post.dateHeader/> dan hapus kode tersebut lalu ganti dengan kode dibawah ini:
<div class='dateblock'>
<script>date_replace('<data:post.dateHeader/>');</script>
</div>
13. Simpan template sobat lalu lihat hasilnya
Selamat mencoba!!!!

Leave a Reply

Subscribe to Posts | Subscribe to Comments

TransLate

!!TRANSLATE !!
English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Translate sobat !

Cari Aja Disini Sobat !!

Loading...
Cara membuat ini

blog sobat !!!

Total Tayangan Halaman

"Ahmancreativ77.blogspot.com". Diberdayakan oleh Blogger.

recent comment

- Copyright © Berbagi Tips Dan Trik -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -