Blogger Otomatik Slider Eklentisi - 2 - KODBLOGCUM

Merhaba arkadaşlar,

bu yayınımda sizlere blogunuzda kullanabileceğiniz otomatik slider eklentisinden bahsedeceğim.Güzel ve sade duran bu eklenti sitenizde güzel bir hava oluşturacaktır.Daha bu yayınımda bir otomatik slider eklentisinden bahsetmiştim.Bu da farklı bir tasarımla yapılmış otomatik slider eklentisidir.Nasıl yapacağımıza geçeyim.

Adım 1: Blogger Admin Panel'inden Şablon > Html'yi Düzenle diyoruz ve Ctrl + F tuşlarına basarak ]]><b:skin> kodunu aratıp hemen üstüne aşağıdaki kodu ekliyoruz.

/*! SlidesJS for Blogger Kodblogcum <http://kodblogcum.blogspot.com> */

/* Main */
.slidesJS-frame {
  width:739px;
  height:341px;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjet6vrjafteME1by9r-rFGGCw7hp0FghpIF19aft9aT2ekdoYZiewa0k9eA41lL1AwBrbQBPAvQf956zrDiamEAm_ZGmYSDAktl2mT8ph-LOX43SpZM4M96HnaWaNFwE5-B7GRe3luHtA/s1600/slidesJS-frame.png') no-repeat 50% 50%;
  margin:0 auto;
}
.slidesJS {
  background-color:#F0F0F0;
  position:relative;
  top:18px;
  left:84px;
}
.slidesJS-container {
  position:relative;
  overflow:hidden;
  display:none;
}

/* Next & Prev */
.slidesJS-next,
.slidesJS-prev {
  position:absolute;
  top:50%;
  left:-39px;
  width:24px;
  height:43px;
  margin-top:-21px;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjalIvn41o6NgMdA0M81zri0N3lhiJtGkldFrBORsFE4AnvuRSYzyVZd4A4-qWxwaRfjfzUlxV2tUVgn90x5paDMSxqjXjKm5MYmfPKwVzwS3KnBR9dNb7I-DTSqMIfh52sbQtgNXxprfE/s1600/slidesJS-arrow-prev.png') no-repeat 50% 50%;
  display:block;
  overflow:hidden;
  text-indent:-9999px;
}
.slidesJS-next {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc53uzvg_1XZ2dMMqNuflwcmXvQUOa3PjEF4ZKXvBKxY4i0gRLT86SARG2bEIoZ1z8IOkMv1ZEPBl8tOtF3Sd8ZERdFs5wKQ8pPjSSsbPYU0bFHWYAl5Zlpe-NfqIcYTJpxIzkpvf4ifQ/s1600/slidesJS-arrow-next.png');
  right:-39px;
  left:auto;
}

/* Pagination */
.slidesJS-pagination {
  list-style:none;
  margin:26px auto 0;
  padding:0;
  width:auto;
  text-align:center;
}
.slidesJS-pagination li {
  display:inline-block;
  *display:inline;
  margin:0 1px;
  padding:0;
  list-style:none;
}
.slidesJS-pagination a {
  display:block;
  width:12px;
  height:12px;
  background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQtJLm40pg0b5w4xVQ0lnvNYJAJZTeZ7c2OlWSC1ConOhEB2Vc-P9wPxJJAvsgk6GK_ys_ybdLiZAyag7LtdqMS2Lii1jCvkvld5EEDU2ITSFelBHXpFUx3GM6JKgYrFqP_pwEICuJmL0/s1600/slidesJS-pagination.png') 50% 0;
  text-indent:-999px;
  overflow:hidden;
}
.slidesJS-pagination li.current a {background-position:0 -12px}

/* Caption */
.slidesJS-caption {
  display:none;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:500;
  padding:5px 20px 10px;
  background-color:black;
  background-color:rgba(0,0,0,.5);
  font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif;
  color:white;
  border-top:1px solid black;
  text-shadow:none;
}
.slidesJS-title a {
  color:white;
  text-decoration:none;
}
.slidesJS-title a:focus,
.slidesJS-title a:hover {text-decoration:underline}
.slidesJS-meta:before {content:" - "}
.slidesJS-meta-comment {display:none}

/* Ribbon */
.slidesJS-ribbon {
  display:block;
  /* display:none; <= uncomment this declaration to hide the ribbon */
  width:112px;
  height:112px;
  position:absolute;
  top:-19px;
  left:-19px;
  z-index:500;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Wc_KLpYGTcMl0ff_sm9l67q0nCzrCrUixmJlZg6jdL28LO0ueGvene0S_etzoKTpmtnZVgjN1hALgoszIAuNZb72-Huy5xSJC3tckASsiRT2dZqK8YrQ4olFhPxQ0dkS5-gpkdFj1yw/s1600/slidesJS-ribbon.png') no-repeat 0 0;
}

Adım 2: Blogger Admin Panel'inden Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapıştıyoruz.İstersek Gadget olarak değilde blog kodlarından da ekleyebiliyoruz.
Not:aşağıda url kısmında yazan http://kodblogcum.blogspot.com yeri kendimize göre ayarlıyoruz.

<div class="slidesJS-frame" id="slidesJS-frame">
    <div class="slidesJS" id="slidesJS">
</div>
</div>
<div style="clear:both;">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var slidesJS_config = {
    url: 'http://kodblogcum.blogspot.com',
    numPost: 7,
    labelName: null,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
    newTabLink: false,
    containerId: 'slidesJS',
    slider: {
        width: 570,
        height: 270,
        preload: true,
        preloadImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZ5Ynj4Z0y93Dwxae68Kx87ZrUuqMUdham_7ymbwhUU_9FICteHpIqs5JqjGA5iDhbcwa2iXgsqEghaGfABGeFqp84y8xym5lY9kBsfaYaWj0C6Eu5XsT4eSkqfII0WWjOkDB362aAGg/s1600/slidesJS-loading.gif",
        generateNextPrev: true,
        nextText: "İleri",
        prevText: "Geri",
        pagination: true,
        generatePagination: true,
        prependPagination: false,
        fadeSpeed: 350,
        fadeEasing: "",
        slideSpeed: 350,
        slideEasing: "",
        start: 1,
        effect: "slide",
        crossfade: false,
        randomize: false,
        play: 5000,
        pause: 0,
        hoverPause: true,
        bigTarget: false,
        animationStart: function(current) {
            $('.slidesJS-caption', '.' + this.container).slideUp(100);
        },
        animationComplete: function(current) {
            $('.slidesJS-caption', '.' + this.container).slideDown(200);
        },
        slidesLoaded: function() {
            $('.slidesJS-caption', '.' + this.container).slideDown(200);
        }
    }
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-slidesjs.js"></script>