MEMBUAT ARTIKEL TERSEMBUNYI MENGGUNAKAN JQUERY 1.8.5

 

Perhatian!!ini bukanlah spoiler dan jangan pernah menyamakan ini dengan spoiler karena ini adalah Jquery 1.8.5 fold yang saya kembangkan dalam artikel. Sebelum membuatnya sobat harus mengetahui beberapa fungsi dalam javascript query di antaranya adalah. .click(function() Ini berfungsi memerintahkan bahwa Jquery akan bekerja jika di klik {direction: "horizontal"}, 10000 ) Ini berfungsi untuk arah pergerakan bisa horizontal maupun vertical semakin besar nilainya semakin lambat pergerakannya Setelah kenalan dengan fungsinya barulah kita mulai membuatnya, berikut ada dua cara yang bisa sobat kembangkan. Saya juga memberikan kode full, jadi sobat hanya perlu memasukannya di dalam postingan. Membuat pergerakan dari bawah dan samping dengan menggunakan Jquery 1.8.5 Di sini sobat akan menyembunyikan artikel sobat dalam button dengan menggunakan Jquery 1.8.5 fold. Kalu berkenan silahkan klik tombol besar di bawah.

Copy kode di bawah kemudian masukan dalam postingan sobat.

KODE 

negrionta

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {$("#ho").click(function(){$(".to").show( "clip",{direction: "vertical"}, 10000 );});$("#so").click(function(){$(".to").hide( "clip",{direction: "horizontal"}, 10000 );});});
</script>
<button id="ho">Ini artikel dari atas</button>
<div class="to">
<b>ISI ARTIKEL DI SINI TERSERAH ENTE MAU ISI APA AJE TAHU ISI JUGA BOLEH, TAPI JANGAN LUPA CABENYA DIKIT AJE SOALNYE CABE LAGI MAHAL SEKARANG.</b>
<button id="so">Tutup artikel ke samping!</button> </div>
<style type="text/css">
.t{display:none;}.to{display:none;}.tar{display:none;}
</style>  

Show Hidden Content Onmouseover

Untuk membuat CSS3 Full Animated Show Hidden Content Onmouseover cukup mudah karena semua kode tinggal simpan di template, kemudian xHTML-nya gunakan saat posting atau di widget blog, maka segalanya akan selesai dengan teramat cepat.
Berbeda dengan biasanya, dimana show hidden content lebih banya menggunakan "KLIK" untuk membuka dan menutup, kali ini kita akan memanfaatkan mouseover sebagai trigger untuk mengorek apa yang tersembunyi di dalam box. Amat praktis karena hanya perlu sentuhan cursor dan semua bagian serta merta terlihat. Untuk menutup lepas saja cursor dan biarkan box menutup kembali seperti sedia kala.
Demonya sobat bisa lihat yang ada di blog ini !!!

Langkahnya adalah sebagai berikut:
1.Login ke BloGGeR
2.kemudian halaman "Dasboard"
3.Setelah memasuki Page Element, KLIK link "Edit HTML"
4.Back-up Template dengan cara KLIK "Download Full Template (Download Lengkap Template) dan SAVE/Simpan "File Template" di Folder PC.
5.Cari kode ]]></b:skin>, kemudian simpan kode CSS dengan posisi seperti yang terlihat di kode CSS yang tertulis di bawah.
6.Jangan Lupa KLIK "SAVE/Simpan Template".(Simpan Template)

Copy paste KODE CSS di bawah ini:
letakan sebelum kode: ]]></b:skin>

KODE CSS

.box_ontamos {

      height: 45px;

      width: 230px;

      border: 2px solid #000;

      background: #888888;

      border-radius: 12px;

      -moz-border-radius: 12px;

      -webkit-border-radius: 12px;

      -o-transition: all 1s ease-in-out;

      -moz-transition: all 1s ease-in-out;

      -webkit-transition: all 1s ease-in-out;

      padding: 5px 5px;

      margin: 15px auto;

      font: 11px Arial;

      color: #555;

      overflow: hidden;

      box-shadow: 0 1px 15px #1E90FF;

      -moz-box-shadow: 0 1px 15px #1E90FF;

      -webkit-box-shadow: 0 1px 15px #1E90FF; 

      }

