Cara buat Fitur Slide Accordion

Karya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini.  Widget ini saya beri nama Fitur Slide Accordion. Selain tampilannya yang elegan, Fitur Slide Accordion ini banyak menampilkan animasi slide, yang tentunya banyak sekali manfaatnya buat melengkapi web ataupun blog anda. Misalnya web atau blog anda bergerak dibidang desain interior, eksterior, otomotif, pakaian, makanan, musik, atau bahkan web atau blog anda menampilkan game online. Yang jelas Fitur Slide Accordion ini bisa anda gunakan untuk menerangkan profil web atau blog anda. Dan Fitur Slide Accordion ini menggunakan fitur CSS dan beberapa HTML, sehingga widget ini bekerja sangat ringan. Mantab kan.....?

Silahkan anda LIHAT DEMONYA DISINI

Bila nda berminat menggunakan Fitur Slide Accordion ini, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

<style type='text/css'> /*widget Fitur Slide Accordion by noer Ceo http://www.carabuatwebgratis.com */ .ElegantAccordion{ position:relative; width:1000px; height:385px; margin:auto; overflow:hidden; background-color:#000; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_qafW6fnorEGJjetFWjdDyisS_RAKeXO6xal0sYuB5r92Zu8FhClWwm-V7cJ6aihJ1LMH86puempR6pxqaApN-dBWac9afmd7LbUpBQ49U8VU-7AVl2go3nHZp1-1obseP5z88c6fgs9U/s1000/background-image.jpg) no-repeat bottom right; background-repeat:no-repeat; background-position:50% 50%; -moz-box-shadow:1px 1px 5px #000; -webkit-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px 4px 4px 4px; } .titel-ElegantAccordion{ display: block; position:absolute; width:100%; height:80px; top:0px; float: left; font-size:100px; font-family:Edwardian Script ITC; font-weight:normal; color:#B85BED; line-height:80%; padding:30px 20px; cursor:pointer; text-shadow:4px 1px 1px #000; text-decoration:none; color:#FFBA00; z-index:999999; } .titel-ElegantAccordion a:link { color:#ddd; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } .titel-ElegantAccordion a:visited { color:#339025; text-decoration:none; } .titel-ElegantAccordion a:hover { color:#C3E9A4; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } .reference{ clear:both; top:250px; left:0px; position:absolute; text-align:right; font-size:10px; font-family: Cambria, serif; font-weight:bold; line-height: 1em; width:350px; padding:0px 20px 5px; background-color:#fff; -moz-box-shadow:1px 3px 15px #bbb; -webkit-box-shadow:1px 3px 15px #bbb; box-shadow:1px 3px 15px #bbb; opacity:0.7; } .reference p a{ text-transform:uppercase; text-shadow:1px 1px 1px #fff; color:#333; text-decoration:none; font-size:10px; font-family: Cambria, serif; line-height: 1em; } .reference p a:hover{color:#347D29;} ul.accordion{ list-style:none; position:absolute; right:0px; top:-15px; font-family: Cambria, serif; font-size: 16px; font-style: italic; line-height: 1.5em; } ul.accordion li{ float:right; width:115px; height:380px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#fff; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul.accordion li:hover{ float:right; width:480px; height:380px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#fff; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; } ul.accordion li.bleft{ border-left:2px solid #fff; } ul.accordion li .heading{ background-color:#fff; padding:10px; margin-top:315px; opacity:0.9; text-transform:uppercase; font-style:normal; font-weight:bold; letter-spacing:1px; font-size:14px; color:#444; text-align:center; text-shadow:-1px -1px 1px #ccc; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul.accordion li:hover .heading{ background-color:#fff; padding:10px; margin-top:-50px; } ul.accordion li .description{ position:absolute; width:480px; height:1px; bottom:-2px; left:0px; display:blok; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; } ul.accordion li:hover .description{ position:absolute; width:480px; height:175px; bottom:0px; left:0px; display:blok; } ul.accordion li .description h2{ text-transform:uppercase; font-style:normal; font-weight:bold; letter-spacing:1px; font-size:45px; color:#444; text-align:left; margin:0px 0px 15px 20px; text-shadow:-1px -1px 1px #ccc; } ul.accordion li .description p{ line-height:14px; margin:10px 22px; font-family: "Trebuchet MS", sans-serif; font-size: 12px; font-style: italic; font-weight: normal; text-transform: none; letter-spacing: normal; line-height: 1.6em; } ul.accordion li .description a{ position:absolute; bottom:5px; left:400px; text-transform:uppercase; font-style:normal; font-size:11px; text-decoration:none; color:#888; } ul.accordion li .description a:hover{ position:absolute; bottom:5px; left:400px; text-transform:uppercase; font-style:normal; font-size:11px; text-decoration:none; color:#888; color:#333; text-decoration:none; font-weight: bold; } ul.accordion li .bgDescription{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXVgGArUsIxBrf22r0IJwIXn4AXWXmoyxk6rShAPdVqgndVzPilPTUzQHm7NlCESn1j3ZJstNyDy0Zhnr1LODKQOjFbjEJJJGsQljjQueC0LpA6t2qzSBS6bO67hTDH4zeZwSaXw9QqpZ/s500/bgDescription.png) repeat-x top left; height:1px; position:absolute; bottom:-20px; left:0px; width:100%; display:blok; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; } ul.accordion li:hover .bgDescription{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXVgGArUsIxBrf22r0IJwIXn4AXWXmoyxk6rShAPdVqgndVzPilPTUzQHm7NlCESn1j3ZJstNyDy0Zhnr1LODKQOjFbjEJJJGsQljjQueC0LpA6t2qzSBS6bO67hTDH4zeZwSaXw9QqpZ/s500/bgDescription.png) repeat-x top left; height:340px; position:absolute; bottom:0px; left:0px; width:100%; display:blok; } </style>

8. Lalu copy lagi kode dibawah ini dan paste setelah kode diatas :

<style type='text/css'>
/*widget Fitur Slide Accordion by noer Ceo http://www.carabuatwebgratis.com */

ul.accordion li.bg1{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtQedAJbtkfFT8qCuWdi_FkgnKfLgX2qO8qZm28Ba4Klzsm_WTV-X1p4up99G8eRkjJsxrAlVoUK6o_WBWNFZEWWy6ytODM8f5ZRMfuUblKaWi0_aW_ggX2r2rMJGbcofNRzaAW3vVfMQ/s500/RUANG+mandi.jpg);
}

