JavaScript Resimli Manşet Slayt eklentisi

● JavaScript Image Slider For Blogger
● JavaScript Resimli Manşet Slayt eklentisi

Bugün sizlerle daha önce paylastığım Jquery Otomatik resim slayt galerisi ve Jquery slider manşet eklentisi yazılarımdan farklı olarak JavaScript versiyon resimli manşet slayt eklentisini paylaşacağım.
Ziyaretçilerinizi resimlerinizle dikkatini çekmek için kullanabileceğiniz Resimli Manşet Slayt eklentisi JavaScript versiyonu. Haber siteleri tarafından da kullanılan bu slayt manşet eklentisini sizde bloglarınız da kullanabilirsiniz. Resimleri ve linkleri değiştirip sürekli güncelleyebilir ve istediğiniz konuların tanıtımını yapabilirsiniz. Resimler sırayla altında kısa notlarla slayt olarak akar ve Jquery kullanılmadığı için blogu yavaşlatmaz.

Örnek Slayt

Bu slaytı blogunuza eklemek için;
1. Blogger Kumanda Panelinize gidin
2. Yerleşim tıklayın
3. Üst Bilginin altındaki yere Gadget/Widget Ekle
4. HTML / JavaScript seçeneğini seçin.
5. Aşağıdaki kodu kopyalayın ve yapıştırın.

<style type="text/css">
#mcis{display:none;}
#sliderFrame{position:relative;width:532px;border:5px solid #000;margin:0 auto;}
#ribbon{width:111px;height:111px;position:absolute;}
#slider{width:532px;height:300px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQtmxKJQJiGLd5Tg2k67arFYprHxiDN7S3b8C8FQH2MzL5tNR5ze1mrqWm_odjnyuFj-IXBU-rdOu2jcrGO_ohCtITfYVQ5Dhuxg2icgs83BQ5DdUX2QmEHK6gNJgAHx9ktW86dZnz9bM/s1600/loading.gif) no-repeat 50% 50%;position:relative;box-shadow:0 1px 5px #999;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);margin:0 auto;}
#slider img{position:absolute;border:none;display:none;}
#slider a.imgLink{z-index:2;display:none;position:absolute;top:0;left:0;border:0;width:100%;height:100%;margin:0;padding:0;}
div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;left:0;bottom:0;z-index:3;overflow:hidden;font-size:0;padding:0;}
div.mc-caption-bg{background-color:#000;}
div.mc-caption{font:bold 14px/20px Arial;color:#EEE;z-index:4;text-align:center;padding:10px 0;}
div.mc-caption a{color:#FB0;}
div.mc-caption a:hover{color:#DA0;}
div.navBulletsWrapper{top:310px;left:200px;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/AVvXsEitDGLrztBJ5ugFY8BMmLQSG6JCTY-_wsQLB6TCjyNp1CVInqUhA-h6w5HHHpuQsfixugfCIqCE1Hh5YY5v-zQysNthLBLgc9jYEzNTFvyuuP05ap8bIQ2cprRQI0JlD4f1TIyloqixwGE/s22/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;}
</style>
<script src="http://social-media-dosyalari.googlecode.com/files/Meftunapartblog-slayt.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
</div></div>

Kod içinde kırmızı ile belirtdiğim yerleri Resimlerinizin genişliğine-yüksekliğine göre ayarlayabilirsiniz.
<a href="Resme tıklayınca açılacak sayfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>
Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...