Blogger açılır kapanır galeri oluşturma

Blogger Html'yi düzenleye girin:
b:skin kodunun üstüne aşağıdaki kodları yapıştırın:

/* Accordion Featured Post Slider By TopBloggingIdeas.com */
#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;
}
/* Accordion Featured Post Slider By TopBloggingIdeas.com */

daha sonra aşağıdaki kodu ister htm gadget oluşturacağınız yere ister yazınıza ister de sayfanıza
yapıştırın....

<!-- Accordion Featured Post Slider By TopBloggingIdeas.com --> <div id='tbi_slider'> <ul> <li> <div id='tbi_title'> <a href='#'>Yogi Bear</a> </div> <a href='#'> <img src='https://lh6.googleusercontent.com/- NhooJVb0hwQ/UGg53Y_QesI/AAAAAAAAHAk/phdbETvo_eI/s640/Yogi-Bear- Movie.jpg'/> </a> </li> <li> <div id='tbi_title'> <a href='#'>Pixar's Up</a> </div> <a href='#'> <img src='https://lh3.googleusercontent.com/- SU4jZT5yXYw/UGg53UatZkI/AAAAAAAAHAo/F-g_-r6gZVs/s640/pixars-up.jpg'/> </a> </li> <li> <div id='tbi_title'> <a href='#'>Puss in Boots</a> </div> <a href='#'> <img src='https://lh3.googleusercontent.com/- asHudcWwb54/UGg53YXF9QI/AAAAAAAAHAs/TADuq-8mY8k/s640/puss-in- boots.jpg'/> </a> </li> <li> <div id='tbi_title'> <a href='#'>The Hobbit</a> </div> <a href='#'> <img src='https://lh6.googleusercontent.com/- 41bwECDuUMU/UGg54otX0BI/AAAAAAAAHA8/ad_rT1Qd-QQ/s640/the-hobbit- 2012.jpg'/> </a> </li> <li> <div id='tbi_title'> <a href='#'>Toy Story 3</a> </div> <a href='#'> <img src='https://lh3.googleusercontent.com/- feAh1xWq9yI/UGg54yk3qXI/AAAAAAAAHBE/QvvFgjIqpvQ/s640/toy-story- 3.jpg'/> </a> </li> </ul> </div> <!-- Accordion Featured Post Slider By TopBloggingIdeas.com --> resimleri değiştirirsiniz. kolay gelsin... demo aşağıdaki gördüğünüz

• Yogi Bear
  
• Pixar's Up
  
• Puss in Boots
  
• The Hobbit
  
• Toy Story 3
  

Written by Nhv-Editör

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.