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.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

6 yorum:

  1. guzel bi paylasim olmus bazi blogcularin isine yarayacak nitelikte

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederim yorumunuz için

      Sil
  2. 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
    1. Türkçe karakterler yazı fontunuzun türkçe desteklememesinden kaynaklanır.Standart fontlar kullanarak düzeltebilirsiniz.Georgia, arial times new roman gibi...

      Sil
  3. 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
    1. Hocam yeni şablonunuzda yeni bir font kullnılmış olabilir.Rica etsem buradan değil de iletişim bölümünden mail atarsanız sevinirim

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.