Merubah Tampilan Tanggal Postingan

Pada tampilan default, setiap template niscaya menampilkan tanggal di dalamnya. Mengapa? Ya, lantaran 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 lezat dan nyaman untuk dilihat pembaca. Wa? Apakah ada caranya? Yup, tentu saja ada. So, yuk mari kita bahas bersama bagaimana cara gampang untuk membuatnya..

Pertama, masuk ke akun blogger kita.

Langkah Pertama.

Klik fitur rancangan.
Klik edit HTML.
Contreng expand template widget.
Cari instruksi berikut ini.

]]></b:skin>

Masukan instruksi berikut ini sempurna di atas instruksi 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 menciptakan postingan, pilih potongan edit HTML yang letaknya di sebelah compose.
Masukan instruksi HTML berikut di dalamnya.

<p class="calendar">7 <em>February</em></p>

Tulis isi postingan.
Publikasikan dan selesai.

Keterangan:

1. Sebelum melaksanakan editing instruksi HTML template selalu ingat untuk mendownload file template kita terlebih dahulu sebagai langkah antisipasi kalau sewaktu-waktu proses editing tersebut mengalami kegagalan yang merusak template.
2. Gunakan tombol Ctrl+F pada keyboard untuk mempermudah pencarian instruksi HTML yang ingin kita temukan.

Nah, bagaimana? Praktis bukan?
Mengingat langkah di atas masih berkutat dengan editing instruksi HTML template, maka sebaiknya kita harus hati-hati, jeli, dan teliti dalam melaksanakan editing. Mengapa? Ya, lantaran editing ini sangat rentan sekali terhadap kegagalan yang dapat menciptakan template blog menjadi rusak. Hal ini biasanya disebabkan oleh komponen instruksi 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!

Share this post