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 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 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 Use The Old Blogger Interface Without Reverting to the Old Blogger Interface

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

Create a contact Form for Websites, Worpress, Blogger With File Upload Option

Create a simple contact form with no company Ads...
- Advertisement -

Discover more from EwtNet

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

Continue reading