Cara Membuat Date Header (Tanggal Posting) Tampil Gaya

Posted by : ahman " creativ" Minggu, 04 November 2012

Posted by cah ndeso kluthuk

Panduan dan Tutorial BloGGeR spesial :

Sesuatu yang baru belum tentu membuat orang tertarik, tetapi kalau hal baru itu menyangkut gaya penampilan blog pasti akan membuat blogger "kepingin untuk melihat. Bagaimana ? Seperti apa ? Benar nggak, sih ?! Cocok nggak, ya, buat blog ku ?! Hal-hal seperti itu sering atau bahkan pasti menjadi pertanyaan dalam hati setiap blogger.

Kalau biasanya tampilan date header hanya berupa teks memanjang yang menunjukkan tanggal, hari, dan bulan, maka dengan desain date header baru ini kita bisa mengatur seluruh komponen hari , tanggal atau jam dengan warna dan spesifikasi font yang berbeda tergantung selera blogger.

Desain date header baru memadukan KODE CSS dan javascript yang ditempatkan pada bagian head dan body serta sebuah background berbentuk gambar/image sebagai latar belakang yang dengan tujuan memberikan penampilan yang
mendekati/mirip dengan kalender sesungguhnya. Karena kalender ini mempunyai dimensi yang lumayan besar untuk sebuah date header, maka untuk menciptakan efisiensi dan penampilan yang seimbang pada bagian atas ruang posting, box kalender ini kita geser posisinya kearah kanan dan dibuat masuk ke bagian dalam (bawah). Apabila kamu menambahkan efek bounce menggunakan marquee untuk menciptakan efek animasi judul posting (lihat posting sebelumnya!), bentuk baru date header ini akan semakin terlihat cantik karena saat judul posting bergerak di ujung kanan maka box kalender akan terlewati (judul posting lewat di bagian box kalender).

Bentuk Date Header atau Kalender Posting Dilengkapi Efek Marquee :

Langkah untuk membuat Kalender Posting Model Baru :

1. Login ke Blogger.
2. Amankan Template. Caranya bisa kamu lihat
3. Tetap di Tata Letak.
4. KLIK Edit HTML.
5. Cari KODE ]]></b:skin> dan letakkan KODE CSS berikut di atasnya persis :

h2.date-header{
        margin:20px 0 -40px;
        float: right;
}     
#kalender {
        background:url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/BlankCalendarAnima-gubhugreyot.gif) no-repeat;
        font-family:Arial;
        display:block;
        margin-left:2px;
        padding-right:2px;
        text-align:center;
        width:64px;
        height:68px;
        line-height:0.8em;
}
.kalender_bulan{
        display:block;
        clear:both;      /* original code by: */
        color:#eefd00;   /* gubhugreyot.blogspot.com */ 
        font-size:7px;
        text-align:center;
        padding-top:8px;
}
.kalender_tanggal{
        display:block;
        font-size:35px;margin-top:8px;
        color:#282658;
        font-weight:bolder;
        padding-top:12px;
        text-align:center;
}
.kalender_tahun{
        display:block;
        font-size:8px;
        line-height:0.5em;
        padding-top:9px;
        color:#480002;
}

6. Cari KODE h2.date-header (bawaan template : di bagian atas !) dan hapus karena sudah kita ganti dengan yang baru.
7. Simpan javascript di bawah ini di antara KODE : </head> dan <body> , sehingga berbentuk seperti ini :

</head>

<script type="text/javascript">
function bgsGR_kalender(d){
var da = d.split(&#39; &#39;);
bulan = &quot;<div class='kalender_bulan'>&quot;+da[0]+&quot;</div>&quot;;
tanggal = &quot;<div class='kalender_tanggal'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;tahun = &quot;<div class='kalender_tahun'>&quot;+da[2]+&quot;</div>&quot;;
document.write(bulan+tanggal+tahun);}
</script>

<body>

8. KLIK Simpan Template.
9. KLIK Expand Template Widget.
10. Cari KODE :

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

11. Ganti dengan KODE berikut :

<b:if cond='data:post.dateHeader'>
<h2 align='right' class='date-header'><div id='kalender'><script>var gureykalender = &#39;<data:post.dateHeader/>&#39;;</script>
<script>bgsGR_kalender(&#39;<data:post.dateHeader/>&#39;);</script>
</div></h2>
<b:else/>
<h2 class='date-header'><div id='kalender'>
<script>bgsGR_kalender(&#39;<data:post.dateHeader/>&#39;);</script><script>bgsGR_kalender(gureykalender);</script></div></h2>
</b:if>

12. KLIK Simpan Template.
13. KLIK Pengaturan.
14. KLIK Format.
15. KLIK pada tanda pilih mode --> Format Header Tanggal (Date Header).
16. Pilih format header tanggal yang berbentuk : bulan tanggal, tahun (contoh --> Maret 19, 2010).
17. KLIK SIMPAN SETELAN.
18. Lihat Hasilnya dengan membuka blog !

Selamat beraktifitas dan selamat berkarya... Semoga blog anda semakin tampil gaya, padat, berisi dan tentu saja .... Semakin "MONTHOK"dan membuat semua pengunjung blog melirik ....!!!!
Hi ... he ... ho .... ha ....Uhuk.... Uhukkk Uhuk ... Thet !!!!