Accordion using Only CSS for Blogger

Banyak jalan menuju roma sob ;) Banyak trik dan teknik guna memberi ruang bagi content blog kita yg semakin buanyak :D Salah satunya dengan trik tab versi jQuery olug-in atau mau lebih ekstreme etc tab :-" Jalan menuju roma sekarang yaitu bagaimana membuat ruang konten bagi blog dengan menggunakan Accordion using only CSS. Banyak sih artikel mengenai cara membuat accordion diblog, dan sampe² dibikin jadi templatenya accordion template for blogger :-bd Kalau tidak simpel, unik, dan gaya mana bloglang Beben si ganteng kalem mau berbagi :D :"> Here's screenshot for accordion using only CSS yg sudah dipraktekan dalam blog :-bd

Kode CSS

Seperti biasa kode CSS selalu letakan diatas/sebelum kode ]]></b:skin>

.accordion {
background: #EAD5A4;
padding: 1em;
width: auto;
margin: 2em auto;
}
.accordion h3 {
margin: 0;
}
.accordion .section {
border-bottom: 1px solid #ccc;
padding: 0 1em;
background: #F9F5D5;
}
.accordion h3 a {
display: block;
font-weight: normal;
padding: 1em 0;
}
.accordion h3 a:hover {
text-decoration: none;
}
.accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
}
.accordion :target h3 a {
text-decoration: none;
font-weight: bold;
}
.accordion :target h3 + div {
height: 75px;
}
.accordion .section.large:target h3 + div {
overflow: auto;
}

Untuk warna background silahkan disesuaikan dengan selera masing² disini dan disini ;))

Kode HTML

Letakan dalam Add a gadget ► Javascript/HTML pada halaman Page Elements.

<div class="accordion">
<div id="one" class="section">
<h3><a href="#one">Heading 1</a></h3>
<div><p>Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.</p>
</div></div>
<div id="two" class="section">
<h3><a href="#two">Heading 2</a></h3>
<div><p>Al estar escrito en un lenguaje clásico (el más usado está derivado del latín clásico) suele despertar curiosidad saber qué significa. Sin embargo el significado del texto no tiene importancia debido a que si un texto es legible los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.</p>
</div>
</div>
<div id="three" class="section">
<h3><a href="#three">Heading 3</a></h3>
<div><p>A pesar de estar extraído de ese escrito, el texto usado habitualmente es: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
</div>
</div>
<div id="four" class="section large">
<h3><a href="#four">Heading 4</a></h3>
<div><p>Lorem ipsum (abreviadamente, lipsum) es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. En este caso se le conoce también como greeking en inglés.</p>
</div>
</div>
<div id="five" class="section">
<h3><a href="#five">Heading 5</a></h3>
<div><p>Al estar escrito en un lenguaje clásico (el más usado está derivado del latín clásico) suele despertar curiosidad saber qué significa. Sin embargo el significado del texto no tiene importancia debido a que si un texto es legible los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.</p>
</div>
</div>

Ganti tulisan lorem al estar en un prat pret prot itu dengan kontent yang dikehendaki :)

Save

Sobat sudah menambah ruang bagi konten dengan trik accordion using only CSS :)
Original article | Live Demo

Pure CSS3 accordion

Wassalam :)