BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Tab Accordian Bubbling Library

Ada yang menyebutnya efek tirai  atau juga sliding door. namun jika kita gooling,   input kata atau istilah yang populer untuk efek ini adalah " accordian ".  contoh efek "Accordian" ini bisa saudara rasakan  langsung pada sidebar kanan blog ini paling atas:  Profile , Comment , Contact.

Seperti hal-nya Tab View yang lebih dulu populer di gunakan oleh para blogger lokal, efek ini juga merupakan library javascript dari YUI (  Yahoo User Interface ), namun di iris lagi menjadi Javascript Bubbling Library, yang menurut situs resminya lisensi bebas di gunakan.

" All components in the Bubbling Library have been released as open source under a BSD license and are free for all uses."

Selain tab " Accordian "  ini, banyak juga plugin yang tersedia pada Bubbling Library , kita langsung tinggal pake saja. tampa perlu nyegir. karena tersedia beberapa pustaka skrip dan framework untuk kita gunakan. mytechblogs

View-Demo | Download

Untuk menerapkan salah satu efek semisal tab " accordian"  ke dalam blog  kodenya cukup panjang, tapi jika membutuhkan bisa saudara lanjutkan membacanya.

1. Buka Tata-Letak - Edit Html. kemudian cari tag penutup

</head>

setelah itu masukan sebelum tag penutup tersebut . kode berikut ini.

kode Css.

<style type="text/css">
.myAccordion {
  float: left;
  margin-right: 15px;
}
h3{
padding: 8px;
color: #636363;
background-color: #ffffff;
background-image: url(http://lh3.ggpht.com/jaloee/
SGus4MMnuCI/AAAAAAAACIg/BQmSAeBbk0A/s144/h3bg.jpg);
background-position: top;
background-repeat: repeat-x;
font-weight: normal;
}
  .myAccordion .yui-cms-accordion .yui-cms-item {
    border: 1px solid #cccccc;
    width: 200px;
  }
    .myAccordion .yui-cms-accordion .yui-cms-item h3 {
      margin: 0px;
    }
        .myAccordion .yui-cms-accordion .yui-cms-item .accordionToggleItem {
          background: url(http://www.geocities.com/jaloea/accordion.gif) no-repeat 0px 0px;
          text-decoration: none;
          padding-left: 20px;
          display: block;
        }
        .myAccordion .yui-cms-accordion .yui-cms-item.selected .accordionToggleItem {
          background: url(http://www.geocities.com/jaloea/accordion.gif) no-repeat 0px -100px;
        }
    .myAccordion .yui-cms-accordion .yui-cms-item .bd {
        height: 0px;
        overflow: hidden;
        background-color: #fff;
    }
        .myAccordion .yui-cms-accordion .yui-cms-item .bd .fixed {
            overflow: hidden;
            padding: 5px;
            height: 230px;
        }
</style>

 

Dan kode Javascript ini.

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js">
</script>
<script type="text/javascript" src="http://js.bubbling-
library.com/1.5.0/build/bubbling/bubbling.js"></script>
<script type="text/javascript" src="http://js.bubbling-
library.com/1.5.0/build/accordion/accordion.js"></script>

 

Simpan Perubahan

2. Kemudian tambahkan sebuah Elemen Html/JavaScript .

Setelah terbuka masukan kode berikut ini.

<div class="myAccordion">   
<div class="yui-cms-accordion persistent rollover slow">
<div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd">
<div class="fixed">
<p>

Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div>
<div class="yui-cms-item selected">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>
Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd">
<div class="fixed">
<p>
Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd">
<div class="fixed">
<p>
Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div>
</div>
</div> 

 

Technorati tags:

Page views this post: reader

24 komentar:

Ranggalawe Istifajar Rullinda said...

asyik...langsung comot ahh :D

Ren said...

jalu, jalu, sejak liat blog ini tempo hari.. ini yg aku incer buat aku contek, tapi kok ga mau rollover pas aku coba... udah butek buka2 bubbling-library.com .. hue hue eh, kamu emang top, munculin versi ringkasna... he he he... si jalu oke deee

manggIs... said...

Menarik juga mas jaloee...mo nyoba akh...! Terima kasih banget atas ilmunya!

Ren said...

gini loh susahnya tuh dg accordion yg aku maksud sebenernya: aku mau ganti kulitnya seminimal mungkin, jadi semua elemen bisa collaps all (kayak klo buka threaded mails di google, misalnya) sehingga background bersih keliatan...
PERtaNyAANNYA: dptkah dikau, suhu jalu, menerangkan secara ringkas... aku ublek2 sourceforge rumiiit sekali caranya (ini aku bener2 jadi newbie nekat siih). tengkyu, tengkyu in adpans..

JALOE said...

to Rangga : yup emang tinggal comot..

to manggis : hehehe.. met mencoba..

to Ren : ada seh.. cuman bukan dari bubling library kek na

Ranggalawe Istifajar Rullinda said...

mas, aku dah bisa sih, tapi ubah halamannya itu lho...cepet banget..gimana sih caranya buat dilambatin dikit...

firdaus.a] said...

ini yang di kanan atas itu kan...

wah thx udah share nih..

KURNIA SEPTA said...

yesssss

aRi isTiadi said...

mas koq g bisa scroll sih

JALOE said...

jika ada script lain terutama javascript dari protype.. script dari bubling ini ngga akan jalan mas.. instilahnya mungkin bertabrakan jenis script..

maynanda said...

loh mass, punya saya kok aneh... Gak jadi bikin ahh :D

Rohman said...

wah sae pisan yeuh kang jaloee, sip. Tips na makin maknyus

Ali said...

WAH MAS,, tengkyu pisan

blogmenjerit said...
This comment has been removed by the author.
__KickeR__ said...

WOW... GW PERTAMAXXXX..... THANKS SOB, INI DIA YG SLAMA INI GW CARI :d
JGN LUPA MAMPIR
HTTP://MP3-AZ.BLOGSPOT.COM
HTTP://INDEX-MP3AZ.BLOGSPOT.COM
HTTP://BELETZ-MP3.BLOGSPOT.COM

PISS :d

__KickeR__ said...

waaaaa...... gag bisa :((
gimana nih om jalii.. eh jaluu...
knp gag bisa ???
ane butuh banget nih....
tolong master jaluu add ymku yah... yudi_beletz
jadi bisa tanya2 langsung :D

nuwun kang

JALOE said...

to kicker
otre entar sy add

Benny Andhika said...

tambah lagi nich ilmu.. thank infonya

Oeoes said...

weh asik kayaknya nih kang jaloe, tapi sik bingung mau dibuat apaan ya enaknya...?

anakpisces said...

duh kok g mw y mas,,huft,,

Tony said...

ga mudheng aku :(

thegands said...

sebenarnya tidak susah ngebuatnya.. namun males ngebuatnya.. wkwkwkw... nice info bro.. tak bukmak dulu blog mu ini.. cocok buat belajar blogger platfrom...........

Panda Lane Memory said...

waduh bung Jaloee, bikin ngiler aja nih postingan jadi pgn otak-atik layout lagi nih :(

ARA said...

asik2, ada lagiii

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial