Banyak cara yang dapat kita lakukan, salah satunya adalah dengan meng-edit widget yang sudah ada atau kita dapat mengkloning widget-widget yang banyak bertebaran diluar sana dan mengintegrasikannya kedalam blog atau halaman website kita.
Dan satu hal yang akan saya lakukan kali ini adalah meng-edit style Blog Archive ( Arsip Blog )yang sebelumnya sudah tertanam dalam halaman blog saya dengan sedikit sentuhan CSS3 Transition.
Contoh Widget Blog Archive :
Cara Modifikasi Blog Archive dengan CSS3 Transition
Untuk langkah awal, terlebih dahulu kita Tambahkan Widget Blog Archive ke blog Kita.
Kemudian Konfigurasikan dengan opsi seperti berikut ini
Langkah terakhir, 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*/