Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Simple CSS3-jQuery Animated Collapsible Menu: Collapsible jQuery-CSS3

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://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgCollapseV38H73.gif) 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="http://gubhugreyot.blogspot.com">Telor Gajah</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Daging Ayam Kampung</a></li>
<li><a href="http://gubhugreyot.wordpress.com">Jerohan Kuda</a></li>
</ul>
</li>

<li>
<a href="javascript:;">Mie</a>

<ul>
<li><a href="http://gubhugreyot.blogdetik.com">Mie Goreng</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Mie Rebus</a></li>
<li><a href="http://tantytm.blogspot.com">Mie Re Do</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Mie Ring Otak</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Mie Ongklok</a></li>
</ul>
</li>

<li>
<a href="javascript:;">Bakso</a>

<ul>
<li><a href="http://gubhugreyot.blogspot.com">Bakso Lombok Uleg</a></li>
<li><a href="http://tantytm.blogspot.com">Kepala Sapi</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Urat</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Sepak Takrow</a></li>
</ul>
</li>

<li>
<a href="javascript:;">Soto</a>

<ul>
<li><a href="http://gubhugreyot.blogspot.com">Ayam</a></li>
<li><a href="http://tantytm.blogspot.com">Daging Sapi</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Kudus</a></li>
<li><a href="http://gubhugreyot.blogspot.com">mBangkong</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Kuda Nil</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Madura</a></li>
</ul>
</li>

<li>
<a href="javascript:;">Sate</a>
<ul>
<li><a href="http://gubhugreyot.blogspot.com">Kerbau</a></li>
<li><a href="http://tantytm.blogspot.com">Kuda</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Ular</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Kucing</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Sapi</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Madura</a></li>
</ul>
</li>

<li>
<a href="javascript:;">Minuman</a>
<ul>
<li><a href="http://gubhugreyot.blogspot.com">Es Cendol</a></li>
<li><a href="http://tantytm.blogspot.com">Es Buah</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Kopi Tubruk</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Teh Cencem</a></li>
<li><a href="http://bloggerstuars.blogspot.com">Wedang Jahe</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Kolak Apotas</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: 200px;}.
  12. Untuk mengatur posisi box menu, silahkan rubah nilai margin pada syntax .boxong {margin: 20px 5px 0;}
  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!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Semoga bermanfaat dan mampu menambah wawasan kita tentang desain blog sekaligus dapat memperindah blog sampeyan!

» Happy Blogging - gubhugreyot «

3 komentar:

  1. gan. sebelumnya terimakasih banget tutorialnya berguna banget. tapi saya ada kendala gan. gini critanya, saat memakai di blogger, emang berfungsi. tapi setelah aku forward ke dot.tk kok javasript tidak berfungsi ya???? mohon bantuannya. alamat tk saya http://www.dikom.tk/

    BalasHapus
  2. Thanks..Mas. Ilmunya sangat bermanfaat. Tolong dong, koreksi dan masukannya untuk kami.

    BalasHapus
  3. mohon petunjuk-nya gan,kenapa xhtml tidak bekerja...terima kasih

    BalasHapus

 
GR | Edited by | gubhug reyot