Cara Merubah Tampilan Dan Posisi Tanggal Di Blog

Artikel kali ini aku akan coba bagikan cara merubah tampilan tanggal diblog dengan menambahkan arahan css, serta merubah posisi tanggal ke bab bawah judul posting atau dapat juga kita pindahkan ke sebelah kanan judul posting.

Seperti pola gambar diatas, tampilan tanggal sudah aku modifikasi jadi berwarna putih dengan background warna biru, serta posisinya yang berada disebelah kanan judul posting blog. Cara membuatnya, ikuti langkah² dibawah ini.

1. Login ke blogger, ke pengaturan tata letak > desainer template > tingkat lanjut > tambahkan Css. Lalu masukan arahan ini kedalamnya.
h2.date-header{
margin:3px 0px 0px 0px;
float: right;
z-index: 99;
background-image: -moz-linear-gradient(center top , #107cde 40%, #004d94 100%);
box-shadow:0px 10px 10px #aaaaaa;}
2. Terapkan ke blog, selesai.

Keterangan kode:

• margin: untuk mengatur spasi atas(3px) kanan(0px) bawah(0px) kiri(0px) tanggal.
• float: right; menempatkan tanggal diposisi kanan sebelah judul posting.
• z-index: 99; gunanya semoga tanggal terlihat.
• background-image: fungsinya untuk mengatur warna background tanggal
• box-shadow: warna bayangan diluar kotak tanggal.

---

Selanjutnya yakni menempatkan tanggal dibawah judul posting dengan posisi sebelah kanan, misalnya ibarat gambar dibawah ini.

---

Cara membuatnya, ikuti langkah-langkah dibawah ini:

1. Login ke blogger, kepengaturan template. Klik edit HTML dan cari arahan dibawah ini.
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
2. Kamu akan menemukan 3 arahan yang sama dengan arahan diatas, Cut atau potong arahan yang pertama. Lalu pastekan di Notepad.
3. Selanjutnya cari arahan <div class='post-header-line-1'/>. Setelah ketemu, pastekan arahan dari langkah 1 tadi ke bawah <div class='post-header-line-1'/>.
4. Save template Selesai.

Catatan: ada 2 kode <div class='post-header-line-1'/> yang ada ditemplate, pilih yang kedua. Lalu pastekan arahan dari langkah 1 kebawahnya. Jangan lupa juga untuk mengatur arahan css dari tampilan tanggalnya, ibarat yang tertera di Keterangan kode. Khusus untuk arahan float:right; bila kau ingin menempatkan tanggal disebelah kiri dibawah judul posting. ganti arahan float:right; dengan arahan float:left;.

Semoga Bermanfaat.