.box_ontamos:hover {

      min-height: 250px;

      border: 2px solid #00008B;

      background: #111;

      box-shadow: 0 1px 25px #1E90FF;

      -moz-box-shadow: 0 1px 25px #1E90FF;

      -webkit-box-shadow: 0 1px 25px #1E90FF;

      color: #0000ff; text-shadow: 0 1px 1px #000;

      }

.box_ontamos h3, .jerohan h3 {

      font-size: 14px; 

      font-family: Droid Serif;

      font-weight: bold;

      color: #ffffff;

      text-align: center;

      text-shadow: 2px 2px 3px #000; margin: 3px 5px;

      padding: 3px 10px;

      background: #000;

      border-radius: 10px;

      -moz-border-radius: 10px;

      -webkit-border-radius: 10px;

      -o-transition: all 1s ease-in-out;

      -moz-transition: all 1s ease-in-out;

      -webkit-transition: all 1s ease-in-out;

 height: 37px;

      }

.box_ontamos h3:hover {

      box-shadow: 0 1px 8px #000;

      -moz-box-shadow: 0 1px 8px #000;

      -webkit-box-shadow: 0 1px 8px #000; 

      color:#800000;border: 2px solid #0000ff;

      } 

.box_ontamos img.mini, .negri_ontamos img.minianima {

      width: 70px; 

      border: 4px solid #666;

      padding: 3px; 

      border-radius: 6px; 

      -moz-border-radius: 6px; 

      -webkit-border-radius: 6px; 

      float: left; margin: 0 10px 5px 0; 

      background: #222; 

      -o-transition: all 1.5s;

      -moz-transition: all 1.5s;

      -webkit-transition: all 1.5s;

      }

.box_ontamos img.mini:hover, .negri_ontamos img.minianima:hover {

      box-shadow: 1px 1px 15px #000; 

      -moz-box-shadow: 1px 1px 15px #000; 

      -webkit-box-shadow: 1px 1px 15px #000; 

      border: 4px solid #CCCCCC;

      background :#000; 

      -o-transform: scale(1.4); 

      -moz-transform: scale(1.4);

      -webkit-transform: scale(1.4);  

      margin-top: 20px;

      margin-left: 15px;

      }

.box_ontamos img.minianima:hover {

      -o-transform: scale(1.4) rotate(360deg) translate(0px);

      -moz-transform: scale(1.4) rotate(360deg) translate(0px);

      -webkit-transform: scale(1.4) rotate(360deg) translate(0px);

      } 

.ontadalam {

      margin-top: 15px;

      height: 200px;

      overflow: auto; 

      padding: 0 5px;

      -o-transition: all 1s ease-in-out;

      -moz-transition: all 1s ease-in-out;

      -webkit-transition: all 1s ease-in-out; background:#222; 

      }

.ontadalam:hover {

      background: #000000;

      color: #aaa;

      text-shadow: 0 0px 1px #fe0303;

      } 

.ontadalam h3 {

      margin: 20px 0; 

      max-width: 210px;

      background: #eeeeee;

      box-shadow: 0 1px 12px #004400;

      -moz-box-shadow: 0 1px 12px #004400;

      -webkit-box-shadow: 0 1px 12px #004400;  

      }

.ontadalam h3:hover {

      background: #222222;

      border: 1px solid #000;

      border-left: 5px double #00ff00;

      border-right: 5px double #00ff00;

      box-shadow: 0 1px 12px #00ff00;

      -moz-box-shadow: 0 1px 12px #00ff00;

      -webkit-box-shadow: 0 1px 12px #00ff00;  

      }

