Blogger Manşet Slaytı Yapma

Blogger Resimli Manşet Slayt Menüsü ziyaretçilerin dikkatini çekmek için kullanılan en yaygın yöntem. Özellikle haber siteleri tarafından kullanılan slayt manşetleri bir iki düzenleme yaparak bloglarınız da kullanabilirsiniz. Resimleri değiştirip linklerle oynayarak sürekli güncelleyebilir ve istediğiniz konuların tanıtımını yapabilirsiniz. 5 adet resim ekleyebilirsiniz. Resimler sırayla slayt olarak akar ve altına kısa notlar yazabilirsiniz. Resimler link olarak kullanılıyor.

Blogger Ekletileri - Blogger Resimli Manşet Slayt Menüsü Demo Görünüm :

Blogger Dersleri Slayt Başlığı - V

Blogger Ekletileri - Blogger Resimli Manşet Slayt Menüsü Kodları Üzerinde Yapılacak Değişikler :

<a href ile başlayan beş adet kod var , sıralı bir biçimde resimlere aittir. en üsteki ilk resmin diğerleri ikinci , üçüncü olarak devam ediyor.
<a href="http://www.bloggerdersleri.com/"> kodu resme ait linktir durumunuza göre uyarlayın.
Devam eden kod dizininde <img alt="Blogger Dersleri Slayt Başlığı - I" kısmı resmin üzerinde görünecek başlıktır.
En sonda bulunan src="http://g1208.hizliresim.com/10/r/c5d0d.jpg kısmı ise slayta ait olan resim linkidir.
width: 500px;
height: 218px; ve width: 500px boyutları belirler. Size ait boş alanın ölçülerine göre ayarlama yapabilirsiniz.

Size uygun şekilde değişikler yaparak sayfa içerisinde html kod kısmına kopyalayarak yada Gadget Ekle seçeneği ile kullanabilirsiniz.

<style type="text/css">

 /* JavaScript Image Slider By http://www.bloggerdersleri.com/ */

#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() no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(http://g1208.hizliresim.com/10/r/c5db2.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(http://g1208.hizliresim.com/10/r/c5dbx.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>

<br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="http://www.bloggerdersleri.com/"><img alt="Blogger Dersleri Slayt Başlığı - I" src="http://capsverlan.com/pictures/cc09620a72fa107f8f8cc85507845a17.jpg" /></a>

<a href="http://www.bloggerdersleri.com/"><img alt="Blogger Dersleri Slayt Başlığı - II" src="http://capsverlan.com/pictures/afc104f4471269fedb47a43e983b54eb.jpg" /></a>

<a href="http://www.bloggerdersleri.com/"><img alt="Blogger Dersleri Slayt Başlığı - III" src="http://capsverlan.com/pictures/cd1a89688d8548c452441c57bf29066c.jpg" /></a>

<a href="http://www.bloggerdersleri.com/"><img alt="Blogger Dersleri Slayt Başlığı - IV" src="http://capsverlan.com/pictures/6884873302225211c91317f69e3e2d41.jpg" /></a>

<a href="http://www.bloggerdersleri.com/"><img alt="Blogger Dersleri Slayt Başlığı - V" src="http://g1208.hizliresim.com/10/r/c5d0d.jpg" /></a>
                </div>
</div>