Add Advance Slider Widget For Blogger

Share This Post

This is another fantastic blogger widgets I would like to share with you, it cost me a sleepless night to be able to set this up. With just a few steps we can setup this amazing widget on your blog.  

View Demo

HOW TO INSTALL THE WIDGET

  • Login to your Blogger dashboard
  • Click on template, edit html, proceed.
  • Find the following ( Ctr +f to find) ]]></b:skin>and paste the code below just above]]></b:skin>

<!– slider design starts from ElitesWorldTechnology–>#slidearea{height:242px;overflow:hidden;margin:0px 20px 0 20px;position:relative;width:960px;background:#F2F2F2;border:1px solid #E9E9E9} #gallerycover{overflow:hidden;margin:15px 30px 0 30px;width:900px;} .mygallery{overflow:hidden;position:relative} .mytext img{float:left} .mytext{position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4} .inpost{position:absolute;top:0;left:0;width:250px;background:url(images/trans.png)} .mytext h2{padding:5px 0;color:#3B5998;width:170px;font-size:14px;font-weight:bold} .mytext h2 a:link,.mytext h2 a:visited{color:#3B5998} .mytext p{padding:0 0;color:#555;font-size:12px;line-height:20px;width:170px;text-shadow:1px 1px 0 #f6f6f6} .prevb{float:left;width:20px;height:35px;z-index:200;background:url(http://2.bp.blogspot.com/-3S-ip5IFf3g/Tkbe7yTjaeI/AAAAAAAAAMo/_Y7vdPbJRWA/s1600/previous.gif) no-repeat;position:absolute;left:5px;bottom:110px} .nextb{float:right;width:20px;height:35px;z-index:200;background:url(http://3.bp.blogspot.com/-56lfNNoaXq4/Tkbe6986c-I/AAAAAAAAAMk/FhPtd1y1k24/s1600/nextt.gif) no-repeat;position:absolute;right:5px;bottom:110px;display:block} img.sidim{width:170px;height:100px;border: 2px solid #D9D6D6} <!–slider design ends from ElitesWorldTechnology–>

  • Now just above </haed> post the following code above it

<!–slider script starts–> <!–slider script ends–>

  • We are almost there. Find <div id=’content-wrapper’> and paste the following code above it

<!–slider content starts–> </p> <div style=’height:242px;overflow:hidden;margin:0px 20px 0 20px;position:relative;width:950px;background:#F2F2F2;border:1px solid #E9E9E9;right:20px’> <div> <div> <ul> <li> <div> <a href=”http://your-post-link1/”> <img class=”sidim” src=”http://your-image-link1/” /> </a> </p> <div class=’clear’></div> <h2><a href=”http://your-post-link1/”>Post Title</a></h2> <p>Post content summary</p> </div> </li> <li> <div> <a href=”http://your-post-link2/”> <img class=”sidim” src=”http://your-image-link2/” /> </a> </p> <div class=’clear’></div> <h2><a href=”http://your-post-link2/”>Post Title</a></h2> <p>Post content summary</p> </div> </li> <li> <div> <a href=”http://your-post-link3/”> <img class=”sidim” src=”http://your-image-link3/” /> </a> </p> <div class=’clear’></div> <h2><a href=”http://your-post-link3/”>Post Title</a></h2> <p>Post content summary</p> </div> </li> <li> <div> <a href=”http://your-post-link4/”> <img class=”sidim” src=”http://your-image-link4/” /> </a> </p> <div class=’clear’></div> <h2><a href=”http://your-post-link4/”>Post Title</a></h2> <p>Post content summary</p> </div> </li> <li> <div> <a href=”http://your-post-link5/”> <img class=”sidim” src=”http://your-image-link5/” /> </a> </p> <div class=’clear’></div> <h2><a href=”http://your-post-link5/”>Post Title</a></h2> <p>Post content summary</p> </div> </li> </ul> <div class=’clear’></div> </p></div> </div> <p><a class=”prevb” href=”https://ewtnet.com/#”></a> <a class=”nextb” href=”https://ewtnet.com/#”></a> </div> <p><!–slider content from ElitesWorldTechnology–>

  • Don’t save the template just yet, replace the following:

http://your-post-link1,2,3,4,5 with your links to your post.
http://your-image-link1,2,3,4,5 with your post image link.
Post content summary and post title with your post title and summary.

  • Now save your template and view your amazing blog!!

Stay Ahead: Join the EwtNet Insider Email Club!

Stay informed and up-to-date with EwtNet's email subscription. Join our exclusive community and receive curated news, updates, and insights tailored to your interests.

Related Posts

How To Add Facebook Recommendations Bar To Blogger

Finally, Bloggers can keep readers to their site by...

How To Add the Multi Column Footer Widget To Blogger

This widget adds a multi column widget section to...

How To Install IntenseDebate Comment System In Blogger

  Last week I wrote an article on Why...

How to Add A Gadgets/Widgets in Blogger

Widgets, also known as gadgets, are small tools or...

How to Add Attribution Links to Texts Copied from your Website/Blog

The world is changing rapidly, don't let your pains-taking...

How To Use The Old Blogger Interface Without Reverting to the Old Blogger Interface

How To Use The Old Blogger Interface Without Reverting...
- Advertisement -

Discover more from EwtNet

Subscribe now to keep reading and get access to the full archive.

Continue reading