Mengganti Gaya Tanggal Postingan Blog Seperti Kalender

Gaya tanggal seperti kalender yang saya bagikan kali ini memang sangat sering ditemui di beberapa postingan pada platform Wodpress, tetapi untuk blogger sendiri tidak gampang karena harus menambahkan beberapa kode-kode pada Edit HTML dan beberapa pengaturan lainnya.

Untuk gaya kalender yang akan saya bagikan akan tertera atau muncul disamping kanan postingan anda, kalender tersebut akan memunculkan tanggal, bulan sampai tahun pembuatan postingan pada blog yang akan dipasang widget kalender ini.

DEMO

Untuk menerapkan pada blog anda, silahkan ikuti cara-caranya dibawah ini...

1. Buka Dashboard -> Setelan -> Bahasa dan pemformatan
2. Pada Format Header Tanggal, ganti pengaturannya seperti screenshot yang dibawah ini.

3. Klik Simpan Setelan

4. Buka Template -> Edit HTML.
5. Cari kode <h2 class='date-header'><span><data:post.dateHeader/></span></h2> pada halaman kode template. (lebih mudah gunakan CTRL+F)

 Baca Juga:

• Cara Membuat Drop Caps (Huruf Besar Pertama) Di Postingan Blog
• Cara Menampilkan Gambar Hanya Pada Homepage

6. Ganti kode tersebut dengan kode dibawah ini

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Apabila kode <h2 class='date-header'><span><data:post.dateHeader/></span></h2> ada dua, silahkan ganti kedua kode tersebut.

7. Sekarang cari kode </head>
8. Copy kode dibawah ini dan paste kode tersebut di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7qislRVDLg5yVudICXQJFkL2RUUS8u5hVGHu7qmraHTISN7EHk-M55KKHFgd-0z15wrLGEiY9hVqC0Evcu4ffuC29rZsZpfW7jXTd1j4D803XZqMkkBx6NHhz1uGZ-ZlxhGgMEKJ4lgtv/s1600/Calendar+www.caralogger.blogspot.com.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px -40px -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Untuk warna bulan */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Untuk warna tanggal */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Untuk warna tahun */
}
</style>
</b:if>

Note:
Ganti kode berwarna merah untuk mengganti gaya backgroud kalender
Ganti kode berwarna biru untuk mengganti warna dari bulan, tanggal, dan juga tahun dengan warna selera anda menggunakan kode warna HTML.

9. Simpan

Sekarang silahkan anda cek apakah kode tersebut berhasil bekerja dengan sempurna, apabila ada permasalahan silahkan berkomentar dibawah.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn