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

<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/AVvXsEhQ2wPlCFDoN3jpfq7mEXXOaZNHPArhCS7JIMsUKbMT8p1fJYzVtQw4l11WeOZnsHPDlSzzZFxngF9XZaMTo_5UjT78CgxzeXTphNBShdT8jOWhk0uCZALP1DU33XHZjL2tTcn7b7M-fBs/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/AVvXsEjFSSut119zh9hyLcxp6vweUGKIFfb6ax1lTYguG4JA9ZWTjg62sGk48i4VxarsTrEHr9K_5ZyEuSVth_pIWtjRoTq4VjENzusFAddc_43smFQvNDt-QosLSdtJv1HXDwWlAEJn6o_As0A/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl9sbFHEzMeETEuXOZ_l7_Mc_fHfTxEy2xREstwAixBVL-6zp9tbox4WCS1NhclxM9U2PgYFxXjnIyhcCYUZ3FCKWasMQPuc0grtrC9y7aZfW9u66e8Fv7nGMBrTahZuQhGOkiveu1I8o/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/AVvXsEgtbJmR_mH2mHxtx8702tONLghK9Z2ssTqiJdOvhsjrVHRjYQ6u95vdxtepoPzHMgoOrTQmKZpkqCGdHmjrqF4befAiPe7Ef2oNOrFGa4_IS3Wj9qytrUbKOzQr1EAHBkuMSSo3PR7lFYA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHRnT464jiaFVaM5OUyT5OTNHbZ5WUwwoykwyF9s_PTBsVniaW9sBhovh-8CFRf1f4AxCPdfIxhVNUNYaL06hhPyhOYiqwD18lXJbbAie9G0yrHxH-l0xv_OIO17VBNDg9jQEdY4Ca8jM/s1600/bgBlackBlueLineV40H5.gif) bottom repeat-x; } </style> <div id="bgsGR_Accord"> <div class="bag"> <a href="#">Daftar Menu</a> <ul class="acur"> <li><a href="Link-1" target="_blank">Link Title-1</a></li> <li><a href="Link-2" target="_blank">Link Title-2</a></li> <li><a href="Link-3" target="_blank">Link Title-3</a></li> <li><a href="Link-4" target="_blank">Link Title-4</a></li> <li><a href="http://gubhugreyot.blogdetik.com/" target="_blank">gubhug reyot</a></li> </ul> <p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP7qNFOwGCgU__kkqx_DAPUZDwPZXlqgrfMwIU_XTw0Q6UrNqsGSu-ozqjj8tMNm9Ix0qBkwXozpEGrn11HQHLqbC19NABcC-Ljo9l5sl2MJX-szPcGpKItltxMAoVXXi1S1cLNDdTPoQ/s320/Thumb.jpg" />Kesungguhan pemerintah dalam menyelesaikan kasus Century patut dipertanyakan oleh masyarakat.</p> </div> <div class="bag"> <a href="#">Century Mandeg?</a> <p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP7qNFOwGCgU__kkqx_DAPUZDwPZXlqgrfMwIU_XTw0Q6UrNqsGSu-ozqjj8tMNm9Ix0qBkwXozpEGrn11HQHLqbC19NABcC-Ljo9l5sl2MJX-szPcGpKItltxMAoVXXi1S1cLNDdTPoQ/s320/Thumb.jpg" />Kesungguhan pemerintah dalam menyelesaikan kasus Century patut dipertanyakan oleh masyarakat. Berbulan-bulan sudah semenjak pansus di DPR RI digelar hingga pansus ini selesai ternyata tak pernah sekalipun kabar angin tentang Century dan para pelaku yang diduga keras terlibat"bancakan" uang negara akan segera di vonis di pengadilan. Melempemnya kasus ini diduga kuat akibat banyaknya petinggi negeri yang terlibat, sehingga apabila terbongkar tuntas maka puluhan "orang penting" dimungkinkan menjadi penghuni "hotel prodeo" sekaligus memciptakan efek rantai hingga ujung-ujungnya akan menyeret petinggi negara dilingkungan pemerintahan ....</p> </div> <div class="bag"> <a href="#">Judul (Title)</a> <p> <img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/LatemBleding.gif" />Tuliskan teks di sini ...</p> </div> <div class="bag"> <a href="#">Judul (Title)</a> <p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ye9G5DytvUFaOucUw4NfRf1NSDqo2Y-a6YG1aFZKnH9LSMnIRJlVOEI-bYOlxt0lRUrEOFiJdsab3pJNV3WiUSuoGAWVkJPwpLHoQBMA4hmIq6yZEC5Q4_U260F0mKun0SiJv-6CbMM/s320/MerahPutihSukarno.jpg" />Tuliskan teks di sini ...</p> </div> <div class="bag"> <a href="#">Judul (Title)</a> <p> <img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/ManusiaPurba.gif" />Tuliskan teks di sini ... </p> </div> <div class="bag"> <a href="#">Judul (Title)</a> <p> <img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/CircleGRV66H66.jpg" />Tuliskan teks di sini ...</p> </div> </div>