Horizontal jQuery Accordion pada MINIMA

Sudah lama absen dari BloGGer, membuat aku kangen sama MINIMA. Kali ini saya akan mencoba membuat tutorial bagaimana cara menerapkan "A Horizontal jQuery Accordion using Custom Event Binding" pada minima.

Saya mendapatkan tutorial ini di http://www.gethifi.com/blog/tutorial-a-horizontal-jquery-accordion-using-custom-event-binding dengan demonya di http://www.striving4more.org, namun sepertinya akan sulit dipahami dan sulit diterapkan pada Blogger jika kita tidak teliti dalam menyimak tutorial. Menurut saya, tutorial yang disuguhkan tidak untuk blogger. Karena tidak dijelaskan "step by step", justru saya lebih suka melihat dari kode sumber tampilan demonya.

Untuk tutorialnya saya baca sekilas saja, namun pada kode sumber tampilannya saya mencoba mengupas satu persatu kemudian kususun dalam Notepad dan saya terapkan pada minima (buat blog baru).

Langkah demi langkah menerapkan "A Horizontal jQuery Accordion using Custom Event Binding" pada minima.

Saya sarankan untuk membuat blog baru dengan template minima sebagai dasar.
Karena ukuran asli Minima adalah 660px, maka kita harus melebarkan ukuran tersebut pada :

1. Header. Coba perhatikan CSS dibawah ini :

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ubah 660px dengan 940 px

2. Susunan Outer-Wrapper kita ubah seperti dibawah ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3. Susunan Headings diubah seperti dibawah ini :

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

h3 { font-size: 16px; line-height: 20px; }


4. Tambahkan kode dibawah ini sebelum atau diatas kode ]]></b:skin>

/* slide
----------------------------------------------- */
#home { height: 420px; width: 610px; position: relative; margin: 20px 20px 0 0px; background: url('http://backgraound.jpg') no-repeat; }
#slides { list-style: none; margin: 0; padding: 0; position: absolute; top: 11px; left: 11px; width: 577px; height: 285px; overflow: hidden; }
#slides .slide { position: absolute; top: 0px; list-style: none; width: 541px; }
#slides .slide img { position: absolute; top: 0px; left: 0px; }
#slides .slide .slidebutton { display: block; position: absolute; top: 0px; right: 0px; height: 285px; width: 21px; background: #693d5e; text-decoration: none; border-right: 1px solid white; }
#slides .active .slidebutton { background: #55354a; }
#slides .slide .slidebutton img { position: absolute; top: auto; display: block; bottom: 5px; left: 5px; }
/*
#slides .slide .slidebutton span { display: block; text-align: right; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); position: absolute; bottom: 100px; left: -90px; width: 200px; color: #f2ecd0; font-family: verdana, sans-serif; font-size: 12px;
}
*/
#slide-1 { position: absolute; top: 0; right: 44px; z-index: 3; }
#slide-2 { position: absolute; top: 0; right: 22px; z-index: 2; }
#slide-3 { position: absolute; top: 0; right: 0px; z-index: 1; }

#slidecontents { list-style: none; margin: 0; padding: 0; position: absolute; top: 340px;
left: 10px; width: 570px; }
#slidecontents .slidecontent { display: none; position: absolute; }
#slidecontents .open { display: block; }
#slidecontents .slidecontent h3 { display: inline; color: #C9AB2D; font-size: 24px; line-

height: 28px; font-family: georgia, serif; font-weight: normal; margin: 0; }
#slidecontents .slidecontent p { display: inline; color: #6A7C98; font-size: 14px; line-

height: 24px; }
#slidecontents .slidecontent p a { color: #C9AB2D; font-size: 11px; text-decoration: none;

}

Keterangan : untuk backgraound.jpg , buatlah gambar dengan ukuran 601px X 332px. kemudian upload di blogger dan ambillah url yang kita peroleh setelah proses upload. contoh urlnya adalah : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOiibjusWGc2BIfqXsD7-DrFW990qQtn_FmcN1cjhPuDayfgorM8skhg182FdxVN4uAVyGcJ7nl7YQvxZ53j35BP4pgepdz9zjXEwZVgOw-myG-05yBC0mCkaLNdnmF_JTtD04uY0W-s/s1600/bg3slide.jpg

