Selamat Datang di Blog Karrysta buat Sobat semua
Kunjungan Anda ini sangat bermanfaat sekali untuk kelangsungan dan ke lestarian Blog Karrysta,
Semoga apa yang saya Bagikan di sini senantiasa bisa bermanfaat dan memberikan motivasi dan apresiasi untuk kita semua
Mudah-mudahan silaturrahmi dan Ukhuwah antar blogging semakin erat untuk tetap saling berbagi Terima kasih .. Salam hormat.

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.

Widget

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: &#39;Satisfy&#39;, 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;}


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.



Berlangganan lewat email pada post baru Blog : Karrysta.

Next
« Prev Post
Previous
Next Post »

63 komentar

Kang nyobian duduk didepan yah..

Di amankan dulu mas saud pertamax'nya, nanti kedahuluan orang :v

Kalah cepet sama mbah santika :'(
Beda 1 detik :v

setelah lama bersemedi akhirnya kang saud muncul juga, penampakan pertama bawa tutorial archive.. dicoba yah, mudah-mudahan saya bisa..

kebetulan saya didepan pintu mba.. hihi.. met malam mba dian..

Silahkan Teh Santika + Mbak Dian beda tipis ya Mbak Dian :)

Iya nih Teh maaf ya saya baru bisa on blog. makasih kunjunganya Teh

ini kok tumben2an yg diatas cwe semua ,,,,, :yes
para kakek gaul pada kemana nih ,,,, :mn

seklai keluar langsung cetar membahana nih mas saud ,,, ehehe

Pada ketiduran kaya nya Mas Fiu :D

mb tika klo mw duduk didepan jngn sendrian ,,, ntr ada kakek2 nylonong bahaya loh ,,,hehe

yah ,,, pertmax nya gagal nih ,,, :)

bukn ketiduran mas, lg pura2 tidur ,,, lg pada ngusel ,,,hehe

hhh Mas Fiu bisa aja.. baru bisa update lagi nih Mas?

nda ap2.. masih byk di luar..mas Fi..
tp jgn yg ituh ya.. itu punya org..

Langsung ngasih Jempol,.. serba bisa juga Mas Saud.. yg tadinya biasa-biasa saja.. disulap menjadi luarbiasa..

widget arsip yg terbuat dari map biasa.. dirubah ke suasana yg enak dipandang..
kalo sy..ampyuun soal kode2an..

tuh kn bner bru ada satu kakek aja dah bikin kacau... hehe

ini kenapa lgi mas aldino ,,hehe :mn

Yah hanya alakadarnya saja Mas All.. saya percaya Mas All mampu lebih baik dari yang saya bagikan ni.. hanya Mas All terlalu merendah :)

yang mana coba Kek Al yang punya orang nya? :heran

Pengenya apa Kek..? asal jangan yang mahal" =D

wah keren nih widgetnya mas.
saya lihat demonya bisa bergerak ketika kursor dideketin tuh...
pantesan lama nggak ada kabar ternyata lg bertama buat nyari wangsit membuat widget ini toh mas

Sepertinya over dosis kebahagia'anya Mas Fi-u :ng

lalu saya harus bilang wow gitu?

=D tt3tt3tt3tt3 Mas Yan ini bisa aja deh merangkai kata. Ndak koq Mas? saya nya aja yang malas buka/update blog. thanks ya Mas Yanto :-bd

biarkan yg dibawah saya nanti yg jawab

Tuh saking baiknya Saudara ku yang satu nie.. baru ketemu langsung deh ngipasin saya,, eh saya apa Kakek All ya? :)

thanks doang?
mas zach......!!!!
enaknya diapain ini??

Naahh itu kesukaan favorite saya lho Mas Yan masih ingat terus ya..?

Emang mestine gimana Mas lha bisa e mung iki doang Mase :D

iya harus donk mas ,,, klo bsa sklain angkat kupluknya ,,,,,

Sip banget Pak, kapan2 aku coba pasang di blog ah, siapa tau cocok dengan blog aku hehehe...

anu yang itu loh mas mas ,,,,

iya overdosis tuh mas aldino ...
Ada Aqua ?

klo dh cocok jgn lupa bayar yah mas ....:)

beliin mas yan kupluk yg baru ,,,,

caelah ..... sibuk sibuk sibok ,,,,hhe

tt3tt3tt3 Mas Fiu bisa aja deh. yah silahkan Pak Guru/Mas Eka dengan senang hati semoga saja begitu makasih kunjunganya :kr

Modifikasi widget recent post nya model hover gitu ya kang... bagus juga kalo di modif..mobil motor lewat |o|

Yah lumayan saja Mas Fazri, hanya di utak atik sederhana saja Mas :mn

Akhirnya muncul lagi blog ini di reading list saya.. hehe
welcome back!

modifikasi widget Archive Blogger saya cobain ..

lama banget mas saud baru jumpa lagi neh, gimana kabar?

bersemedi nya kelamaan mas :D
nongol langsung keluarin ilmu widget nya.hee

semalem langsung praktek, o ya mas, kode warnanya bisa ganti ngga ya..?

kakek yang pake kaca mata lebih Hiiyy.. haha..

Setelah lama bertapa akhirnya pendekar kita ini keluar juga dari pertapaannya, dan langsung membagikan ilmu kanuragannya mengenai modifikasi widget archive blogger, yang begitu keren dan ceta membahana...

Sangat bermanfaat artikel mengenai widget archive ini yang jujur saya belum pasang karena belum memahaminya sebelum ini.

Salam blogwalking dari Pulau Dollar

Kang Sauuuuuud
apa kabar? damang??
kangennnnnnnnn

Wah saya ketinggalan kereta kayaknya.... he..
Wilujeng enjing Kang...
Maaf baru sempat mampir :)

Keren kang saud. Terima kasih tutorialnya..

Damangnya lagi ke saeah kang...zach..

Nggak kok mas Heri, keretanya lagi ditambal bannya...

keren juga nih widget arsip nya setelah di modif ya mas karis, bs dicoba nih untuk blog saya :)

nah begini ini yang mas saud...kang bisa ramai lagi dengan aktifnya mas saud...ok saya numpang pelajari aja codingnya...makasih yaaa...

bagusnya kang. Bisa macem-macem sekalinya ya...
ada bentuk yang lainnya kang?

Saya lihat di demonya, warna latar dan warna angka arsipnya hampir sama, hampir gak kelihatan.

Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini

Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower

Terima Kasih atas Kunjungan dan Komentar nya
Copyright © 2015. Karrysta - All Rights Reserved | Template Created by Kompi Ajaib | Modified : Saud Karrysta | Proudly powered by Blogger