Blogger İçin Slider Yapma

Full Width Slider yani tam genişlikte slider eklemek isteyenler için oldukça kolay bir yolla karşınızdayız. Aşağıda örnek bir resim görebilirsiniz.

Bu slider’ın özelliği tamamen manuel olması. İçerik, başlık, sayfa linki verme ve resimleri siz ekleyeceksiniz ve değiştirmediğiniz sürece aynı şekilde kalacak. Eğer denemek isterseniz aşağıda yer alan adımları sırasıyla yapmanız gerekmekte ancak bazı hususlarda sizi uyaralım. Öncelikle kullandığınız blogger teması özel bir tema ise kodlarda çakışma olabilir, slider doğru çalışmayabilir. İkinci bir durum ise eğer sitenizde reklam varsa, bu kodun olduğu “alanda” yer alırsa, kod doğru çalışmayabilir.

Şimdi gelelim deneme kısmına, denemeside, kaldırması da kolay. Çünkü sitenizin ana kodlarına girmeden yapacağız.

İlk önce Blogger yönetici paneline girip yerleşim sekmesine tıklayın. Açılan sayfada uygun gördüğünüz herhangi bir yerde yer alan gadget ekle kısmına tıklayarak HTML ekle diyin. Daha sonra aşağıda yer alan kodu aynen yapıştırıp, gerekli olan yerleri düzenleyin. Artık size ait bir slider’ınız var.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<link href=”https://fonts.googleapis.com/css?family=Oswald” rel=”stylesheet”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” />
<link rel=”stylesheet” href=”http://files.allbloggertricks.com/fullWidthSlider.css”>
<div class=”SliderOuterWrap”> <span id=’prev’><i class=”fa fa-arrow-circle-left”></i></span> <div class=”slidesWrap”> <div class=”slide”> <div class=”abt_post_title”> <h3><i class=”fa fa-info-circle” aria-hidden=”true”></i> <a href=”Sayfanızın Linki buraya“>     <!–Başlık ismi buraya yazılacak–> </a> </h3> </div>
<img src=”1.resim linki buraya alt=””>
</div> <div class=”slide”> <div class=”abt_post_title”> <h3><i class=”fa fa-info-circle” aria-hidden=”true”></i> <a href=”sayfanızın linki buraya“>     <!–2.Başlık ismi buraya–> </a> </h3> </div> <img src=”2,resim linki buraya” alt=””></div> <div class=”slide”>
<div class=”abt_post_title”> <h3><i class=”fa fa-info-circle” aria-hidden=”true”></i> <a href=”sayfanızın linki buraya“>   <!–3,başlık ismi buraya–> </a> </h3> </div>
<img src=”3.resim linki buraya” alt=””>
</div> <div class=”slide”>
<div class=”abt_post_title”> <h3><i class=”fa fa-info-circle” aria-hidden=”true”></i> <a href=”sayfanızın linki buraya“>   <!–4.başlık buraya–> </a> </h3> </div>
<img src=”4.resim url’si buraya” alt=””>

  </div> </div> <span id=’next’><i class=”fa fa-arrow-circle-right”></i></span></div>    <script>  var speed = “slow“;var autoslide = true;var autoSlideDuration = 5000; // 5 Seconds
</script><script src=”http://files.allbloggertricks.com/FullWidthSlider.js”></script>