-->

Sabtu, 15 Januari 2011

menu acordeon

posted by: daroef
Meskipun hingga detik ini beberapa kode css3 belum mampu tersuport oleh Internet Explorer, tapi tampaknya perkembangan pesat yang kian hari terasakan tak mungkin akan di abaikan begitu saja. Banyaknya kemungkinan penciptaan fungsi baru dengan hanya menggunakan kode css ini membuat pengguna internet mempunyai banyak pilihan selain javascript. Tentu saja dengan hanya menggunakan kode css akan membuat beban yang ditanggung blog menjadi banyak terkurangi, dus ... akhirnya banyak kemungkinan penggunaan css-3 menjadi sebuah pilihan terfavorit. Mengenai Internet Explorer (IE) dan kompatibilitasnya, besar kemungkinan browser keras kepala ini akhirnya mau tak mau akan merobmak segala kebijakan yang selama ini membuatnya banyak ditinggalkan pengguna. Sykur-syukur kebijakan baru yang lebih akomodatif terhadap kepentingan pengguna ini akan secepatnya direalisasikan. Ya ... bukankan hal yang terjadi seperti selama ini akhirnya membuat mereka sendiri yang paling dirugikan?!

CSS-3 Accordion Menu selain irit kode dan yang jelas tanpa sedikitpun javascript, namun jangan sekali-kali menyepelekan fungsi, kinerja dan tampilannya. Desain yang minim penggunaan background image ini selain cantik dan menarik juga andal untuk digunakan sebagai wadah menu blog dan segala tetek bengek yang mungkin butuh tempat sebagai wadah tanpa perlu banyak makan tempat. Sampeyan dapat menggunakan setiap bagian dari accordion ini sebagai tempat meletakkan dan menyimpan seluruh daftar posting blog atau menggabungkannya dengan image, teks atau yang lain. Cukup gunakan kode yang sesuai di tiap box yang tersedia dan semua dengan indahnya akan tertampilkan.

Meskipun pada kode yang disertakan membuat css-3 accordion menu serbaguna ini hanya mempunyai lebar 200px, namun dengan amat mudah pula sampeyan merubahnya menjadi sesuai kenutuhan hanya dengan mengganti 2 kode saja yang berkaitan dengan width. Simple dan amat mudah dilakukan siapapun. O .., ya tentu saja semua yang tersajikan ini sudah melalui uji tampil di blogspot dan pastinya kompatible untuk semua browser (fungsi accordion-nya). Jangan kecewa apabila di awal posting ini kita katakan masih terkendala dengan IE karena sekalipun beberapa tidak mampu disuguhkan dengan baik dan sempurna di IE, namun setelah sampeyan melihatnya pasti tak akan kecewa. Ya ... karena si accordion ini masih mampu memperlihatkan kecantikannya di IE.






