kang diar: Cara Membuat Slideshow Berlipat

Disini akan dijelaskan cara lain membuat slide berlipat atau biasa disebut fitur slide accordion, silakan lihat contohnya DISINI.

Nah caranya :
1. Login ke Blogger, masuk menu edit HTML.
2. Cari kode </head>
3. Copy kode berikut lalu letakkan (paste) diatas kode </head>

<style type='text/css'>
/*widget Fitur Slide Accordion by KangDiar http://kangdiar.blogspot.com */
.ElegantAccordion{
position:relative;
width:1000px;
height:385px;
margin:auto;
overflow:hidden;
background-color:#000;
background:transparent url(https://lh5.googleusercontent.com/-hKTkCP-qX5I/TjYiC4g7vwI/AAAAAAAAA6k/9OeMLCpbaEM/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://lh4.googleusercontent.com/-uxGNwgU877U/TjrY6o5_5rI/AAAAAAAAA78/XaJy-gBGOqc/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://lh4.googleusercontent.com/-uxGNwgU877U/TjrY6o5_5rI/AAAAAAAAA78/XaJy-gBGOqc/s500/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:blok;
}
</style>

CATATAN :

Keterangan kode diatas, ini adalah alamat gambar background ukuran 1000x389 pixel, https://lh5.googleusercontent.com/-hKTkCP-qX5I/TjYiC4g7vwI/AAAAAAAAA6k/9OeMLCpbaEM/s1000/background-image.jpg. Sedangkan ini adalah gambar background untuk tulisan : https://lh4.googleusercontent.com/-uxGNwgU877U/TjrY6o5_5rI/AAAAAAAAA78/XaJy-gBGOqc/s500/bgDescription.png

Selanjutnya tambahkan lagi kode berikut ini :

<style type='text/css'>
/*widget Fitur Slide Accordion by kangdiar http://kangdiar.blogspot.com */
ul.accordion li.bg1{
    background-image:url(https://lh3.googleusercontent.com/-OpoU-x49CTw/TjqOJbBX6PI/AAAAAAAAA7w/LYNuMQoX4Ns/s500/RUANG%2Bmandi.jpg);
}
ul.accordion li.bg2{
    background-image:url(https://lh4.googleusercontent.com/-8wNVArrnr78/TjqOHHjR3oI/AAAAAAAAA7o/5zifyvqEFBU/s500/DAPUR.jpg);
}
ul.accordion li.bg3{
    background-image:url(https://lh4.googleusercontent.com/-Dgdry7Ij8c0/TjqOYDMhq0I/AAAAAAAAA74/l3vuzzYhNpc/s500/RUANG%2Bmakan.jpg);
}
ul.accordion li.bg4{
    background-image:url(https://lh5.googleusercontent.com/-ayIj1KwE6XQ/TjqOIlC8iGI/AAAAAAAAA7s/DiHRLl030fs/s500/KAMAR%2BTIDUR.jpg);
}
ul.accordion li.bg5{
    background-image:url(https://lh5.googleusercontent.com/-5NCfWi4gokg/TjqOKcTZ23I/AAAAAAAAA70/C1Dh7vTumys/s500/RUANG%2BSANTAI%2BKELURGA.jpg);
}
</style>

Tulisan berwarna merah adalah alamat gambar yang akan tampil. Jadi anda bisa mengganti dengan gambar anda sendiri.Selanjutnya, klik tombol SIMPAN TEMPLATE. Nanti tampilan slide sebagai berikut :

<div class="ElegantAccordion">
<div class="titel-ElegantAccordion">
<a href="URL BLOG">JUDUL SLIDE</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="URL 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>

URL BLOG adalah alamat blog jika tulisan JUDUL SLIDE di-klik. Lihat screenshot, judul SLIDE adalah INTERIOR DESIGN.

URL ARTIKEL dan JUDUL ARTIKEL ada 5, lihat screenshot letaknya yaitu disebelah kiri yaitu :

TIPS SETING RUANG KELUARGA YANG IDEAL
TIPS SETING RUANG TIDUR YANG NYAMAN
TIPS SETING RUANG MAKAN PEMBANGKIT SELERA
TIPS SETING DAPUR YANG BERSIH DAN FUNGSIONAL
TIPS SETING DAPUR TANG BERSIH DAN RAPI

Sedangkan keterangan untuk :

JUDUL ITEM 1
INFORMASI SINGKAT ITEM 1

URL ITEM 1

lihat screenshot berikut ini :

JUDUL ITEM 1 adalah FAMILY ROOM, INFORMASI SINGKAT adalah keterangan "Faktor kenyamanan ... ", sedangkan URL adalah jika tujuan alamat jika keping slide ini di-klik.

Bingung ya? sama...hehehe...

Sumber: http://www.carabuatwebgratis.com/2011/08/cara-buat-fitur-slide-accordion.html