Yazı alanına slider ekleme nasıl yapılır?

Bu eklentiyi nerede kullanabilirim diye kafanızda bir soru oluştuysa.. Bir kaç örnekle kullanım alanları hakkında ipuçları verebilirim.

Öykü yazıyorsanız aşağıya doğru uzayıp giden sayfalar yerine bu eklentiyi kullanabilirsiniz.
Ya da son izlediğim filmlerim / kitaplarım şeklinde kullanmakta iyi bir seçim olur.


1. Blogger kumanda panelinde Template edit kısmını açıyoruz. Aşağıdaki kodları kopyalayıp ></b:skin> ya da </style> üzerine yapıştırıyoruz.

/* Yazı Alanı Slider Eklentisi */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}

2. Adım olarak yine temamızda </body> kodunu aratarak hemen üzerine aşağıdaki kodları yapıştırıyoruz.

<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>

Java kodları içindeki maxIndex=4 değerini değiştirerek slayt sayınızı ayarlayabilirsiniz.

Temamızı Kaydediyoruz ve çıkıyoruz.

3. Son olarak yazımıza entegre edebilmek için, yeni yayın penceresini açarak aşağıdaki kodları kopyalayıp HTML kısmına yapıştırıyoruz.

<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- İÇERİK 1 -->
      </div>
      <div class="slidecontent">
        <-- İÇERİK 2 -->
      </div>
      <div class="slidecontent">
        <-- İÇERİK 3 -->
      </div>
      <div class="slidecontent">
        <-- İÇERİK 4 -->
      </div>
      <div class="slidecontent">
        <-- İÇERİK 5 -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div>

İçerik yazan kısımlara resim ve yazımızı ekleyerek yazımızı yayınlıyoruz.

BLOG YAZILARINIZI SÜTUNLARA BÖLME ilginizi çekebilir.

Örnek gösterim :