تعديل على الارشيف في مدونة بلوجر باستخدام CSS

1 سبتمبر، 2021

كيفية التعديل على الارشيف باستخدام CSS ليصبح بشكل اجمل كما بالصورة

1. اذهب الى لوحة التحكم في مدونتك اختر القالب ثم اضغط على تحرير html

2. ضع اشارة على توسيع القالب ثم ابحث عن الرمز التالي ]]></b:skin> ( استخدم مفتاح ctrl+f) للعثور على الرمز بسرعة

3. عند العثور على رمز ]]></b:skin> ضع الكود التالي فوق الرمز مباشر

/* Modifikasi widget Arsip */ 
@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;}} /* brown, red, orange bisa diganti dengan warna lain */ 
@-o-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;}} /* brown, red, orange bisa diganti dengan warna lain */ 
@-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;}} /* brown, red, orange bisa diganti dengan warna lain */ 
@-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;}} /* brown, red, orange bisa diganti dengan warna lain */ 
@-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;}} /* brown, red, orange bisa diganti dengan warna lain */ 
#BlogArchive1_ArchiveList ul.posts li{ 
 list-style-type:circle; /* circle bisa diganti dg square, disc, georgian, decimal */ 
 width:97%; /* max width 100% */ 
 color: brown; /* brown bisa diganti dengan warna lain */ 
} 
#BlogArchive1_ArchiveList ul.posts li:hover{ 
 animation:list_archive_anima 0.4s forwards; /* 0.4s merupakan durasi animasi */ 
 -o-animation:list_archive_anima 0.4s forwards; /* semakin kecil semakin cepat */ 
 -ms-animation:list_archive_anima 0.4s forwards; /* semakin besar maka akan semakin lambat */ 
 -moz-animation:list_archive_anima 0.4s forwards; /* nilai dapat dirubah – dalam s atau ms */ 
 -webkit-animation:list_archive_anima 0.4s forwards; 
 color:red; /* red bisa diganti dengan warna lain */ 
} 
#BlogArchive1_ArchiveList ul.posts li a{ 
 text-decoration:none; /* by: http://gubhugreyot.blogspot.com – 12 juli 2012 */ 
 transition:color 1.5s; /* transisi animasi warna teks link */ 
 -o-transition:color 1.5s; /* 1.5s bisa diperbesar atau diperkecil */ 
 -ms-transition:color 1.5s; /* semakin besar maka perubahan warna semakin lama */ 
 -moz-transition:color 1.5s; /* tsemakin kecil akan semakin cepat */ 
 -webkit-transition:color 1.5s; /* nilai dalam s atau ms */ 
} 
#BlogArchive1_ArchiveList ul.posts li:hover a{ 
 color:red; /* red bisa diganti dengan warna lain */ 
} 
/* Modifikasi widget Arsip */

اختر حفظ وحظا سعيدا

1 سبتمبر، 2021

مقالات ذات صلة