Slide Acordeão Para Blog

Nesta postagem compartilho com vocês este Slide.

Veja uma demonstração:

• 
  
  DicasHot
  
  
  
  
• 
  
  DicasHot
  
  
  
  
• 
  
  DicasHot
  
  
  
  
• 
  
  DicasHot
  
  
  
  
• 
  
  DicasHot
  
  
  
  

Para colocar no Blogger

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<style>    
#tbi_slider {         
    overflow: hidden;         
    margin: 20px auto;         
    padding: 0;         
    width: 805px;         
    height: 320px;         
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);         
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);         
}         
#tbi_slider ul {         
    margin: 0;         
    padding: 0;         
    width: 2000px;         
}         
#tbi_slider li {         
    position: relative;         
    display: block;         
float: left;         
    width: 160px;         
    border-left: 1px solid #888;         
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);         
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);         
-webkit-transition: all 0.5s;         
-moz-transition: all 0.5s;         
-ms-transition: all 0.5s;         
-o-transition: all 0.5s;         
    transition: all 0.5s;         
}         
#tbi_slider ul:hover li {         
    width: 40px;         
}         
#tbi_slider ul li:hover {         
    width: 640px;         
}         
#tbi_slider li img {         
    display: block;         
    width: 640px;         
}         
#tbi_title {         
    position: absolute;         
    top: 0;         
    left: 0;         
    padding: 20px;         
    width: 640px;         
    background: rgba(0, 0, 0, 0.5);         
    color: #fff;         
    font: bold 16px 'trebuchet MS', sans-serif;         
}         
#tbi_title a {         
    display: block;         
    color: #fff;         
    text-decoration: none;         
}         
</style>  
<b:if cond="data:blog.url == data:blog.homepageUrl">         
</b:if>
<div id="tbi_slider">
<ul>
<li>         
<div id="tbi_title">
<a href="#">DicasHot</a>         </div>
<a href="#">         
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsVxXFXg0scKB2NztiJEgOjDLi5TviTYlrJAWw1MiTBZRxgewmCiGWP_Oqo1XysCL5BqxYPGHmuMmejmx3EB5Y365nfO87NsBjzePgL1J_0VufvN3EbLXu3E-IeUbFkWMaWCrOpnC5MRIV/s1600/cosplayrukia.jpg" />         
</a>         
</li>
<li>         
<div id="tbi_title">
<a href="#">DicasHot</a>         </div>
<a href="#">         
<img src="http://img-cache.cdn.gaiaonline.com/52a7bdd18176d427a0a3b224a0ee1386/http://i46.photobucket.com/albums/f144/foxboy93/Anime/sexy.jpg" />         
</a>         
</li>
<li>         
<div id="tbi_title">
<a href="#">DicasHot</a>         </div>
<a href="#">         
<img src="http://imnotanotaku.files.wordpress.com/2010/12/b-gata-h-kei-04-large-33.jpg" />         
</a>         
</li>
<li>         
<div id="tbi_title">
<a href="#">DicasHot</a>         </div>
<a href="#">         
<img src="http://www.wallsave.com/wallpapers/1366x768/anime-girl-gun/196584/anime-girl-gun-sexy-us-com-196584.jpg" />         
</a>         
</li>
<li>         
<div id="tbi_title">
<a href="#">DicasHot</a>         </div>
<a href="#">         
<img src="http://i.imgur.com/GnSJV.jpg" />         
</a>         
</li>
</ul> 
</div>                                                                                                                                                   <div style="text-align: right;">
<span style="color: white; font-size: xx-small;">Widget By <a href="http://dicashot.blogspot.com.br/2014/05/anuncio-fixado-em-um-so-lugar-da-pagina.html" target="_blank"><span style="color: white;">DicasHot</span></a></span></div>

Tendo colado o código, basta salvar e pronto!!!