.ontadalam ul {

      padding: 0; 

      margin: 0;

      list-style: none;

      }

.ontadalam li {

      padding: 0; 

      margin: 0;

      list-style: none; 

      border-bottom:1px dotted #777;

      } 

.ontadalam li a{

      color: #03d8fe;

      padding: 0; 

      margin: 0;

      text-decoration:none; 

      font-size: 12px;

      -o-transition: all 1.5s;

      -moz-transition: all 1.5s;

      -webkit-transition: all 1.5s; 

      }

.ontadalam li a:hover {

      -o-transform: scale(1.1);

      -moz-transform: scale(1.1);

      -webkit-transform: scale(1.1);

      color: red; 

      text-shadow: 0 1px 1px #000;

      margin-left: 20px;

      }

Dan letakkan kode di bawah ini tepat di bawah   ]]></b:skin>



<!--[if IE]>
<style type="text/css">
.box_ontamos {height: 30px; }
.box_ontamos h3, .ontadalam h3 {font-size: 13px; }
</style>
<![endif]-->

Copy paste KODE HTML di bawah ini:
letakan di Tambah Gadged

KODE HTML

<div class="box_ontamos">

<h3> Show Hidden </h3>

<div class="ontadalam">

<h3>negrionta</h3>

<img class="mini" src="http://i1125.photobucket.com/albums/l587/negrionta/logo001.png" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks.

<h3>New Post</h3>

<ul>

<li><a href="Link-1">Tuliskan disini : Link Title-1</a></li>

<li><a href="Link-2">Tuliskan disini : Link Title-2</a></li>

<li><a href="Link-3">Tuliskan disini : Link Title-3</a></li>

<li><a href="Link-4">Tuliskan disini : Link Title-4</a></li>

<li><a href="Link-5">Tuliskan disini : Link Title-5</a></li>

<li><a href="Link-6">Tuliskan disini : Link Title-6</a></li>

<li><a href="Link-7">Tuliskan disini : Link Title-7</a></li>

<li><a href="Link-8">Tuliskan disini : Link Title-8</a></li>

<li><a href="Link-9">Tuliskan disini : Link Title-9</a></li>

<li><a href="Link-10">Tuliskan disini : Link Title-10</a></li>

</ul>

</div>

</div>

teks

Cara Membuat Box Slide Image

Cara Membuat Box Slide Image (gambar)
Image slider tidak harus menggunakan javascript. Dengan CSS3 sebuah image slider dengan transisi gambar yang menarik melalui durasi waktu dan effek blur (opacity effects) bisa diciptakan. CSS3 Image Slider akan bekerja secara sempurna di Opera atau di safari. Meskipun demikian, sekalipun tidak seoptimal di browser tersebut, slider dapat menampilkan beberapa efek CSS3 di Mozilla. Untuk membuatnya teramat gampang karena seluruh kode CSS dan kode HTML bisa disimpan melalui penambahan widget. Apabila akan disimpan di template sobat tinggal menyimpannya kode CSS di atas kode ]]></skin>

Untuk langkah sebagai berikut:


1. "Login".Blogger


2. Setelah masuk di Halaman Dasboard (Dasbord) cari dan KLIK link "Design (Rancangan)".


3. Ketika "Page Elements (Elemen Laman)" sudah terlihat, KLIK Add Gadget (Tambah Gadget)" yang berada dalam garis terputus-putus.


4. KLIK "HTML/Javascript" kemudian tunggu beberapa saat hingga box penambahan widget terlihat.


5. Copy-Paste Kode CSS dan Kode HTML dalam box penambahan widget.
KLIK SAVE (Simpan) dan lanjutkan dengan membuka blog untuk melihat hasilnya.


Copy Paste  Kode CSS dan Kode HTML Di bawah ini:

Kode CSS3

<style type="text/css">

