Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 ]]></b:skin>. Kode ini terletak di atas <body>. Supaya mudah mencarinya gunakan Ctrl+F. Tekan bersamaan (pada keyboard), baru kemudian tuliskan ]]></b:skin> 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 ]]></b:skin>.
  • 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 <body> 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.



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








» Happy Blogging - gubhugreyot «


7 komentar:

  1. tuan admin, trims untuk iformasinya....
    oya, saya minta izin untuk menyomot gadget sampean.

    nuhun nyak;

    BalasHapus
  2. Wah ….. tips yang sangat jitu nih mas, nanti akan saya coba praktekkan. Oya mas, karena tertarik, saya sekaligus juga sudah menjadi pengikut blog ini. Dan senang sekali jika mas juga mau menjadi pengikut di blog saya. Sebelumnya saya ucapakan terima kasih….

    Salam Kenal,


    JOHNY

    BalasHapus
  3. boleh di coba nih bang...saya prakteking dulu ya suhu, doakan berhasil

    BalasHapus
  4. makasih bang saya sudah bisa. semoga abang mendapat ganjaran kebaikan dan bermanfaat bagi yang lain. amin....mahesa (makin hebat saja) buat abang

    BalasHapus
  5. Om Admin Nyang Pinter,kalo mau bikin Search Bok yg ada logo bude Google nya kaya punya Om Admin ntu yg diatas gimana si ..

    BalasHapus
  6. http://cybernetwebdesign.blogspot.com/

    BalasHapus
  7. Apakah Anda berpikir untuk mendapatkan bantuan keuangan, Apakah Anda serius membutuhkan pinjaman mendesak, apakah Anda berpikir untuk memulai bisnis Anda sendiri, Anda berada di utang, ini adalah kesempatan Anda untuk mencapai keinginan Anda karena kami memberikan pinjaman pribadi, pinjaman bisnis, dan perusahaan pinjaman, dan semua jenis pinjaman pada tingkat bunga 2%, kami menjamin semua klien berharga kami bahwa mereka akan mendapatkan semua pinjaman masing-masing dan menjadi tahun baru dengan senyum di wajah mereka.
    Untuk informasi lebih lanjut silahkan hubungi kami sekarang melalui email {} gloryloanfirm@gmail.com

    Informasi Peminjam:

    Nama lengkap: _______________
    Negara: __________________
    Sex: ______________________
    Umur: ______________________
    Jumlah Pinjaman Dibutuhkan: _______
    Durasi Pinjaman: ____________
    Tujuan pinjaman: _____________
    Nomor ponsel: ________
    Ibu Glory

    BalasHapus

 
GR | Edited by | gubhug reyot