Cara Modifikasi Blog Archive

Cara Modifikasi Blog Archive


SEBELUM

News


SELEPAS

News


Cara Modifikasi Blog Archive dengan CSS3 Transition

1. Tambahkan Widget Blog Archive ke blog anda.

2. Kemudian Konfigurasikan seperti berikut


3. Letakan kode CSS berikut ini diatas kode ]]></b:skin:

/*Blog Archive*/
#BlogArchive1 {background: transparent;color:#D4CFFC;border: 1px solid #; border-radius: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px;  box-shadow: 0px 0px 0px #FFFFFF; -moz-box-shadow: 0px 0px 0px #FFFFFF; -webkit-box-shadow: 0px 0px 0px #FFFFFF;}
#BlogArchive1 .widget-content {background: -moz-linear-gradient(left, #021638, #043482);background: -webkit-gradient(linear, left center, right center, from(#021638), to(#043482));}
#ArchiveList a.post-count-link, #ArchiveList a.post-count-link:link, #ArchiveList a.post-count-link:visited {color:#7265DB;  font:bold  10px Arial;text-decoration: none;}
.BlogArchive #ArchiveList ul li { background: none repeat scroll 0% 0% transparent; list-style: none outside none; margin: 0em 0px;}
#BlogArchive1 ul.posts a:link{font:bold  11px Georgia,Tahoma;color:#D4CFFC; background:url(https://sites.google.com/site/archivesiugi/home/2012/arrowList_2b.gif) no-repeat 0 50%;padding-left:10px; margin-left:-20px;}
#BlogArchive1 ul.posts a:link:hover {color: red;-o-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out;-webkit-transition: all 0.8s ease-out;-o-transform:translate(12px, 0) scale(1.1);-moz-transform:translate(12px, 0) scale(1.1);-webkit-transform:translate(12px, 0) scale(1.1);}
#BlogArchive1 a:visited{font-family:Arial;font-size:10px;color:#BCB8E0;}
#BlogArchive1 a:hover{font-family:Arial;font-size:10px;font-style:normal;}
#ArchiveList a.toggle, #ArchiveList a.toggle:link {color: yellow;background: #9090FC;background: -moz-linear-gradient(top, #BDFCFC, #BDC6FC);background: -webkit-gradient(linear, left top, left bottom, from(#BDFCFC), to(#BDC6FC));border: 1px solid  #a9937b;padding-left: 4px;margin-right: 5px;font-size: 9px;border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;}
#ArchiveList a.toggle:hover, #ArchiveList a.toggle:link:hover {background: #DB8CFF;background: -moz-linear-gradient(top, #B700FF, #8000FF);background: -webkit-gradient(linear, left top, left bottom, from(#B700FF), to( #8000FF));margin-right: 20px; border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px; -o-transition: all 1.5s ease-in 0.3s;-moz-transition: all 1.5s ease-in 0.3s;-webkit-transition: all 1.5s ease-in 0.3s;}
#ArchiveList a.toggle:active, #ArchiveList a.toggle:link:active {background: #33CCFF;background: -moz-linear-gradient(top, #FFFFCC, #3E018C);background: -webkit-gradient(linear, left top, left bottom, from(#3E018C), to(#FFFFCC));border-radius: 4px;-moz-border-radius: 4px;-webkit-borderradius: 4px;-o-transition: all ease-out 10ms;-moz-transition: all ease-out 10ms;-webkit-transition: all ease-out 10ms;}  a.toggle{outline:none;}span.zippy{color:yellow;background:#0000FF;background:rgba(0,0,0, 0.2);padding-left:3px;padding-right:30px;margin-right:40px;border-bottom-right-radius:8px;border:1px solid #4000FF;-o-transition:all 0.6s ease-in;-moz-transition:all 0.6s ease-in;-webkit-transition:all 0.6s ease-in;}span.zippy:hover{color:white;background:#8000FF;background:rgba(0,0,0, 0.4);margin-right:60px;padding-right:20px;}span.zippy:active{color:blue;background:#FFC400;transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;-ms-transition:all 0.4s ease-out;}*, * focus{outline:none;} span.zippy.toggle-open{color:red;background:#FFC400;transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;-ms-transition:all 0.4s ease-out;}
/*Blog Archive*/

4. Save.

Kredit : Anon Friend's

FOLLOW MY TELEGRAM

COMMENT IS YOUR OWN RESPONSIBILITY. THANK YOU.

Catat Ulasan (0)
Terbaru Lebih lama