Kode CSS-1
<style type="text/css">
#bgsGR_Accord { 
      background:#FFFFFF; 
      width:205px;
      padding:2px;
      border:1px solid #666;
      margin-top: 20px;
      border-radius:5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      margin-bottom: 2px;
      box-shadow:0 0 12px #888;
      -moz-box-shadow:0 0 12px #888;
      -webkit-box-shadow:0 0 12px #888; 
}
#bgsGR_Accord .bag {
      width: 200px; /*original code by: http://gubhugreyot.blogspot.com */
      height: 28px;
      overflow: hidden;
      transition: height ease-in-out 500ms;
      -o-transition: height ease-in-out 500ms;
      -moz-transition: height ease-in-out 500ms;
      -webkit-transition: height ease-in-out 500ms;
      border: 1px solid #999;padding:2px;padding-bottom:0;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      margin-bottom: 2px;
      box-shadow:0 0 12px #999;
      -moz-box-shadow:0 0 12px #999;
      -webkit-box-shadow:0 0 12px #999;
      background:#b0cfe9  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsExbVUh8eNaYndIURxLCP8rZphnxHDvfUQG5YGfkTRsOLbd-ruruMBOulaQ8YwBf_VzQdWoOYMPyUbNFmydn8QPumP00nGKE_BZyxPJBSJBl_Hjl8rBWqQpcnZ_FAgODaAlbs-AeWVnM/s320/bgGradBlueV339H1.gif) top left repeat-x;   
      background:-moz-linear-gradient(bottom, #b5dcfb, #fff);
      background: -webkit-gradient(linear, center bottom, center top, from(#b5dcfb), to(#fff)); 
}
#bgsGR_Accord .bag a {
      display: block;
      height: 18px; /*original code by: http://gubhugreyot.blogspot.com */
      line-height: 20px;
      background: #9999FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIF82RriM3iJZesviTAT46QNIDSFruGiA8VA8O-x_Navt9rGIkk5Wv-5vV-m1sjE6kYVrx67gw60XrVJWQG7-qBwPysYFuHMe3BSiRi0Ohf6I8u1QIEBpJttEnYjDMRPpAbcMFVx03bM/s1600/AnimaBlueLoop.gif) left top no-repeat;
      background-position:4px 6px;
      padding: 5px;
      color:#1e1e1e;
      text-decoration: none;
      padding-left:30px;
      font-family:Droid Serif;
      font-weight:bold;
      text-shadow:1px 2px 1px #fff;
}
#bgsGR_Accord .bag a:hover{
      color:red;
      text-shadow:1px 2px 1px #000;
} #bgsGR_Accord p {
      height:auto;
      min-height:height: 150px; 
      padding: 5px;
      font-size:11px; 
      font-family:helvetica;
      color:#330033;
}
#bgsGR_Accord .bag p img {
      width:60px;
      float:left;
      margin:0 10px 0 0;
      padding:3px;
      border:3px solid #222;
      border-radius:10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      box-shadow:4px 4px 4px #888;
      -moz-box-shadow:4px 4px 4px #888;
      -webkit-box-shadow:4px 4px 4px #888;
}  #bgsGR_Accord div:hover { 
      height:auto;
      min-height: 180px;
}
#bgsGR_Accord div:hover a {
      background:lightblue url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVz9wCoUXySNtJawEP52oQuFEM17q6zj20i9Soo_TrK-6PaBMmqWRlUKCu4_EdyQetF3LItG3PT_JWtYEuouFfNFhpffOj7LYfS2ui8mwCMHooMhB_Tud2gVeT3nc7g9dnv_4V_z5RXbo/s1600/ArrowDownAnimaBlue.gif) left top no-repeat;
      background-position:4px 6px; 
      border-bottom: 1px solid #666666;
      font-weight: bold;
}
#bgsGR_Accord ul.acur{
      background:#ccc;
      border:1px solid #444444;
      list-style:none;
      margin:0;
      padding:10px 2px; }
#bgsGR_Accord ul.acur li{
      border:1px solid #333333;
      border-radius:5px;
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      margin-bottom:2px;
      background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqy1pvaVv9iW8iXhrdo5ruc9Q_RALyyr2sop1vL9kPtqjiaHSzTv4qvpFTirPJ2cIiRVRf_VY2tO-hFLp1i3zkywN62T3z_ekWJne3VJJqQ5cEMkv8Xy6_VnBpwpPqVzJDjr0LmlDxNv0/s1600/bgFadeBlue.png
http://i31.tinypic.com/ojkw9i/bgsGR/images/bgFadeBlue.jpg) top left repeat-x;
      background-position:0 2px;
      padding:1px 2px;
      box-shadow:1px 2px 1px #fff;
      -moz-box-shadow:1px 2px 1px #fff;
      -webkit-box-shadow:1px 2px 1px #fff;
}
#bgsGR_Accord ul.acur li:hover{ 
      background:#eee;
} #bgsGR_Accord ul.acur li a{
      background-position:-16px 8px;
      font:11px Droid Serif; 
      font-weight:600;
      color: #000099;
      text-shadow:0px 1px 1px #fff;
      padding:8px 0 2px 15px;
      background: -moz-linear-gradient(bottom, #00abeb, #fff);
      background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff)); 
}
#bgsGR_Accord ul.acur li a:hover{text-shadow:0px 1px 1px #000;
      color:#FF0000;
      background: red url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7w58_C_HpI_ghi6bLJYr1JO9wPV4u86EWxz-MEMIdywDsSmi7z4QBW9EFUo_Pw9ifdC6Z_x-3ZWdhMcavSMFOpM18a40nhUxj2o75VxO92Iz1gYiBkmvpJg3kuXz1xh5qLGOd1reLZQw/s1600/bgBlackBlueLineV40H5.gif) bottom repeat-x;
} </style>
 
Kode CSS-2
<!--[if IE]>
<style type="text/css">
#bgsGR_Accord { filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=135, Strength=6);}
</style>
<![if endif]-->
Cara Menmbuat dan Menggunakan CSS-3 Accordion Menu Serba Guna
  • Login to Blogger (Login ke Blogger) : Tuliskan User Name (Nama Pengguna) atau Email Address kemudian tuliskan juga Password (Sandi) baru lanjutkan KLIK "Login".
  • Dasboard (Dasbor) : Setelah masuk di halaman "Dasboard" KLIK "Design (Rancangan)".
  • Design (Rancangan) : KLIK link "Add Gadget (Tambah Gadget)".
  • KLIK link "HTML/Javascript".
  • Copy-Paste kode CSS dan kode HTMl "CSS-3 Accordion Menu Serba Guna" di box Penambahan Widget.
  • KLIK "SAVE (Simpan)".
  • Buka Blog untuk melihat hasilnya.
