Cara merubah tampilan dan posisi tanggal di blog

Artikel kali ini saya akan coba bagikan cara merubah tampilan tanggal diblog dengan menambahkan kode css, serta merubah posisi tanggal ke bagian bawah judul posting atau bisa juga kita pindahkan ke sebelah kanan judul posting.

Seperti contoh gambar diatas, tampilan tanggal sudah saya 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 kode 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 agar tanggal terlihat.
• background-image: fungsinya untuk mengatur warna background tanggal
• box-shadow: warna bayangan diluar kotak tanggal.

---

Selanjutnya adalah menempatkan tanggal dibawah judul posting dengan posisi sebelah kanan, contohnya seperti gambar dibawah ini.

---

Cara membuatnya, ikuti langkah-langkah dibawah ini:

1. Login ke blogger, kepengaturan template. Klik edit HTML dan cari kode 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 kode yang sama dengan kode diatas, Cut atau potong kode yang pertama. Lalu pastekan di Notepad.
3. Selanjutnya cari kode <div class='post-header-line-1'/>. Setelah ketemu, pastekan kode 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 kode dari langkah 1 kebawahnya. Jangan lupa juga untuk mengatur kode css dari tampilan tanggalnya, seperti yang tertera di Keterangan kode. Khusus untuk kode float:right; jika kamu ingin menempatkan tanggal disebelah kiri dibawah judul posting. ganti kode float:right; dengan kode float:left;.

Semoga Bermanfaat.

Tweet