How to make or create image slid up / slider for blogger for free

Unknown 3:59 AM widgets No comments

Step 1:-

Goto blogger dashboard > Template > Edit HTML
Then press CTRL+F and find this tag ]]></b

Then Paste this CSS code above of it...

/*Now the styles*/
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
font-family: arial, verdana, tahoma;
}

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
width: 805px; height: 320px;
overflow: hidden;

/*Time for some styling*/
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);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
width: 2000px;
/*This will give ample space to the last item to move
instead of falling down/flickering during hovers.*/
}

.accordian li {
position: relative;
display: block;
width: 160px;
float: left;

border-left: 1px solid #888;

box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

/*Transitions to give animation effect*/
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
/*If you hover on the images now you should be able to
see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}

.accordian li img {
display: block;
}

/*Image title styles*/
.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;
}

Step 2:-

Then Goto blogger dashboard > Layout > Add a gadget > Add HTML/Java Script

Then paste Following code, and save


<div class="accordian">
<ul>
<li>
<div class="image_title">
<a href="http://helpingstranger.blogspot.com/2014/02/download-assasins-creed-iv-black-flag_26.html">Assasins Creed - Black Flag Save Game</a>
</div>
<a href="http://helpingstranger.blogspot.com/2014/02/download-assasins-creed-iv-black-flag_26.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl9-HEKIHu-QQS7O8ZpsF_bumLORA6Y35We-gHmmo6RLBzYStqQf5lhZux_yHVbFXtUEcMAhPe4yRQT2KKqVQauDcSsBn8ThKxdnAdC85Q5QpypP5HagtLM9CQOZ8-6Mbnwd6JDBcy4n_z/s1600/1.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="http://helpingstranger.blogspot.com/2014/02/BF4save.html">Download Sound Tracks</a>
</div>
<a href="http://helpingstranger.blogspot.com/2014/02/BF4save.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP0ui3OZzpAUGSDpmgQv8DSv-vN5zT3CFfmhS8b68jFNk85H3d9fcyXWM7tMQALHCFuzhyqXPJIaosZdhQsW_XpU5ShhI87I0tP1T6zEPqT6KzfEURxANdfWdZ24gq7y20Za6axfPRpsjo/s1600/59725d1367963559-amanti-di-videogame-ubisoft-entrate-far-cry-3-far_cry_3_jason-wallpaper-1366x768.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="http://helpingstranger.blogspot.com/2014/03/company-of-heroes-opposing-fronts_11.html">Download CoH Maps,Mods</a>
</div>
<a href="http://helpingstranger.blogspot.com/2014/03/company-of-heroes-opposing-fronts_11.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-L6_LjoLhc_R5_h9XpaEWIdP_JicA3A3pjMG0iqRWv8CXK1agLk0m0g4VoRk-F9ZjOesUMlJZhaQ0zXfMN9uvRpa7eCLCr2beDtPnn4ao1Qkoeu9UXXaIGXZ3sJPdi_8XAKVx1sx3NnDk/s1600/coh-of.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="http://helpingstranger.blogspot.com/2014/03/download-assasins-creed-iv-black-flag.html">Assasisn Creed - Black Flag Cursors</a>
</div>
<a href="http://helpingstranger.blogspot.com/2014/03/download-assasins-creed-iv-black-flag.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyqwY7WlbAox1pHnZzdH7zghyphenhyphenenT47BvjjtgMHo133giaPuWS2X-J0dPJeIe1xnNNlVkWa7gD_oQnCx05tJFpCMfhepYzW8OC5ZUi4IH_Aog7A8Zo6dT7EBuGzNu5QaSCbftui4UhLrpnI/s1600/assassins.jpg"/>
</a>
</li>

</ul>
</div>

Customizations

http://helpingstranger.blogspot.com/2014/02/download-assasins-creed-iv-black-flag_26.html
This where you put your link when image is clicked

Assasins Creed - Black Flag Save Game
This is the bottom stylish title of the image.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl9-HEKIHu-QQS7O8ZpsF_bumLORA6Y35We-gHmmo6RLBzYStqQf5lhZux_yHVbFXtUEcMAhPe4yRQT2KKqVQauDcSsBn8ThKxdnAdC85Q5QpypP5HagtLM9CQOZ8-6Mbnwd6JDBcy4n_z/s1600/1.jpg
This is the link that links you images to slider.