Search here

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

Memuat...
English
Bru masuk angin!

Arsip...

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

Cara Membuat Animated jQuery Accordion Menu Serba Guna

Yang praktis, cantik, irit javascript dan dapat dipadukan dengan berbagai fungsi yang lain merupakan sebuah fasilitas dan kelengkapan blog paling nyaman digunakan. Kembali kita akan memanfaatkan jQuery-1.3.2.js atau jQuery-1.3.2.min.js untuk membuat sebuah "Animated Accordion Serbaguna" yang tidak saja dapat digunakan untuk memuat seluruh daftar posting, melainkan dapat juga sampeyan gunakan untuk berbagai kepentingan di luar masalah menu. Gambar ataupun berbagai bentuk teks lainnya bisa mejadi obyek untuk accordion cantik ini.

Kembali javascript kurang dari 10 baris akan membantu membangkitkan jQuery meciptakan sebuah fungsi indah dengan dibantu kode css yang menjadi pilar hingga terbentuk desain menarik. Permainan pada background image, background position serta padding, margin border serta text-shadow dan rounded corners di bagian dalam accordion mampu menghasilkan tampilan eksotik yang layak untuk dipertimbangkan sebagai satu fungsi penambah gaya dan maksimalisasi ruang. Ada dua buah desain yang bisa menjadi pilihan bagi sampeyan. Ke duanya sama-sama menarik, dan mungkin saja membuat kita kesulitan untuk menentukan pilihan. Bagaimana bentuk "Animated Accordion Serba guna ini? Silahkan arahkan cursor pada gambar di bawah ini dan sampeyan akan melihat seperti apa kira-kira bentuk tampilannya.

Cara Membuat jQuery Accordion Menu Serbaguna

  1. Login to BloGGeR (Login ke BloGGeR) dengan menuliskan User Name (Nama Pengguna) atau Email Address kemudian tuliskan juga Password (Sandi). Setelah lengkap, silahkan KLIK "Login".
  2. Dasboard (Dasbor) adalah halaman pertama yang akan terlihat setelah login. Di sini ada beberapa link dengan berbagai kegunaan. Cari dan KLIK link "Design (Rancangan)".
  3. Design (Rancangan) : Carilah link "Edit HTML", kemudian KLIK.
  4. Edit HTML merupakan bagian blog yang menjadi tempat kode HTML desain dasar blog disimpan atau sering disebut sebagai "template". Silahkan lakukan pengamanan template terlebih dahulu (back-up template) dengan cara KLIK "Download Full Template (Download Template Lengkap)" kemudian simpan file template di Folder PC.
  5. Cari kode ]]></b:skin>, kemudian simpan javascript di bawahnya persis, sedang kode css accordion di atasnya.
  6. Lanjutkan dengan mencari kode (tag) <head>. Letakkan jquery-1.3.2.min.js di atasnya.
  7. KLIK "SAVE Template (Simpan Template)".

Javascript Animated Accordian Serbaguna

]]></b:skin>
<script type="text/javascript">
$(document).ready(function(){
$('.wadah').hide();
$('.sedul:first').addClass('active').next().show();
$('.sedul').click(function(){
if( $(this).next().is(':hidden') ) {
$('.sedul').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow'); 
}
return false;
});
});
</script>


Kode CSS Animated Accordion Serbaguna

.boxtama { 
 background:#333;
 width: 220px;
 margin: 0 auto;
 border-left:1px solid #fff;
 border-right:1px solid #fff;
 border-bottom:1px solid #fff;
 border-top:3px solid #777;
 font-size:12px;
}
.boxtama .wadah {
 margin: 0 0 5px 2px; 
 padding: 0;
 overflow: hidden;
 font-size: 16px;
 width: 214px;
 clear: both;
 background: #bbb;
 border: 1px solid #d6d6d6;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px; 
}
.boxtama .wadah .anakwadah {
 padding:15px 8px 10px;
}
.boxtama .wadah .anakwadah p {
 padding: 5px 0;
 margin: 5px 0;
 font:12px normal;
 color:#000;
}
.boxtama .wadah h3 {
 font: 18px normal Georgia;
 margin: 0 0 10px;
 padding: 0 0 5px 0;
 border-bottom: 1px dashed #ddd;
 color: #993333;
}
.boxtama .wadah img {
 float: left;
 margin: 10px 8px 0px 0;
 padding: 3px;
 background: #ddd;
 border: 1px solid #444;
 width:60px;
 height:60px;
}
.boxtama .wadah .anakwadah ul {
 padding:0;
 margin:0;
 list-style:none;
}
.boxtama .wadah .anakwadah li { 
 background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrow-gubhugreyot.png) top left no-repeat;
 background-position:5px 5px;
 list-style:none;
 margin:0px;
 padding:0px;
 border-bottom:1px dotted #999;
 transition:0.4s;
 -o-transition:0.4s;
 -moz-transition:0.4s;
 -webkit-transition:0.4s; 
}
.boxtama .wadah .anakwadah li:hover{ 
 background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrowHov-gubhugreyot.png) top left no-repeat;
 background-position:10px 5px;
} 
.boxtama .wadah .anakwadah li a {
 font-family:Trebuchet MS;
 padding:0 0 0 25px;
 font-size:11px;
 color:#222; 
 font-weight:500;
 text-decoration:none;
}
.boxtama .wadah .anakwadah li a:hover {
 color:red;
        }
