Blogger Başlık Resmi Altına Dörtlü Resimli Slayt Eklentisi

Blogger, başlık resmi altına dört adet yazı etiketi ile oluşturulmuş dönüşümlü resim, yazı başlık linki ve yazı açıklamasını gösteren slay...

...

Blogger, başlık resmi altına dört adet yazı etiketi ile oluşturulmuş dönüşümlü resim, yazı başlık linki ve yazı açıklamasını gösteren slayt eklentisi. Çoklu resim Slayt eklentisini, Blog ana sayfanızda Header, başlık kısmında kullandığınız resim görseli ve menü çubuğunun hemen altında kullanabilirsiniz. Çoklu Slayt eklentisini canlı izlemek için → Guney14 bağlantısını açın.

Eklentinin yapılandırması çok kolay olup, blog Url linkiniz, en sevdiğiniz 4 adet etiketinizi seçmeniz yeterli olacaktır. Blog ana sayfa iç marj genişliği ve resim genişlik ebatlarını istediğiniz şekilde yapılandırabiliyorsunuz. İsteğe bağlı tüm slayt pencere altında 5 adet sayfa geçiş navigasyon ekleyebilir veya gizleyebilirsiniz. Hatta slayt geçişlerinin arka plan resmini transparan olarak belirleyip tema rengini de kullanabilirsiniz.

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.

İstediğiniz zaman bu etiketleri değiştirerek, farklı yazılarınızı da göstermeniz önerilerim arasında yer almaktadır.

Çoklu Slayt eklenti kurulumu :

1. Blogger kumanda paneline giriş yapın.

2. Kodları eklemeden önce, bir metin dosyasına yapıştırın. Sırası ile Yerleşim → Gadged ekle → Html/JavaScript Gadged’ini bularak, ilgili alanları aşağıda açıklanan şekilde yapılandırıp, metin dosyasındaki kodları kopyalayın ve gadgetinize yapıştırıp, Menü çubuğu altına sürükleyerek taşıyın ve blogu kaydedin.

Önemli kod : Jquery kodlarının barındırıldığı link blog şablon kodlarınızda olabileceği düşünülerek, mükerrer kod eklenmemesi için kod içinden çıkarılmıştır.

Aşağıdaki resmi incelediğinizde Jquery kod barındırıcı linkin üst kısmında CSS kodlarımızı eklediğimiz etiketi, alt kısmında ise Template etiketini göreceksiniz.

Jquery kod linkinin görünümü

Jquery kod linkiniz :

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

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">
/* Custom CSS here... */
.slider-rotator-wrapper {
  width:1085px;
  padding:10px 5px;
  border:1px solid #ccc;
  background-color:0;
  margin:0 auto;
}
.slider-rotator-wrapper .grid {
  float:left;
  margin:0 5px;
}
.slider-rotator {
  padding:0 0;
  border:none;
  width:200px;
  height:310px;
}
.slider-rotator .slider-item {padding:0 0}
.slider-rotator-nav {
  overflow:hidden;
  margin-top:10px;
  border:1px solid #999;
  background-color:;
  padding:2px 0;
}
.slider-rotator-nav a {
  margin:0 0;
  display:inline-block;
  line-height:normal;
}
.clear {clear:both}
</style>

<div id="slider-rotator-wrapper" class="slider-rotator-wrapper">
    <div class="grid">
        <div id="slider-rotator-1" class="slider-rotator loading"></div>
    </div>
 <div class="grid">
        <div id="slider-rotator-2" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-3" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-4" class="slider-rotator loading"></div>
    </div>
    <div class="clear"></div>
</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://guney59.blogspot.com',
newTabLink: true,
    labelName: "Adsense",
    thumbWidth: 260,
    interval: 9600,
showNav: false,
summaryLength: 80,
    containerId: "slider-rotator-1"
});
makeSlider({
    url: 'https://guney59.blogspot.com',
newTabLink: true,
    labelName: "Tema tasarım",
    thumbWidth: 260,
    interval: 9600,
showNav: false,
summaryLength: 80,
    containerId: "slider-rotator-2"
});
makeSlider({
    url: 'https://guney59.blogspot.com',
newTabLink: true,
    labelName: "dinamik%20blogger",
    thumbWidth: 260,
    interval: 9800,
showNav: false,
summaryLength: 80,
    containerId: "slider-rotator-3"
});
makeSlider({
    url: 'https://guney59.blogspot.com',
newTabLink: true,
    labelName: "Related%20posts",
    thumbWidth: 260,
    interval: 9900,
showNav: false,
summaryLength: 80,
    containerId: "slider-rotator-4"
});
</script>
<div style="font-size:9px;text-align: center;">By <a href="http://guney59.blogspot.com/2016/02/blogger-baslk-resmi-altna-dortlu.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ı inceleyerek blogunuza göre uyarlayın.

Önerilen Makaleler Eklenti kodlarını Özelleştirme :

width:630px : Sayfa alt bilgi temanızın genişliğine göre değeri değiştirin.

height:310px : Dört adet slider toplam pencere yüksekliğini ayarlamanızı sağlamaktadır.

url: “https://guney59.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: 5 : Numaratör sayısını değiştirir.

makeSlider : Bu başlık altında 4 adet yapılandırma göreceksiniz.

rotator-1, rotator-2, rotator-3, rotator-4

Her bir rotator, başlığında aşağıda verilen etiketleri ayrı ayrı yapılandırın ;labelName: Okuyucu ilgisini çeken yazı etiketinizi ekleyin. Her biri için ayrı ayrı olacak.

thumbWidth: 200 : Üç adet rotator içindeki resim ebatlarının aynı olması gerekir. Pencere içinde herhangi bir 200 px değerini değiştirerek sonuçlarını inceleyin. Değerler farklı girilirse resimlerininizin biri büyük diğeri küçük çıkar. Genişlik ayarını büyütüp küçülterek bu değerler ile oynayabilirsiniz. Bir önceki değeri aklınızda tutmayı unutmayın.

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 numaratörü görülür olacaktır. Değiştirmek istediğinizde üç adet etiket alanındakileride değiştirmeniz gerekmektedir. Yoksa biri numaralı diğeri numarasız bir görünüm olacaktır. Numaratörlü slider’ın nasıl görüldüğünü aşağıdaki resimden inceleyebilirsiniz.

summaryLength: 70 : Yazı açıklama karakterini belirler. Seo için uygun en iyi açıklama 70 karakterdir. İsterseniz değiştirebilirsiniz

Numaratörlü slider’ın görünümü

Eklentiler ile ilgili daha fazla bilgileri, Related posts etiketine sahip kayıtlardan inceleyin.

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 çoklu slider olarak kullanabilirsiniz. Diğer blogunuzu inceleyen okuyucular makalelerinizi bu alanda da okuyabilirler.