Etiket Bazlı Otomatik Slider
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.
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:
2. Adım: Yine HTML kodları arasında </head> kodunu bularak hemen üstüne şu script kodlarını ekleyin:
3. Adım: Yine HTML kodları içerisinde ]]></b:skin> kodunu bulun ve üstüne şu CSS kodlarını ekleyin:
4. Adım: Son olarak Yerleşim sekmesinden Gadget Ekle > HTML/JavaScript Gadget diyerek şu HTML odunu ekleyin:
İşlem bu kadar ama düzenlemeniz ve bilmeniz gereken bazı hususlar var.
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.
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/AVvXsEj99gxRITK5dISUXxUGj2gR2FGDPIo85VaDPqCFjFpHWlaafrxQ74s5j6QIbLZl6o45OKggyq0xS-RM1o_AsuvfQlqs3tNVg9YR72ma7qfbPqWDkUhLzLBTVcWJO3yo00C2a1HUMesZ2xB4/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.
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ıtlaSilSanırım birden fazla jquery var. Benim verdiğim jquery kodunu kaldırıp tekrar deneyebilirsiniz.
SilTamam.Çalıştı.Hata yapmışım.
YanıtlaSilÖnemli bir konuyu kaleme almışsınız, tebrikler..
YanıtlaSilHocam yine cok faydali bilgiler paylasmissin. Bazilarini bildigim halde yeniden okumak icin blogunu takip ediyorum
YanıtlaSilTeşekkürler hocam elinize kolunuza sağlık
YanıtlaSilOldu teşekkürler kişisel bloğuma böyle bir güncelleme gerekiyordu sağ olsun.
YanıtlaSilSlider mobil uyumlumu hocam
YanıtlaSilteşekkürler.
YanıtlaSilElinize 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ıtlaSilhttp://guncelhaberblogdiger.blogspot.com/ Sayfada Çalışmadı Kaldırdım
YanıtlaSilŞablona daha önce jquery kodu eklediyseniz benim verdiğimi kaldırın.
SilSerdar hocam bana dönecek misiniz?
YanıtlaSilBilgiler için tekrardan teşekkürler, iyi yayınlar. http://adsensemektebi.blogspot.com/
YanıtlaSilHocam 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.
YanıtlaSilhttp://mavisergi.blogspot.com/
Sayenizde güzel görünümlü bir blog açtım ama google beni sevmiyor http://indirfullindir.blogspot.com/
YanıtlaSilHocam sliderde bloghocam adresi durdugu surece calısıyor ama kendı adresımı yazınca calısmıyor neden olabılır bu
YanıtlaSilhocam sizinle bir şey konuşmak istiyorum size nereden ulaşabilirim?
YanıtlaSilMerhaba 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ıtlaSilEtiket 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Çok güzel bir eklenti hocam teşekkürler..
YanıtlaSilÇok güzel hocam.Sizleri seviyoruz
YanıtlaSilçok yardımcı oldunuz hocam bide blogum hakkında görüşleriniz nedir
YanıtlaSilhttp://gencdrvs.blogspot.com.tr/
Mrb Hocam,Ben size şunu sormak istiyorum, SOL tarafa sizin gibi ince uzun adsense nasıl ekleyebilirim?
YanıtlaSilTeşekkürler hocam
YanıtlaSilTesekkurler gayet sorunsuz calisti. Wp siteme nasil uyarlayabilirim?
YanıtlaSilPaylaşım için Teşekürler Serdar Hocam . Emeklerinize Saglık .
YanıtlaSilMerhaba , 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ıtlaSilEmeğ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ıtlaSilmerhaba sitem çoğunlukla örgün olmasına rağmen bir türlü hit almıor google anında indexliyor ama çok gerilerde sayfalar
YanıtlaSilHocam 2014'ten beri takipteyim. Bir süre blog yazmayı bırakmıştım. Blog adresimi ve tasarımını tamamen değiştirdim. Slider'ı da sidebar'a ekledim. Bence çok hoş oldu bir göz atmanızı isterdim.
YanıtlaSilsanatintarihcisi.blogspot.com
Hocam Aktif Değilmi ?
YanıtlaSiljdsezer.blogspot.com
slider in yazı boyutunu küçültmek istiyorum birde sadece başlık görünsün nasıl yapcam
YanıtlaSil