h4.sedul {
 padding: 0; 
 margin: 0 0 5px 0;
 background: #666 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgOrangeV34H2-gubhugreyot.gif) bottom left repeat-x;
 height: 36px; 
 line-height: 36px;
 width: 220px;
 font-size: 14px;
 font-weight: bold;
 float: left;
}
h4.sedul:hover { /* hor.png */
 padding: 0; 
 margin: 0 0 5px 0;
 background:#660000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgFadeBlue-gubhugreyot.png) left center no-repeat;
 background-position:-1px 0;
 border-right:1px solid #999;
}
h4.sedul a {
 background: url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRedRight-gubhugreyot.png) left center no-repeat;
 background-position:8px 5px;
 border-left:2px solid #fff;
 border-right:2px solid #fff;
 font-family:Droid Serif;
 font-size:14px;
 color:/*silver*/ #003366;
 text-decoration: none;/*opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); */
 display: block;
 padding: 0 0 0 45px;
 transition:1s;
 -o-transition:1s;
 -moz-transition:1s;
 -webkit-transition:1s;
}
h4.sedul a:hover {
 background:#000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRightDownAnima-gubhugreyot.gif) left center no-repeat;
 background-position:8px 5px;
 color:red; 
 text-shadow:0px 1px 1px #888;
 opacity:1.0;
 filter:alpha(opacity=100);
}
h4.active {
 background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgblueV35H1-gubhugreyot.gif) top left repeat-x;
}
]]></b:skin>

Posisi jQuery-1.3.2.min.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<head>
Setelah Kode Javascript, kode CSS dan jQuery di letakkan pada posisi yang benar, silahkan gunakan kode HTML-nya di widget blog, dengan cara :
  1. KLIK "Page Elements (Elemen Laman)".
  2. KLIK Add Gadget (Tambah Gadget).
  3. KLIK "HTML/Javascript".
  4. Copy-paste kode HTML di box penambahan widget.
  5. KLIK "SAVE/Simpan)", dan lihat hasilnya dengan membuka blog.

Kode HTML Animated jQuery Accordion Serbaguna

<div style="float:left;background:#111;padding:3px;border:2px solid #666;">

<div class="boxtama"><h4 class="sedul"><a class="pilih" href="#">Theme - Template</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Blogger - Blogspot</h3>
<ul class="accor">
<li><a href="http://blogger.com/" target="_blank">Stretch Denim by Darren Delaye</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Minima White by Blogger</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Tic Tac Blue by Blogger</a></li>
<li><a href="http://blogger.com/" target="_blank">Kelembutan by Jason Morrow</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Mudah by Josh Peterson</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Rounders 4 by Blogger</a></li>
<li><a href="http://blogger.com/" target="_blank">PT Keren Sekali by Tina Chen</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Perjalanan by Leezche</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Thisaway Rose by Blogger</a></li> 
</ul>
</div>
</div>

<h4 class="sedul"><a class="pilih" href="#">Biro Jodoh Internasional</a></h4>

<div class="wadah">
<div class="anakwadah">
<h3>Bule Cantik Menunggu Lamaran</h3>
<a href="http://gubhugreyot.blogdetik.com/" target="_blank"><img src="http://animated-jquery-vertical-accordion-menu.googlecode.com/files/gadisAccord-2.jpg" alt="" /></a>
<p>Mungkin ini jadi pilihan yang cukup tepat untuk sampeyan. Seorang bule cantik yang dengan sukarela mau diperisteri perjaka pribumi. Harta dan jabatan tidak jadi perhitungan. "Biar miskin yang penting setia", katanya..</p>
<p>Jika sampeyan berminat dan dengan sungguh-sungguh berniat memperisteri si bule cantik, silahkan segera hubungi orang tua dan siapapun yang kira-kira bisa melakukan lamaran. Satu yang diharapkan oleh cewek cantik ini hanyalah sebuah uang mahar berupa rumah mewah bekas milik Gayus Tambunan. He ... he ... Gampang, toh!</p>
</div>
</div>

<h4 class="sedul"><a class="pilih" href="#">Javascript - jQuery</a></h4>

