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.
- 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–>
){kind=link}
){kind=link}
- 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!!