Cara Merubah Tampilan Zippy Expand Colapse di Widget Archieve

Ini hanya sekedar triks sederhana untuk merubah tampilan zippy expand colapse pada widget arsip yang berupa tanda berbentuk segitiga dengan ujung segitiga yang bisa berubah arah ke kanan atau bawah ketika di "KLIK" dilakukan. Toggle zippy berfungsi untuk expand dan colapse hingga data arsip bisa dibuka atau ditutup. Salah satu bentuk modifikasi dan pengembangan zippy bisa sampeyan lihat di bagian kanan di widget archieve. Dengan menambahkan border serta beberapa efek yang lain, bentuk zippy expand colapse ini bisa kita rubah dalam bentuk berbagai macam variasai.

Beberapa kode CSS beserta efek yang mungkin di tambahkan antara lain background color atau background image, blink efects, rounded corners, text shadow, box shadow, color serta border dan opacity effect. Untuk merubah tampilan zippy expand colapse ini kita hanya perlu menambahkan kode CSS di atas kode ]]></b:skin> . Cukup sederhana dan mudah sehingga siapapun dapat melakukannya.

Kode CSS perubah tampilan zippy expand - colapse I :

span.zippy {
        color:blue;
        border:1px solid #666;
        padding-left:4px;
        margin-right:8px;
        text-shadow:0 1px 1px #888;
        -webkit-text-shadow:0 1px 1px #888;
        -moz-text-shadow:0 1px 1px #888;
        box-shadow:0px 1px 1px #888; 
        -moz-box-shadow:0px 1px 1px #888;
        -webkit-box-shadow:0px 1px 1px #888;
        border-radius:4px;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        -goog-ms-border-radius:4px;
        }
span.zippy:hover {
        color:red;
        border:1px solid blue;
        }

Kode CSS perubah tampilan zippy expand - colapse II (dg background Image):

span.zippy {
        background:url(http://i28.tinypic.com/b68vnn/bgsGR/images/bg.zippy.jpg) center no-repeat;
       text-decoration:blink;
       color:blue;
       border:1px solid #666;
       padding-left:4px;
       margin-right:8px;
       border-radius:4px;
       -moz-border-radius:4px;
       -webkit-border-radius:4px;
       -goog-ms-border-radius:4px;
       }
span.zippy:hover {
       background(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcRcC_buBhOLA93fdbrE1jH6MslT6RFIJXEaBAjiVUGx49Hpc-maY5mwq3UEMXzCWDZ6RhBx4NdpnQX3Ry6KttKLMj1S-6VSysziC6syx5rnA1pjjVF0UfxDfkeVuzvPU6-NKbzAijuLQ/s200/0000.png) center no-repeat;
       color:red;
       border:1px solid blue;
       }

Cara Menggunakan Kode CSS

1. Login to blogger.
2. Setelah beberapa saat login maka akan terbuka Dasboard, KLIK link Design/Rancangan.
3. Design/Rancangan : KLIK link "Edit HTML".
4. Cari kode ]]></b:skin>, kemuidan copy-paste kode CSS persis di atas kode ]]></b:skin> .
5. KLIK SAVE Template/Simpan Template dan lihat hasilnya dengan membuka blog.
6. Dari kedua kode CSS di atas, gunakan salah satu saja. Kode yang kedua menggunakan tambahan efek blink dan background image, sementara efek yang lain dari kode pertama dihilangkan.
7. Silahkan campurkan beberapa kode CSS pertama dan kedua untuk memperoleh tampilan berbeda.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «