Pada tampilan default, setiap template pasti menampilkan tanggal di dalamnya. Mengapa? Ya, karena tanggal merupakan salah satu unsur yang harus ditampilkan untuk mengetahui seberapa rutinkah blog kita tersebut diupdate. Jika kita malas update blog dan tidak ingin rutinitas update ini diketahui secara tersurat, maka
menyembunyikan tanggal postingan merupakan sebuah pilihan yang jitu.
Pada postingan kali ini kita akan membahas mengenai bagaimana cara
menampilkan tanggal postingan blog yang menarik sehingga enak dan nyaman untuk dilihat pembaca. Wa? Apakah ada caranya? Yup, tentu saja ada. So, yuk mari kita bahas bersama bagaimana cara mudah untuk membuatnya..
Pertama, masuk ke akun blogger kita.
Langkah Pertama.
Klik fitur rancangan.
Klik edit HTML.
Contreng expand template widget.
Cari kode berikut ini.
]]></b:skin>
Masukan kode berikut ini tepat di atas kode yang tadi.
.calendar{
margin:.25em 10px 10px 0;
padding-top:5px;
float:left;
width:80px;
background:#ededef;
background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
background: -moz-linear-gradient(top, #ededef, #ccc);
font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
text-shadow:#fff 0 1px 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
position:relative;
-moz-box-shadow:0 2px 2px #888;
-webkit-box-shadow:0 2px 2px #888;
box-shadow:0 2px 2px #888;
}
.calendar em{
display:block;
font:normal bold 11px/30px Arial, Helvetica, sans-serif;
color:#fff;
text-shadow:#00365a 0 -1px 0;
background:#04599a;
background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));
background:-moz-linear-gradient(top, #04599a, #00365a);
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
border-top:1px solid #00365a;
}
.calendar:before, .calendar:after{
content:'';
float:left;
position:absolute;
top:5px;
width:8px;
height:8px;
background:#111;
z-index:1;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 1px 1px #fff;
-webkit-box-shadow:0 1px 1px #fff;
box-shadow:0 1px 1px #fff;
}
.calendar:before{left:11px;}
.calendar:after{right:11px;}
.calendar em:before, .calendar em:after{
content:'';
float:left;
position:absolute;
top:-5px;
width:4px;
height:14px;
background:#dadada;
background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
background:-moz-linear-gradient(top, #f1f1f1, #aaa);
z-index:2;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.calendar em:before{left:13px;}
.calendar em:after{right:13px;}
Klik simpan template.
Langkah Kedua.
Saat kita hendak membuat postingan, pilih bagian edit HTML yang letaknya di sebelah compose.
Masukan kode HTML berikut di dalamnya.
<p class="calendar">7 <em>February</em></p>
Tulis isi postingan.
Publikasikan dan selesai.
Keterangan:
- Sebelum melakukan editing kode HTML template selalu ingat untuk mendownload file template kita terlebih dahulu sebagai langkah antisipasi jika sewaktu-waktu proses editing tersebut mengalami kegagalan yang merusak template.
- Gunakan tombol Ctrl+F pada keyboard untuk mempermudah pencarian kode HTML yang ingin kita temukan.
Nah, bagaimana? Mudah bukan?
Mengingat langkah di atas masih berkutat dengan editing kode HTML template, maka sebaiknya kita harus hati-hati, jeli, dan teliti dalam melakukan editing. Mengapa? Ya, karena editing ini sangat rentan sekali terhadap kegagalan yang bisa membuat template blog menjadi rusak. Hal ini biasanya disebabkan oleh komponen kode HTML dalam blog kita yang masing-masing berbeda. So, be careful!
Ada yang ingin bertanya? Ada yang ingin menanggapi?
Kalau ada silakan disampaikan lewat kotak komentar di bawah ini ya kawan..
Salam blogger!
Terimakasih anda telah membaca artikel tentang Merubah Tampilan Tanggal Postingan. Jika ingin menduplikasi artikel ini diharapkan anda untuk mencantumkan link https://kodebisnis0.blogspot.com/2011/05/merubah-tampilan-tanggal-postingan.html. Terimakasih atas perhatiannya.