Cara Membuat Tanggal Posting Keren

Cara Membuat Tanggal Posting Keren

3 Comments

21 April
Membuat kalender di blog mempunyai banyak variasi untuk memberikan tampilan yang menarik. Salah satunya membuat tampilan kalender pada posting atau tanggal posting. Mungkin ini akan memberikan daya tarik tersendiri pada posting anda, dan cara membuat tanggal pada posting anda dapat anda pelajari dengan mudah. Ok gan langsung saja...silahkan ikuti langkah berikut ini.



Log in ke blog anda
Klik Rancangan


Klik Edit HTML


Masukkan kode berikut di atas kode ]]></b:skin> lalu Simpan Template

.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;}   

Ketika anda ingin memposting artikel masuk ke Edit HTML, klik pojok kanan atas di area posting (samping Compose). Masukkan kode berikut ke dalamnya.
<p class="calendar">7 <em>February</em></p>
Setelah itu silahkan tulis artikel anda seperti biasanya. Jangan lupa Terbitkan Entry. Yuuuuhhhhuuuuuuu...anda sudah memiliki tanggal keren yang terselip di artikel anda. Selamat mencoba dan sukses selalu.


"keep spirits and do the best"
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.