.putramakkah_boxSlider{

       background:#333 url(http://www.phpzone.net/wp-content/themes/mystique/images/bg.png) bottom left repeat-x; 

       padding:6px;

       border:2px solid #555;

       float:left;

       border-radius:13px;

       -moz-border-radius:13px;

       -webkit-border-radius:13px;

       box-shadow:4px 6px 4px #888;

       -moz-box-shadow:4px 6px 4px #888;

       -webkit-box-shadow:4px 6px 4px #888;

       }

.putramakkah_boxSlider:hover{

       background:#990000 url(http://www.phpzone.net/wp-content/themes/mystique/images/bg.png) bottom left repeat-x;

       box-shadow:4px 6px 4px #555;

       -moz-box-shadow:4px 6px 4px #555;

       -webkit-box-shadow:4px 6px 4px #555;

       } 

#sliders {

       width: 222px;

       height: 222px;

       overflow: hidden;

       position: relative;

       margin:0 0 10px 0;

       }

#sliders img {

       border:8px solid white;

       padding:3px;

       border-radius:10px;

       -moz-border-radius:10px;

       -webkit-border-radius:10px;

       width: 200px;

       height: 200px;

       position: absolute;

       top: 0;

       left: -222px;

       z-index: 1;

       opacity: 0;

       transition: 1.5s;

       -o-transition: 1.5s;

       -moz-transition-duration: 1.5s;

       -webkit-transition-duration: 1.5s;

       }

#sliders img:target {

       left: 0;

       z-index: 9;

       opacity: 1;

       }

#sliders img:first-child {

       left: 0;

       opacity: 1.0;

       }

#tap{

       background:#FFFFFF url(http://i26.tinypic.com/vy6yox/bgsGR/bgSlider.jpg) top center repeat-x;

       border:1px solid #777;

       margin:-3px 0px 4px;

       padding:5px 0px;

       opacity: 1.0;

       -moz-opacity:1.0;

       border-radius:10px;

       -moz-border-radius:10px;

       -webkit-border-radius:10px;

       } 

#tap a {

      border-radius:5px;

      -moz-border-radius:5px;

      -webkit-border-radius:5px;

      opacity: 0.7;

      -moz-opacity:0.7;

      filter:alpha(opacity=70);

      text-decoration: none;

      background:#ddd;

      border: 2px solid #666633;

      padding: 0px 10px;

      color: #222;

      }

#tap a:hover {

      background: #00CC33;

      opacity: 1.0;

}

</style>

<div align="center">

<div class="putramakkah_boxSlider">

<div id="sliders">

   <img id="slider1" src="URL (img) gambar Sobat letakan di sini!! " />

   <img id="slider2" src="URL (img) gambar Sobat letakan di sini!! " />

   <img id="slider3" src="URL (img) gambar Sobat letakan di sini!! " />

   <img id="slider4" src="URL (img) gambar Sobat letakan di sini!!" />

   <img id="slider5" src="URL (img) gambar Sobat letakan di sini!! " />

   <img id="slider6" src="URL (img) gambar Sobat letakan di sini!! " />

</div>

<div id="tap">

<a href="#slider1">1</a>

<a href="#slider2">2</a>

<a href="#slider3">3</a>

<a href="#slider4">4</a>

<a href="#slider5">5</a>

<a href="#slider6">6</a>

</div>

</div>

</div>

http://www.negrionta.co.tv

Keterangan:


Untuk merubah tinggi slider, ganti ukuran width dan/atau height pada :


#sliders {
   width: 222px; => Lebar Slider
   height: 222px; => Tinggi Slider


dan


#sliders img {
   border:8px solid white;
   padding:3px;
   border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   width: 200px;   => Lebar Gambar/Image
   height: 200px;  => Tinggi Gambar/Image 
   position: absolute;
   top: 0;
   left: -222px;   => Samakan dengan Lebar Gambar + 22px (penambahan width pada box).

Selamat Mencoba...!!
Semoga bermanfaat...

Cara membuat scroll box

