Install Widget Slide Image or Slide Ads With Javascript - This tutorial appropriate for you who attended several of affiliate online stores. You will get trouble enough when it had to put up more than 1 piece of banner or widget. It might your blog cluttered with banner ads. For that then, I look for ways to put some banners or affiliate advertising widgets that do not meet the blog. To create a widget like that, I finally found the image slider with navigation and then I modified it so that it looks like Amazon widget animated, this is valid HTML5 widget.Who wants to try it, please use the code below. Copy the CSS and Keep on top of the code </style> or ]]></b:skin>.
.che-slideshow{overflow:hidden;position:relative;margin:0 auto;width:300px;height:250px!important}
.che-slideshow-slide,.che-slideshow-slide img{width:100%;height:100%}
.che-slideshow-slide{top:0;position:absolute}
.che-slideshow-slide.inactive{display:none}
.che-slideshow-slide.position-left{top:0;left:-100%}
.che-slideshow-slide.position-right{top:0;right:-100%;position:absolute}
.slideshow-control{height:25px;cursor:pointer;position:absolute;bottom:0;width:25%;background:rgba(255,255,255,.6);z-index:1;color:#000}
.slideshow-control.slideshow-left-control{left:0}
.slideshow-control.slideshow-right-control{right:0}
.slideshow-control:hover .slideshow-arrow{opacity:1}
.slideshow-control .slideshow-left-arrow{left:50px;height:25px;margin-top:0;opacity:.6;position:absolute;top:5px}
.slideshow-control .slideshow-right-arrow{right:50px;height:25px;margin-top:0;opacity:.6;position:absolute;top:5px}
.slideshow-indicator-container{left:50%;list-style:none;margin-left:-30%;padding-left:0;position:absolute;text-align:center;bottom:-10px;width:60%;z-index:15}
.slideshow-indicator-container .slideshow-indicator{background-color:rgba(255,255,255,1);border-radius:5px;display:inline-block;height:8px;width:8px;padding:0!important;line-height:1em}
.slideshow-indicator-container .slideshow-indicator.inactive-indicator{background-color:rgba(255,255,255,.5)}.slideshow-control to set the background and color of buttons next and prev .
.slideshow-indicator-container .slideshow-indicator to regulate navigation ( point ) and mark the active banners .
.slideshow-indicator-container .slideshow-indicator.inactive-indicator to regulate navigation ( point) to mark the banner inactive.
The next step you can put the code below on HTML/Javascript box. Save the gadget HTML/JavaScript in sidebar.
<div class="che-slideshow">
<ol class="slideshow-indicator-container">
<li class="slideshow-indicator">
</li>
<li class="slideshow-indicator inactive-indicator" >
</li>
<li class="slideshow-indicator inactive-indicator" >
</li>
<li class="slideshow-indicator inactive-indicator" >
</li>
<li class="slideshow-indicator inactive-indicator" >
</li>
<li class="slideshow-indicator inactive-indicator" >
</li>
</ol>
<div class="slideshow-left-control slideshow-control">
<i class="fa fa-chevron-left slideshow-left-arrow slideshow-arrow"></i>
</div>
<div class="slideshow-right-control slideshow-control">
<i class="fa fa-chevron-right slideshow-right-arrow slideshow-arrow"></i>
</div>
<div class="che-slideshow-slide">
<a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTLT4Vlz28s40t4Tsd0xod_SIWuWxLHwuGschXxSH-njEsuRvqNBX8k1fr31_LgfSbClPPjLWKYeqWqXM30x7U3zgAbpgnvGt3g1O1wFOlvXR93DNWf9EpCmSZ9jvN_DtLJyuw7iIrQihn/s1600/banner_1.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
</div>
<div class="che-slideshow-slide inactive">
<a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3zf3F0wD6-IRrrY1CkjoWF9WLzgDx3CA6gLiPINJYb3UzWMGirT8Bp7XgOYMC5Gzk_-2uuhTnct6uvyzWy80mPjwGOHijtYBe5BkV-mvCX4H0DnjhiwF2aVUZtN7LyyXab-OAdtnZCbUx/s1600/banner_1a.jpg" alt="camera" title="camera" width="300" height="250" /></a>
</div>
<div class="che-slideshow-slide inactive">
<a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTfpZTbcHSheWxQY5Ra6LmxuAYR6StKVhIgFNpc3dcvnhCzBvSDlevvAoGWuPCXJ5bdG19J9MJ09s4vovcLxeT9VMP7Rs4OBA8WTNuHOx0GI7062NKOlKacx9Lym8ctKcDe6fdw36sDEr/s1600/banner_2.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
</div>
<div class="che-slideshow-slide inactive">
<a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGaJQVy8zii5-xvE56UnTnz8uhfgp3PADlY701JTZ_DjbWpeTFmYXfu_f02wEdH74CvLKt1ZqbdRmBnzc7z1OdMbcFd0-OFcK2Q3TC9YIL2M9d51IOfXCZeyDQw_GZc85qmEyfTciVono/s1600/banner_2a.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
</div>
<div class="che-slideshow-slide inactive">
<a href="#" rel="nofollow" target="_blank" title="handphone-tablet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMq0rMg8HNwt5tPBMB_QKkdiT2oP9JCGChRwfTK80oVtXXBdDkigCGikiH4JkwAHdYnNslkPWl68CeNujzk6rTgTcaotwXbZrC7alA_7Lv0ZwLrLz13C0OYh4WclxP5H-l3PQ9RboERjiv/s1600/banner_3.jpg" alt="handphone-tablet" title="handphone-tablet" width="300" height="250" /></a>
</div>
<div class="che-slideshow-slide inactive">
I am marking code please replace with your ad banner code , can image with a link or iframe, can be increased or decreased in number according to the number of banner you want to install.
And to sum <li class="slideshow-indicator inactive-indicator" ></li> please adjust the number of banners that you post.
The last step is you should put Javascript below, then save this javascript code above the </body>. However, because this widget uses Font Awesome icon, then make sure you have installed the CSS Font Awesome on your blog.
<script type="text/javascript">
//<![CDATA[
var CHESLIDESHOW=function(){function e(e){return c?!1:(c=!0,d=e,t(e),v[a].classList.add("inactive-indicator"),v[newSlideIndex].classList.remove("inactive-indicator"),s.style.left="prev"===d?"-100%":"100%",l.style.left="0%",s.classList.remove("inactive"),n(s),void n(l))}function t(){"prev"===d?newSlideIndex=void 0===r[a-1]?o-1:a-1:newSlideIndex=void 0===r[a+1]?0:a+1,l=r[a],s=r[newSlideIndex]}function n(e){function t(){l.classList.add("inactive"),s.style.left="0%",clearInterval(i),a=newSlideIndex,c=!1}var n=0,i=setInterval(function(){e.style.left="prev"===d?parseInt(e.style.left)+2+"%":parseInt(e.style.left)-2+"%",n++,n>=50&&t()},7)}function i(){var e=document.getElementsByClassName("che-slideshow")[0];e.style.height=getComputedStyle(r[a]).height}var l,s,d,o=6,a=0,c=!1,r=document.getElementsByClassName("che-slideshow-slide"),v=document.getElementsByClassName("slideshow-indicator");return window.onload=i,window.onresize=i,{nextSlide:function(){e("next")},prevSlide:function(){e("prev")}}}();!function(){var e=document.getElementsByClassName("slideshow-left-control")[0],t=document.getElementsByClassName("slideshow-right-control")[0];e.addEventListener("click",CHESLIDESHOW.prevSlide),t.addEventListener("click",CHESLIDESHOW.nextSlide)}();
//]]>
</script>Install Widget Slide Image or Slide Ads With Javascript was successfully appear on your blog. Please share this article to your friends.
Advertisement
EmoticonEmoticon