21 Haziran 2016 Salı

Etiket Bazlı Otomatik Slider

30 yorum
Daha önce şurada, şurada ve şuradaki gibi çeşitli manşet yani diğer bir deyişle slider uygulamaları paylaşmıştım. Sliderlar okuyucuya eski ve önemli içerikleri sunarak okunma sayısını arttırması açısından çok önemlidir fakat daha önce paylaştığım bu sliderlar pek pratik değildi. Çünkü gösterilecek içeriği kendiniz manuel olarak değiştirmeniz gerekiyor. Bu da bir süre sonra işkenceye dönüşebiliyor.

Son zamanlarda gelişmiş premium Blogger temalarında gördüğümüz otomatik sliderlar var. Bunlar etikete bağlı çalışıyor. Yani belirlediğiniz etikete ait yazılar manşette otomatik olarak gözüküyor. Böylece hiçbir düzenlemeye ihtiyaç duymadan manşette gösterilen yazılar değişiyor.

Etikete göre çalışan otomatik slider


Bu eklentiyi blogunuza eklemek için şu adımları takip edebilirsiniz:

1. Adım: Blogger kumanda panelinizde Şablon > HTML’yi Düzenle diyerek <head> kodunu bulun ve hemen altına şu Jquery kodunu ekleyin:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

2. Adım: Yine HTML kodları arasında </head> kodunu bularak hemen üstüne şu script kodlarını ekleyin:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $(".recent-slider").each(function () {
        $(this).append('<div id="slider"></div>');
        var e = $(this).attr("data-label"),
            n = "
https://bloghocam.blogspot.com/feeds/posts/summary/-/" + e + "?max-results=" + 5 + "&alt=json-in-script",
            l = $(this);
        $.ajax({
            type: "GET",
            url: n,
            async: true,
            contentType: "application/json",
            dataType: "jsonp",
            success: function (s) {
                for (var r = 0; r < s.feed.entry.length; r++) {
                    for (var n = s.feed.entry[r], i = 0; i < n.link.length; i++)
                    if ("alternate" == n.link[i].rel) {
                        var o = n.link[i].href;
                        break
                    }
                    try {
                        var c = n.media$thumbnail.url.replace("s72-c", "h300-w1200-no")
                    } catch (p) {
                        var c = "https://lh3.googleusercontent.com/-48GpBb2so70/V2frAkSjFII/AAAAAAAAMA8/Sx0T8oPnqE0eGB0cN9x3VYvSSYa9N1FbwCCo/s600/no-thumbnail_f_600x250.png=w600-h250-no"
                    }
                    var d = n.title.$t,
                        u = n.summary.$t.substr(0, 180),
                        h = '<a href="' + o + '"><img src="' + c + '" title="<a href=\'' + o + "'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
                    l.find("#slider").append(h)
                }
                $("#slider").nivoSlider({
                    effect: "random",
                    pauseTime: 5e3
                })
            }
        })
    })
});
//]]>
</script>

3. Adım: Yine HTML kodları içerisinde ]]></b:skin> kodunu bulun ve üstüne şu CSS kodlarını ekleyin:

.nivoSlider,.top-l-slider .nivoSlider{width:100%;text-align:Center;overflow:hidden}.nivo-box,.nivoSlider{overflow:hidden}.nivoSlider{position:relative;height:300px}.nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:300px!important}.top-l-slider .nivoSlider{position:relative;height:400px}.top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}.nivo-main-image{display:block!important;position:relative!important;width:100%!important}.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:#fff;filter:alpha(opacity=0);opacity:0}.nivo-box,.nivo-slice{z-index:5;position:absolute}.nivo-box,.nivo-box img,.nivo-caption,.nivo-slice{display:block}.nivo-slice{height:100%;top:0}.nivo-caption{position:absolute;bottom:10px;left:5%;width:90%;text-align:center;font:400 26px 'segoe ui',sans-serif;z-index:8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#fff}.nivo-caption p{text-align:Center;font:400 13px 'segoe ui',sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:4px;background:#656E75;line-height:21px}.nivo-caption a{color:#ecf0f1}.nivo-caption h3{text-align:center;padding:5px;display:inline-block;border-radius:5px;margin:0;line-height:37px!important;background:#F1921A;font:400 30px 'segoe ui',sans-serif}.nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:50%;margin-top:-15px;z-index:9;font-size:0;display:block;width:30px;height:30px;border-radius:5px;line-height:30px!important;background-color:rgba(255,255,255,.5);cursor:pointer;box-shadow:1px 1px 1px rgba(0,0,0,.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.4)}.nivo-prevNav{left:10px}.nivo-nextNav:before,.nivo-prevNav:before{position:Absolute;left:0;top:0;color:#fff;height:30px;width:30px;text-align:center;z-index:100;display:block}.nivo-prevNav:before{content:'\2190';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav:before{content:'\2192';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav{right:10px}.nivo-controlNav{text-align:center;z-index:100;position:absolute;top:10px;right:10px;font-size:0}.nivo-controlNav a{cursor:pointer;display:block;width:20px;height:20px;background:#F1921A;float:left;border-radius:10px;margin-right:5px}.nivo-controlNav a.active{background:#E6E7E8;}

4. Adım: Son olarak Yerleşim sekmesinden Gadget Ekle > HTML/JavaScript Gadget diyerek şu HTML odunu ekleyin:

