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–>
- 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!!
You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.){kind=link}
){kind=link}