Menambah Figura atau gambar icon dalam tanggal postingan

Saya pernah nulis tentang merubah atau menambah figura pada tanggal  yang posisinya bersebelahan dengan judul postingan.

tapi karena javascript-nya sudah tidak kompatible lagi dengan xml rilis baru. maka tulisan tersebut sudah lapuk dan tidak layak untuk di baca :).

Namun setelah bw sana sini, akhirnya saya menemukan tutorial baru lagi tentang menampilkan tanggal ini, dan setelah saya uji coba dalam laboratorium blogQu hasilnya menyimpulkan positif dan layak untuk di pakai. blog test.

Sedangkan tutorial ini saya dapatkan keterangannya dari blogU - bu anne, dan saya robah sedikit kode javascript-nya, karena saya mengiginkan format dd-mm. ( angka kemudian nama bulan.- binun nulis na. red).

Pertama : Merubah format tanggal.

Buka tab Pengaturan - Format. kemudian ganti formatnya menjadi yyy-mm-dd. ( ilustrasi gambar ).

Kemudia klin tombol Simpan Pengaturan.

 

Kedua: Mengecek Status tag dateheader.

Buka Tab Edit Html kemudian cari kode ini <data:post.dateHeader/> setelah ketemu jika kode na seperti ini.

<span class='date-header'><data:post.dateHeader/></span>

atau seperti ini.

<p class='date-header'><data:post.dateHeader/></p>

maka kudu di ganti dengan kode ini

<h2 class='date-header'><data:post.dateHeader/></h2>



 

Ketiga : Meletakan Tanggal di atas judul.

Catatan : jika blog kita menampilkan posisi tanggal-nya di atas judul langsung saja baca langkah keempat. Namun bagi yang posisinya tanggal-nya di bawah Judul saudara harus mengikuti langkah ketiga ini.

Pindahkan kode ini.

<b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

di bawah kode ini.

<data:adStart/>
    <b:loop values='data:posts' var='post'>
...... Letakan di sini.

 

Keempat: Memasuka javascript.

Kemudian masukan javascript ini, di atas tag penutup </head>

<!-- orangevolt calendar widget -->
<script src='http://jaloee.googlepages.com/fastinit.js'/>
<script src='http://jaloee.googlepages.com/prototype-1.5.0.js'/>
<script src='http://jaloee.googlepages.com/orangevolt-calendar.js'/>
<!-- end calendar widget -->

 

Kelima: Memasukan Kode Css.

Setelah itu masukan kode ini, di atas tag penutup ]]></b:skin>

/* Calendar ----------------------------------------------- */
span.cal {
background:#91190A;
border:#6F1307 1px solid;
float:left;
height:45px;
width:40px;
font-family:"Trebuchet MS",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-top:5px;
margin-right: 13px;
}
span.cal_month {
color:#fff;
display:block;
font-size:11px;
line-height:8px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:10px;
text-align:center;
text-transform:uppercase;
}

 

Setelah beres klik Simpan Perubahan.

Catatan dari Mr Nyahoo.

Jika ingin menampilkan tanggalnya di atas sebuah Icon.

maka yg kudu di ganti dan mendapatkan perhatian serius adalah di kode css ini.

span.cal {
background:#91190A;
border:#6F1307 1px solid;

menjadi

background:url ( url / alamat gam kamu ) no-repeat center;

dan border: delete saja.

height:45px;
width:40px;

sesuaikan nilai ukurannya dengan ukuran lebar dan tinggi gambar.

margin-top:5px;

terkadang kita perlu juga merubahnya.

Untuk donlot gambar icon-nya di sini.

Atau suka dengan gambar di bawah donlot di sini.

 

del.icio.us tags: Menambah Icon Kalender, Belajar New Blogger