Membuat Accordion Slider di Blogspot ~ Bloggers Tips

BlogsTips - Untuk Tutorial kali ini saya ingin sharing cara memasang Accordion Slider di Blogspot, saya sendiri kurang paham apakah pemasangan Accordion Slider ini bermanfaat untuk SEO atau tidak, tetapi yang pasti tampilan Blog anda akan kelihatan cantik dan lebih professional. DEMO

Berikut Langkah - Langkah untuk memasang Accordion Slider di Blogspot

Login ke Blogger kemudian pilih Rancangan / Layout
Pilih Edit HTML
Cari Head Closing </head> gunakan CTRL + F untuk memudahkan pencarian
Letakan Kode dibawah ini tepat diatas (sebelum) </head>

<style type='text/css'>
/*widget Fitur Slide Accordion by noer Ceo http://www.mamasa.info/ */
.ElegantAccordion{
position:relative;
width:960px;
height:370px;
margin:auto;
overflow:hidden;
background-color:#000;
background:transparent url(http://2.bp.blogspot.com/-EWNcmRRZvAA/TvxUAClvy0I/AAAAAAAAAbg/Uf4C8g1UCI8/s1600/situs-komplek-pallawa-tana-toraja.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/AVvXsEilIGA2wBdOzoz7hv_EWO9TwZb656OrEwbyVY1TJFMc99FFBQI_xsMdL6w9F4-7qyUhTsSwNPShSDN7vNcO5Boe5IA9HSG1sDgFIUBHnWvvJF2Khejg0NiQSIdVb_PdudtSrSat5nHyTzAM/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/AVvXsEilIGA2wBdOzoz7hv_EWO9TwZb656OrEwbyVY1TJFMc99FFBQI_xsMdL6w9F4-7qyUhTsSwNPShSDN7vNcO5Boe5IA9HSG1sDgFIUBHnWvvJF2Khejg0NiQSIdVb_PdudtSrSat5nHyTzAM/s500/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:blok;
}
</style>

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

ul.accordion li.bg1{
    background-image:url(http://1.bp.blogspot.com/-fw5TKIrLGIU/TvxNgwU1jMI/AAAAAAAAAas/lSaSzkKE934/s1600/Proses%252Bpembuatan%252Bkain%252Btenun%252Bsambu.jpg);
}

ul.accordion li.bg2{
    background-image:url(http://4.bp.blogspot.com/-eVzz-yKKJSE/TvxNh7UdF5I/AAAAAAAAAa0/zlrBq5bRfmY/s1600/tana-toraja.jpg);
}
ul.accordion li.bg3{
    background-image:url(http://2.bp.blogspot.com/-k_fBnnxecX8/TvxNjEjFX8I/AAAAAAAAAa8/BypW-welolY/s1600/tari-bulu-londong-kab-mamasa.jpg);
}
ul.accordion li.bg4{
    background-image:url(http://2.bp.blogspot.com/-iA9FbMVEXLk/TvxNfeK_DzI/AAAAAAAAAak/plCJzD224zM/s1600/pakaian_toraja.jpeg);
}
ul.accordion li.bg5{
    background-image:url(http://3.bp.blogspot.com/-KnxVvn-BYh0/TvxNb4YgjgI/AAAAAAAAAaU/j_e1ybX59vU/s1600/baju_toraja.jpg);
}
</style>

Kalau sudah, anda bisa menyimpan template anda.

Langkah berikutnya :

Pilih Elemen Halaman / Page Elemen
Kemudian Pilih Add Gadget, terus pilih HTML/JavaScript usahakan letakkan dibawah Header agar penempatan Accordion bisa lebih sempurna, anda bisa meletakkan dimana saja dengan terlebih dahulu memodifikasi lebar gambar.
Copy Paste Script Kode di Bawah ini :

<div class="ElegantAccordion">
<div class="titel-ElegantAccordion">
<a href="http://polman.mamasa.info"> </a>
</div>
<div id="content">
<div class="title"></div>

<div class="reference">
<p><a href="http://polman.mamasa.info/2011/12/polman-jadi-sentra-industri-kakao.html">Polman Sentra Industri Kakao</a></p>
<p><a href="http://polman.mamasa.info/2011/12/sopir-ugal-ugalan-mobil-tabrak-spbu.html">Supir Ugalan-ugalan Tabrak SPBU</a></p>
<p><a href="http://internasional.mamasa.info/2011/12/pertanian-organik-jepang-referensi.html">Pertanian Organic di Jepang</a></p>
<p><a href="http://internasional.mamasa.info/2011/12/arsenal-bertahan-di-posisi-ke-5-liga.html">Arsenal Bertahan di Posisi ke-5</a></p>
<p><a href="http://mamuju.mamasa.info/2011/12/gelombang-pasang-di-mamuju-rusak-23.html">Gelombang Pasang di Mamuju Rusak 23 Rumah</a></p>
</div>

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

<li class="bg1">
<div class="heading">Kain Sambu</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Kain Sambu</h2>
<a href="http://www.mamasa.info/2011/12/kain-tenun-sambu-mamasa-berpeluang.html">Read More</a>
<p></p>

</div>
</li>

<li class="bg2">
<div class="heading">Toraja</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Tana Toraja</h2>
<p> </p>
<a href="http://toraja.mamasa.info">Read More</a>
</div>
</li>

<li class="bg3">
<div class="heading">Budaya</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Tari Bulu Londong</h2>
<p> </p>
<a href="http://www.mamasa.info/2011/12/tari-bulu-londong-mamasa.html">Read More</a>
</div>
</li>

<li class="bg4">
<div class="heading">Wisata</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Wisata Tana Toraja</h2>
<p> </p>
<a href="http://toraja.mamasa.info/2011/12/daerah-wisata-batupapan-diserbu.html">Read More</a>
</div>
</li>

<li class="bg5">
<div class="heading">Adat</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Adat Mamasa</h2>
<p></p>
<a href="http://www.mamasa.info/2011/11/lelang-daging-di-pernikahan-hanya-ada.html">Read More</a>
</div>
</li>

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

Kalau sudah simpan, Contoh DEMO

Bloggers Tips

Sabtu, 17 Maret 2012

Membuat Accordion Slider di Blogspot

0 komentar:

Posting Komentar

Postingan Populer

Label

Arsip Blog