Cara membuat scroll box untuk menu,Demo bisa lihat di blog ini di kiri atas..

Copy Paste Kode HTML Javascript di bawah ini :

<div class="Schroll Menu">
<div style="
width: 208px;
border: 2px solid red;
padding:0px;
height: 310px;
background:url(http://i1125.photobucket.com/albums/l587/negrionta/gaktahan.gif);">


<div class="menu"><div style="
border:2px solid #0000FF;
width:188px;
padding:4px;
height:25px; text-align: center;
margin:4px;
font:17px Timees New Roman;
color:#0000FF;
text-shadow: 2px 2px 6px #7FFF00;
font-weight:bolder;
background-image:url(http://i36.tinypic.com/ou9xjb.gif)
;"> <a href="Link-1" title="Tutorial Blogger">Tutorial Blogger</a>
</div></div>
<div class="widget-content"><div style="
border:2px solid #4B0082;
overflow:auto;
width:193px;
padding:2px;
height: 252px;
text-align:left;
text-shadow: 1px 1px 6px #7FFF00;
margin:4px;
font:15px Times New Roman;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5BR4rcQAyHJ-rBB9wXHjKHLxCfYRuYIN0S-qUfkcXAcKx_IbrIgcGYtmg9hdd4-ZOsDctBjlf6oDIByz3UfAR6dD0SAZ01vY9tahWFEkdysbwXP3uIcws97WRHYuwuUobPK6aKPQVQNi_/s1600/kelelawar.gif);
color:yellow;">


LETAKKAN ISI BOX DI SINI !!!


</div>

Keterangan: width: 208px; untuk lebar dan height: 310px; untuk tinggi box ,bisa di ganti sesuai keinginan sobat !!
Silahkan di coba  !!

Semoga Bermanfaat...

Cara Membuat Tabel Kolom Di Blog

Cara Membuat Tabel Kolom Di Blog
Cara Membuat Tabel Kolom dengan contoh yang sangat sederhana,bisa langsung lihat contoh di bawah ini:
dengan menggunakan script kode: HTML

Nama tabel

satu kolom

Script di bawah ini:

<table width="380" border="1">

<tr>

<td scope="col"><div align="center">Nama tabel</div></td>

</tr>

<tr>

<td><div align="center">satu kolom</div></td>

</tr>

</table>

Kolom 1

Kolom 2

Script di bawah ini:

<table width="220" border="1">

<tr>

<td scope="col"><div align="center">Kolom 1</div></td>

<td scope="col"><div align="center">Kolom 2</div></td>

</tr>

</table>

AB	CD
EF	GH

Script di bawah ini:

<table width="220" border="1">

<tr>

<td scope="col"><div align="center">AB</div></td>

<td scope="col"><div align="center">CD</div></td>

</tr>

<tr>

<td scope="col"><div align="center">EF</div></td>

<td scope="col"><div align="center">GH</div></td>

</tr>

</table>

ABCD
A 1	A 2	A 3
A 4	A 5	A 6
A 7	A B	C D

Script di bawah ini:

<table width="220" border="1">
<tr> <th colspan="3" scope="col"><div align="center">ABCD
</div></th> </tr>
<tr> <td><div align="center"><strong>A 1</strong></div></td>
<td><div align="center"><strong>A 2</strong></div></td>
<td><div align="center"><strong>A 3</strong></div></td>
</tr>
<tr> <td><div align="center">A 4</div></td>
<td><div align="center">A 5</div></td>
<td><div align="center">A 6</div></td>
</tr>
<tr> <td><div align="center">A 7</div></td>
<td><div align="center">A B</div></td>
<td><div align="center">C D</div></td>
</tr>
</tbody>
 </table>

Keterangan: width="220" untuk nilai lebar bisa sobat ganti sesuai keinginan 
Semoga bermanfaat:...

Cara membuat menu collapsing site navigation dengan jQuery

 Cara membuat menu Collapsing Site Navigation dengan jQuery
adalah menu yang berisi bar navigasi vertikal dan slide out di area konten. melayang dan seperti jatuh , gambar slide turun dari atas ke bawah dan submenu slide dari bawah.jika sobat  Mengklik pada salah satu item submenu itu maka menu tersebut akan bergerak keseluruhan nya,menu akan nampak seperti setumpuk kartu...menu ini bisa di bilang keseluruhan nya mengunakan efek hover dan shadow.masih seperti biasa menu nya masih bewarnan hijo..~_~..kowkowkokw...tapi klw sobat gak suka warna hijo..sobat bisa ganti dengan warna yg laen ato sobat bisa juga menggunakan image untuk background nya...silahkan lihat demo dari Collapsing Site Navigation dengan jQuery seperti yang ada di blog ini:

UNTUK MEMBUATNYA IKUTI LANGKAH-LANGKAH DIBAWAH INI:

JANGAN LUPA BERIKAN KOMENTAR !!!

TERIMAKASIH !!!

1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4.  Selanjutnya cari kode: ]]></b:skin>

Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode: ]]></b:skin> tersebut:

