Blogger Slider Manşet Eklentisi

Blogger ın standart yapısı olarak yazılar yazdıkça yeni yazı en başta olmak üzere eskiye doğru sıralanır.Bu yüzdendir ki daha çok önem verdiğiniz ve hit getireceğine inandığınız yazılar yeni yazılar geldikçe son sayfalara doğru geçiş yapacaktır.Bunu önlemenin en iyi yolu blogger slider eklentisi ile öne çıkan yazılar kısmını oluşturup onları anasayfaya taşıma olacaktır.

blogger-slider-eklentisi

Bu yazımda en basit yöntemlerle farklı tarzda blogunuza slider nasıl ekleyebilirsiniz ondan bahsedeceğim.Yalnız öncesinde bir kaç şeyden bahsetmek istiyorum.Bildiğiniz gibi blogger kod yapısı olarak Javascript, html ve CSS yapısından oluşur.Slider eklentisi için de en önemli kısım javascript dosyasıdır.Bu yazımı hazırlarken Bxslider servisinin açık olarak sunduğu kodları biraz düzenleyerek sizlere sunacağım.

Aşağıda farklı örneklerini göstereceğim slaytlardan hangisini yüklerseniz yükleyin ilk olarak eklemeniz kodlar var.Bunlar harici siteden çağırdığımız js ve css kodlarıdır.

Bu kodları şablonunuzdaki <head> kodundan hemen sonra ekleyin.

<!-- jQuery library (served from Google) --> 
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>  
<!-- bxSlider Javascript file -->  
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script> 
<!-- bxSlider CSS file --> 
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />

Düzgün bir şekilde eklediğimizden emin olmak için şablonu kaydedin.

Bu adımda ise eklediğimiz resimlerin slayt içerisine tam olarak yerleşmesi ve yazı fontunu büyütmek için küçük bir CSS ekleme işlemi yapacağız :

Aşağıdaki kodları ]]></b:skin> kodundan hemen önce ekleyin :

.bxslider img{
width:100%;
height:300px;
}
.bx-wrapper .bx-caption span { 
        font-size: 1.85em;
}

Temel kodlarımızı ekledik.Şimdi slayt türüne göre değişecek kodlarımızı eklemeye geldi sıra.Birinci adım javascirpt kodunu çağırmak ve ikinci adımda ise html kodlarını (resim ve başlık) eklemek olacak.

1-JS dosyasını çağırmak

js-dosyasi-ekleme

Her slayt için kısmen değişen js kodları mevcut.Bu yüzden bu adıma slaytın türünü değiştirmek için geri dönebilirsiniz.Kodları eklemeniz gereken kısım ise </head> kodundan hemen önce.

2-HTML kodlarını eklemek

Bu kodlar slayt içerisinde yer alacak resim, açıklama ve link ten oluşan yapıdır.Bu kodları Yerleşim>Gadget Ekle>Html Ekle kısmına ekleyeceğiz.

Olayı anlatabilmek için bu şekilde giriş yaptım.Şimdi gelelim slayt kodlarını eklemeye.

Otomatik Tekli Slider

blogger-slider-eklentisi-2

Klasik tekli slider eklentisi ile resimleriniz otomatik olarak sola hareket edecek.Yazı başlığı alt köşede yer alacak ve resim üzerine tıklandığında yazı adresinize gidecek.

--> 1 numaralı alan için eklemeni gereken kod:

<script> 
  $(document).ready(function() { 
        $('.bxslider').bxSlider({ 
              auto: true,  
            captions: true, 
  mode: 'fade', 
        });  
    });   
</script>

--> 2 numaralı alan için eklemeniz gereken kod :

<ul class="bxslider">
    <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>  
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li> 
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>  
</ul>

Otomatik Çoklu Slider

blogger-slider-eklentisi-3

Burada ekleyeceğiniz resimler 4 eşit alana bölünmüş şekilde duracak ve 4 lü bir şekilde hareket sağlanacaktır.

--> 1 numaralı alan için eklemeni gereken kod:

<script> 
$(document).ready(function() {  
        $('.bxslider').bxSlider({
auto: true,>  
  minSlides: 3,
  maxSlides: 4,
  slideWidth: 170, 
  slideMargin: 10  });  
    });  
</script>

--> 2 numaralı alan için eklemeniz gereken kod :

<ul class="bxslider"> 
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>  
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>  
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>  
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li> 
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>  
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>  
  <li><a href='Url adresi><img src="Resim link" title="Resim adı"  /></a></li>
</ul>

Eğer bu slaytın sürekli hareket etmesini istiyorsanız 1 numaralı kısma aşağıdaki kodları eklemeniz yeterli olacaktır :

otomatik-slider

<script> 
$(document).ready(function() {  
    $('.bxslider').bxSlider({
  minSlides: 4,  
  maxSlides: 4,  
  slideWidth: 170, 
  slideMargin: 10,  
  ticker: true,
  speed: 6000
}); 
    }); 
</script>

Son Sözler

Yukarıda sıklıkla kullanılan blogger slider eklentisi için kodlar paylaştım.Umarım temel olarak yapıyı başarılı bir şekilde anlatabilmişimdir.Yazımın başında da dediğim gibi bxslider sitesinde yer alan kodları düzenleyerek bu eklentiyi sizlere sundum.Benzer örnekler sitede yer alıyor.Sizde temel mantıkla birlikte kodları çeşitlendirebilirsiniz.

6 yorum:

Ferhat Bayram1/7/15 23:44
guzel bi paylasim olmus bazi blogcularin isine yarayacak nitelikte
YanıtlaSil
Yanıtlar
Ri Koo9/7/15 07:55
Teşekkürler hacam kullanmayı düşünüyorum. Bide aorum olucak hocam bloguma yeni şblon yukledim ama bazı tükçe harfler gözükmüyor nasıl düzeltebilirim?
YanıtlaSil
Yanıtlar
Ri Koo10/7/15 09:06
Anlamadım hocam yani önceki şablon destekliyordu simdiki desteklemiyor şablon üzerinden birşeyler yapamazmıyım. Yazı fontunu nasıl değiştiricem ki?
YanıtlaSil
Yanıtlar