.jpg)
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 baian 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(' ');
bulan = "<div class='kalender_bulan'>"+da[0]+"</div>";
tanggal = "<div class='kalender_tanggal'>"+da[1].slice(0,3)+"</div>";tahun = "<div class='kalender_tahun'>"+da[2]+"</div>";
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 = '<data:post.dateHeader/>';</script> <script>bgsGR_kalender('<data:post.dateHeader/>');</script> </div></h2> <b:else/> <h2 class='date-header'><div id='kalender'> <script>bgsGR_kalender('<data:post.dateHeader/>');</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 !!!!
Oh..., ya .., Sampeyan dapat juga membuat tampilan tanggal posting dalam bentuk yang tak jauh berbeda dengan date header di atas melalui cara yang berbeda. Silahkan KLIK link di bawah ini untuk baca tutorialnya!
Tutorial Membuat Tanggal Posting Dalam Bentuk Icon Kalender
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
Bos ini tanggal bulan tahun nya g update sendiri ya.... aku bisa tapi kok tanggalnya updatenya manual?
BalasHapusdan kok malah g keluar tanggalnya di kalendernya bos... coba liat deh blog saya bos.... tuh g nongol tanggalannya.... Yang di edit yang di "head" atau yang di " b:if cond='data:post.dateHeader "posisinya dimana bos?
BalasHapusUdah saya Setting Formating Date... belum juga muncul bos. Mohon bimbingannya.... Ckckckck Lagi puasa Nih ane Bos... Pusing amat ane dibikin nih script.... HAaaaa TApi Ane 2 Jempol Tangan + 2 Jempol yang lain nih buat Thread nya..... mantaaaap!!!
BalasHapusAlhamdulillah...
BalasHapusBegitu lama saya mencari tutorial yang pas dengan template saya.
banyak tutorial sudah saya lahap,tapi tak juga menemukan solusi.
Thanks a lot & maju terus "GUBHUGREYOT"
akhirnya... sya berhasil membuatnya, tapi bisa ga kasi solusi agar judul postingannya ada disamping icon kalender tersebut, seperti yang diatas, disamping tgl 19 ada kata2 cara membuat postingan header.. mohon bantuannya
BalasHapusbos
BalasHapuskalo digunakan di cms balitbang bisa ga.. kalo bisa, gmana caranya..
bos
BalasHapuskalo digunakan di cms balitbang bisa ga.. kalo bisa, gmana caranya.. thanks ya
aa.nain@yahoo.co.id
masih belum berhasil
BalasHapusterima kasih ilmunya mas, salam blogger....
BalasHapuskunjung balik mas, http://infosemuahal.blogspot.com/
masih cupu sayanya hehehe...
kasih saran dan masukannya ya mas untuk blog aku :D
Trima Kasih
BalasHapustrims gan.... begitu banyak script yang saya cari, ternyata disini saya baru menemukan kode yang pas.... salam.....
BalasHapusgan, cara buat tulisan berita berjalan kayak di blog ini (bagian atas) itu gimana yak?
BalasHapusterima kasih taas tutorialnya. salam kenal dari kami menyediakan jasa travel adn tour biro perjalanan ibadah ke tanah suci mekkah Arwaniyyah Tour & Travel.
BalasHapusmemang mantap nih tipsnya kawan..
BalasHapushttp://aromaessen.com
matur nuwun, mampir ya
BalasHapushttp://www.javanesetrans.com