<div class='recent-slider' data-label='SEO'></div>

İşlem bu kadar ama düzenlemeniz ve bilmeniz gereken bazı hususlar var.

  • Script kodlarında https://bloghocam.blogspot.com yazan yere kendi blog adresinizi yazın.
  • Gadget olarak eklediğiniz HTML kodundan SEO yerine slayt olarak gösterilmesini istediğiniz yazılara ait etiketi yazın.
  • Slider otomatik genişliktedir. Üstbilgi gadgetının altına taşırsanız daha geniş, blog kayıtları gadgetının üstüne taşırsanız daha dar gözükecektir.
  • Slaytta farklı etiketlerden yazıları göstermek isterseniz istediğiniz yazılara ilave olarak featured diye bir etiket ekleyin. Son HTML kodundaki SEO yazan yere featured yazın. Böylelikle sliderı daha verimli kullanabilirsiniz.
Herkese iyi bloglar…

30 yorum:

  1. Güzel çalışma.Uyguladım.sanırım script çakışması oldu.Önce çalıştı.Sonra çalışmadı.Teşekkürler çalışma için.

    YanıtlaSil
    Yanıtlar
    1. Sanırım birden fazla jquery var. Benim verdiğim jquery kodunu kaldırıp tekrar deneyebilirsiniz.

      Sil
  2. Tamam.Çalıştı.Hata yapmışım.

    YanıtlaSil
  3. Önemli bir konuyu kaleme almışsınız, tebrikler..

    YanıtlaSil
  4. Hocam yine cok faydali bilgiler paylasmissin. Bazilarini bildigim halde yeniden okumak icin blogunu takip ediyorum

    YanıtlaSil
  5. Teşekkürler hocam elinize kolunuza sağlık

    YanıtlaSil
  6. Oldu teşekkürler kişisel bloğuma böyle bir güncelleme gerekiyordu sağ olsun.

    YanıtlaSil
  7. Elinize sağlık hocam acil yardım lütfen. Sitemin mobilden girilince yazdıklarım yarım görünüyor nasıl düzeltebiliirm çok acil . sitem www.hersaniyekpss.com teşekkürler

    YanıtlaSil
  8. http://guncelhaberblogdiger.blogspot.com/ Sayfada Çalışmadı Kaldırdım

    YanıtlaSil
    Yanıtlar
    1. Şablona daha önce jquery kodu eklediyseniz benim verdiğimi kaldırın.

      Sil
  9. Bilgiler için tekrardan teşekkürler, iyi yayınlar. http://adsensemektebi.blogspot.com/

    YanıtlaSil
  10. Hocam gerçekten tüm paylaşımlarınız için çok ama çok teşekkür ederim sayfamı sizin sayenizde görsel olarak çok güzel bir hale getirdim a dan z ye işime yarayan herşeyi burda buldum ALLAH razı olsun.
    http://mavisergi.blogspot.com/

    YanıtlaSil
  11. Sayenizde güzel görünümlü bir blog açtım ama google beni sevmiyor http://indirfullindir.blogspot.com/

    YanıtlaSil
  12. Hocam sliderde bloghocam adresi durdugu surece calısıyor ama kendı adresımı yazınca calısmıyor neden olabılır bu

    YanıtlaSil
  13. hocam sizinle bir şey konuşmak istiyorum size nereden ulaşabilirim?

    YanıtlaSil
  14. Merhaba size bir sorum olacak ben header resmimi güncelledikten sonra takipçi sayım sıfır gözükmeye başladı profilime girdiğimde takipçilerimi görüyorum fakat blogumda sıfır takipçi gözüküyor bunu düzeltmek için ne yapabilirim ?

    YanıtlaSil
  15. Etiket bazlı zamanında bir çalışma görmüştüm ama görüntüsü hoş değildi gerçekten, sizin paylaştığınız gayet yerinde bir çalışma, teşekkürler :)

    YanıtlaSil
  16. Çok güzel hocam.Sizleri seviyoruz

    YanıtlaSil
  17. çok yardımcı oldunuz hocam bide blogum hakkında görüşleriniz nedir

    http://gencdrvs.blogspot.com.tr/

    YanıtlaSil
  18. Mrb Hocam,Ben size şunu sormak istiyorum, SOL tarafa sizin gibi ince uzun adsense nasıl ekleyebilirim?

    YanıtlaSil
  19. Tesekkurler gayet sorunsuz calisti. Wp siteme nasil uyarlayabilirim?

    YanıtlaSil
  20. Paylaşım için Teşekürler Serdar Hocam . Emeklerinize Saglık .

    YanıtlaSil
  21. Merhaba , Kodu ekliyorum ama çalışmıyor. Dediğiniz jquery kodunu kaldırıp tekrar denedim yine sonuç aynı. Hazır şablon kullanıyorum ondan dolayı olabilirmi ?

    YanıtlaSil
  22. Emeğine sağlık hocam. Şunu merak ediyorum, acaba bunu label değil de search koduyla yapıp arama sonuçlarını slider olarak görüntüleyebilir miyim?

    YanıtlaSil
  23. merhaba sitem çoğunlukla örgün olmasına rağmen bir türlü hit almıor google anında indexliyor ama çok gerilerde sayfalar

    YanıtlaSil

Picardes

LİNKLER