Cara Merubah Style Blog Post Date Header


Inspirasi ini diperoleh dari hasil eksperimen CSSTEXT SHADOW yang juga diterapkan pada blog. Efek TEXT SHADOW agak unik juga jika anda dapat membuatnya lebih kreatif lagi. Untuk merubah Date Header ini hanya menambahkan CSS didalamnya. Tampilan Date Header secara default berada disebelah kiri. Anda dapat memposisikannya di kiri atau kanan.

Anda dapat mengeditnya dengan masuk ke Template -> Costumize -> Advanced -> Add CSS. Cara yang lainnya adalah dengan mengedit htmlnya. Yang akan anda lakukan adalah:

Langkah 1:
Login ke BLOGGER DASHBOARD -> Template -> Edit Html.

Langkah 2:
Backup terlebih dahulu template anda.

Langkah 3:
Scroll kebawah sampai anda menemukan ".date-header span" (tanpa “).


date header








Langkah 4:
Ini inti CSS yang akan anda edit dan hanya sebuah contoh. Apa saja yang akan anda edit, anda pilih sendiri.

.date header span {
border-bottom: 3px solid #FF0000;
font-family: arial, helvetica;
font-size: 15px;
color: #FF6600;
text-shadow: 3px 2px #ffffff;
margin-left: 105px;
}

Here is what we have:

date header




Letakkan kode CSS tersebut sebelum tanda “}.” Untuk mengedit kode tersebut, berikut beberapa bagian yang dapat diedit:

·           Border-bottom= properti border dapat diganti dengan “top”,”right”,”left”. Border stylenya dapat diganti dengan “dashed”,”dotted”,”double”. Sizenya masukkan value sesuai dengan selera anda. Warna bordernya dapat dengan warna hex yang anda mau.
·           Text-shadow= properti dari text-shadow dapat anda lihat di CSS TEXT SHADOW atau FUN WITH CSS.
·           Margin-left= properti margin dapat anda masukkan valuenya sendiri hingga sampai pada posisi yang anda mau.

Andapun dapat melakukan trik ini pada BLOG TITLE, SIDEBAR GADGETTITLE, POST TITLE, dan BLOGDESCRIPTION.

No comments:

Post a Comment