Slayt Manşet [ JavaScript Versiyonu ]

Çok kişi istediği için daha önce kullandığım Featutured Content Slider isimli slayt manşet eklentisini paylaşmıştım.Paylaştığım o eklentide Jquery kullanıldığı için blogu yavaşlatıyordu.Kullananlar da bundan şikayetçiydi.

 

Daha hızlı  ve daha patik bir slayt çin çözümler ararken asdece JavaScript kullanılarak oluşturulmuş bu pluginle karşılaştım.Özelliklerini ve kağnağını görmek için buraya tıklayabilirsiniz.

 

 

Bu slaytı blogunuza eklemek için Blogger kumanda panelinde tasarım ayarlarından sayfa öğeleri ( yerleşim ) bölümünü açın ve Üst Bilginin altındaki gadget ekleme yerine HTL/JavaScript gadget olarak aşağıdaki kodları ekleyin.

 

<style type="text/css">

#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/AVvXsEhYudQ_Z5T-XjBO6p1grFeZ_-pPcHsJDAEOvs6qei7gYsGB-NaMOc4sAuY81vdGL_R4xTe6Iirmx0CcjYMM8Jn10PdguARO51E0MHF4rbM34MCQNoj6wE1FsGSJbAzrwo-c8E8Ta0XDysg/s109/ribbon-ozellikli.png) no-repeat;
z-index: 7;
}

#slider {
width: 500px;
height: 218px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNEvUuGViD4uTzPnwhGNTscY_CcIaGWTnpX21iIrq4sTMe9Lzt2-hT3UK6kigC3vxPJEL6cWBMeoulLdx2Soj0Y9GrPECF4NsZhB1QZganflngSSVbz7Vvq2iLucOZrNl6EEGbgdXGax0/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/AVvXsEg_r648I0CXPbupb3q777uqnc78J47lUVeAS2apzw_Ky4I6J927yVIlR_Anx6xmshEo5aykPj6SaMBkuFgXfi6k11ckm3CAWIJYoDGIsLX3aGoX3ZOOhYJx_qQKaVJa2zbY2trYfBfJTgs/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;
}

#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="https://dl.dropbox.com/u/60346665/bloghocam-slayt.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html"><img src="http://lh3.ggpht.com/-YPJmPpZ96ww/T8YL135hG7I/AAAAAAAADGE/ggxFbMhZPKg/s1600/bloghocama-misafir-olmanin-faydalari.jpg'" alt="blog hocam'a Misafir Olmanın Faydaları"/></a>

<a href="http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html"><img src="https://lh4.googleusercontent.com/-ls1UOTN4EUA/TueqzcdHexI/AAAAAAAABt0/31fNpWdT41M/s576/misafir-blogculuk.png'" alt="misafir blogculuk"/></a>

<a href="http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html"><img src="https://lh4.googleusercontent.com/-iFKdyxyIKs4/TgXFh7b3tDI/AAAAAAAAAt8/NEUf0jQEgJQ/basarili-blogcularin-aliskanliklari.jpg'" alt="başarılı blogcuların özellikleri"/></a>

<a href="http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html"><img src="https://lh5.googleusercontent.com/-HDEPfJhX8iE/TjfiWyEmDdI/AAAAAAAAA0E/TEc_YhNkMq8/bir-blogcunun-sahip-olmasi-gereken-5-beceri.jpg'" alt="bir blogcunun sahip olması gereken 5 temel beceri"/></a>

                </div></div>

 

Slaytta gösterilecek öğelerin kodlarını şu şekilde düzenleyeceksiniz:

 

<a href="Resme tıklayınca açılacak asyfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>