Blogger Yazı Etiketleri ile Önerilen Makaleler Eklentisi

Blogger temanızın Ana sayfa Yazı posts altında ve üstünde, Footer üst veya alt bilgi alanında etiketlerden oluşturulan çoklu 3 adet slide...

...

Blogger temanızın Ana sayfa Yazı posts altında ve üstünde, Footer üst veya alt bilgi alanında etiketlerden oluşturulan çoklu 3 adet slider görünümlü Önerilen Makaleler Eklentisi. Blog okuyucularınız yazılarınızı incelerken kullanım alan seçiminize göre yazılarınıza eklediğiniz resim, yazı başlık linki ve yazı açıklamalarını belirli farklı saniyeler ile yumuşak bir geçiş yaparak tanıtan bir eklentidir. Eklenti içinde, blog domain linkiniz, 3 adet etiket satırı, temanızın Ana sayfa (main) blog kayıtlarının bulunduğu ve yazı postlarınızın genişlik ve yükseklik ebatları ile uyumlu olması için düzenleme yapabileceğiniz kodlarlardan oluşmaktadır.

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 (RSS) 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. Bloglarınız da bulunan Arama penceresi de bu mantıkla çalışarak aranılan kelimeleri (Etiketler) Filtre uygularak bulurlar.

Seo için ipuçları :

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.

Hiçbir yerde bulamayacağınız bu eklenti hakkındaki açıklamaları aşağıda takip ederek blogunuza ekleyebilirsiniz. Blogunuzda mevcut olan Popüler yayınlar eklentisi ile istediğimiz tüm yayınları göstermeniz mümkün değildir.

Popüler yayınlar eklentisinin en çok okunan yazıları göstermesi düşüncesinden hareket ederek, yazılarımıza atadığımız etiketlerimiz de Popüler yayınlar gibi gösterilebilir fikri ile bu yazı düzenlenmiştir. Etiketlerinizden oluşan, Önerilen Makaleler Eklentisi ile, resim ebatları, açıklama yazı uzunluğunu değiştirerek yayınlarınızı gösterebileceksiniz.

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

İlgili yazılar benzeri Etiket Yayın Eklenti kodları, Html/JavaScript Gadget’ine kurulmakta olup, yazınıza atadığınız etiketinize bağlı olan tüm son yazılar görülmektedir.

Adnan Güney isimli diğer blogumun yazı saylarının altında kullandığım eklentinin görselini bağlantıyı açarak inceleyebilirsiniz.

Önerilen Makaleler Eklenti kurulumu :

1. Blogger kumanda paneline giriş yapın.

2. Sırası ile Yerleşim → Gadged ekle → Html/JavaScript Gadged’ini bularak kodları eklemeden önce, bir metin dosyasına yapıştırın.

3. İlgili alanları aşağıda açıklanan şekilde yapılandırarak metin dosyasındaki kodları kopyalayın ve gadgetinize yapıştırıp sürükleyerek blog kayıtlarının altına 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ü

Her iki etiketin alt satırına aşağıda verilen Jquery linkini ekleyin. Şablonunuz da eski versiyon Jquery linki varsa yeni versiyon ile değiştirin.

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:630px;
  padding:10px 5px;
  border:1px solid #ccc;
  background-color:white;
  margin:0 auto;
}
.slider-rotator-wrapper .grid {
  float:left;
  margin:0 5px;
}
.slider-rotator {
  padding:0 0;
  border:none;
  width:200px;
  height:320px;
}
.slider-rotator .slider-item {padding:0 0}
.slider-rotator-nav {
  overflow:hidden;
  margin-top:10px;
  border:1px solid #999;
  background-color:#ccc;
  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="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://adnanguney.blogspot.com',

    numPost: 5,
    labelName: "Adsense",
    thumbWidth: 200,
    interval: 10000,
    showNav: false,
    summaryLength: 70,
    containerId: "slider-rotator-1"
});
makeSlider({
    url: 'https://adnanguney.blogspot.com',

    numPost: 5,
    labelName: "eklentiler",
    thumbWidth: 200,
    interval: 10000,
    showNav: false,
    summaryLength: 70,
    containerId: "slider-rotator-2"
});
makeSlider({
    url: 'https://adnanguney.blogspot.com',

    numPost: 5,
    labelName: "Related posts",
    thumbWidth: 200,
    interval: 10000,
    showNav: false,
    summaryLength: 70,
    containerId: "slider-rotator-3"
});
</script>
<div style="font-size:9px;text-align: center;">By <a href="http://guney59.blogspot.com.tr/2016/02/blogger-yaz-etiketleri-ile-onerilen.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:320px : Üç adet slider toplam pencere yüksekliğini ayarlamanızı sağlamaktadır.

url: “https://adnanguney.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 3 adet yapılandırma göreceksiniz.

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

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.