Modifikasi Widget Archive Blogger

Modifikasi Widget Archive Blogger

Salam buat seluruh Sahabat blogging semua, kurang lebih 2 bulan saya tidak publikasi artikel baru di blog Karrysta ini. Nah pada kesempatan ini saya ingin kembali berbagi trik sederhana untuk memodifikasi sebuah widget Archive Blogger. Walaupun pada blog teman sudah banyak yang share widget archive dengan berbagai style dan desain yang sudah di bagikanya. Namun di blog saya baru membagikan tutorial ini, dan besar harapan dengan post yang seadanya ini bisa bermanfaat buat anda dan sobat blogging semua. Selengkapnya silahkan lanjutkan membaca cara penerapnya.

Baca Widget lainya :  Semua Label Widget

Dengan style dan desain modifikasi archive blogger saya sertakan dengan effects slide show juga style effects toggle untuk menambah tampilan widget tersebut agar lebih unik dan menarik. Dan satu lagi dengan paduan warna Gradient untuk menambah pandangan warna lebih elegance dan pasti support nyaman untuk di sesuaikan dan lebih responsive. dan masih ada style lainya yang akan anda rasakan jika sudah merasakanya. Yang berminat silahkan simak cara pemasangan pada blog anda di bawah ini : 

Cara Memasang Archive blog :

Cara pertama untuk memodifikasi widget archive blogger, sebelumnya anda harus memasang widget archive blogger standar bawaan dari blogger. Pada halaman layout/tataletak di dashboard blog anda. Dengan cara add widget baru dan pilih widget Archive. Catatan : Pada pilihan widget ada pilihan Daftar dan Cloude untuk modifikasi yang saya bagikan ini. Anda pilih Daftar jangan yang Cloude.

Jangan lupa hapus kode di bawah ini pada area template anda setiap penambahan widget baru agar tetap lolos dari validasi HTML 5 jika anda yang menggunakan template Valid HTML 5 - CSS 3.

<b:include name='quickedit'/>

Cara Memodifikasi Style Widget Archive :

Setelah anda memasang widget standar bawaan blogger maka untuk memodifikasi widget archive, seperti yang saya tuliskan diatas maka anda harus menambahkan kode CSS pada bagian template blog anda dengan cara sebagai berikut di bawah ini cara dan kode CSS nya :

1. Masuk Dashboard jangan lupa sign in pada blog anda
2. Pilih template lalu pilih edite template
3. Tekan CTRL + F Untukmemudahkan pencarian
4. Cari kode :  ]]></b:skin>  atau kode :  </style>
5. Setelah ketemu copy kode dibawah ini dan paste tepat di atas
6. Pada kode :  ]]></b:skin>  atau kode :  </style>

#BlogArchive2 {background: #008015;color:#00FF99;border: 1px solid #00804D; 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;}
#BlogArchive2 .widget-content {background: transparent;font-family: 'Satisfy', Arial;box-shadow: 0px 0px 20px #99FF33 inset;border: 1px solid #00804D;}
.BlogArchive2 #ArchiveList ul li { background: none repeat scroll 0% 0% transparent; list-style: none outside none; margin: 0em 0px;}
#BlogArchive2 ul.posts a:link{font:bold  11px Georgia,Tahoma;color:#3426A1; background:url(https://sites.google.com/site/archivesiugi/home/2012/arrowList_2b.png) no-repeat 0 50%;padding-left:10px; margin-left:-20px;}
#BlogArchive2 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);}
#BlogArchive2 a:visited{font-family:Arial;font-size:10px;color:#3321C0;}
#BlogArchive2 a:hover{font-family:Arial;font-size:10px;font-style:normal;}
#ArchiveList a.toggle, #ArchiveList a.toggle:link {color: yellow;background: #008015;background: -moz-linear-gradient(top, #08B4B4, #59F7A8);background: -webkit-gradient(linear, left top, left bottom, from(#59F7A8), to(#08B4B4));border: 1px solid  #a9937b;padding-left: 4px;margin-right: 5px;margin-bottom: 2px;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: #ffd500;background: -moz-linear-gradient(top, #006633, #00E070);background: -webkit-gradient(linear, left top, left bottom, from(#00E070), to( #006633));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: #2E00B8;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:#0000B3;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;}

DEMO

Dan yang terakhir silahkan save template anda dan coba cek post blog anda. Jika anda mengikuti cara seperti yang saya tuliskan diatas maka widget archive blog anda akan berhasil memodifikasinya. Namun jika belum berhasil silahkan baca kembali dengan seksama, dan untuk warna silahkan sesuaikan dengan desain warna template blog anda. Selamat mencoba semoga berhasil. Hanya itu saja kiranya yang bisa saya berikan terima kasih sebelumnya atas kunjungan anda dan salam blogging. Seperti biasa mohon maaf jika terdapat teks atau lainya yang kurang benar sudilah kiranya anda yang membenarkan dan meluruskanya. Terima kasih.