Cara Membuat Simple CSS3-jQuery Menu Collapsible

Simple Animated Collapsible Menu menggunakan jQuery-1.3.2.js dan CSS3 merupakan perpaduan menarik yang menggabungkan kesederhanaan script yang berbasis kinerja jQuery dan kemampuan penciptaan animasi dari CSS3. Perpaduan di antara keduanya mampu memberikan suguhan menu vertical yang sangat menarik, atraktif dan memberikan kemampuan fungsi secara maksimal. Kemampuan prima menu ini telah terbukti dengan uji coba yang dilakukan di template blogger dengan hasil cukup menakjubkan baik dari animasi yang tercipta ataupun fungsi dasarnya sebagai sebuah wadah menu. JQuery-1.3.2.js dapat anda ganti pula dengan jQuery-1.3.2.min.js atau jQuery-1.4.2.js dan jQuery-1.4.2.min.js.

Bentuk dasar Animated jQuery-CSS3 Vertical Colapsing Menu berbentuk sederhana dengan kode dasar seperti di bawah ini :
<div>
<ul>
    <li><a href="javascript:;">Menu-1</a>
       <ul>
          <li><a href="">Isi Menu-1</a></li>
       </ul>
    </li>
    <li><a href="javascript:;">Menu-2</a>
       <ul>
          <li><a href="">Isi Menu-2</a></li>
       </ul>
    </li> 
    <li><a href="javascript:;">Menu-3</a>
       <ul>
          <li><a href="">Isi Menu-3</a></li>
       </ul>
    </li>
</ul> 
</div>
 Untuk menggunakan menu ini, silahkan jQuery dan javascript collapsible menu disimpan di atas kode <head> secara berurutan dengan bentuk seperti di bawah ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
  Javascript Collapsible Menu
</script>
</head>
 Kode CSS diletakkan dan disimpan di atas kode ]]></b:skin> seperti berikut:

"Kode CSS Animated Collapsible Menu"
 
]]></b:skin> 
xHTML simpan melalui penambahan widget. Setelah
nantinya semua kode dan script terpasang dengan benar, maka sampeyan
tinggal menikmati cantiknya si collapsible menu dan mengisinya dengan
menu-menu atau link-link yang diperlukan untuk di wadahi di sini.
  • Kode CSS Collapsible Menu 
.boxong {
      background: #1c86fe url(http://i36.tinypic.com/2881kxf/gubhugreyot/images/bgCollaps.jpg) top left repeat;
      padding: 8px 3px 3px; 
      float: left;
      margin: 20px 5px 0;
      border: 2px solid #666;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      box-shadow: 1px 4px 15px #000;
      -moz-box-shadow: 1px 4px 15px #000;
      -webkit-box-shadow: 1px 4px 15px #000;
      }
.boxong span {
      font: 16px Droid Serif; 
      font-weight: bold; 
      color: #FFFF99; 
      padding: 5px;
      text-shadow: 1px 4px 2px #000; 
      } .bokongku {  
      font-family: Arial;
      font-size: 11px;
      }
ul#GRcollaps { 
      background: #996600;
      }
ul#GRcollaps, ul#GRcollaps ul {
      list-style-type:none;
      margin: 0;
      padding: 0;
      width: 200px;  
      }
ul#GRcollaps a {
      font: 12px Helvetica;
      display: block;
      text-decoration: none; 
      }
ul#GRcollaps li {
      margin-top: 1px;
      }
ul#GRcollaps li a {
      background: #333; 
      border: 2px solid #6e3502;
      color: #fff; 
      padding: 0.5em;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;   
      }
ul#GRcollaps li a:hover { 
      border-color: #fff; 
      border-radius: 8px; 
      -moz-border-radius: 8px; 
      -webkitborder-radius: 8px;
      background: #000;
      }
ul#GRcollaps li ul li a { 
      background: #ccc; 
      padding: 0.2em 0.5em;
      color: #000;
      padding-left: 20px;
      -o-transition: all 1s ease-out;
      -moz-transition: all 1s ease-out;
      -webkit-transition: all 1s ease-out;
      border-left: 5px #777 solid; 
      border-right: 3px #ccc solid;
      border-top: 3px #ccc solid; 
      border-bottom: 3px #ccc solid; 
      opacity: 0.8;
      }
