JavaScript Image Slider For Blogger

<style type="text/css"> /* JavaScript Image Slider By http://www.foulscode.blogspot.gr/ */ #mcis { display: none;} #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000;} #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxQZJHjVnEulGoE1XicSp6cU_F-axanFkVxUXbznA2I2DaHIi8qyIkiR7ql3w8XL57kcnnxDAE1-qE-UMW1NwZCO2CNqU-eIlZsLHj_Y5kvljmHznPRRiqS0DkRDXnm-xGVKyqaPHOMm8/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7;} #slider { width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOU_82ZenkBckYT1415-v9wpeSPn28sJoGY5-4CchwPzxtpU_70R3DwI9ChmMorNhWbxcfkA-VksTJYAVDum7Lom-aOK0WAbtby3ZpMcFGAmarud00HQWIZEpg66K82PakmnUKQJMGA4s/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999;} #slider img { position: absolute; border: none; display: none;} #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%;} div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0;} div.mc-caption-bg { background-color: black;} div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center;} div.mc-caption a { color: #FB0;} div.mc-caption a:hover { color: #DA0;} div.navBulletsWrapper { top: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer;} div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3GIkW-hHifo9nwKHtc3wQWOFW-JgmyY0tYQ4W0TH9M2vigDRu7cQT4wOTbCnHlODGTxnCQbb2S2gqG_kaSMui9MLeFDTHfONnO6Y3CzKwEtQIvb4-ZngEkmSApNOcSQZX5r1MGE1TcI/s1600/helperblogger.com-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative;} div.navBulletsWrapper div.active { background-position: 0 -11px;} #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);} </style> <script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider"> <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt="Image Slider By foulscode.blogspot.gr"/></a> <a href=" <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt=""/></a>

<a href=" <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt="The slide is a linking image"/></a> <a href=" <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt="Pure Javascript. No jQuery. No flash."/></a> <a href=" <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt="#htmlcaption"/></a> </div></div> </div></div>