Place Your Ads Here 460x68 ads

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.



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...