Copy Paste kode di bawah ini dan letakkan tepat di atasnya:

TERIMAKASIH...

.cc_menu{
    width:700px; /*140px * 5*/
    height:600px;
    position:relative;
    font-size:14px;
    text-transform:uppercase;
    color:#fff;
}
.cc_item{
    text-align:center;
    width:140px;
    height:600px;
    float:left;
    background:-moz-linear-gradient(top, #000, #000,#37c700);
    border-bottom:1px solid lime;
    position:relative;
        -moz-box-shadow: 1px -1px 3px lime;

}
span.cc_title{
    color:#fff;
    font-size:16px;
        text-shadow: 1px 1px 4px #000;
    top:200px;
    left:5px;
    position:absolute;
    padding:3px 0px;
    background:lime;
        border: 1px solid #fff;
        -moz-box-shadow: 1px 1px 20px lime;
    width:130px;
    display:block;
    z-index:11;

}
.cc_submenu ul{
    list-style:none;
    width:140px;
    margin:0;
    padding:0;
    height:0px; /*increase to 200px to slide up*/
    overflow:hidden;
    text-align:left;
    background:-moz-linear-gradient(top, lime, #002200,#001100);
        -moz-box-shadow: 1px 1px 10px lime;
    position:absolute;
    left:0px;
    bottom:0px;
    opacity:0.7;
    z-index:13;
}
.cc_submenu ul li{
font-family:Helvetica;
color:#fff;
font-size:12px;
        text-shadow: 1px 1px 4px #000;
    cursor:pointer;
    padding:10px;
}
.cc_item img{
    position:absolute;
    width:140px;
    height:600px;
    top:-600px;
    left:0px;
}
.cc_content{
    width:600px;
    height:600px;
    border-bottom:1px solid lime;
    position:absolute;
    left:-700px;
    background:-moz-linear-gradient(top, #000, #000,#37c700);
        -moz-box-shadow: 1px -1px 3px lime;
    overflow:hidden;


}
.cc_content div{
    display:none;
    margin:20px;
}
.cc_content p{
    background:lime;
        -moz-box-shadow: 1px 1px 20px lime;
    padding:20px;
    opacity:0.7;
}
span.cc_back{
    position:absolute;
    bottom:10px;
    right:10px;
    cursor:pointer;
        font-family:Georgia;
        color:#00ff00;
        font-size:20px;
        text-shadow: 0 0 4px lime, 0 -5px 4px #008800, 2px -10px 6px #006600,
        -2px  -15px 11px #004400, 2px -18px 18px #002200;
}

>

Dan Cari Kode: </head>
Letakkan Kode di bawah ini Tepat di atas kode: </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
Cufon.replace(&#39;span&#39;);
Cufon.replace(&#39;li&#39;);
Cufon.replace(&#39;h1&#39;);
Cufon.replace(&#39;p&#39;);
</script>
<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push([&#39;_setAccount&#39;, &#39;UA-7243260-2&#39;]);
_gaq.push([&#39;_trackPageview&#39;]);
(function() {
var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- The JavaScript -->
<script type='text/javascript'>
$(function() {
//all the menu items
var $items         = $(&#39;#cc_menu .cc_item&#39;);
//number of menu items
var cnt_items    = $items.length;
//if menu is expanded then folded is true
var folded        = false;
//timeout to trigger the mouseenter event on the menu items
var menu_time;
/**
bind the mouseenter, mouseleave to each item:
- shows / hides image and submenu
bind the click event to the list elements (submenu):
- hides all items except the clicked one,
and shows the content for that item
*/
$items.unbind(&#39;mouseenter&#39;)
.bind(&#39;mouseenter&#39;,m_enter)
.unbind(&#39;mouseleave&#39;)
.bind(&#39;mouseleave&#39;,m_leave)
.find(&#39;.cc_submenu &gt; ul &gt; li&#39;)
.bind(&#39;click&#39;,function(){
var $li_e = $(this);
//if the menu is already folded,
//just replace the content
if(folded){
hideContent();
showContent($li_e.attr(&#39;class&#39;));
} 
else //fold and show the content
fold($li_e);
});
/**
mouseenter function for the items
the timeout is used to prevent this event
to trigger if the user moves the mouse with
a considerable speed through the menu items
*/
function m_enter(){
var $this     = $(this);
clearTimeout(menu_time);
menu_time     = setTimeout(function(){
//img
$this.find(&#39;img&#39;).stop().animate({&#39;top&#39;:&#39;0px&#39;},400);
//cc_submenu ul
$this.find(&#39;.cc_submenu &gt; ul&#39;).stop().animate({&#39;height&#39;:&#39;200px&#39;},400);
},200);
}
//mouseleave function for the items
function m_leave(){
var $this = $(this);
clearTimeout(menu_time);
//img
$this.find(&#39;img&#39;).stop().animate({&#39;top&#39;:&#39;-600px&#39;},400);
//cc_submenu ul
$this.find(&#39;.cc_submenu &gt; ul&#39;).stop().animate({&#39;height&#39;:&#39;0px&#39;},400);
}
//back to menu button - unfolds the menu
$(&#39;#cc_back&#39;).bind(&#39;click&#39;,unfold);
/**
hides all the menu items except the clicked one
after that, the content is shown
*/
function fold($li_e){
var $item= $li_e.closest(&#39;.cc_item&#39;);
var d = 100;
var step = 0;
$items.unbind(&#39;mouseenter mouseleave&#39;);
$items.not($item).each(function(){
var $item = $(this);
$item.stop().animate({
&#39;marginLeft&#39;:&#39;-140px&#39;
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = true;
showContent($li_e.attr(&#39;class&#39;));
} 
});
});
}
/**
shows all the menu items
also hides any item&#39;s image / submenu
that might be displayed
*/
function unfold(){
$(&#39;#cc_content&#39;).stop().animate({&#39;left&#39;:&#39;-700px&#39;},600,function(){
var d = 100;
var step = 0;
$items.each(function(){
var $item = $(this);
$item.find(&#39;img&#39;)
.stop()
.animate({&#39;top&#39;:&#39;-600px&#39;},200)
.andSelf()
.find(&#39;.cc_submenu &gt; ul&#39;)
.stop()
.animate({&#39;height&#39;:&#39;0px&#39;},200);
$item.stop().animate({
&#39;marginLeft&#39;:&#39;0px&#39;
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = false;
$items.unbind(&#39;mouseenter&#39;)
.bind(&#39;mouseenter&#39;,m_enter)
.unbind(&#39;mouseleave&#39;)
.bind(&#39;mouseleave&#39;,m_leave);
hideContent();
}       
});
});
});
}
//function to show the content
function showContent(idx){
$(&#39;#cc_content&#39;).stop().animate({&#39;left&#39;:&#39;140px&#39;},200,function(){
$(this).find(&#39;.&#39;+idx).fadeIn();
});
}
//function to hide the content
function hideContent(){
$(&#39;#cc_content&#39;).find(&#39;div&#39;).hide();
}
});
</script>

>

Seandainya kode di atas gk bisa di atas kode </head>
coba di letak'an di atas kode:</body>

Dan ini kode Html,sobat bisa memasukan di Edit HTML/ tambah gadget:

<div class="title">

</div>

<div class="cc_menu" id="cc_menu">

<div class="cc_item" style="z-index: 5;">

<img alt="image" src="http://i1125.photobucket.com/albums/l587/negrionta/adungkang.gif" />

<span class="cc_title">Home</span>

<div class="cc_submenu">

<ul>

<li class="cc_content_1">Winter 2010</li>

<li class="cc_content_2">Spring 2011</li>

</ul>

</div>

</div>

<div class="cc_item" style="z-index: 4;">

<img alt="image" src="http://i1125.photobucket.com/albums/l587/negrionta/NN1O.gif" />

<span class="cc_title">Stores</span>

<div class="cc_submenu">

<ul>

<li class="cc_content_3">Milano</li>

<li class="cc_content_4">Paris</li>

<li class="cc_content_5">New York</li>

<li class="cc_content_6">Miami</li>

</ul>

</div>

</div>

<div class="cc_item" style="z-index: 3;">

<img alt="image" src="http://i1125.photobucket.com/albums/l587/negrionta/hunter_running_from_bear_lg_clr.gif" />

<span class="cc_title">About</span>

<div class="cc_submenu">

<ul>

<li class="cc_content_7">About us</li>

<li class="cc_content_8">Our Philosophy</li>

</ul>

</div>

</div>

<div class="cc_item" style="z-index: 2;">

<img alt="image" src="http://i1125.photobucket.com/albums/l587/negrionta/104.gif" />

<span class="cc_title">Events</span>

<div class="cc_submenu">

<ul>

<li class="cc_content_9">Bacardi Summer Party</li>

<li class="cc_content_10">Lonestyle Auction</li>

</ul>

</div>

</div>

<div class="cc_item" style="z-index: 1;">

<img alt="image" src="http://i1125.photobucket.com/albums/l587/negrionta/257.gif" />

<span class="cc_title">Contact</span>

<div class="cc_submenu">

<ul>

<li class="cc_content_11">Custom Orders</li>

<li class="cc_content_12">Get in touch</li>

</ul>

</div>

</div>

<div class="cc_content" id="cc_content">

<span class="cc_back" id="cc_back">&lt;&lt; Go back</span>

<div class="cc_content_1">

<h1>

Winter 2010</h1>

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</div>

<div class="cc_content_2">

<h1>

Spring 2011</h1>

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</div>

<div class="cc_content_3">

<h1>

Milano</h1>

She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek</div>

<div class="cc_content_4">

<h1>

Paris</h1>

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. </div>

<div class="cc_content_5">

<h1>

New York</h1>

It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</div>

<div class="cc_content_6">

<h1>

Miami</h1>

It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.

</div>

<div class="cc_content_7">

<h1>

About us</h1>

It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</div>

<div class="cc_content_8">

<h1>

Our Philosophy</h1>

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</div>

<div class="cc_content_9">

<h1>

Bacardi Summer Party</h1>

I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth</div>

<div class="cc_content_10">

<h1>

Lonestyle Auction</h1>

To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire</div>

<div class="cc_content_11">

<h1>

Custom Orders</h1>

Winter collection</div>

<div class="cc_content_12">

<h1>

Get in touch</h1>

Winter collection</div>

</div>

</div>

<div>

<span class="reference">

</span></div>

Semoga bermanfaat...

post by: putramakkah