2 Excellent Content SlideShow+Slider to Blogger/WebSite

UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........

1.Login to your blogger dashboard--> layout- -> Edit HTML

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

3.Copy below code and paste it just before the </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(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}

4.Now again Scroll down to where you see </body> tag .

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

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

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

Important !!! : Download compressed.js and 5 images as a zip file, from here and host compressed.js and images yourself.

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

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

<ul id="slideshow">

<h3>Enter Title 1 Here</h3>


<p>Enter Description 1 Here.</p>
<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRWePfVYI/AAAAAAAAAZ8/MSmCLCmWA8k/slideshow+1+small.jpg" alt="Bionic" /></a>

<h3>Enter Title 2 Here</h3>


<p>Enter Description 2 Here.</p>
<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRhli6o6I/AAAAAAAAAaM/fmkIOf7MPtE/slideshow+2+small.jpg" alt="MOH" />

<h3>Enter Title 3 Here</h3>


<p>Enter Description 3 Here.</p>
<a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/SxIRonaYyII/AAAAAAAAAac/ls3j_gSduPk/slideshow+3+small.jpg" alt="Fear" /></a>

<h3>Enter Title 4 Here</h3>


<p>Enter Description 4 Here.</p>
<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRxSG7ulI/AAAAAAAAAas/ct3UpnpLKAM/slideshow+4+small.jpg" alt="Farcry" /></a>

<h3>Enter Title 5 Here</h3>


<p>Enter Description 5 Here.</p>
<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxIR8SoimVI/AAAAAAAAAa8/LJ0Ggp_2Wz4/slideshow+5+small.jpg" alt="Farcry 2" />

<h3>Enter Title 6 Here</h3>


<p>Enter Description 6 Here.</p>
<a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxISEGMzIAI/AAAAAAAAAbM/FrFClSn_PIQ/slideshow+6+small.jpg" alt="Crysis" /></a>

<h3>Enter Title 7 Here</h3>


<p>Enter Description 7 Here.</p>
<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxISKamDHFI/AAAAAAAAAbc/ZX9bd600VUg/slideshow+7+small.jpg" alt="Tomb Raider" /></a>

<h3>Enter Title 8 Here</h3>


<p>Enter Description 8 Here.</p>
<a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxISSu6GVHI/AAAAAAAAAbs/xR3wq05rsIc/slideshow+8+small.jpg" alt="Game" /></a>

<h3>Enter Title 9 Here</h3>


<p>Enter Description 9 Here.</p>
<a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxISYRyCfUI/AAAAAAAAAb8/930A4vUML_Q/slideshow+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>





thanks to Lasantha Bandara

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets

Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

2 Responses So Far:


Hello, i recently used this for my blog ( www.themindchannel.blogspot.com) and i have a little question.

There's this gap above the banner and i can't find a way to eliminate it. If you can help, i will appreciate it!

adiv farhan said...

Really nice tip !

Thanks for this useful blog !

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Powered by Blogger