widget accordion

Widget accordion tanpa script atau yang saya sebut dengan widget accordion. widget accordion ini memakai CSS 3, dan widget accordion ini memiliki kode html yang ringan karena tidak memiliki script ataupun tenaga Jquery. widget accordion pada tutorial kali ini saya pelajari dari tehnik para teman teman dan pakar html dan css yang telah memberikan ilmu ini kepada saya pribadi. Sistem yang di gunakan oleh widget accordion pada tutorial kali ini hanya mengandalkan ' radio button dan label code ' pada kinerja html yang dimotorik oleh CSS. Untuk melihat tampilan dari widget accordion ini silahkan klik demo dibawah , dan jika anda tertarik untuk memasangnya silahkan simak penjelasan dari tutorial widget accordion pada postingan kali ini, langsung saja menuju TKP.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code </head>
4. Copy Code script CSS widget accordion dibawah ini, pastekan tepat diatas code </head> yang tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : widget accordion
By : Rivai Silaban | Blog Design
Update :Senin, 18 Nopember 2013
******************************************/
.widget-accordion{
width: 300px;// lebar widget
margin: 10px auto 30px auto;
text-align: left;
}
.widget-accordion label{
font-family: Georgia;
padding: 5px 10px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
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%);
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);
}
.widget-accordion label:hover{
background: #fff;
padding: 5px 30px;
}
.widget-accordion input:checked + label,
.widget-accordion input:checked + label:hover{
color: #CCCCCC;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
background: #000;
}
.widget-accordion input:checked + label:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:60px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #000;
}
.widget-accordion label:hover:after,
.widget-accordion input:checked + label:hover:after{
content:"";
position:absolute;
width:0;
height:0;
border:0px solid transparent;
right:279px;
bottom:auto;
left:auto;
border-width:15px 0 15px 21px ;
border-color:transparent #000;
}
.widget-accordion input{
display: none;
}
.widget-accordion article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
}
.widget-accordion article div{
color: #777;
line-height: 20px;
font-size: 12px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
font-family: Verdana;
}
.widget-accordion 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);
}
.widget-accordion input:checked ~ article.bdrs-page{
height: 200px;
overflow: auto;
}/* widget accordion CSS code end */

Install Program Tag HTML

• Setelah anda sudah memasang CSS widget accordion saatnya anda memasang kode htmlnya.
• Untuk memasang kode htm widget accordion ini anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar kanan halaman blog.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler widget accordion dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save .

<!-- Rivai Silaban | BLOG DESIGN CODE widget accordion start -->
<section class="widget-accordion">
<div><!-- widget accordion tab 1 start -->
<input id="bdrs-1" name="widget-accordion-Blog-Design" type="radio" checked />
<label for="bdrs-1">JUDUL TAB </label>
<article class="bdrs-page">
<div>Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.<br/><br/><a href="LINK PROFIL ANDA " target="_blank" title="Blog Design">Rivai Silaban | BLOG DESIGN</a> </div>
</article>
</div><!-- widget accordion tab 1 end -->

<div><!-- widget accordion tab 2 start -->
<input id="bdrs-2" name="widget-accordion-Blog-Design" type="radio" />
<label for="bdrs-2">JUDUL TAB </label>
<article class="bdrs-page">
<div>
<a href="http://rivai-silaban.blogspot.com/" target="_blank" title="Blog Design">Rivai Silaban | BLOG DESIGN</a><br/>Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik kontribusi dalam tag tag html begitu juga dengan XML.
</div>
</article>
</div><!-- widget accordion tab 2 end -->

<div><!-- widget accordion tab 3 start -->
<input id="bdrs-3" name="widget-accordion-Blog-Design" type="radio" />
<label for="bdrs-3">JUDUL TAB</label>
<article class="bdrs-page">
<div>Silahkan anda isi dengan link atau nomer kontak anda yang dapat menunjang kinerja blog anda </div>
</article>
</div><!-- widget accordion tab 3 end -->

<div><!-- widget accordion tab 4 start -->
<input id="bdrs-4" name="widget-accordion-Blog-Design" type="radio" />
<label for="bdrs-4">JUDUL TAB</label>
<article class="bdrs-page">
<div>Pasang secara manual code link kategori halaman blog anda disini..!! </div>
</article>
</div><!-- widget accordion tab 4 end -->

<div><!-- widget accordion tab 5 start -->
<input id="bdrs-5" name="widget-accordion-Blog-Design" type="radio" />
<label for="bdrs-5">JUDUL TAB</label>
<article class="bdrs-page">
<div>Kolom ini isi dengan script atau tag html artikel terkait untuk semua postingan halaman blog anda.</iv>
</article>
</div><!-- widget accordion tab 5 Start -->
</section>
<!-- Rivai Silaban | BLOG DESIGN CODE widget accordion end -->

Keterangan Code

• Tulisan warna MERAH pada code CSS merupakan lebar widget accordion ini
• Untuk tulisan warna HIJAU ganti dengan text , code html dan script
• Kode tulisan warna BIRU ganti dengan JUDUL TAB
• Silahkan anda edit CSS widget accordion ini sesuai dengan tampilan yang anda inginkan
  

widget accordion pada postingan artikel kali ini tidak memakai script ataupun Jquery, jadi memiliki code yang ringan cocok buat halaman blog kesayangan anda. Tampilan widget accordion kali ini memiliki desain yang menarik dan lebih elegan. Tambahan scroll auto pada widget accordion ini sangat membantu untuk pemakaian halaman yang lebih akurat sihingga widget accordion ini tidak memakan banyak ruang layout halaman.

Bila anda mengalami kesulitan pada pemasangan tutorial pada postingan widget accordionini atau menemukan kode yang error, silahkan hubungi saya atau share dengan saya melalui form komentar dibawah. Pergunakan semua fasilitas di blog ini untuk mempermudah anda.

Widget accordion
Senin, 18 November 2013

Blog Design

+Rivai Silaban

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 1:18 PM