Membuat Acordion Sidebar Dengan CSS

hai-hai.... Sobat blogger kali ini saya punya tutorial accordion slide tabs dengan css, dan ini akan mengurangi penggunaan accordion dengan jQuery. Dengan css ini kita bisa menyaingi penggunaan jQuery dan sangat halus penggunaanya, cara kerjanya saya manfaatkan dari css-transition dan manfaat input. dan semoga bagi para pengguna blogger ini bisa di manfaatkan untuk memasangnya pada sidebar blog. Untuk mengetahui cara memasangnya silahkan lihat tutorialnya.

DemoDownload

CSS

Wah kayanya untuk menjelaskan CSS terlalu panjang, namun saya gunakan tutorial transition dan css input.
untuk memasang CSS pasang di atas ]]></skin> .

.ac-container{width:400px;margin:10px auto 30px auto;text-align:left}
.ac-container label{font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;padding:5px 20px;position:relative;z-index:20;display:block;height:30px;cursor:pointer;color:#454545;text-shadow:1px 1px 1px rgba(255,255,255,0.8);line-height:33px;font-size:19px;background:#ffffff;background:-moz-linear-gradient(top,#ffffff 1%,#eaeaea 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(1%,#ffffff),color-stop(100%,#eaeaea));background:-webkit-linear-gradient(top,#ffffff 1%,#eaeaea 100%);background:-o-linear-gradient(top,#ffffff 1%,#eaeaea 100%);background:-ms-linear-gradient(top,#ffffff 1%,#eaeaea 100%);background:linear-gradient(top,#ffffff 1%,#eaeaea 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#eaeaea',GradientType=0 );box-shadow:0px 0px 0px 1px rgba(155,155,155,0.3),1px 0px 0px 0px rgba(255,255,255,0.9) inset,0px 2px 2px rgba(0,0,0,0.1)}
.ac-container label:hover{background:#fff}
.ac-container input:checked+label,.ac-container input:checked+label:hover{background:#1F4453;color:#fff;text-shadow:0px 1px 1px #3D7489;box-shadow:0px 0px 0px 1px rgba(155,155,155,0.3),0px 2px 2px rgba(0,0,0,0.1)}
.ac-container label:hover:after,.ac-container input:checked+label:hover:after{content:'';position:absolute;width:24px;height:24px;right:13px;top:7px;background:transparent url(../images/arrow_down.png) no-repeat center center}
.ac-container input:checked+label:hover:after{background-image:url(../images/arrow_up.png)}
.ac-container input{display:none}
.ac-container article{background:rgba(255,255,255,0.5);margin-top:-1px;overflow:hidden;height:0px;position:relative;z-index:10;-webkit-transition:height 0.3s ease-in-out,box-shadow 0.6s linear;-moz-transition:height 0.3s ease-in-out,box-shadow 0.6s linear;-o-transition:height 0.3s ease-in-out,box-shadow 0.6s linear;-ms-transition:height 0.3s ease-in-out,box-shadow 0.6s linear;transition:height 0.3s ease-in-out,box-shadow 0.6s linear}
.ac-container article p{font-style:italic;color:#000;line-height:23px;font-size:14px;padding:20px;text-shadow:1px 1px 1px rgba(255,255,255,0.8)}
.ac-container input:checked ~ article{-webkit-transition:height 0.5s ease-in-out,box-shadow 0.1s linear;-moz-transition:height 0.5s ease-in-out,box-shadow 0.1s linear;-o-transition:height 0.5s ease-in-out,box-shadow 0.1s linear;-ms-transition:height 0.5s ease-in-out,box-shadow 0.1s linear;transition:height 0.5s ease-in-out,box-shadow 0.1s linear;box-shadow:0px 0px 0px 1px rgba(155,155,155,0.3)}
.ac-container input:checked ~ article.ac-small{height:160px}
.ac-container input:checked ~ article.ac-medium{height:200px}
.ac-container input:checked ~ article.ac-large{height:230px}
/* list reference*/
.reference li{display:list-item;list-style:circle inside}
.reference{margin:10px;line-height:1.5}

HTML

Karena penggunaan accordion dengan css maka kita akan memanfaatkan dari properti input untuk pemanggil tiap tabs nya.
seperti di bawah ini.
Untuk memasang HTML ini kalian bisa pasang pada widget baru di sidebar atau bisa menaruhnya pada template blog secara manual.

<div class="ac-container">
<!--accordion pertama -->
<div>
<input id="ac-1" name="accordion-1" type="radio" checked />
 <label for="ac-1">Kabogoh Aing</label>
 <article class="ac-small">
  <p><a href="/" style="float:left; margin-right:0.5em;"><img alt="denzdii" src="images/danish.jpg" width="100" height="100"/></a>Namanya Danisha, Dia sekarang kulliah di salah satu universitas kota Bandung, orangnya baik hati,cantik dan sangat untuk untuk di ajak berteman tanpa membeda-bedakan.</p>
 </article>
 </div>
<!--accordion ke-dua -->
 <div>
<input id="ac-2" name="accordion-1" type="radio" />
 <label for="ac-2">Finch</label>
  <article class="ac-medium">
 <h1 style="padding: 20px 20px 0;font-weight:bold;">Letters To You</h1>
  <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.</p>
  </article>
</div>
<!--accordion ke-tiga -->
<div>
<input id="ac-3" name="accordion-1" type="radio" />
<label for="ac-3">References</label>
<article class="ac-large">
<ul class="reference">
 <li>CSS-Tuts+ - <a class="symbol" href="http://www.under-88.blogspot.com/">www.under-88.blogspot.com</a></li>
 <li>CSS-Tricks - <a class="symbol" href="http://www.css-tricks.com/" rel="nofollow" target="_blank">www.css-tricks.com</a></li>
 <li>jQuery - <a class="symbol" href="http://www.jquery.com/" rel="nofollow" target="_blank">www.jquery.com</a></li>
 <li>CSS-Tutorial - <a class="symbol" href="http://www.w3schools.com/" rel="nofollow" target="_blank">www.w3schools.com </a></li>
 <li>Web Design - <a class="symbol" href="http://www.tympanus.net/codrops/" rel="nofollow" target="_blank">www.tympanus.net</a></li>
 <li>Red Team Design  - <a class="symbol" href="http://www.red-team-design.com/" rel="nofollow" target="_blank">www.red-team-design.com</a></li>
</ul>
 </article>
    </div>
<!--accordion ke-empat -->
    <div>
<input id="ac-4" name="accordion-1" type="radio" />
<label for="ac-4">Contact</label>
 <article class="ac-large">
  <p>All the windows, Swear to miss you, And the doors are cell block tight, Sweet sedation, Sweep the issues, And the clocks about to strike Did it call you down, Are you back just yet, Waiting now please come set me free, And the only sound is a minute left.  This could be, this could be the last time  It's a chance to fix mistakes, One more for the last time, Does it blow our dreams away, Don't waste this chance with your smile 10 seconds left on this dial, This could be the last time.</p>
 </article>
</div>
</div>
        </div>

Penjelasan :

Jika ingin pasang tiap widget blog dengan accordion maka berikut caranya.
pertama perhatikan barisan code di bawah yang mungkin mirip dengan template sobat.

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular' type='PopularPosts'/>
</b:section>

lalu code HTML Accordioan di atas cari yang seperti ini:

<!--accordion pertama -->
<div>
<input id="ac-2" name="accordion-1" type="radio" />
 <label for="ac-2">NAMA-WIDGET</label>
  <article class="ac-medium">
  
  ..................widget...............................

  </article>
</div>

Kemudian masukan widget yang ada pada sidebar hasilnya akan seperti ini..

<!--accordion pertama -->
<div>
<input id="ac-1" name="accordion-1" type="radio" />
 <label for="ac-1">NAMA-WIDGET</label>
  <article class="ac-medium">
  <!-- widget yang masuk harus lengkap-->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular' type='PopularPosts'/>
</b:section>
<!--end sidebr widget -->
  </article>
</div>

Penggunaan Radio Pada HTML

<input id="ac-2" name="accordion-1" type="radio" />
 <label for="ac-2">NAMA-WIDGET</label>

id="ac-2" - for="ac-2" penggunaan ini harus sama,seperti pada HTML di atas ac-1,ac-2,ac-3,ac-4.

Mudah bukan. yang penting kalian bisa memperhatikan barisan HTML maka kalian akan memahami dengan jelas dan sangat mudah untuk di utak atik sendiri.
Terima kasih atas kunjungannya semoga ini bisa bermanfaat.