Modifikasi Tampilan Tanggal Posting Dengan CSS

Modifikasi Tampilan Tanggal Posting Dengan CSS - Tanggal posting merupakan salah satu keterangan yang patut ditampilkan dalam sebuah halaman post, untuk mengetahui seberapa lama atau baru posting tersebut diterbitkan, modifikasi tanggal posting bisa saja dengan background gambar ataupun dengan tampilan CSS yang sederhana.

Seperti halnya modifikasi Blog Pager, dalam hal ini modifikasi tanggal posting yang dilakukan dengan menggunakan CSS dengan bentuk yang sederhana dan css yang sederhana pula.

Tampilan memang menyesuaikan dengan pemakainya, tampilan yang akan share ini bisa kalian modifikasi sesuai dengan bentuk tampilan tanggal posting yang kalian sesuaikan dengan desain template yang sobat pergunakan, baik warna, bentuk dan penempatan tanggal posting.

Kurang lebih bentuk tampilannya seperti gambar diatas dan itu merupakan tampilan yang saya pergunakan dalam deZige sekarang ini (kalau belum dirubah).

✾✾✾

Langkah Modifikasi Tanggal Posting

1. Ganti

h2.date-header {

  ...

}

atau

.date-header {

  ...

}

dengan

h2.date-header {
  margin: 45px 10px 0 0;
  float:right;
  background:rgba(87, 87, 87, 0.2);
  border-radius:5px;
  font-weight: bold;
  width: 75px;
  height: 85px;
  text-align: center;
  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.date-header .bln {
  font-size: 16px;
  width: 75px;
  margin: 0 auto;
  padding: 3px 0;
  color: #666;
  background:rgba(87, 87, 87, 0.1);
  border-radius:5px 5px 0 0;
  text-shadow: 1px 1px 0px #BABABA;
  box-shadow:0px 2px 1px #9C9C9C, inset 0 2px 50px rgba(0, 0, 0, 0.2);
}
.date-header .hr {
  color:#fff;
  font-size: 40px;
  width: 75px;
  margin: 0 auto;
  text-shadow: 0px 1px 0px #000;padding-top:5px;
}

2. Letakan javascript dibawah ini diatas </head>

<script type='text/javascript'>
//<![CDATA[
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep', 'Oct','Nov','Dec'];
document.write("<div class='bln'>"+month[mon]+"</div> <div class='hr'>"+day+"</div>");
}
//]]>
</script>

3. Terakhir ganti HTML <data:post.dateHeader/> dengan

<h2 class='date-header'>
<script>date_replace(&#39;<data:post.dateHeader/>&#39;);</script>
</h2>

Sisanya, baik penempatan style dan ukuran bisa kalian modifikasi sesuai keinginan.

Semoga bermanfaat.