Iklan

Penataan ulang

Sedang dalam penataan ulang. Silahkan nikmati dan bila ada yang kurang berkenan mohon maaf!

Merubah Tanggal Posting dalam Bentuk Icon Kalender

Membuat blog menjadi lebih menarik merupakan kesibukan besar blogger selain aktivitas posting yang sangat menyita waktu, energy dan terutama otak. Banyak cara dilakukan untuk membuat blog terlihat semakin indah dan menarik, dimana salah satunya adalah dengan membuat tanggal posting terlihat bagai sebuah kalender meja dalam ukuran mini (Lihat di sebelah kiri judul posting!). Membuat wajah baru seperti ini dapat dilakukan dengan beberapa cara, namun dari sekian banyak yang termudah adalah dengan cara yang akan tersampaikan di bawah. Tidak banyak kode dan javascript serta kode HTML yang harus digunakan. Pemasangan dan penyimpanannyapun sangatlah simple. Perubahan yang penting dan menjadi keharusan yang harus dilakukan, selain penambahan kode adalah perubahan format tanggal posting. Format tanggal posting ini sekaligus akan menjadi penentu muncul tidaknya desain tanggal posting dalam bentuk icon kalender yang kita buat. Agar tutorial ini lebih mudah dipahami, terlebih dahulu kita akan memulai dari cara pemasangan dan penyimpanan kode yang nantinya akan kita pergunakan.

Langkah untuk Merubah Tampilan Tanggal Posting

  • Lakukan login terlebih dahulu untuk mempercepat proses pembuatan bentuk tanggal posting yang baru.
    • Tulis User Alamat Email (Email Address).
    • Tulis Password.
    • KLIK "LOGIN"
  • KLIK "DESIGN/RANCANGAN".
  • KLIK "EDIT HTML".
  • KLIK "Download Template Lengkap" untuk melakukan proses BACK-UP Templates.
    • Simpan file template di folder PC. Berikan nama yang berkaitan dengan saat perubahan desain dilakukan (contoh: dec10) untuk memudahkan saat file ini diperlukan kembali.
    • Setelah proses penyimpanan file template silahkan tetap di "EDIT HTML".
    • KLIK "Expan Widget Templates".
  • Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode.
    • Setelah anda klik Ctrl+F secara bersamaan, copy-paste kode ]]></b:skin> dalam box pencarian.
    • KLIK "Find".
  • Simpan javascript di bawah kode ]]></b:skin> dan Kode CSS di atas kode ]]></b:skin>.
  • Lanjutkan dengan mencari kode <data:post.dateHeader/> dengan cara seperti saat mencari ]]></b:skin>, kemudian ganti kode tersebut dengan xHTML yang baru (disertakan di bawah!).
  • KLIK "SAVE Templates (Simpan Templates)".

Javascript


]]></b:skin>

<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>

Kode CSS


h2.date-header{
margin:1.5em .5em 0.5em;
}
.kalender{
background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/bgGreenCalendarAnima.gif) no-repeat;
width:44px;
margin:20px 10px 0 8px;
float:left;
font-weight:bold;
height:52px;
text-align:center;
border:1px solid #777;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
opacity:0.8;
-o-transition:all ease-in 1s;
-moz-transition:all ease-in 1s;
-webkit-transition:all ease-in 1s;
filter:alpha(opacity=80);
padding:1px;
}
.kalender:hover{
filter:alpha(opacity=100);
opacity:1.0;
border-color:red;
}
.month{
font-size:10px;
width:33px;
margin:3px 2px 0 6px;
text-transform:uppercase;
color:#4d010a;
padding: 2px 0px 0px 0px;
}
.day{
color:#555;
font-size:27px;
width:44px;
margin:0;padding:0;
}

]]></b:skin>

xHTML


<div class='kalender'>
<script type='text/javascript'>
date_replace(&#39;<data:post.dateHeader/>&#39;);
</script>
</div>


Setelah semua proses selesai, lakukan perubahan format tanggal posting ke bentuk bulan.tanggal.tahun (contoh: 12.22.2010).
  • KLIK "SETTINGS" (Pengaturan).
  • KLIK "FORMAT".
  • Lihat "Format Header Tanggal".
  • Rubah format tanggal sesuai contoh di atas.
  • KLIK "SAVE (Simpan).
  • Buka blog dan lihat hasilnya!


Tutorial Lain


Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

1 18 komentar:

wahyudinasti said...

he...he....terimakasih pak atas kunjungannya ke blog saya.
saya banyak belajar dari tutorial blog bapak,lugas,singkat dan jelas.
dan terimakasih atas kemudahan ilmu yang bapak sampaikan.
cuma saya ada lagi yang bikin saya pusing...dan mohom solusinya..he.he.he
1.menghapus navbar,agar benar benar hilang...?
2.setiap kali buka blog saya,dan di klik dimana aja,langsung membuka tab baru yang
nge link ke group facebook,padahal saya belum pernah memasukan link group tersebut,,?
bagaimana menghapus link tsb..?
mohon solusinya...
ngemis lagi deh...hehehe..
salam blogger dan terimakasih....

Ummu Yafi said...

makasih banyak Pak, melalui blog Bapak saya jadi bisa buat blog, walaupun sangat sederhana sekali, maklum baru belajar.Makasih banyak

Jeff is Jefferson said...

Terimakasih infonya mas.. Blognya sangat bagus & menarik.. Sukses selalu.. :)

Arya Bakti said...

Wah bagus ni buat tambah daftar di memory otak

Unknown said...

bagus banget . . sudah tak coba dan mantaaab hasilnya . .

bennu said...

Salam Pak, maaf sy pemula pingin belajar buat blog juga..ijin share ilmunya. trimakasih sebelumnya

Unknown said...

SUPPEERRR

MustBhagoezt said...

infonya boleh juga ni pak... :D

kebetulan saya punya info tentang harta karun... mampir ya pak :D

Unknown said...

infonya mantap pak..

kebetulan saya juga suka kotak katik yg ginian..

mari bertukar pikiran di blog saya di

Photoshop TutorialTips BlogHitsuke

Unknown said...

Thanks Info NYan Sob.........?

Indonesia Baru said...

bagus banget mas blognya, sayang kodenya gak ada diblog saya sperti panduannya, klo bisa mohon bantuannya. bisnis-noscam.blogspot.com

EDHO said...

nice.....gw suka....

Hertzer said...

kok gak jadi ya..
silakan kunjungi http://hertzer-zone.blogspot.com/

D'britau Terus Tau said...

keren pak blognya kereatif buat tutorial untuk nampilin gambar automatis diatas postingan

D'britau Terus Tau said...
This comment has been removed by the author.
D'britau Terus Tau said...

data kode post yang akan diganti dengan xhtml ga ada

I Gusti Bagus Sudiantara said...

terima kasih tutorialnya Pak, akan saya coba praktekkan.

Unknown said...

terima kasih telah berbagi..
aku suka postingan ini

Post a Comment

 

ujung bawah

gubhug reyot
Add to Technorati Favorites
Search Engine Optimization SEO