5 Eylül 2013 Perşembe

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 -->