ul.accordion li.bg2{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCLv7FXo0k1pfo5BjnupA8Qa6RuDuLBntIYFJFnJMy-Onw2PCIGkpeGf_jDdRd1Hu2jje4l2Vcp5CflQT71xYqUm2cGMx_2Jf5UBLOx0DQs06Au-WNWPGZzLyoIFLSdQvVqSTixFOkjoZT/s500/DAPUR.jpg);
}
ul.accordion li.bg3{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAQvoT9cqmnW1YFLtgc8hEcyHxGEVYqQBnzXZKv79-pPt2PCf4KXN8MczLXwJT3LTprep1MUgsITwtnPJONBxo7vyYcRll64-dBzioTHaIX2EKDBRki4ACGG2r4na89vszvk9qAU8rfTf/s500/RUANG+makan.jpg);
}
ul.accordion li.bg4{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG0tRPjLUoZqCKjNza4iRwxhF1MPJcQFwqLKtuX-R_d0xQVwf5xsAm1SNzvKu6SQNuMnpAMzbLUwH5_1khWkPomyw6TSB6BizOEsPthnyRPcM9L093Xtjp7Kfd9w3hL3EVITRkJKqvz9Vh/s500/KAMAR+TIDUR.jpg);
}
ul.accordion li.bg5{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqpfsDeyr5x6qfPE3EXnWloAh0aRcEDTdcuSH6v93D5cs5bPbLuTORXkIa3LXbeX5SG_wwIKfysqEmy4jxiM5iKD2zy7jIgdmblfw22AYfUG-JjexLO0fSSn2zwp_Cfdo6kQgGxOqeQ9D/s500/RUANG+SANTAI+KELURGA.jpg);
}
</style>

Catatan :

Teks warna merah diatas adalah ULR gambar yang akan tampil pada Fitur Slide Accordion. Silahkan ganti dengan milik anda.

9. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada gadget yang ada dibawah header, ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="ElegantAccordion">
<div class="titel-ElegantAccordion">
<a href="ULR BLOG">NAMA BLOG</a>
</div>
<div id="content">
<div class="title"></div>

<div class="reference">
<p><a href="ULR ARTIKEL">JUDUL ARTIKEL</a></p>
<p><a href="ULR ARTIKEL">JUDUL ARTIKEL</a></p>
<p><a href="ULR ARTIKEL">JUDUL ARTIKEL</a></p>
<p><a href="ULR ARTIKEL">JUDUL ARTIKEL</a></p>
<p><a href="ULR ARTIKEL">JUDUL ARTIKEL</a></p>
</div>


<ul class="accordion" id="accordion">

<li class="bg1">
<div class="heading">JUDUL ITEM 1</div>
<div class="bgDescription"></div>
<div class="description">
<h2>JUDUL ITEM 1</h2>
<p>INFORMASI SINGKAT ITEM 1</p>
<a href="ULR ITEM 1 ">Read More</a>
</div>
</li>
               
<li class="bg2">
<div class="heading">JUDUL ITEM 2</div>
<div class="bgDescription"></div>
<div class="description">
<h2>JUDUL ITEM 2</h2>
<p>INFORMASI SINGKAT ITEM 2</p>
<a href="ULR ITEM 2">Read More</a>
</div>
</li>

<li class="bg3">
<div class="heading">JUDUL ITEM 3</div>
<div class="bgDescription"></div>
<div class="description">
<h2>JUDUL ITEM 3</h2>
<p>INFORMASI SINGKAT ITEM 3</p>
<a href="ULR ITEM 3">Read More</a>
</div>
</li>
               
<li class="bg4">
<div class="heading">JUDUL ITEM 4</div>
<div class="bgDescription"></div>
<div class="description">
<h2>JUDUL ITEM 4</h2>
<p>INFORMASI SINGKAT ITEM 4</p>
<a href="ULR ITEM 4">Read More</a>
</div>
</li>

<li class="bg5">
<div class="heading">JUDUL ITEM 5</div>
<div class="bgDescription"></div>
<div class="description">
<h2>JUDUL ITEM 5</h2>
<p>INFORMASI SINGKAT ITEM 5</p>
<a href="ULR ITEM 5">Read More</a>
</div>
</li>

</ul>
</div>
</div>
</div>

Catatam :

• Silahkan anda ganti Teks berwarna diatas.

5. Simpan.

Selamat mencoba dan Semoga bermanfaat....