Box Serba Guna Sidebar Widget dengan CSS3 Transition

Box serbaguna untuk sidebar widget ini dibuat dengan memanfaatkan kode CSS3 yang saat ini menjadi satu pilihan terbaik desain HTML, seperti border-radius, box-shadow atau drop-shadow serta sedikit CSS3 transition untuk membuat animasi. Box bisa secara langsung digunakan sebagai box (wadah) untuk semua widget yang ada di sidebar, termasuk setiap judul widget akan terwadahi di dalamnya. Meskipun demikian, bila diinginkan, dengan sedikit merubah kode maka box ini bisa berfungsi hanya sebagai box untuk isi widgetnya saja (judul widget di luar box). Pada pengembangan selanjutnya, jika sampeyan hanya akan menggunakan box ini untuk salah satu widget saja, maka tinggal lakukan perubahan satu kode maka box hanya akan menjadi wadah bagi 1 (satu) buah widget. Apabila sampeyan ingin merubahnya sebagai scroll box, maka tinggal tambahkan height: ...px; dan overflow: auto;. Jadilah sebuah box serbaguna yang siapapun dengan mudah mampu melakukannya. Ya ... karena semua hanya perlu dilakukan tanpa mengadakan perubahan pada kode-kode yang ada di template. O ..., ya, kali ini kita tidak menggunakan bentuk demo karena dengan mudah dan cepat akan dapat sampeyan lakukan sendiri dengan hasil yang secara cepat pula dapat sampeyan lihat.

Kode CSS Box Serbaguna Sidebar Widget

#sidebar .widget{
     margin: 20px 4px;
     border: 1px solid #999;
     padding: 10px 6px;
     border-radius: 8px;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF;
     -moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF;
     -webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF;
     -o-transition: 1s ease-out;
     -moz-transition: 1s ease-out;
     -webkit-transition: 1s ease-out;
}
#sidebar .widget:hover { 
     border-radius: 15px;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF;
     -moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF;
     -webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF; 
}

Langkah untuk menggunakan Box Serbaguna

• Login ke Blogger
• Ketika halaman dasbor sudah terbuka, KLIK link "Design" atau "Rancangan".
• Akan terlihat "Elemen Laman". Lanjutkan dengan KLIK link "Edit HTML".
Halaman Edit HTML : Di sinilah kode CSS akan di simpan. Silahkan cari kode ]]>. Kode ini terletak di atas . Supaya mudah mencarinya gunakan Ctrl+F. Tekan bersamaan (pada keyboard), baru kemudian tuliskan ]]> dan kemudian KLIK untuk pencarian. Bila belum berhasil, silahkan buka di Special Tutorials di menu sebelah kiri. Disana tersedia beberapa tutorial dasar yang teramat penting termasuk cara cepat mencari kode HTML di template.
• Copy kode CSS di atas dan pastekan di atas ]]>.
• KLIK "SAVE Templates" atau "Simpan Template".
• Buka blog untuk melihat hasilnya.

Catatan

Kode di atas berfungsi sebagai box untuk seluruh widget di sidebar (termasuk judulnya). Contoh widget di sidebar : widget archive, label atau categories, search box, follower/pengikut dan widget yang lain.

Judul widget di luar box

Dengan merubah sedkit kode CSS tersebut, maka yang terwadahi hanya isi widgetnya saja. Judul akan tertampilkan di luar box. Buat kodenya seperti ini :

1. #sidebar .widget di rubah menjadi : #sidebar .widget-content
2. #sidebar .widget:hover di rubah menjadi : #sidebar .widget-content:hover

Kode yang lain tidak dilakukan perubahan. Hanya pada kode di atas!!!

Box hanya untuk 1 (satu) widget

Misalnya yang akan di beri box adalah widget Label atau Categories.

Rubah kode menjadi seperti berikut:

Judul dalam box

1. #sidebar .widget di rubah menjadi : #Label1
2. #sidebar .widget:hover di rubah menjadi : #Label1:hover

Judul di luar box

1. #sidebar .widget di rubah menjadi : #sidebar #Label1 .widget-content
2. #sidebar .widget:hover di rubah menjadi : #sidebar #Label1 .widget-content:hover

Perubahan seperti di atas berlaku juga untuk seluruh widget di sidebar.

Bagaimana mencari kode baru yang di tambahkan ?

Di template sampeyan di bawah terdapat kode untuk widget termasuk yang ada di sidebar. Tarik cursor ke bawah atau gunakan "Ctrl+F" dan temukan kode seperti di bawah ini, :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='HTML9' locked='false' title='Flag Counter' type='HTML'/>
</b:section>
</div>

Kode-kode berwarna oranye inilah yang digunakan untuk menambah kode sehingga hanya widget tertentu yang terwadahi dalam box. Silahkan sampeyan pilih widget mana yang akan di kasih box! Tentu saja kode tersebut tidak akan sama persis dengan kode yang ada di template sampeyan, akan tetapi pada posisi kode berwarna oranye itulah yang digunakan.

Menambah scroller di box

Untuk membuatnya menjadi sebuah box dengan tingi tertentu, maka sebuah scroller diperlukan hingga seluruh isi dalam box bisa di buka. Setelah sampeyan tentukan model penggunaan box seperti yang telah tersampaikan di atas, maka untuk membuatnya menjadi scroll box, buat kode seperti berikut:

#sidebar .widget{
     height: 300px;
     overflow: auto;
     overflow-x: hidden;
     margin: 20px 4px;
     border: 1px solid #999;
     padding: 10px 6px;
     border-radius: 8px;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF;
     -moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF;
     -webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF;
     -o-transition: 1s ease-out;
     -moz-transition: 1s ease-out;
     -webkit-transition: 1s ease-out;
}
#sidebar .widget:hover { 
     border-radius: 15px;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF;
     -moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF;
     -webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF; 
}

Catatan

• Kode berwarna oranye disesuakan dengan perubahan yang diinginkan (box seluruh widget atau widget tertentu - Judul dalam box atau di luar box)
• height: 300px; dapat dirubah dengan ukuran yang diinginkan.
• overflow: auto; untuk memunculkan scroller, sedang overflow-x: hidden; untuk menghilangkan scroller dalam arah horizontal.