Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Sorry postingan ini memang sudah lama mau kian buat hanya saja banyak sekali kendala yang kian hadapi mungkin juga bukan sekarang waktu yang tepat abis capek bgt nih..pulang kerja..

sperti judul yang kian buat kali ini kita akan membahas tentang cara membuat "tanggal postingan Animasi", yang sedikit mengadopsi pola kode javascript..

Ok untuk memulainya kamu set terlebih dahulu settingan tanggal blog kamu kedalam format "dd.mm.yyyy" atau "hari.bulan.tahun /07.07.2009" contohnya. Nah kalau sudah selesai hal yang harus kamu lakukan adalah tinggal buka menu "Layouts" kemudian pilih "Edit HTML"..

Selanjutnya cari kode berikut <title><data:blog.pageTitle/></title> dan letakkan kode dibawah ini tepat diatas kode yang tadi :
<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://kianhome.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>
selanjutnya cari lagi kode berikut :
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
ganti kode diatas dengan kode berikut :
.dateblock {
background: url("http://kendhin.890m.com/kalender/redcalend.gif")
no-repeat;
width: 55px;
padding:0px 0px 10px 0px;
margin: 0 ;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0px;
left: 0;*/
float: right;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#d53030;
font-size: 19px;
width: 37px;
margin: 0 5px;
}
perhatikan kode : http://kendhin.890m.com/kalender/redcalend.gif
, kode ini merupakan kode untuk gambar kalendernya. kamu bisa merubahnya dengan gambar dan pola warna yang kamu sukai dengan memilih pada gambar-gambar dibawah ini :
dengan cara merubah nama warnanya, contoh pada kata "redcalend.gif", kata "red" pada kata "redcalend.gif"
menunjukkan warna merah, jadi kamu bisa menggantinya dengan warna yang kamu inginkan,seperti :"green untuk hijau, black untuk hitam, dll"

selanjutnya kamu tinggal mencari kode berikut : <data:post.dateHeader/> dan ganti dengan kode dibawah ini :
<div class='dateblock'>
<SCRIPT>date_replace(&#39;<data:post.dateHeader/>&#39;);
</SCRIPT></div>
kemudian simpan deh...
nb: jika tulisan bulan dan tanggalnya terlalu keatas atau kebawah kamu tinggal tambahkan kode berikut : padding: 4px 0px 0px 0px; diantara kode .month{ dan kode .day{

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

3 Response to "Cara membuat Tanggal Animasi"

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |