Blogger Tekli Slayt Eklentisi

Blog Ana sayfanızda yayınlanmış yazılarınızın, Makale resmi, Başlık linki, isteğe bağlı yazı açıklaması ve Sayfa navigasyon bilgisinden ol...

...

Blog Ana sayfanızda yayınlanmış yazılarınızın, Makale resmi, Başlık linki, isteğe bağlı yazı açıklaması ve Sayfa navigasyon bilgisinden oluşan Slayt eklentisi. Önceki makale yazımıza bağlantılı olarak, “Blogger Başlık Resmi Altına Dörtlü Resimli Slayt Eklentisi” tasarımı değiştirilen Slayt eklentimizi, konumlandırdığımız yer blog başlık resminizin alt kısmıdır. Aradaki fark ise, Slayt’ın tek bir pencere içinde çalışan, bir resim, bir makale başlık linki, arzu edilirse yazıdan kısa bir açıklama ve sayfalama navigasyonu eklenebilmesidir. Çoklu ve tekli Slayt eklentilerinin nasıl çalıştığını incelemek isterseniz, Çoklu Slayt için buradan, Tekli Slayt için buradan giriş yaparak blog ana sayfasında incelemenizi yapabilirsiniz.

Kodlar içinde yapabileceğiniz ayarlar nelerdir?

1. Makalenizde yer alan resminizin Genişlik x Yüksekliğini, makale gövdesi ebatlarına göre düzenleyebileceksiniz. Makale Resminizi yazı genişliğinde düzenleyebilir, dilerseniz daha küçük bir ebat da kullanabilirsiniz.

2. Makale başlık isim karakter sayısını artırabilirsiniz.

3. Makale açıklaması ekleyebilir, açıklama karakter sayısını düzenleyebilir hatta hiç açıklama eklemeyebilirsiniz.

4. Ana sayfanızda yayın sayınızı belirleyebileceğiniz bir Sayfa navigasyon bilgisi ekleyebilir veya kaldırabilirsiniz.

5. Değişikliği seviyorum farklılığı yaşamayı düşünüyorum diyorsanız istediğiniz etiketinizi zaman zaman değiştirerek okuyucularınıza her hafta farklı slayt sunumları yaşatabilirsiniz. Tek yapmanız gereken slayt içindeki kod kısmına etiket bilgisini girmektir.

6. Eklentinin yapılandırması çok kolay olup, blog Url linkinizi girmeniz yeterli olacaktır. İstediğiniz zaman da makale etiketini girerek slayt görüntülerini değiştirebileceksin. Eklenti hakkında kısa bir açıklama sonrasında kurulum aşamalarına geçebiliriz.

Eklenti blog yazılarınızı nasıl tanıyor :

Eklenti kodları içinde, Jquery kütüphanesinin kodları mevcuttur. Bu nedenle Feedburner linkinizi eklemenize gerek olmadığından etiketinize bağlanmış tüm yazılarınız bu kotlama sayesinde görülmektedir.

Blog yazılarımızda neden etiket kullanıyoruz?

Blogger, blogunuzda yazdığınız yazılarınızı farklı isimler ile gruplamak isteyebilirsiniz. Yazılarınızı gruplara ayırmak, onları istediğinizde bulabilme ve önerebilmeniz için yazı editörünün sağ sütununda bulunan etiketler bölümünü kullanırız. Her bir farklı yazınıza farklı kelimeler atayarak etiketlere Filtre uygulamış oluruz. Blogunuz da bulunan Arama penceresi de bu mantıkla çalışmaktadır.

Seo ipuçları :

Blog yazılarınıza çok fazla etiket eklemeyin. Yazılarınızı bulabileceğiniz bir düzen ve sistem içinde etiket eklemeye özen gösterin. Blogunuzu etiket çöplüğü durumuna getirmeyin.

Google arama sonuçlarında hiçbir Blogger, blog etiketlerini Endekslemediğini unutmayın.

Slayt eklenti kurulumu :

1. Blogger kumanda paneline giriş yaparak blogunuzu hazır konuma getirin.

2. Slayt eklentisi, Jquery kod linkini kullanarak yapılandırıldığından Jquery kod linkinin blog şablon kodlarınızda olabileceği düşünülerek, mükerrer kod eklenmemesi için kod içinden çıkarılmıştır. Jquery kod linki blogunuzda mevcut ise diğer kısımları okumaya devam edebilirsiniz.

3. Jquery kod linki daha önceden eklenmiş olup olmadığını kontrol etmek için blog şablon kodlarınızdaki CSS kodlarının yapılandırıldığı yeri aşağıdaki resime tıklayarak büyük izleyin.

 Jquery kod linkinin bulunduğu kısım

4. Jquery kod linki daha önceden eklenmedi iseniz şimdi aşağıda verilen kod linkini kopyalayın ve resimde gösterildiği gibi Css kod başlangıç ve bitiş etiketinin son kısmına tıklayın ve enter çekerek alt kısımda bir satır açarak Jquery kod linkini yapıştırın.

Jquery kod linki :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>  

5. Aşağıda verilen kodları kopyalayın sırası ile Yerleşim → Gadged ekle → Html/JavaScript gadged’ini bulup yapıştırın ve kaydedin.

