Kod: <style type="text/css">
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
border:5px solid #000;
}
#slider {
width: 500px;
height: 218px;
background: #fff url(http://2.bp.blogspot.com/-zZroU7UOnn4/UWCR0O1RzRI/AAAAAAAAJo0/WH5aOsNRf0Y/s1600/yukleniyor.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%;
}
#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);
}
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(http://4.bp.blogspot.com/-9YohQAuUPjQ/UWCR0PR06xI/AAAAAAAAJow/57tX7Pg0PPk/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 12px;
position: relative;
}
div.navBulletsWrapper div.active {
background-position: 0 -11px;
}
</style>
<script src="http://webseyyahi-project.googlecode.com/files/webseyyahi.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>
<center><img src="http://2.bp.blogspot.com/-vdLtULCaGC4/UPct2mOBx4I/AAAAAAAAHaI/uHgNIyC6Dng/s1600/shadow1.png" width="480px"/></center>
width: 500px : Slayt alanının genişliği
Buradaki 960 değerini değiştirerek slayt alanının çerçevesinin genişliğini belirleyebilirsiniz.
height: 218px : Slayt alanının yüksekliği
Buradaki 380 değerini değiştirerek slayt alanının çerçevesinin yüksekliğini belirleyebilirsiniz.
# : Resime tıklandığında gidilecek adres
# yerine tıklandığında gidilecek bir domain (http://webseyyahi.blogspot.com/) ekleyebilirsiniz
RESİM URL : Resmin url adresi
Blogunuzdaki istediğiniz bir resmin url adresini yapıştırın. (Gözükmesini istediğiniz resmin üstüne gelin sağ tık URL Kopyala)
BAŞLIK : Slayt alanın altında görünen başlık
Slayt alanında görünmesini istediğiniz resmin altında yazan yazı.
width="480px" : manşet alanının altındaki gölge genişliğidir. Manşet alanının genişliğine göre ayarlanmalıdır. Manşet alanından daha kısa olması tavsiye edilir.
top: 250px; left: 190px; : Navigasyon butonlarının konumu
*Blogunuzda göstermek istediğiniz yere Blogger Kullanıcı paneli > Yerleşim > Gadget ekle > HTML/JavaScript ekle yolunu izleyerek ekleyebilirsiniz.
* Slayt alanını manşet bölümü olarak da kullanabilirsiniz.
* <a href="#"><img src="RESİM URL'" alt="BAŞLIK"/></a> nin sayısını artırarak gösterilen resim sayısını artırabilirsiniz.
* Ekleyeceğiniz resim çerçeve ile aynı boyutta olması için resminde aynı boyutta olması gerekir yani çerçeveniz 960 x 380 ise resimlerinizin boyutuda 960 x 380 olmalıdır.
* Reklam içermez
* Free lisanstır istediğiniz gibi düzenleyebilirsiniz.
* Jquery kullanmadığından hızlıdır ve sayfayı yavaşlatmaz.
* Slayt geçis animasyonunu ve hızını
http://webseyyahi-project.googlecode.com/files/webseyyahi.js
dosyanını açık bıraktım istediğiniz değişikliği yapabilirsiniz.
2. SLİDER
Kod: <style type="text/css">
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 960px;
margin: 0 auto;
border:5px solid #000;
}
#slider {
width: 960px;
height: 380px;
background: #fff url(http://1.bp.blogspot.com/-8kJodEB2xXM/UQa2w8YmGhI/AAAAAAAAICs/DaaLYqGSRhU/s1600/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;
}
#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://webseyyahi-project.googlecode.com/files/webseyyahi.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>
width: 960px; : Slayt alanının genişliği
Buradaki 960 değerini değiştirerek slayt alanının çerçevesinin genişliğini belirleyebilirsiniz.
height: 380px; : Slayt alanının yüksekliği
Buradaki 380 değerini değiştirerek slayt alanının çerçevesinin yüksekliğini belirleyebilirsiniz.
# : Resime tıklandığında gidilecek adres
# yerine tıklandığında gidilecek bir domain (http://webseyyahi.blogspot.com/) ekleyebilirsiniz
RESİM URL : Resmin url adresi
Blogunuzdaki istediğiniz bir resmin url adresini yapıştırın. (Gözükmesini istediğiniz resmin üstüne gelin sağ tık URL Kopyala)
BAŞLIK : Slayt alanın altında görünen başlık
Slayt alanında görünmesini istediğiniz resmin altında yazan yazı.
*Blogunuzda göstermek istediğiniz yere Blogger Kullanıcı paneli > Yerleşim > Gadget ekle > HTML/JavaScript ekle yolunu izleyerek ekleyebilirsiniz.
* Slayt alanını manşet bölümü olarak da kullanabilirsiniz.
* <a href="#"><img src="RESİM URL'" alt="BAŞLIK"/></a> nin sayısını artırarak gösterilen resim sayısını artırabilirsiniz.
* Ekleyeceğiniz resim çerçeve ile aynı boyutta olması için resminde aynı boyutta olması gerekir yani çerçeveniz 960px * 380px ise resimlerinizin boyutuda 960px * 380px olmalıdır.
* Reklam içermez
* Free lisanstır istediğiniz gibi düzenleyebilirsiniz.
* Jquery kullanmadığından hızlıdır ve sayfayı yavaşlatmaz.
* Slayt geçis animasyonunu ve hızını
http://webseyyahi-project.googlecode.com/files/webseyyahi.js
dosyanını açık bıraktım istediğiniz değişikliği yapabilirsiniz.
Not : Bu slideri ben yazmadım sadece kodları düzenledim. Kodlar Free lisans ve açıktır. Kodların kaynağını
http://www.menucool.com/ sitesinden bulabilirsiniz. Ayrıca burada değişik slider örnekleride var istediğinizi kullanabilirsiniz.
LİVE DEMO İÇİN TIKLAYIN
BİR TESEKKÜRÜ ÇOK GÖRMEYİN.. 