5. Tambahkan kode dibawah ini setelah kode ]]></b:skin>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function(){


$(&#39;.slide&#39;)
.bind(&#39;open&#39;, function(){
if(! $(this).hasClass(&#39;open&#39;)){
$(this).next().trigger(&#39;open&#39;);
$(this).addClass(&#39;open&#39;);
$(this).animate({right: &quot;-=511px&quot;});
}
else{
$(this).prev().trigger(&#39;close&#39;);
}
$(this).siblings().removeClass(&#39;active&#39;);
$(this).addClass(&#39;active&#39;);
})
.bind(&#39;close&#39;, function(){
if($(this).hasClass(&#39;open&#39;)){
$(this).removeClass(&#39;open&#39;);
$(this).animate({right: &quot;+=511px&quot;});
$(this).prev().trigger(&#39;close&#39;);
}
});

$(&#39;.slidebutton&#39;)
.click(function(){
$(this).parent().trigger(&#39;open&#39;);
$(&#39;#content-&#39; + $(this).parent().attr(&#39;id&#39;)).trigger(&#39;show&#39;);
});

$(&#39;.slidecontent&#39;).bind(&#39;show&#39;, function(){
$(&#39;.slidecontent&#39;).removeClass(&#39;open&#39;);
$(this).addClass(&#39;open&#39;);
});

});
</script>

6. Perhatikan kode dibawah ini :

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Masukkan kode dibawah ini setelah kode <div id='main-wrapper'>

<div id='home'>
<div id='slideshow'>
<ol id='slides'>
<li class='slide open active' id='slide-1'>
<a href='url yang akan ditampilkan'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1Cc1NWaEYvIg_dmOmx4bUeYnfHJefT7_zVmPuv2TAj5DoKMIH9oSNvbkQChjlKnVWE_WVjVbDUBGUKMqPL9xJmwS7MDrSA2pbMVCPl54FkSE1n2CftgCNVgiFiwnS1Nt5N07e2Gf0Gg/s1600/loedin1.jpg'/></a>
<a class='slidebutton' href='javascript:void(0);'><img alt='' src='http://www.striving4more.org/files/images/gold-ribbon/gold-ribbon.gif'/></a>
</li>

<li class='slide open' id='slide-2'>

<a href='url yang akan ditampilkan'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo4Yu1EbKoMFfmlfeybrhifSZ9nbqjgZw0Z6yerWJ41km031EJksB_S2syQQMGoOKiQpy20yYxBMxYHKTVtspyLIoIbYLIIyhG3JMfilma8iaSdyOgqJFYt7S-3MqkE3UT_Y73b4hdmVY/s1600/ahn2.jpg'/></a>
<a class='slidebutton' href='javascript:void(0);'><img alt='' src='http://www.striving4more.org/files/images/how-to-help/how-to-help.gif'/></a>
</li>

<li class='slide open' id='slide-3'>
<a href='url yang ditampilkan'><img alt='' src='http://www.striving4more.org/files/images/our-vision/our-vision.jpg'/></a>
<a class='slidebutton' href='javascript:void(0);'><img alt='' src='http://www.striving4more.org/files/images/our-vision/our-vision.gif'/></a>
</li>
</ol>
<ol id='slidecontents'>

<li class='slidecontent open' id='content-slide-1'>
<h3>JUDUL SLIDE- 1</h3>
<p>Penggalan kalimat yang mewakili slide - 1. <a href='URL dari Slide-1'>[more]</a></p>

</li>
<li class='slidecontent' id='content-slide-2'>
<h3>JUDUL SLIDE- 2</h3>

<p>Penggalan kalimat yang mewakili slide - 2. <a href='URL dari Slide-2'>[more]</a></p>
</li>

<li class='slidecontent' id='content-slide-3'>
<h3>JUDUL SLIDE- 3</h3>

<p>Penggalan kalimat yang mewakili slide - 3. <a href='URL dari Slide-3'>[more]</a></p>
</li>
</ol>
</div>
</div>

Keterangan : untuk masing-masing gambar buatlah dengan ukuran 520px X 285px.

Untuk melihat demonya anda bisa berkunjung di Test : A Horizontal jQuery Accordion using Custom Event Binding

Rencananya, template yang saya jadikan demo nantinya secara berkala akan saya modifikasi. Untuk saat ini, masih tengak-tengok kanan-kiri untuk mencari inspirasi.