Cara Membuat Slide Accordion Keren di blogger

adscblog

Slide Accordion Merupakan Feature slide yang sengaja di pasang di blog,dengan tujuan untuk menampilkan sesuatu yang penting atau juga hanya sekedar mempercantik blog saja,namun unik nya slide ini berbeda dengan yang lain yang dimana menggunakan Feature otomatis seperti hal nya slide-slide yang mungkin pernah anda lihat di blog lain ketika anda berkunjung

Slide Accordion ini bersipat manual yang dimana penempatan Gambar Atu judul Slide ini di setting melalui template nya,sehingga tidak bisa berganti begitu saja dan tidak bergerak dengan sendiri nya seperti slider yang biasa umum nya,namun walaupun begitu,slide Accordion ini tidak kalah keren nya dari Slide yang lain nya,dan unik nya juga slide Accordion ini apabila di sentuh oleh cursor komputer anda maka dengan sendiri nya akan bergerak ke sebelah kanan dan apabila di lepaskan kursor nya maka slide tersebut akan kembali ke semula seperti awal

Slide Accordion ini seperti hal nya Jendela Kamar anda yang biasa nya di buka di tutup ke arah samping,dan walaupun begitu saya yakin Slide Accordion ini tidak kalah keren nya dengan Slider lain nya yang pernah anda lihat mungkin,dan untuk demo nya silahkan anda lihat disini (Demo)

Cara Pemasangan Slide Accrodion di blog

Jika anda tertarik dengan Slide Accordion ini anda bisa ikuti langkah langkah pemasangan Slide Accordion ini,cara pemasangan nya pun sangat lah mudah apalagi anda sering otak atik template blog anda,tentu nya akan mempercepat pemasangan nya,untuk itu silahkan anda ikuti langkah-langkah pemasangan slide accordion di blog

1. Silahkan untuk login ke blogger
2. Setelah itu silahkan anda klik template kemudian Edit Html
3. Setelah itu silahkan anda cari main-wrapper blog anda atau sejenis nya atu tergantung dimana anda mau meletak kan Slide ini,tetapi kebanyakan blogger memasang slide ini berada di atas Postingan yaitu <div id='main-wrapper'> di bawah ini kode nya

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='accordian'>
<ul><li>
<div class='image_title'>
    <h2 href='#'>Woman at the Desert</h2>
   </div>
   <a href='#'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9gZeWniEKp4oNGffqraMhwGRhZDAlRNScZDyxoNZGLpmh5NG57G4ECPLKV9pX_q2xhydjvv_UxJMVUppTQ_bdzSdjchfICO2h2uwRY9CkDLCEkCivlgdDpnKFrFJNm0D6LHGP6AShksk/s1600/women+in+garden2.jpg'/>
   </a>
  </li>
  <li><div class='image_title'><a href='#'>Woman in Red</a></div>
   <a href='#'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7An2rdxz-v9gyhLKShvi-ruucEle8sMGymU9z1CuUdRr3tZFmLC3KVg_x6m1jgJ2rVeOeU7AcADV-bpKcwqzCLc_cZV6dlMUg3akbcgVYQG2YV2Fsl5R1Fe-PHBxDwOJwk7t_NJbn9rQ/s1600/women+in+red.jpg'/>
   </a>
  </li>
  <li>
   <div class='image_title'>
    <a href='#'>Woman at the Garden</a>
   </div>
   <a href='#'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9gZeWniEKp4oNGffqraMhwGRhZDAlRNScZDyxoNZGLpmh5NG57G4ECPLKV9pX_q2xhydjvv_UxJMVUppTQ_bdzSdjchfICO2h2uwRY9CkDLCEkCivlgdDpnKFrFJNm0D6LHGP6AShksk/s1600/women+in+garden2.jpg'/>
   </a>
  </li>
                <li>
   <div class='image_title'>
    <a href='http://www.ubedblog.com/2015/05/cara-mudah-custome-domain-blogspot.html'>Custome Domain Blogspot</a>
   </div>
   <a href='#'>
    <img src='https://lh3.googleusercontent.com/-8HTUVRDchp0/VUrMYu3eQKI/AAAAAAAADz0/Yvz1-LhPQSQ/h120/custom%2Bdomain.jpg'/>
   </a>
  </li>
</ul>
</div>
        </b:if>

4 .Setelah itu silahkan anda tempat CSS berikut

 * {
 margin: 0;
 padding: 0;}
body {
 background: #ccc;
 font-family: arial, verdana, tahoma;
}
.accordian {
 width: 805px; //  Lebar keseluruhan accordion slider
 height: 320px; //  Tinggi keseluruhan accordion slider
 overflow: hidden;
 margin: 100px auto;
 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
 width: 2000px;
}
.accordian li {
 position: relative;
 display: block;
 width: 160px; // Lebar gambar saat normal
 float: left; border-left: 1px solid #888;
 box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;}
.accordian ul:hover li {
width: 40px; // Lebar gambar saat tertutup}
.accordian ul li:hover {
width: 640px; // Lebar gambar saat terbuka}
.accordian li img {
 display: block;}
.image_title {
 background: rgba(0, 0, 0, 0.5);
 position: absolute;
 left: 0; bottom: 0;
 width: 640px; }
.image_title a {
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 20px;
 font-size: 16px;
}

5.Save Template dan lihat hasil nya

Untuk yang berwarna merah di atas,silahkan anda masukan alamat Gambar yang ingin anda tampilkan di bagian Slide Accordion tersebut,selamat mencoba dan salam blogger semoga bermanfaat.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 28 Mei and have 0 komentar