<div class="wadah">
<div class="anakwadah">
<h3>Earthquake Effects on No Right Click</h3><a href="http://bloggerstuars.blogspot.com/" target="_blank"><img src="http://animated-jquery-vertical-accordion-menu.googlecode.com/files/gadisAccord-2.jpg" alt="" /></a>
<p>Mungkin ini jadi pilihan yang cukup tepat untuk sampeyan. Sebuah javascript No Right Click yang disertai semacam efek gempa bumi dan ditanggung akan membuat bingung dan mengacaukan konsentrasi pengunjung blog..</p>
<p>Beberapa sobat blogger telah memanfaatkan, akan tetapi yang satu ini telah aku modifikasi sehingga efek yang muncul menjadi semakin parah. Javascript "Earthquake Effects on No Right Click" sudah ter-upload di file hosting sehingga sampeyan hanya perlu menyimpan link-nya di bagian head.</p>
</div>
</div>

<h4 class="sedul"><a class="pilih" href="#">Daftar Posting</a></h4>

<div class="wadah">
<div class="anakwadah">
<h3>Javascript</h3><a href="http://gubhugreyot.blogspot.com" target="_blank"><img src="http://animated-jquery-vertical-accordion-menu.googlecode.com/files/gadisAccord-2.jpg" alt="" /></a>
<p>JavaScript is a programming language that makes it possible for you to add programming language to a website for added user functionality. With JavaScript you can detect the browser the user is using, add buttons and make pop-up boxes.</p>
<p>Silahkan gunakan setiap box sesuai dengan yang sampeyan inginkan. Bisa sebagai tempat untuk menu blog atau mo digunakan untuk memuat bagian dari blog yang lain.</p>
</div>
</div>

</div>
</div>

Merubah Warna Teks pada Panel Selector Accordion

Warna teks dan Hover pada panel penggeser dapat anda rubah bila menginginkan warna yang berbeda dengan menambahkan kode CSS di atas kode ]]></b:skin> Gunakan kode seperti yang terlihat di bawah ini :
h4.sedul a.pilih{
color:yellow;
}
h4.sedul a.pilih:hover{
color:orange;
}
Setelah langkah tersebut, silahkan tambahkan class="pilih" pada setiap link selector yang terdapat di kode HTML seperti yang terlihat di bawah ini :
<h4 class="sedul"><a class="pilih" href="#">Link Title </a></h4>

Animated jQuery Accordion Serbaguna-2

Catatan/Keterangan :

Untuk merubah ukuran lebar (width) Animated jQuery Accordion Menu Serbaguna, silahkan rubah ukuran pada :

.boxtama {
    width: 220px;

.boxtama .wadah {
    width: 214px;

h4.sedul {
    width: 220px;

====>>>> width pada .boxtama .wadah mempunyai selisih 6px dengan yang di atas dan di bawahnya.

Special Edition

Silahkan download link di bawah ini jika anda ingin membuat bentuk dan tampilan special dari jQuery vertucal accordion menu:

Download Special Edition


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





» Happy Blogging - gubhugreyot «

15 komentar:

  1. gak da yang otomatis ya gan untuk label.....??? tolong ya gan....
    thank sebelumnya. http://johan-jm.blogspot.com/

    BalasHapus
  2. Mas, Kalo supaya menunya Ketutup semua bagaimana?? kaya yg punya Mas itu Loh?

    BalasHapus
  3. gan knp kok gak nutup y??? hikhikhikhik...

    BalasHapus
  4. Berfungsi dengan baik sekali....thank's yo mas.

    BalasHapus
  5. gan gmna cara buat yang loading ente itu...yang mengahruskan refresh ketika loading nya lama...tolong pencerahhnya gan

    BalasHapus
  6. anu ya ..soalnya saya nda bisa jawab jadi nunggu yang buat posting ya...

    BalasHapus
  7. mas ada yg otomatis ngk untuk lebel dan utup semu kayak punyanya si emas

    BalasHapus
  8. nah,,,, ini diya yang q tanyain kemaren.. besok di coba aaaaaaaahh.. makasih Komandan.. hehe..

    BalasHapus
  9. Udah ane copas gaan.. Ajiiiiibb.. maksih banget.. tinggal ganti warna aja... maksih mas Gan..
    pintermen to yo yooo.. :)

    BalasHapus
    Balasan
    1. He....he...he... "tinggal ganti warna?". Aduh ... tuh ... ganti sekalian celananya. Pakai warna pink, ya?! Ha ...

      Hapus
  10. ijin copas mas...

    menarik banget artikel nya...

    pokonya kereeeeeeen bangeeeet

    BalasHapus
  11. Trima kasih banyak.. postingannya sangat membantu..!!

    BalasHapus
  12. Top markotop gan, blognya keren banget nich.

    BalasHapus

 
GR | Edited by | gubhug reyot