Mengganti Tanda Panah pada Kotak Pilihan (Select Box) Widget Arsip Blog di Blogger

Melanjutkan posting saya sebelumnya mengenai desain ulang widget arsip blog di Blogger, kali ini saya akan menjelaskan langkah-langkah bagaimana mengganti gambar panah kecil di bagian paling kanan elemen select box dari widget arsip blog tersebut.

Untuk keperluan ini, kita akan menggunakan kembali selector #BlogArchive1 untuk menarget elemen select box tersebut seperti yang telah kita lakukan pada posting sebelumnya.

Trik CSS untuk mengganti tanda panah pada kotak pilihan ini saya temukan di CSSDeck.com, sebuah layanan online tempat para desainer web membagikan sekaligus mendemonstrasikan secara langsung potongan-potongan kode (snippet) HTML, CSS, dan atau Javascript yang telah dibuatnya kepada khalayak.

Berikut adalah potongan kode CSS untuk mengganti tanda panah pada select box yang saya ambil dari CSSDeck.com tersebut.

/* The CSS */
select {
    padding: 3px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color: #888;
    border: none;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and ( -webkit-min-device-pixel-ratio:0) {
    select { padding-right: 18px }
}

label { position: relative }

label:after {
    content: '<>';
    font: 11px "Consolas", monospace;
    color :#aaa;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 8px; top:2px;
    padding: 0 0 2px;
    border-bottom: 1px solid #ddd;
    position: absolute;
    pointer-events: none;
}

label:before {
    content: '';
    right: 6px; top:0px;
    width: 20px; height:20px;
    background: #f8f8f8;
    position: absolute;
    pointer-events: none;
    display: block;
}

Sebelum Anda menyalin kode-kode CSS karya Damoin Yeatman di atas, tambahkan selector #BlogArchive1 tepat di depan selector select, label, label:after, dan label:before seperti terlihat di bawah ini.

/* The CSS */
#BlogArchive1 select {
    padding: 3px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color: #888;
    border: none;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and ( -webkit-min-device-pixel-ratio:0) {
    select { padding-right: 18px }
}

#BlogArchive1 label { position: relative }

#BlogArchive1 label:after {
    content: '<>';
    font: 11px "Consolas", monospace;
    color :#aaa;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 8px; top:2px;
    padding: 0 0 2px;
    border-bottom: 1px solid #ddd;
    position: absolute;
    pointer-events: none;
}

#BlogArchive1 label:before {
    content: '';
    right: 6px; top:0px;
    width: 20px; height:20px;
    background: #f8f8f8;
    position: absolute;
    pointer-events: none;
    display: block;
}

Simpan kode CSS yang telah dimodifikasi tersebut tepat sebelum ]]></b:skin> pada halaman Edit HTML Blogger.

Dengan menyalin kode CSS di atas, tampilan select box pada widget arsip blog tetap tidak akan berubah. Kita harus terlebih dahulu mengapit elemen select box tersebut di antara tag HTML <label> dan </label>.

Selanjutnya tekan Ctrl + F pada bagian edit HTML di Blogger hingga muncul kotak pencarian seperti terlihat pada gambar berikut.

Pada kotak pencarian yang muncul, ketikkan kata kunci "BlogArchive1" hingga Anda menemukan bagian seperti tampak pada gambar di bawah ini.

Perhatikan bagian yang ditandai kotak merah pada gambar di atas, yakni bagian yang diawali tag HTML <select> dan diakhiri dengan pasangannya, </select>.

Tambahkan tag <label> sebelum tag pembuka <select>, dan tag </label> setelah tag penutup </select>, sehingga kode di atas menjadi seperti berikut.

Tampilan akhir select box widget arsip blog dengan memanfaatkan kode-kode di atas diperlihatkan pada gambar berikut.

Selamat mencoba! Semoga bermanfaat!