..:::!!!!! Selamat Datang !!!!!:::..Hello all_Friends ::::: Nur Rohman Share® !!!!...Mitra Bisnis Pulsa Elektrik Termurah...!!! Download Software | Tutorial Blog | Pusat Servis Computer dan Servis HP CONTACT-085789915222 & EMAIL- (si_owner@yahoo.com)

Merubah Tanggal Posting dalam Bentuk Icon Kalender

Sunday, June 10, 2012 | Nur Rohman | 0 komentar
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.
  • 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!

SELAMAT MENCOBA..... Semoga berhasil...


    Merubah Tanggal Posting dalam Bentuk Icon Kalender Reviewed by Nur Rohman on Sunday, June 10, 2012 Rating: 4.5
    Share on: Twitter, Facebook, Delicious, Digg, Reddit

    Ditulis Oleh : Nur Rohman ~ Tips dan Trik Blogspot

    Christian angkouw Artikel Merubah Tanggal Posting dalam Bentuk Icon Kalender ini ditulis oleh Nur Rohman pada hari Sunday, June 10, 2012. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Merubah Tanggal Posting dalam Bentuk Icon Kalender dapat Anda sampaikan melalui kotak komentar dibawah ini. Bagi Shobat yang ingin mengcopy paste atau menyebar-luaskan artikel ini, tolong letakkan link dibawah ini sebagai sumbernya

    :: Get this widget ! ::

    0 komentar:

    Trimakasih atas kunjungan anda.. Blog ini Dofollow) Silahkan menaruh kritik dan saran pada kotak komentar ini, asal tidak SPAM dan bagi yang mencantumkan link, akan terhapus otomatis.