Trik Komputer: Add Lite Accordion jQuery to Blogger

Trik jQuery berikut sedikit extreme. Karena memerlukan usaha dalam memasukannya ke template blog sobat. Namun sepertinya liteAccordion horizontal yang ini merupakan salah satu accordion terbagus yg pernah ada :D Demo, tata cara, download bisa didapatkan di .
Beben Koben si bloglang anu ganteng kalem tea seperti biasa akan membantu cara masukin ke template dengan cara termudah (bagi yg bisa) :D :) Download terlebih dahulu liteaccordion.jquery.js kemudian letakkan diatas tag </head>
liteaccordion.jquery.js (compress form)

Setelah itu masuk, kemudian kode CSS-nya dimasukin sebelum tag ]]></b:skin>

Kode CSS Lite Accordion

.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; }
.accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; }
.accordion li > h2 { color: black; font-weight: normal; margin: 0; z-index: 2; position: absolute; top: 0; left: 0; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #353535; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555)); background: -moz-linear-gradient(top left, #353535 0%, #555 100%); }
.dark h2.selected b { background: #434343\9; }
.dark li > div { background: #030303; margin-left: 5px; }
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
figure { display: block; width: 100%; height: 100%; margin: 0 }
figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }

Benar saja script & kode CSS bentrok dengan emoticon, download here .

Kode HTML LiteAccordion

<center>
<div class='accordion' id='one'>
<ol>
<li>
<h2><span>Slide One</span></h2>
<div>
<figure>
<img alt='image' src='http://YOUR-LINK-IMAGE1.jpg'/>
<figcaption>CAPTION 1</figcaption>
</figure>
</div>
</li>
<li>
<h2><span>Slide Two</span></h2>
<div>
<figure>
<img alt='image' src='http://YOUR-LINK-IMAGE2.jpg'/>
<figcaption>CAPTION 2</figcaption>
</figure>
</div>
</li>
<li>
<h2><span>Slide Three</span></h2>
<div>
<figure>
<img alt='image' src='http://YOUR-LINK-IMAGE3.jpg'/>
<figcaption>CAPTION 3</figcaption>
</figure>
</div>
</li>
<li>
<h2><span>Slide Four</span></h2>
<div>
<figure>
<img alt='image' src='http://YOUR-LINK-IMAGE4.jpg' width='768'/>
<figcaption>CAPTION 4</figcaption>
</figure>
</div>
</li>
<li>
<h2><span>Slide Five</span></h2>
<div>
<figure>
<img alt='image' src='http://YOUR-LINK-IMAGE5.jpg'/>
<figcaption>CAPTION 5</figcaption>
</figure>
</div>
</li>
</ol>
</div>
</center>

Koben tag semua kode HMTL agar berada ditengah <center> ... </center> Jika tidak mau berada ditengah delete saja, maka akan keberadaan pindah ke kiri. Coba masukin semua kode HTML tepat sesudah kode berikut

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='bLo9-Sp0t (Header)' type='Header'/>
</b:section>
    </div>
---------------- LETAKKAN DISINI ----------------

Maka lite-accordion akan berada tepat dibawah judul blog kalian ;)
Bumbu terakhir guna menjalankan jQuery lite accordion, sisipkan script berikut diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
$('#one').liteAccordion({
  onActivate : function() {
   this.find('figcaption').fadeOut();
  },
  slideCallback : function() { 
   this.find('figcaption').fadeIn();
  },
  autoPlay : true,
  pauseOnHover : true,
  theme : 'dark',
  rounded : true,
  enumerateSlides : true     
}).find('figcaption:first').show();
$('#two').liteAccordion();
$('#three').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200, slideSpeed : 600, firstSlide : 2 });
//]]>
</script>

Lihat hasil kerja sobat, jika tidak ada bug's sukses deh :)
Happy lite accordion \m/

Trik Komputer

Selasa, 18 Oktober 2011

Add Lite Accordion jQuery to Blogger

Kode CSS Lite Accordion

Kode HTML LiteAccordion

Tidak ada komentar:

Posting Komentar