ul#GRcollaps li ul li a:hover {
      background: #666;
      border-left: 15px #000 solid; 
      border-right: 3px #000 solid;
      border-top: 3px #000 solid; 
      border-bottom: 3px #000 solid; 
      padding-left: 15px;
      opacity:  1.0;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
      } 
  • Javascript Collapsible Menu
<script type="text/javascript">
function initMenu() {
$('#GRcollaps ul').hide();
$('#GRcollaps li a').click(
function() {
$(this).next().slideToggle('slow');});}
$(document).ready(function() {initMenu();});
</script>
  •  xHTML Collapsible Menu
<div class="boxong"><span>Daftar Menu</span>
<div class="bokongku">
<ul id="GRcollaps">
    <li>
    <a href="javascript:;">Nasi Goreng</a>
        <ul>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
        
 </ul>
    </li>

    <li>
    <a href="javascript:;">Minuman</a>
        <ul>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li> 
        </ul>
    </li>
</ul> </div>
</div





  • Langkah Pengerjaan
  1. Login to BloGGeR
  2. KLIK Design (Rancangan).
  3. KLIK Edit HTML.
  4. Cari kode <head>, kemudian simpan jQuery-1.3.2.min.js dan javascript Collapsible Menu di atasnya.
  5. Cari kode ]]></b:skin> , kemudian letakkan kode CSS Collapsible Menu di atasnya.
  6. KLIK SAVE/Simpan Template.
  7. Lanjutkan dengan menyimpan xHTML melalui penambahan widget.
  8. Setelah login dan sampai pada Page Elements (Elemen Laman), KLIK Add Gadget (Tambah Gadget) yang berada di sidebar atau yang lain (bebas), kemudian lanjutkan dengan copy-paste xHTML untk disimpan di box penambahan widget, setelah sampeyan KLIK HTML/Javascript.
  9. KLIK SAVE/Simpan dan lihat hasilnya dengan membuka blog.
  10. Ganti setiap link dan nama menu dengan milik sampeyan sendiri.
  11. Lebar box collapsible dapat diatur dengan merubah lebar (width) pada syntax ul#GRcollaps, ul#GRcollaps ul {width:;}.
  12. Untuk mengatur posisi box menu, silahkan rubah nilai margin pada syntax .boxong {margin: ;}
  13. Kode CSS dapat juga disimpan di widget bersamaan dengan xHTML dengan menambahkan kode seperti di bawah ini.
<style="text/css">

Letakkan kode CSS di sini !

</stye>

Letakkan xHTML di sini!

Download MP3: Dragonforce

Download MP3: AC / DC

Alexandre Desplat – Harry Potter And Deathly Hallows Part I

Alexandre Desplat - Harry Potter And Deathly Hallows Part I
Tracklist :
01. Obliviate 03:02
02. Snape To Malfoy Manor 01:59
03. Polyjuice Potion 03:33
04. Sky Battle 03:49
05. At The Burrow 02:35
06. Harry And Ginny 01:44
07. The Will 03:39
08. Death Eaters 03:15
09. Dobby 03:49
10. Ministry Of Magic 01:47
11. Detonators 02:24
12. The Locket 01:52
13. Fireplaces Escape 02:55
14. Ron Leaves 02:36
15. The Exodus 01:38
16. Godric’s Hollow Graveyard 03:15
17. Bathilda Bagshot 03:55
18. Hermione’s Parents 05:51
19. Destroying The Locket 01:11
20. Ron’s Speech 02:17
21. Lovegood 03:28
22. The Deathly Hallows 03:18
23. Captured And Tortured 02:57
24. Rescuing Hermione 01:51
25. Farewell To Dobby 03:44
26. The Elder Wand 01:37

Download Album DOWNLOAD

Cara Membuat Menu Dropdown

Apa sih dropdown menu itu?
Dropdown menu yang seperti ini itu lho :


Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :


Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://www.unozoneu.co.cc/2010/11/nightmare-cover-album-avenged-sevenfold.html"> Avenged Sevenfold </option>
<option value="http://www.unozoneu.co.cc/2010/11/download-mp3-guns-n-roses.html"> Guns N' Roses </option>
</select>

maka hasilnya akan seperti ini :



untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 2">Text 2</option>

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

ganti dengan kode ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

hasilnya akan seperti ini :



Gimana? mudah kan?