Cara Membuat Tanggal, Hari dan Tahun Bergaya di Blogger

Cara Membuat Tanggal, Hari dan Tahun Bergaya di Blogger

Hal ini dapat menjadi tambahan yang keren untuk blog Anda yang dapat dengan mudah disesuaikan dengan tata letak dan desainnya. Apa yang akan kita lakukan dalam tutorial ini adalah untuk mengubah warna latar belakang Header Blogger dengan beberapa penyesuaian CSS sederhana yang akan membuat float tanggal header pada sisi kiri posting Anda dan sebagian  seperti spanduk dengan tampilan warna.

Berikut Cara Membuat Tanggal, Hari, Tahun Bergaya di Blogger 

Langkah 1.Masuk akun Blogger Anda  dan pergi ke Template > Edit HTML

Langkah 2. Klik di mana saja di dalam area kode dan pencarian (CTRL + F) untuk kode berikut:

.date-header span

Di bawah kode ini Anda akan melihat beberapa baris seperti ini:

.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

Langkah 3. Anda akan harus mengganti kode di atas dengan yang satu ini:

Klik Untuk Melihat Code

.date-header {
margin: 0px 0px -50px -190px;
}
.date-header span {
background-color: #DDEDAA;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px solid #bada55;
}
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px solid #FFBD54;
border-radius: 100%;
bottom: -50px;
content: "";
display: block;
height: 30px;
position: absolute;
width: 30px;
z-index: 10;
margin-left: 140px;
}
.date-header:after {
background: none repeat scroll 0 0 #F9F9F9;
border: 7px solid #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;
}

Cara Menyesuaikan Date Header

 

Untuk Mengubah:

- Warna latar belakang, ganti #DDEDAA kode hex warna Anda.

- Warna font, ganti # 444.

- Warna perbatasan lingkaran besar di bawah header tanggal, ganti # FFBD54.

- Warna perbatasan lingkaran hijau, ganti # bada55.

- Jarak antara tanggal dan pos, mengubah nilai -190px dari margin-left.

Langkah 4. Klik tombol "Simpan template" untuk menyimpan perubahan. Itu dia!.

Sekarang Anda telah menerapkan gaya baru untuk header tanggal posting Blogger Anda. Harap dicatat bahwa kode bervariasi dari template untuk template dan jika Anda memiliki template bawaan, mungkin ada CSS pemilih yang berbeda untuk header date.