Menu Slide Accordion CSS

Kali ini saya akan memberikan tips cara membuat menu slide accordion, dimana menu ini sangat menarik dan cantik tampilannya, karena kita dapat memasang gambar disertai dengan isi daftar menu kita. Selain itu gambar tersebut akan bergerak/menzoom saat mouse melewati gambar tersebut, pokoknya mantap deh. (hehehe...).
Jika kalian ingin melihat hasilnya silahkan anda liat menu paling atas di blog ini.



Oke cuy mungkin langsung saja kita ke KTP ya....

Untuk membuat Menu Slide Accordion ini silahkan ikuti langkah-langkah di bawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Jangan lupa di backup terlebih dahulu template anda biar aman lalu jangan lupa centang
     "Expand Widget Templates"
5. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

 6. Setelah ketemu kode kemudian kamu copy kode di bawah ini dan letakan tepat di atas kode  </head> 

Kode CSS Slide Accordion

<style type='text/css'> /*widget Fitur Slide Accordion by noer Ceo http://www.carabuatwebgratis.com */ ul.accordion li.bg1{     background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDkVTiNLnlAXo1MxrXXFlP4tffU8RaTiC6zwo0ygojmwD81zjA-xCQY9WCTKV3XD13IzMHRKUTJ6U2y4fCBj6rQ3_1NrxjqJ7JJ-8hOfPx0KMWIw7HWHN_VLjeeANfTBho02c2H5QIeFW/)no-repeat; } ul.accordion li.bg2{     background:url(http://freeforumsigs.com/ffs_gallery/albums/batch/zz-g%20male/spiderman_%283%29.png)no-repeat; } ul.accordion li.bg3{     background:url(http://cdn.pimpmyspace.org/media/pms/c/0z/z4/41/atego.png)no-repeat; } ul.accordion li.bg4{     background:url(http://donovanolson.files.wordpress.com/2010/09/batman.png)no-repeat; } ul.accordion li.bg5{     background:url(http://www.techviva.com/wp-content/uploads/2011/08/e647_9in_mario_figures.jpg)no-repeat; } </style> <style type='text/css'> /*widget Fitur Slide Accordion by noer <a href='http://www.carabuatwebgratis.com/'/>*/ .ElegantAccordion{ position:relative; width:980px; height:385px; margin:auto; overflow:hidden; background-color:#000; background:transparent url(http://images4.wikia.nocookie.net/__cb20110503071218/14ipt/images/9/92/Apple_ipad_logo.png) no-repeat bottom right; background-repeat:no-repeat; background-position:50% 50%; -moz-box-shadow:1px 1px 5px #000; -webkit-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px 4px 4px 4px;  } .titel-ElegantAccordion{ display: block; position:absolute; width:100%; height:80px; top:0px; float: left; font-size:100px; font-family:Arial, Helvetica, Sans-serif; font-weight:normal; color:#B85BED; line-height:80%; padding:30px 20px; cursor:pointer; text-shadow:4px 1px 1px #000; text-decoration:none; color:#FFBA00; z-index:999999; } .titel-ElegantAccordion a:link { color:#ddd; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } .titel-ElegantAccordion a:visited { color:#339025; text-decoration:none; } .titel-ElegantAccordion a:hover { color:#C3E9A4; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } .reference{ clear:both; top:150px; left:10px; position:absolute; text-align:left; font-size:10px; font-family: Cambria, serif; font-weight:bold; line-height: 1em; width:250px; padding:0px 20px 5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7UkP-R77O-DMY15iycwQ3Sc1gSLiPYI3iDRVFzCNueTeTqrowLtz-dV3YCa5yPFAwUrS7sIYIEK_W5wDYI-LnuTxBIGnXOToQYU9SRd03_-5QROVuuEUmv8kv55rYddGMuYTdCgOYyMk/s1600/windows-7.jpg)no-repeat; } .reference p a{ text-transform:uppercase; text-shadow:1px 1px 1px #fff; color:#ffffff; text-decoration:none; font-size:14px; font-family: Cambria, serif; line-height: 1em; } .reference p a:hover{color:#347D29;} ul.accordion{     list-style:none;      position:absolute;     right:0px;     top:0px;     font-family: Cambria, serif;     font-size: 16px;     font-style: italic;     line-height: 1.5em; } ul.accordion li{     float:right;     width:115px;     height:380px;     display:block;     border-right:2px solid #fff;     border-bottom:2px solid #fff;     background-color:#000000;     background-repeat:no-repeat;     background-position:center center;     position:relative;     overflow:hidden;     cursor:pointer;       -webkit-transition: all 1s ease-in-out;     -moz-transition: all 1s ease-in-out; } ul.accordion li:hover{     float:right;     width:400px;     height:380px;     display:block;     border-right:2px solid #000000;     border-bottom:2px solid #000000;     background-color #000000;     background-repeat:no-repeat;     background-position:center center;     position:relative;     overflow:hidden;     cursor:pointer;   } ul.accordion li.bleft{     border-left:2px solid #000000; } ul.accordion li .heading{     background:  -moz-linear-gradient(         top,         #140202 0%,         #c20606 25%,         #c71818 74%,         #700e0e 72%,         #140101);     background: -webkit-gradient(         linear, left top, left bottom,         from(#140202),         color-stop(0.25, #c20606),         color-stop(0.74, #c71818),         color-stop(0.72, #700e0e),         to(#140101));     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border: 0px solid #ffffff;     -moz-box-shadow:         0px 3px 11px rgba(247,239,239,0.5),         inset 0px 0px 1px rgba(242,239,239,1);     -webkit-box-shadow:         0px 3px 11px rgba(247,239,239,0.5),         inset 0px 0px 1px rgba(242,239,239,1);     text-shadow:         0px -1px 0px rgba(000,000,000,0.2),         0px 1px 0px rgba(255,255,255,0.3);     padding:10px;     margin-top:325px;     opacity:0.9;     text-transform:uppercase;     font-style:normal;     font-weight:bold;     letter-spacing:1px;     font-size:14px;     color:#ffffff;     text-align:center;     text-shadow:-1px 1px 1px #ffffff;     -webkit-transition: all 1s ease-in-out;     -moz-transition: all 1s ease-in-out; } ul.accordion li:hover .heading{     background:  -moz-linear-gradient(         top,         #140202 0%,         #c20606 25%,         #c71818 74%,         #700e0e 72%,         #140101);     background: -webkit-gradient(         linear, left top, left bottom,         from(#140202),         color-stop(0.25, #c20606),         color-stop(0.74, #c71818),         color-stop(0.72, #700e0e),         to(#140101));     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border: 0px solid #ffffff;     -moz-box-shadow:         0px 3px 11px rgba(247,239,239,0.5),         inset 0px 0px 1px rgba(242,239,239,1);     -webkit-box-shadow:         0px 3px 11px rgba(247,239,239,0.5),         inset 0px 0px 1px rgba(242,239,239,1);     text-shadow:         0px -1px 0px rgba(000,000,000,0.2),         0px 1px 0px rgba(255,255,255,0.3);     padding:10px;     margin-top:-50px; } ul.accordion li .description{     position:absolute;     width:300px;     height:1px;     bottom:2px;     left:0px;     display:blok;     -webkit-transition: all 0.5s ease-in-out;     -moz-transition: all 0.5s ease-in-out; } ul.accordion li:hover .description{     position:absolute;     width:300px;     height:240px;     bottom:0px;     color:#000000;     left:0px;     display:blok; } ul.accordion li .description .pengantar{     float:left;     width:150px;     height:300px;     margin-right:0px;     padding-rightt:10px;    bottom:40px; } ul.accordion li .description .daftar{     float:left;     width:290px;     height:180px;     margin-left:5px;     margin-right:2px;     bottom:40px;     padding-right:2px;     padding-left:5px;     overflow:auto;     border:2px solid #ccc;         border-radius: 5px;     background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvh1cemXcth_-8Mu5rLtp2JitZcWtYNkPq8fVOjK723N3rikIbFdhZOSouVXoVDQb9TG_e-PWvyKR6jKZU3rYdoGLKodjbnt96Tk0q3-9zRL9M_L1WxQKekujeWpmUcnSvqDOhXpX78CVl/s200/bgDescription.png) repeat-x top left; } ul.accordion li .description .daftar a.menu{     display:block;     font-style:normal;     font-weight:bold;     letter-spacing:normal;     font-size:13px;     color:#000000;     padding:5px;     margin-right:5px;     text-align:left;     text-decoration:none;     line-height:12px;     border-bottom:1px solid #ccc; } ul.accordion li .description .daftar a.menu:hover{     font-style:normal;     font-weight:bold;     letter-spacing:1px;     font-size:13px;     color:#000000;     text-align:left;     text-decoration:none;     background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikCRsQDCYYo2tjVJPmHXRTQZHlrXhwOljDgRvS47_hdcsaBs5ds1tBwsU0K1oI0fb9_1lrrtu8bp1wpV1bOpqgU6fsRZhUrrAq5mhQr62e_fAgbSIfGdbC9W-a8NdP48WUE3dZs4InDkA/h1600/bg_biru_9.png)bottom repeat-x; } ul.accordion li .description h2{     float:left;     width:200px;     text-transform:uppercase;     font-style:normal;     font-weight:bold;     letter-spacing:1px;     font-size:20px;     color:#e6900e;     text-align:left;     padding-left:10px;     padding-right:10px;     text-shadow:1px 2px 1px #000; } ul.accordion li .description p{     float:left;     width:200px;     margin-left:10px;     margin-top: 0px;     font-family: Segoe Print, sans-serif;     font-size: 13px;     font-style: italic;     font-weight: normal;     text-transform: none;     letter-spacing: normal;     line-height: 1.6em; } ul.accordion li .description a.more{     margin-left:100px;     margin-top:10px;     text-transform:uppercase;     font-style:normal;     font-size:11px;     text-decoration:none;     color:#e6900e; } ul.accordion li .description a.more:hover{     text-transform:uppercase;     font-style:normal;     font-size:11px;     text-decoration:none;     color:#333;     font-weight: bold; } ul.accordion li .bgDescription{     background:#000000;     height:1px;     position:absolute;     bottom:-20px;     left:0px;     width:100%;     display:blok;     -webkit-transition: all 0.5s ease-in-out;     -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } ul.accordion li:hover .bgDescription{     background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvh1cemXcth_-8Mu5rLtp2JitZcWtYNkPq8fVOjK723N3rikIbFdhZOSouVXoVDQb9TG_e-PWvyKR6jKZU3rYdoGLKodjbnt96Tk0q3-9zRL9M_L1WxQKekujeWpmUcnSvqDOhXpX78CVl/s500/bgDescription.png) repeat-x top left;     height:270px;     position:absolute;     bottom:0px;     left:0px;     width:100%;     display:blok; } </style>

 NB: Teks yang berwarna merah adalah ULR gambar yang akan muncul di menu, silahkan anda ganti sesuai dengan gambar yang anda inginkan.

7. Lalu simpan Template anda.

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada gadget yang ada dibawah header, ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

 

Kode HTML/JavaScript

<div class="ElegantAccordion"> <div class="titel-ElegantAccordion"> <a href="adaraghassani.blogspot.com">COPAS BLOG</a> </div> <div id="content"> <div class="title"></div> <div class="reference"> <p><a href="ULR ARTIKEL">BERANDA</a></p> <p><a href="ULR ARTIKEL">ARTIKEL KOMPUTER</a></p> <p><a href="ULR ARTIKEL">TUTORIAL BLOG</a></p> <p><a href="ULR ARTIKEL">PENDIDIKAN</a></p> <p><a href="ULR ARTIKEL">SOFTWARE</a></p> </div> <ul class="accordion" id="accordion"> <li class="bg1"> <div class="heading">PENDIDIKAN</div> <div class="bgDescription"></div> <div class="description"> <h2>BERANDA</h2> <div class="daftar"> <a target='http://adaraghassani.blogspot.com/2012/02/rpp-berkarakter-silabus-berkarakter-kkm.html'>Silabus dan RPP berkarakter SD 2012<hr/></a> <a target='http://adaraghassani.blogspot.com/2012/02/silabus-rpp-tingkat-sd.html'>Silabus dan RPP SD 2012 </a><hr/> <a target='http://adaraghassani.blogspot.com/2012/02/kumpulan-silabus-dan-rpp-untuk-mts-2011.html'>Silabus dan RPP MTs (Agama)2012 </a><hr/> <a target='http://adaraghassani.blogspot.com/2012/02/silabus-dan-rpp-smpmts-2012.html'>Silabus dan RPP SMP/MTs 2012 (Umum)</a><hr/> <a target='http://adaraghassani.blogspot.com/2012/02/silabus-rpp-berkarakter-sma-2012.html'>Silabus dan RPP SMA 2012</a><hr/> <a target='http://adaraghassani.blogspot.com/2012/02/emispendis-mts.html'>Emis Pendis</a><hr/> <a target='http://adaraghassani.blogspot.com/2012/02/administrasi-januari-1-2012-dadan.html'>Administrasi Pendidikan</a><hr/> <a target='http://adaraghassani.blogspot.com/2012/02/program-semester-tingkat-sd-2012.html'>Program Smester</a><hr/> </div> </div></li>               <li class="bg2"> <div class="heading">KOMPUTER</div> <div class="bgDescription"></div> <div class="description"> <h2>KOMPUTER</h2> <div class="daftar"> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/sejarah-komputer-download-winrar-untuk.html'>Ilmu Komputer<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/download-buku-panduan-corel-draw.html'>Panduan Corel Draw<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/makalah-jaringan-komputer-function-var.html'>Panduan Ms Word 2007<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/tutorial-powerpoint-2007.html'>Panduan PowerPoint 2007<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/01/sejarah-komputer.html'>Sejarah Komputer<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/download-tutorial-photoshop-buku.html'>Panduan Photoshop<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/300-software-gratis.html'>300 Free Software<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/01/free-download-winrar-32-bit-dan-64-bit.html'>Winrar 32 dan 64 bit<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/cara-mengganti-gambar-mouse-pada.html'>Animai Mouse<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/merubah-tampilan-windows-7-seperti.html'>Merubah tampilan WS 7 seperti WS 8<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/download-game-naruto-super-mario.html'>Games<hr/></a> </div> </div></li> <li class="bg3"> <div class="heading">ISLAM</div> <div class="bgDescription"></div> <div class="description"> <h2>ISLAM</h2> <div class="daftar"> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/kisah-25-nabi-rosul.html'>Sejarah 25 Nabi<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/daftar-mushaf-dan-tilawah-dari-1-ke-50.html'>Murotal<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/keistimewaan-al-quran.html'>Keistimewaan Al Quran<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/keistimewaan-surat-yasin.html'>Keistimewaan Surat Yasin<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/rahasia-dan-fakta-ayat-kursi.html'>Keistimewaan Ayat Kursi<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/keutamaan-surat-al-fatihah.html'>Keistimewaan Surat Al Fatihah<hr/></a> <a target="_blank" href='http://adaraghassani.blogspot.com/2012/02/cara-cepat-belajar-al-quran.html'>Cara cepat Belajar Al Quran<hr/></a> </div> </div></li>               <li class="bg4"> <div class="heading">BLOG</div> <div class="bgDescription"></div> <div class="description"> <h2>TUTORIAL BLOG</h2> <div class="daftar"> <a target="_blank" href="http://adaraghassani.blogspot.com/2012/02/artikel-komputer-httpartikelkomputerku.html"> Tips Buat Blog<hr/></a> <a target="_blank" href="http://adaraghassani.blogspot.com/2012/02/tips-membuat-menu-di-blog.html">Tips Menu Blog<hr/></a> <a target="_blank" href="http://adaraghassani.blogspot.com/2012/02/tips-memper-cantik-blog.html">Tips Mempercantik Blog<hr/></a> <a target="_blank" href="http://adaraghassani.blogspot.com/2012/02/tips-agara-blog-terdeteksi-di-mesin.html">Tips Daftar Blog<hr/></a> <a target="_blank" href="http://adaraghassani.blogspot.com/2012/02/tips-seo-trik-seo-optimasi-seo-teknik.html">Tips SEO Blog<hr/></a> </div> </div> </li> <li class="bg5"> <div class="heading">BERANDA</div> <div class="bgDescription"></div> <div class="description"> <h2>BERANDA</h2> <div class="daftar"> <a target="_blank" href="ULR ITEM 1 ">Profil MTsN Cipondoh<hr/></a> <a target="_blank" href="ULR ITEM 1 ">Struktur Organisasi<hr/></a> <a target="_blank" href="ULR ITEM 1 ">Nama Guru MTsN Cipondoh Tangerang<hr/></a> </div></div></li></ul></div> </div>

NB: 

• Ganti teks yang berwarna kuning dengan alamat blog anda, sedangkan teks yang berwarna biru adalah judul dari blog anda.
• Untuk teks yang berwarna merah ganti ULR artikel anda. dan seterusnya. 

 5. Simpan dan lihat hasilnya

Semoga artikel ini bermanfaat buat anda. Silahkan anda COPAS artikel ini jika memang penting buat anda.