Blogger Resimli Son Yazılar Slayt Eklentisi

Blogger ana sayfa sidebar da son yazılarınızın başlık isim linki, yazı açıklama metni ve yazılarınıza eklediğiniz ilk resmin otomatik geç...

...

Blogger ana sayfa sidebar da son yazılarınızın başlık isim linki, yazı açıklama metni ve yazılarınıza eklediğiniz ilk resmin otomatik geçişler ile görülmesini sağlayan, Son Yazılar Slayt Eklentisi. Blogunuzda gadget olarak kullanacağınız slayt eklentisi oldukca hızlı olup, Json ve Java kodlarından oluşturulmuştur. Blog’unuzun açılış hızını etkilemez. Bloger yazı editöründe yazdığınız yazıların başlık linkini, yazı açıklama metnini ve ilk eklediğiniz resmi otomatik olarak slayt formatına dönüştürür. görülmesini istediğiniz resim ve açıklamaları siz belirlersiniz. Görülmesini istediğiniz yazılar için hemen alt kısımda otomatik bir numaratör navigasyon sistemi çalışır. Resmin üzerine maus yanaştırıldığında slayt kendini otomatikman bekleme pozisyonuna alır. Maus’u navigasyondan uzaklaştırdığınızda slayt çevrimi devam eder. Eklenti içindeki CSS kodlarını değiştirerek genişlik ve yükseklik ayarı yapabirsiniz. Eklentinin en güzel özelliklerinden biride her yeni yazınızda kodlar içine resim linki veya açıklama eklemeden otomarik olarak tüm işlemleri kendinin düzenleyerek görevine devam etmesidir. Bu özellikte de sizin slayt resimleri değiştirme gibi uzun uzadıya bir işlem yapmamanızı sağlar. Resimli Son Yazılar Slayt Eklentisinin bir başka özelliği de, öne çıkan yazılarınızda kullandığınız herhangi bir etiketi ilgili alana girerek o etikete ait ilgili ayazıların görülmesidir. Blog’unuzda bu kadar işlevsel bir eklentinin kullanılması tavsiye ederim. Eklentinin nasıl çalıştığını canlı demosundan inceleyebilirsiniz.

DEMO

Demo görüntüsünü incelemek için giriş yaptığınızda sidebar sağ alt kısımda Blog Post gadget başlık ismi ile düzenlenmiş slayt görselidir.

Resimli Son Yazılar Slayt Eklentisinin kurulumu :

1. Blogger kumanda paneline giriş yapın.

2. Yerleşim, Gadget ekle, Html/JavaScrip gadgetini açın ve aşağıdaki kodları ekleyin. Emeğe saygı duyuyor ve bana destek vermek istiyorsanız kod içindeki Gadget’i al link bağlantısını lütfen silmeyin.

<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:250px;
  height:340px;
}
</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: "http://adnanguney.blogspot.com",
    numPost: 4,
    newTabLink: false,
    showDetail: true,
    summaryLength: 120,
    titleLength: "auto",
    showThumb: true,
    thumbWidth: 250,
    squareThumb: true,
    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:10px;text-align: center;">By <a href="http://guney59.blogspot.com/2015/01/blogger-resimli-son-yazlar-slayt.html"target="_blank"> Adnan Güney Gadgeti Al</a></div>

Özelleştirme :

width: 250px : Gadget resim genişliği

height: 340px : Gadget resim yüksekliği

http://adnanguney.blogspot.com : Kendi blog isminizi aynı formatta girin.

numPost: 4 : Görülmesini istediğiniz yazı rakamı

summaryLength: 120 : Yazı açıklama uzunluğu.

thumbWidth: 250 : Resmin genişliği

Etiket ile slayt oluşturmak isterseniz :

Aşağıda verilen etiket kalıbını “ newTabLink: false “ etiketinin hemen altına yapıştırın.

labelName: "etiketismi",

Etiketten oluşan slayt’ı kullanmak için “etiketismi “ yazan kısma etiketinizi girin. Tırnak işaretlerinin bozulmamasına ve etiketinizi doğru girmeye dikkat edin.

NOT : Blogunuzda Jguery kütüphanesinin son güncelleşmiş linki yoksa aşağıdaki verilen etiketi bularak, hemen altına aşağıdaki link’i yapıştırın. Bu link olmadan yukarıdaki kodlar çalışmayacaktır.

]]></b:skin> 

Güncelleşmiş Jguery linki :

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