Hoş Geldin, Ziyaretçi!

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Blogger Slider Ekleme

  • Konbuyu başlatan Thous
  • Başlangıç tarihi
Thous

Thous

Yönetici
Yönetici
Katılım
28 Şub 2022
Mesajlar
366
Konum
Samsun
Web
tilki.net
Kredi
3,614
Points
532
Ticaret: 1 / 0 / 0
Blogger slider, bir blog yazısındaki ya da bloğunuzdaki resimleri ziyaretçilere sergilemek için güzel bir yoldur. Bu yazımda blogger slider ekleme yöntemini sizlere göstermeye çalışacağım.

Slider resim kaydırıcı, resimleri sergilemenin harika bir yoludur. Bloğunuza hoş bir görüntü katmasının yanında tıklama oranını da artıracaktır. Aynı zamanda Blogger slider ekleme sayesinde, tüm görseller aynı anda yüklenmediği için blog sayfanızın açılma süreside kısalmış olacaktır.

Blogger slider ekleme

Adım Adım Blogger Slider Ekleme

Blogger Slider, jQuery eklentisine bağlı olarak çalışır. Bu yüzden önce blog temanızın kodlarını kontrol etmeniz gerekiyor. Bu Slider’i sadece jQuery eklentisi olan temalarda kullanabilirsiniz. Tema kodları sayfasındayken CTRL+F tuşlarına basıp açılan pencereye jQuery.min.js yazarak aratın. Eğer sonuç bulunamazsa önce jQuery eklemeniz gerekiyor. Bunun için aşağıdaki adımları takip edin. Aşağıdaki işlemleri yapmadan önce temanızı yedekleyin.

  • Aşağıdaki kodu temanıza </head> bölümünden hemen önce ekleyin.
Kod:
script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

  • Yukarıdaki kodu ekledikten sonra artık Blogger slider ekleme işlemimizi yapabiliriz.
    Aşağıdaki kodu temanıza </head> bölümünden hemen önce ekleyin.

Kod:
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />

  • Sonra blogger tema düzenleyicinizde ]]></b:skin> kodunu bulun ve bu koddan hemen önce aşağıdaki kodu ekleyin. CTRL+F ile arama yapabilirsiniz.

Kod:
.bxslider img{
width:100%;
height:400px;
}
.bx-wrapper img {
display: inline !important;
}

Yukarıdaki kodda değişiklikler yaparak yüksekliği ve genişliği değiştirebilirsiniz.

  • Son olarak aşağıdaki kodları </head> yazan kısmın hemen öncesine ekleyin.
Kod:
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
pause: 50000,
// in millisecond
autoHover: true, // pause on hover
autoControls: true,
captions: false
});
});
</script>
  • auto: kaydırıcının sayfa yüklendiğinde otomatik olarak kayacağı anlamına gelir.
  • autoControls:slaytta ileri geri gezinmeyi etkinleştirme anlamına gelir. True'yu false olarak değiştirerek devre dışı bırakabilirsiniz.
  • Pause:Resimlerin geçişi arasındaki milisaniye cinsinden süreyi ifade eder.
  • autoHover:Fareyle resimlerinüzerine gelindiğinde duraklamasını sağlar.
Bu yazımda sizler için Blogger Slider Ekleme işleminin nasıl yapılacağını anlatmaya çalıştım. Umarım işinize yarayan bir içerik olmuştur, iyi forumlar ♥