Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat Date Header (Tanggal Posting) Tampil Gaya

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 :

Judul Posting

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(&#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 !!!!

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 «

13 komentar:

  1. Bos ini tanggal bulan tahun nya g update sendiri ya.... aku bisa tapi kok tanggalnya updatenya manual?

    BalasHapus
  2. dan 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?

    BalasHapus
  3. Udah 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!!!

    BalasHapus
  4. 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

    BalasHapus
  5. bos
    kalo digunakan di cms balitbang bisa ga.. kalo bisa, gmana caranya..

    BalasHapus
  6. bos
    kalo digunakan di cms balitbang bisa ga.. kalo bisa, gmana caranya.. thanks ya

    aa.nain@yahoo.co.id

    BalasHapus
  7. terima kasih ilmunya mas, salam blogger....
    kunjung balik mas, http://infosemuahal.blogspot.com/
    masih cupu sayanya hehehe...

    kasih saran dan masukannya ya mas untuk blog aku :D

    BalasHapus
  8. trims gan.... begitu banyak script yang saya cari, ternyata disini saya baru menemukan kode yang pas.... salam.....

    BalasHapus
  9. gan, cara buat tulisan berita berjalan kayak di blog ini (bagian atas) itu gimana yak?

    BalasHapus

 
GR | Edited by | gubhug reyot