Make Slideshow for Blogger

Blog Everything Sharing - Make Slideshow for blogger, Image Slide Show will make the blog look to be beautiful and more professional look. Such a view is very suitable as a simple information about other blogs, or even can be used for ad space for bloggers who have a room (space) ads is limited.

Image slide show or display pictures slides is very easy we apply to bloggers, just need some step in the installation image slide show script code on his Blog.


Here's steps how to make an Image Slideshow on blogspot / Make Slideshow for blogger :

Step 1
Login and go to » layout » Edit HTML

Step 2
Scroll down to where you see code </head> tag .

Step 3
Copy below code and paste it just before the code </head> tag.

<style type="text/css">
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url( left center no-repeat}
#imgnext {right:0; background:url( right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)} .linkhover {background:url( center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url( center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url( center center no-repeat} #slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden} #slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}

Step 4
Now scroll down to where you see code </body> tag .

Step 5
Copy below code and paste it just before the </body> tag.

<script src='' type='text/javascript'/>
<script type='text/javascript'>
var slideshow=new TINY.slideshow(&quot;slideshow&quot;);

Step 6
Save your template.

Step 7
Now Go to Layout » Page Elements and click on "Add a gadget".

Step 8
Select "html/java script" and add the code given below and click save.

<ul id="slideshow">
<h3>Enter Title 1 Here</h3>
<span> 1 big.jpg</span>
<p>Enter Description 1 Here.</p>
<a href="#"><img src=" 1 small.jpg" alt="Bionic" /></a>

<h3>Enter Title 2 Here</h3>

<span> 2 big.jpg</span>

<p>Enter Description 2 Here.</p>
<img src=" 2 small.jpg" alt="MOH" />

<h3>Enter Title 3 Here</h3>

<span> 3 big.jpg</span>

<p>Enter Description 3 Here.</p>
<a href="#"><img src=" 3 small.jpg" alt="Fear" /></a>

<h3>Enter Title 4 Here</h3>

<span> 4 big.jpg</span>

<p>Enter Description 4 Here.</p>
<a href="#"><img src=" 4 small.jpg" alt="Farcry" /></a>

<h3>Enter Title 5 Here</h3>

<span> 5 big.jpg</span>

<p>Enter Description 5 Here.</p>
<img src=" 5 small.jpg" alt="Farcry 2" />

<h3>Enter Title 6 Here</h3>

<span> 6 big.jpg</span>

<p>Enter Description 6 Here.</p>
<a href="#"><img src=" 6 small.jpg" alt="Crysis" /></a>

<h3>Enter Title 7 Here</h3>

<span> 7 big.jpeg</span>

<p>Enter Description 7 Here.</p>
<a href="#"><img src=" 7 small.jpg" alt="Tomb Raider" /></a>

<h3>Enter Title 8 Here</h3>

<span> 8 big.jpg</span>

<p>Enter Description 8 Here.</p>
<a href="#"><img src=" 8 small.jpg" alt="Game" /></a>

<h3>Enter Title 9 Here</h3>

<span> 9 big.jpg</span>

<p>Enter Description 9 Here.</p>
<a href="#"><img src=" 9 small.jpg" alt="Medal of honor" /></a>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
<div id="slideright" title="Slide Right"></div>

Congratulations You're done !

Thank you for reading the blog articles Everyth1ng
Read also :
Powerpoint to Video Converter
GiliSoft File Lock Pro v4.4 Full version