April 22, 2013

Menu Cantik Dengan CSS3 3D Accordion

Halo sob...

Pembahasan kali ini mengenai menu accordion, dimana menu accordion sendiri sekarang begitu populer karena penggunaannya yang sangat dibutuhkan untuk menampilkan banyak konten dalam sebuah area saja.



Kalau pada umumnya, menu accordion memberikan tampilan vertikal atau horizontal saja, maka bagaimana tampilan accordion 3D??? Menu accordion 3D ini sendiri dapat digunakan untuk menampilkan berbagai artikel yang merupakan artikel pilihan dan ditampilkan dalam bentuk 3D sehingga sangat menarik untuk dicoba...

Coba lihat DEMO dibawah, atau lihat demo disini.



Tertarik untuk menampilkannya???

1. Login dulu ke blogger.

 

2. Pilih Template - Edit HTML.







3. Letakkan kode CSS berikut diatas </style> atau ]]></b:skin> :

#accordion {
      margin: 100px;
   }
   #accordion article {
      -webkit-transform: perspective(900px) rotateY(60deg);
      -webkit-transition: all 0.7s ease-in-out;
      background: #fff;
      border: 1px solid #f3f3f3;
      box-shadow: 0px 5px 15px gray;
      float: left;
      height: 420px;
      margin-left: -180px;
      padding: 20px;
      width: 220px;
   }
   #accordion article:first-child {
      margin-left: 0px;
   }
   #accordion article img {
      float: left;
      padding: 0 10px 5px 0;
   }
   #accordion article:hover {
      -webkit-transform: perspective(0) rotateY(-10deg);
      margin: 0 140px 0 -60px;
   }

4. Simpan Template.

5. Letakkan kode HTML berikut di area dimana temen-temen ingin 3D Accordion ini ditampilkan :

<div id="accordion">
   <article>
      <h2>Section 1</h2>
      <img src="img/img1.jpg" alt="" width="100" height="88" /> 
      <p>
         ISI Section 1.
      </p>
   </article>
   <article>
      <h2>Section 2</h2>
      <img src="img/img2.jpg" alt="" width="100" height="75" /> 
      <p>
         ISI Section 2.
      </p>
   </article>
   <article>
      <h2>Section 3</h2>
      <img src="img/img3.jpg" alt="" width="100" height="67" /> 
      <p>
         ISI Section 3.
      </p>
   </article>
   <article>
      <h2>Section 4</h2>
      <img src="img/img4.jpg" alt="" width="100" height="75" /> 
      <p>
         ISI Section 4.
      </p>
   </article>
</div>

6. Enjoy.


Bagaimana sob???

Oiya, menu 3D accordion ini hanya dapat bekerja dengan baik pada browser Chrome dan Safari.

*Ganti kode hijau dengan judul artikel dan kode biru dengan isi artikel, serta kode oranye dengan gambar dari artikel tersebut.


Terima kasih...
Semoga bermanfaat...

23 comments

  1. Replies
    1. baru aja aq coba sob.., trnyata gk jalan di firefox..., agar jalan carax gmn ya? thx..! \o/

      Delete
    2. memang saat ini hanya work di chrome dan safari mas, :'( kalo firefox dan IE saya udah tes memang hasilnya tidak bagus,insya Allah akan saya update bila work di browser lain...

      Delete
  2. wohh...ternyata jagoan teknik blogging nih. keren abis, tutorialnya cantik2.
    Oh iya follow sukses mbak?

    ReplyDelete
    Replies
    1. :p ga jago kok mba, newbie baru belajar...
      terima kasih yah mba... \o/

      Delete
  3. saya tertarik sekali untuk belajar lebih banyak css3 ini, memang banyak yang dapat kita lakukan dari css3.
    Saya sudah coba 3d accordionnya hanya saja saya sedang memakai mozilla jadi tidak bisa jalan. Lain waktu saya coba chrome sob,
    Terimakasih atas tutor yang bagus ini sob, mudah mudahan anda dapat rahmat dengan pembagian tutor ini. Salam kenal dan salam blogger

    ReplyDelete
    Replies
    1. terima kasih banyak sob atas support nya... :)

      Delete
  4. Wah artikel menarik dan keren sayang posting saya belum terlalu banyak, mesti dicoba lain kali .... salam :)

    ReplyDelete
  5. keren ya..tapi lum dicoba nanti nanti aja...

    ReplyDelete
  6. Blog nya bagus buat aku yang baru newbie ... belajar lgi ah nyoba" ... thanks alot ya mbak izah ^_^

    ReplyDelete
  7. postigan yang bagus zob,,,jadi pgen coba! :-bd

    ReplyDelete
  8. Kalau menu sejenis(accordion), by Label ada nggak gan?. Maksud saya supaya nggak pakai mengisikan link-posting satu persatu.
    Lagi perlu nih saya gan...

    ReplyDelete
    Replies
    1. kalau mau membuat accordion menurut label bisa gan...
      copas saja kode ini dan masukkan dalam laman kosong atau modifikasi untuk diletakkan pada sidebar :
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
      <link rel="stylesheet" media="screen" href="http://aiizahh-reader.googlecode.com/svn/trunk/accordionbylabel.css" type="text/css" />
      <script type="text/javascript">
      var showNew = true,
      accToc = true,
      openNewTab = true,
      maxNew = 7,
      baru = "New!",
      sDownSpeed = 500,
      sUpSpeed = 500;
      </script>
      <script type="text/javascript" src="http://aiizahh-reader.googlecode.com/svn/trunk/accordionbylabel.js"></script>
      <script src="http://aiizahh.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

      ganti URL blog dengan URL blog agan, dan lihat kode yang diberi bold, kalau sudah ada di template agan yang seperti itu, tidak perlu digunakan lagi...
      Semoga membantu... :-bd :-bd :-bd

      Delete