Etiket Bazlı Otomatik Slider

YazarHamdiPhone
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bvjeiQrsSzsa5G3djYCftu0jlXHjUYmYdUqzcEJbMS6rQ-4w6OZHPXFNPAIxtYSEcJHF59B8YSsYnMLd_Zj8E9umGAxz6RMZX0umHzDKE5Q-NH05XraaKr_9z8w-WPPKxy2X_AYpJriS/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…
Kategori

Yorum Gönder

Daha yeni Daha eski

İletişim