BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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.



 

Page views this post: reader

14 komentar:

Bu Noor's Diary said...

aku juga pernah coba pake figur tanggal seperti itu. trik-nya aku dapat dari kendhin, tapi hasilnya ngaco... mungkin ga cocok templatnya ya? yang ini perlu juga dicoba nih!... btw ditunggu oprekannya utk side fixed menu yang bisa tampil ciamik di IE.. hehehe
Tks..

JALOE said...

tentang side fixed menu.. setelah sy cek kepunyaan bapak ini hasilnya bagus di IE 7 dan FireFox

kalau IE 6 .. maaf bu.. browser Ie 6 emang susah beradaptasi

nurhayatuddin said...

Manteb oms :D, tak coba langsung di komputerku, suwun buanget tutorialnya :)

nurhayatuddin said...

maksudnya di blogku

Kristina DIAN Safitry said...

kok kayak orang ngetes kehamilan aja sih? ada laboratorium dan ada positif negatifnya. he.he..bang nyahoo nih ada ada aza deh..

Loedin said...

mantap.... semakin banyak referensi tutorialnya

enhal_84 said...

Thanks Kang..Udah Dicoba figuranya and suskes..hehehe jadi betah di sini, banyak yang keren and buat otak muter2 bagi saya yang pemula and semangat..

janganbacablog said...

Ilmu saya nambah lagi dengan baca artikel ini. Thanks ilmunya....

POO said...

Masihh LuM Muncul yahhh..Makasihh

chokichim said...

mas jaloee tipsnya emang is the best..!

Meubel dan Souvenir said...

thangyu.... udah dipraktekkan n berhasil

hero-business said...

nice info bro...

Admin said...

makasih atas infonya, sangat membantu
http://download-serba-gratis.blogspot.com/

Top 100 Music 2009 said...

Salam kenal gan..

sya ada 1 pertanyaan nih..,

Saya sudah berhasil Mengganti Tanggal Posting dg Icon Calender, tetapi kenapa di setiap posting saya tanggal postingnya sama..

Dan saya coba membuat posting baru, tetap saja tanggalnya tidak berubah…

Mohon pencerahannya

thanks,

Dewa

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial