Posted byTeacher's MessagePada postingan kali ini Education for all akan memposting sebuah artikel yang cukup manis, yaitu tentang Cara Memodifikasi Tanggal Posting 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.
Nah, untuk contohnya silahkan sobat blogger mania pemula seperti saya ini melihat tampilanya diatas. itu lho yang disamping judul postingan, kerenkan. nah perlu juga sobat blogger mania ketahui bahwa sang inspirator tanggal header tersebut adalah cah dheso klutuk, tentunya sobat blogger mania tahukan, siapa lagi kalau bukan si ghubuk reyot nah untuk membuatnyapun tidak terlalu sulit. sobat blogger mania cukup mengikuti langkah-langkah berikut dibawah ini.
1. Login ke Blogger.
2. Amankan Template. untuk berjaga-jaga kalau kalau template tidak bisa diparse
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(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/BlankCalendarAnima.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; /* fajar7siblings.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;
}
margin:20px 0 -40px;
float: right;
}
#kalender {
background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/BlankCalendarAnima.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; /* fajar7siblings.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
7. Simpan javascript di bawah ini di antara KODE : </head> dan <body> , sehingga berbentuk
seperti dibawah ini
8. KLIK Simpan Template.</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>
<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>
9. KLIK Expand Template Widget.
10. Cari KODE :
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<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>
<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
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
Demikianlah sementara yang bisa EFA postingkan pada kesempatan ini, tetap semangat dan terus berkreasi,,..
The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :
» Selamat Berkreasi - E F A «
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
ReplyDeleteatur saja pada bagia yang ini gan...
ReplyDeleteh2.date-header {
margin:20px 0 -40px;
float: right;}
Margin, dirubah jadi 0px dan -40px dirubah jadi 0
float: right dirubah jadi float:left:}
begitu aja...