Saturday, July 16, 2011

How Add Cool Jquery Slide Show For Blogger Part 4

This is also cool slide show to your blog.
Follow instruction to add it to your blog.












Demo here

1.
Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<style> #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:200px; 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(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRDLhbFvI/AAAAAAAAAZM/4N4RrfeWPdA/left.gif) left center no-repeat}
#imgnext {right:0; background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRJLGnjKI/AAAAAAAAAZc/Z99UWtjYHeo/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRGajwsfI/AAAAAAAAAZU/9e3kt7Z5Bjo/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRMN8VUeI/AAAAAAAAAZk/BTNwDZsGQhw/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRPJktr1I/AAAAAAAAAZs/Z3Qj8DTDrMw/scroll-right.gif) 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}</style>

4. Find this tag by using Ctrl+F    </body>

5. Paste below code before  </body> tag

<script src='http://keerthiset2.110mb.com/excellent%20slideshow/compressed.js' type='text/javascript'/>

<script type='text/javascript'>
$(&#39;slideshow&#39;).style.display=&#39;none&#39;;
$(&#39;wrapper&#39;).style.display=&#39;block&#39;;
var slideshow=new TINY.slideshow(&quot;slideshow&quot;);
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link=&quot;linkhover&quot;;
slideshow.info=&quot;information&quot;;
slideshow.thumbs=&quot;slider&quot;;
slideshow.left=&quot;slideleft&quot;;
slideshow.right=&quot;slideright&quot;;
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active=&quot;#fff&quot;;
slideshow.init(&quot;slideshow&quot;,&quot;image&quot;,&quot;imgprev&quot;,&quot;imgnext&quot;,&quot;imglink&quot;);
}
</script>

6. Find this tag by using Ctrl+F <div id="main-wrapper">

7.  Paste below code before <div id="main-wrapper">  tag

<ul id='slideshow'> 
<li> 
<h3>Tittle Here 1</h3> 
<span>http://2.bp.blogspot.com/-ArET8HdWHUQ/TiF3iNZSq-I/AAAAAAAAAVc/cXk_ccIu5VQ/s320/deathly-hallows-part-2.jpg</span> 
<p>Description 1 Here.</p> 
<a href='#'><img alt='Bionic' src='http://1.bp.blogspot.com/-W2j09IQvwZk/TiF5VvOLiaI/AAAAAAAAAWM/4G8I4YNMq6g/s320/deathly-hallows-part-2.jpg'/></a> 
</li> 
<li> 
<h3>Tittle Here 2</h3> 
<span>http://4.bp.blogspot.com/-UZsJq4KPg2s/TiF30CE8k3I/AAAAAAAAAVk/h8DKAzVRb-w/s320/source-code.jpg</span> 
<p>Description 2 Here.</p> 
<img alt='MOH' src='http://2.bp.blogspot.com/-eUrmlrA8CaE/TiF5nmmU8rI/AAAAAAAAAWU/XEyvtd2Dle0/s320/source-code.jpg'/> 
</li> 
<li> 
<h3>Tittle Here 3</h3> 
<span>http://2.bp.blogspot.com/-uY65ckMVIR8/TiF4A-7P9TI/AAAAAAAAAVs/Mq_dUQp75SE/s320/transformers3.jpeg</span> 
<p>Description 3 Here.</p> 
<a href='#'><img alt='Fear' src='http://1.bp.blogspot.com/-6iWsfbaB1DY/TiF531SaB7I/AAAAAAAAAWc/p7u2H0yqOAs/s320/transformers3.jpeg'/></a> 
</li> 
<li> 
<h3>Tittle Here 4</h3> 
<span>http://4.bp.blogspot.com/-ozQHfuZxB6k/TiF4Md7jpwI/AAAAAAAAAV0/EeH9BuRlNpY/s320/X-Men-FirstClass.jpg</span> 
<p>Description 4 Here.</p> 
<a href='#'><img alt='Farcry' src='http://3.bp.blogspot.com/-DH_IKb6ieG8/TiF5K1RctPI/AAAAAAAAAWE/GlzS5aJVyN4/s320/X-Men-FirstClass.jpg'/></a> 
</li> 
<li> 
<h3> Tittle Here 5</h3> 
<span>http://1.bp.blogspot.com/-qKmcHQkQfTk/TiF3Wi9j0LI/AAAAAAAAAVU/AwsmoUQncXk/s320/_dossier.jpg</span> 
<p>Description 5 Here.</p> 
<img alt='Farcry 2' src='http://4.bp.blogspot.com/-LwhOGAMwN8M/TiF4wuBm_DI/AAAAAAAAAV8/Mnyv12owTeE/s320/_dossier.jpg'/> 
</li> 

 


</ul> 
<div id='wrapper'> 
<div id='fullsize'> 
<div class='imgnav' id='imgprev' title='Previous Image'/> 
<div id='imglink'/> 
<div class='imgnav' id='imgnext' title='Next Image'/> 
<div id='image'/> 
<div id='information'> 
<h3/> 
<p/> 
</div> 
</div> 
<div id='thumbnails'> 
<div id='slideleft' title='Slide Left'/> 
<div id='slidearea'> 
<div id='slider'/> 
</div> 
<div id='slideright' title='Slide Right'/> 
</div> 
</div> 

Now you can edit it as your like,(above code)
change URL for new images,and enter new Title and description,

9. Now save your template
You are done.

3 comments:

  1. clean explanation man. so nice

    ReplyDelete
  2. Hey brother, how to make this slider appears only in homepage?

    ReplyDelete
  3. Contact me, from contact Us form,
    i will provide the code for you.

    ReplyDelete