Kode HTML: CSS-3 Accordion Menu Serba Guna

<<div id="bgsGR_Accord">

<div class="bag">
<a href="#">daroef Menu</a>
<ul class="acur">
<li><a href="http://daroef.blogspot.com/2010/12/nonton-tv.html" target="tv online">script tv online</a></li>
<li><a href="http://daroef.blogspot.com/2010/12/maen-bilyar.html" target="pasang game di blog">pasang game di blog</a></li>
<li><a href="http://daroef.blogspot.com/search/label/sejarah" target="sejarah">sejarah indonesia</a></li>
<li><a href="http://daroef.blogspot.com/search/label/komputer" target="komputer">komputer</a></li>
<li><a href="http://daroef.blogspot.com/search/label/cheat" target="cheat point blank">cheat point blank</a></li>
<li><a href="http://daroef.blogspot.com/search/label/cerita%20abu%20nawas" target="kumpulan cerpen">kumpulan cerpen</a></li>
<li><a href="http://daroef.blogspot.com/" target="_blank">gubhug reyot</a></li>
</ul>
<p><img src="http://img687.imageshack.us/img687/5398/resah.gif" />asal usul blog ini diciptakan .</p>
</div>

<div class="bag"><a href="http:daroef.blogspot.com">sejarah blog?</a>
<p><img src="http://img687.imageshack.us/img687/5398/resah.gif" />saya bertujuan mencipatakn blog ini untuk berkumpul nya anak anak daroef genk..terima kasih buat master master blog yang membimbing saya </p>
</div>



<div class="bag"><a href="http://daroef.blogspot.com/search/label/TIPS%20N%20TRIK%20BLOG">tips n trik blog</a>
<p><img src="http://img88.imageshack.us/img88/1400/74577496.jpg" />disini ad beberapa tutor yang saya akutip dari blog yang saya anggap guru yaitu blog gubhugreyot.blogspot.com</p>
</div>

<div class="bag"><a href="http://daroef.blogspot.com/search/label/HACKING">hacking</a>
<p><img src="http://img687.imageshack.us/img687/5398/resah.gif" />disini ada beberapa cara hacking yang saya kutip dari beberapa blog follower saya</p>
</div>
<div class="bag"><a href="http://daroef.blogspot.com/search/label/HACKING">hacking facebook</a>
<p><img src="http://img687.imageshack.us/img687/5398/resah.gif" />isilahkan download tools nya</p>
</div>

<div class="bag"><a href="http://daroef.blogspot.com/search/label/SOFWARE">sofware gartis</a>
<p><img src="http://img718.imageshack.us/img718/903/sexyl.gif" />buat pecinta sofware gratis download aja disini boozzz</p>
</div>
<div class="bag"><a href="http://www.facebook.com/firman.sanjaya">my facebook</a>
<p><img src="http://img687.imageshack.us/img687/5398/resah.gif" />my facebook</p>
</div>

</div>
Catatan/Keterangan :
  1. Kode CSS selain dapat di simpan melalui Page Elements - Add a Gadget bersamaan dengan kode HTML.
    Jika kode CSS hendak di simpan di atas dan di bawah kode ]]></b:skin>:
    - Kode CSS-1 disimpan diatas kode ]]></b:skin>. Buang/hilangkan <style type="text-css"> dan </style>.
    - Kode CSS-2 disimpan di bawah ]]></b:skin> dengan <style type="text-css"> dan </style> tetap digunakan.
  2. Untuk merubah lebar Accordion, ganti ukuran width pada :
    • #bgsGR_Accord .bag {
      width: 200px;
      ==> 200px Ganti dengan ukuran yang dikehendaki.
    • #bgsGR_Accord {
      width:205px;
      ==> 205px adalah width pada #bgsGR_Accord .bag { ditambah 5px.
  3. Jika dikehendaki gambar, gunakan image/gambar dalam ukuran kecil untuk ditampilkan di accordion karena ukuran yang disertakan di kode width=60px
  4. Bila semua bagian akan diisi dengan daftar menu/posting, silahkan gunakan kode pada bagian teratas di kode HTML yang menggunakan kode ul dan li
  5. Link-1 dan yang lain diganti dengan URL seperti : htt:// ..... dan Link Title berisi Judul

tutor ini di kutip dar i blog yang saya anggep master saya ini di blog nya http://gubhugreyot.blogspot.com
    di terbit kan oleh RCA di 11.28
    Label:

    0 boleh koment:

    Posting Komentar

    Langganan: Posting Komentar (Atom)
    daroef
    SELAMAT DATANG DI BLOG BOCAH LEBAKSIU KIDUL