6. Html/JavaScript Gadged’ine eklediğiniz kodları konumlandırmak için, Blog Kayıtları gadgetin üstüne sürükleyerek taşıyın ve blogu kaydedin.

Blog gadgetinize ekleyeceğiniz kodlar :

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
.slider-rotator {
  width:600px;
  height:410px;
}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "https://guney13.blogspot.com",
    numPost: 7,
    newTabLink: false,
    labelName: null,
    showDetail: true,
    summaryLength: 0,
    titleLength: 60,
    showThumb: true,
    thumbWidth: 600,
    squareThumb: false,
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",
    showNav: true,
    navText: {
        prev: "&lt;",
        next: "&gt;"
    },
    containerId: "slider-rotator",
    autoSlide: true,
    interval: 6000,
    speed: 1000,
    hoverPause: true,
    crossFade: false,
    autoHeight: false
});
</script>

<div style="font-size:9px;text-align: center;">By <a href="<div style="font-size:9px;text-align: center;">By <a href="http://guney59.blogspot.com/2016/02/blogger-tekli-slayt-eklentisi.html"target="_blank"> Adnan Güney Gadgeti Al</a></div>

Yukarıda verilen kodları, dikey çubuğu aşağı yukarı oynatarak aşağıda verilen açıklamaları inceleyip blog düzeninize göre uyarlayın.

Slayt eklenti kodlarını Özelleştir :

width:600px : Makale Sayfanızın genişliğine göre değeri değiştirin.

height:410px : Slider resim pencere yüksekliğini ayarlamanızı sağlar.

url: “https://guney13.blogspot.com” Her iki tırnak arasına örnek verilen URL yapısında kendi blog URL’nizi girin. “https” protokolündeki (s) harfine dikkat edin. Blogunuzda güvenlik ayarları Evet olar işaretli ise (http) protokolünü değil, (https) protokolünü kullanın.

numPost: 7 : Numaratör sayısını değiştirir.

newTabLink: false : Yazı linkine tıklayınca tarayıcı yeni sekmede açılmasını istiyorsanız “false” ismini “true” olarak değiştirin.

labelName: null : Etiket kullanılmadığında “null” (boş, sıfır, geçersiz) anlamına gelen isim kullanılır. Etiket ekleyeceğiniz zaman “null” ismi silerek yerine etiketinizi yazmanız gerekir. Etiketi nasıl yazacaksınız örnek kalıbı incleyin.

labelName: null, : Etiket kullanılmadığı zaman kullanılacak.

labelName: "Tema tasarım", : Etiket kullanıldığı zaman kullanılacak. Etiketinizin tırnak içinde olmasına dikkat edin.

showDetail: true , : Blog yazı başlık ve açıklamasını gizlemeyi düşünüyorsanız. “true” isminin olduğu yere, “false” yazın

summaryLength: 0 , : Makale açıklama uzunluğunu değiştirmek içindir. Açıklama kullanacağınız karakter sayısını, (0) değerine (60) yazarak  belirtin.

titleLength: 60 , : Makale yazı başlık link karakter sayısını (60) değiştirmek için kullanın

showThumb: true , : Yazınızda küçük resimler varsa bunları gizlemek için false kullanın.

thumbWidth: 600, : Resim piksel genişliğini belirtir.

squareThumb: false , : Resminizin Küçük mod, Kare mod, veya orijinal genişlik ve yükseklik ölçekli görülmesini (true) yazarsanız değiştirir. Önerilen (false) seçeneğidir.

showNav: false : Resimleriniz altında numarik sayıların görülmesi sağlayan bir etikettir.

false : aktif olduğunda slider içinde sayfa numarator görülmeyecektir. “false” etiketini “true” tırnaklar hariç, değiştirdiğinizde sayfa numarator görülür olacaktır.

ccontainerId: "slider-rotator", : Slayt görüntülemek için kullanılan eleman kimliği

autoSlide: true, : Otomatik çalışan slaytı durdurup manuel çalışmasını “elle kumanda edilmesi” isterseniz (navigasyon) “false” ismi ile değiştirin.

interval: 6000, : Slayt dönüş Aralığının milisaniye ölçü birimi. Resim aralık geçişlerini değiştirmek isterseniz kullanın.

speed: 1000, : Slayt animasyon hızı

hoverPause: true, : Slayt resmi üzerine fare geldiğinde resmin durmasını yada çalışmasını belirler, Resim duracaksa (true), durmayacaksa (false) seçiminize göre değiştirin.

crossFade: false, : Slayt değişimi, görünüm ve kaybolma aynı anda olmasını sağlar. İsterseniz (true) ile değişebilirsiniz.

autoHeight: false : Görüntülenen öğenin yüksekliğini otomatik canlandırmak için ayarları kullanır. İsterseniz (true) ile değişip deneyebilirsiniz.

Kodlar içinde açıklama yapılan yerler renklendirilmiştir. Eklenti hakkında sorun yaşıyorsanız yorum yazarak sorunuzu belirtip yardım alabilirsiniz.

NOT: Emeğe saygı duyuyorsanız lütfen alt bağlantı linkini silmeyin.

Blog ipucu : Yapılandırılmış kodlarınızı farklı bir blogunuz varsa hiçbir değişiklik yapmadan slider olarak kullanabilirsiniz. Diğer blogunuzu inceleyen okuyucular makalelerinizi bu alanda da okuyabilirler.