Cara Modifikasi Blog Archive Keren

Artikel ini menjelaskan cara memodifikasi widget blog archive.Sebuah widget dengan tampilan standar, mungkin akan terkesan baku, monoton, bahkan terkadang kurang menarik dan membosankan. Lantas bagaimana untuk menghilangkan paradigma tersebut? ya, salah satu caranya adalah dengan membuat ulang atau menciptakan sendiri widget sesuai dengan yang kita inginkan.

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 :



S e b e l u m

S e s u d a h


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*/

Author:

Facebook Comment