Cara Modifikasi Tampilan Archive Blog Keren

Cara Modifikasi Tampilan Archive Blog Keren -  Selamat berjumpa kembali di blog khusus-script untuk kesekian kalinya, ok malam hari ini saya akan membagikan tutorial cara midifikasi archive blog biar tampilannya lebih keren dan lain dari pada yang lain. Ok untuk kesekian kalinya juga saya memberikan tutorial-tutorial cara memperindah blog dengan script CSS atau dengan JavaScript walaupun untuk kode-kode tidak hasil atau buatan sendiri. Tapi mudah-mudahan saja karena adanya media blogger ini bisa menimba dan menambah ilmu bersama-sama. Ok, langsung saja ke pokok pembahasan Cara Modifikasi Tampilan Archive Blog Keren, pertama-tama anda masuk blog home kemudian cari Template, setelah itu buka Edit Html, setelah terbuka Gunakan dulu Ctrl+F untuk mempermudah pencarin.

Cara membuatnya adalah sebagai berikut.

Setelah itu Cari Kode ]]></b:skin>, Kalau sudah ketemu pastekan kode berikut di atas ]]></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*/

Kalau langkah di atas sudah selesai silahkan anda save, dan lihat hasilnya. 

Blog Archive Cantik Dan keren

Tuh,..anda bisa lihat gambar di atas, arcchive blog anda sudah berubah tampilannya, yang tandinya biasa-biasa berubah menjadi indah. Nah sobat blogger itulah tutorial tambahan kali ini. Mudah- mudahan saja tutorial ini bisa menambah koleksi mempercantik blog anda. Salam.