Tips Trik modifikasi tampilan arsip blog

Mempercantik tampilan blog merupakan salah satu yang wajib dilakukan oleh para blogger, Kenapa? Karena dengan mempercantik display dari blog yang kita punya secara tidak langsung mampu memberikan daya tarik tersendiri bagi pengunjung blog Kita. Olehnya itu, Jika Anda menginginkan para pengunjung blog Anda betah dan menyukai blog Anda, Anda harus mempercantik tampilan blog Anda. Adapun salah satu jalan untuk mempercantik tampilan blog yaitu dengan memodifikasi model tampilan arsip blog Anda.

Berikut ini langkah-langkah memodifikasi tampilan arsipBlog Anda supaya lebih menarik menjadi lebih menarik:

Terlebih dahulu, Anda harus masuk ke halaman desain blog Anda

Kemudian masuk ke menu "Template"

Pada sub menu template itu, pilih "Edit Html"

Setelah halaman edit Html aktif, Silahkan cari kode "]]></b:skin"

Kemudian tepat di atas "]]></b:skin" tadi, letakkan kode yang ditampilkan pada kotak di bawah ini:

/* Modifikasi widget Arsip by Rumahdauzy.blogspot.com  */
@keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  
@-o-keyframes list_archive_anima{100%{opacity:1.0;margin-left:0px;color:brown;}0%{opacity:0;margin-left:20px;color:red;}0%{opacity:1.0;margin-left:-30px;color:orange;}}  
@-ms-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  
@-moz-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  
@-webkit-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  
#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti dg square, disc, georgian, decimal */
    width:95%;  
    color: white; 
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    animation:list_archive_anima 0.4s forwards; 
    -o-animation:list_archive_anima 0.4s forwards; 
    -ms-animation:list_archive_anima 0.4s forwards; 
    -moz-animation:list_archive_anima 0.4s forwards; 
    -webkit-animation:list_archive_anima 0.4s forwards;
color:yellow;
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none; 
    transition:color 1s; 
    -o-transition:color 1s; 
    -ms-transition:color 1s;
    -moz-transition:color 1s;
    -webkit-transition:color 1s;
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:yellow;
font-heigth:bold;
text-decoration:underline;
}

Simpan perubahan Html blog Anda tersebut dengan mengklik tombol "Simpan"

Periksalah perubahannya. Demikian tips dari Saya, silahkan coba modifikasi tampilan arsip ini pada blog Anda guna meningkatkan tampilan pada blog Anda.

---

Silahkan baca juga artikel sejenisnya di bawah ini :

BLOGING