Blogger'daki bazı eklentileri bulmak ve düzenlemek epey zor olabiliyor. Bu yüzden bazı eklentileri kişisel olarak da oldukça beğendiğimi dile getirmeliyim. Şimdi paylaşıyor olacağım eklentinin düzenlenmesi de tarafıma ait olup, gerçekten çok sevdiğim bir eklenti. Eklenti şu şekilde çalışıyor; dilediğiniz etiket içerisinde yer alan son 5 yazınızı otomatik olarak slider şeklinde gösteriyor. Navigasyon özelliği de mevcut. JavaScript ve jQuery ile harmanlanmış olan eklenti için dilediğiniz gibi CSS biçimlendirmesi de yapabilmektesiniz. Dilerseniz hemen ilgili kodlara göz atıyor olacağız.

AYRICA: Blogger’da Yazı Alanlarına Çerçeve Eklemek

Blogger için Mini Slider Eklentisi

Aşağıdaki kodları HTML/JavaScript Ekle bölümüne ekleyebilirsiniz.

<style>
/* Blogger Feed Rotator Plugin */
.slider-rotator {
width:200px;
height:200px;
border: 1px solid #ddd;
background-color: white;
padding: 10px;
font: normal normal 11px/1.4 Tahoma, Verdana, Arial, Sans-Serif;
color: #333;
margin: 0 auto;
position: relative;
overflow: hidden;
text-align: left;
}
.slider-rotator.loading {
background-image: url('https://lh3.googleusercontent.com/-1X99IFdIK8E/WPj_8aADVuI/AAAAAAAACdQ/gRew8u67wKgh0Dd9Bjgh_Xhuz9tYcNnwwCL0B/loading.gif');
background-position: 50% 50%;
background-repeat: no-repeat
}
.slider-rotator .slider-item {
position: absolute;
padding: 10px;
background-color: white;
top: 0;
right: 0;
bottom: auto;
left: 0;
display: none
}
.slider-rotator .image-wrapper {}.slider-rotator .detail-wrapper {}.slider-rotator img {
display: block;
border: none;
outline: none;
padding: 0 0;
margin: 0 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-width: none;
max-height: none
}
.slider-rotator h4 {
font: inherit;
font-weight: bold;
font-size: 120%;
text-transform: none;
color: #3B4B7E;
margin: 10px 0 0
}
.slider-rotator h4 a {
color: inherit;
text-decoration: none
}
.slider-rotator h4 a:hover {
color: #793B7E;
text-decoration: underline
}
.slider-rotator p {
margin: 10px 0 0
}
.slider-rotator-nav {
text-align: center;
margin-top:25px;
}
.slider-rotator-nav a {
display: inline;
background-color: #E53B2C;
color: white;
padding: 4px 8px;
line-height: 2.6em;
margin: 0 2px;
text-decoration: none
}
.slider-rotator-nav a:hover {
background-color: #B62416;
}
.slider-rotator-nav a.current {
background-color: #333;
}
</style>
<script type="text/javascript">
/* Blogger Feed Rotator Plugin */
(function(a) {
a.fn.customRotator = function(c) {
c = a.extend({
interval: 5000,
speed: 500,
hoverPause: true,
autoHeight: false,
crossFade: false,
autoSlide: true,
hide: function(d) {},
show: function(d) {}
}, c);
var b = true;
return this.each(function() {
var k = a(this),
e = k.children().hide(),
d = k.next(),
g = null,
j = 0,
f = 0;function h() {
c.hide(f);
d.find(".current").removeClass("current");
b = false;
if (e.eq(f).next().length) {
if (!c.crossFade) {
e.eq(f).fadeOut(c.speed, function() {
a(this).next().fadeIn(c.speed, function() {
c.show(f);
b = true
});
if (c.autoHeight) {
k.stop().animate({
height: e.eq(f + 1).height()
}, c.speed / 2)
}
f++
})
} else {
e.eq(f).fadeOut(c.speed);
e.eq(f).next().fadeIn(c.speed, function() {
c.show(f);
b = true;
f++
});
if (c.autoHeight) {
k.stop().animate({
height: e.eq(f + 1).height()
}, c.speed / 2)
}
}
d.find(".rotator-num a").eq(f + 1).addClass("current")
} else {
if (!c.crossFade) {
e.eq(f).fadeOut(c.speed, function() {
f = 0;
e.first().fadeIn(c.speed, function() {
c.show(f);
b = true
});
if (c.autoHeight) {
k.stop().animate({
height: e.eq(f).height()
}, c.speed / 2)
}
})
} else {
e.eq(f).fadeOut(c.speed);
e.first().fadeIn(c.speed, function() {
c.show(0);
b = true;
f = 0
});
if (c.autoHeight) {
k.stop().animate({
height: e.eq(0).height()
}, c.speed / 2)
}
}
d.find(".rotator-num a").first().addClass("current")
} if (j == 0 && c.autoSlide) {
g = setTimeout(h, c.interval)
}
}
if (e.length > 1) {
c.hide(f);
e.first().fadeIn(c.speed, function() {
c.show(f);
b = true
});
if (c.autoHeight) {
k.stop().animate({
height: e.eq(0).height()
}, c.speed / 2)
}
if (c.hoverPause && c.autoSlide) {
k.mouseenter(function() {
clearTimeout(g);
j = 1
}).mouseleave(function() {
g = setTimeout(h, c.interval);
j = 0
}).trigger("mouseleave")
} else {
g = (c.autoSlide) ? setTimeout(h, c.interval) : null
}
d.find(".rotator-num a").click(function() {
if (b) {
b = false;
if (c.autoSlide) {
clearTimeout(g);
g = setTimeout(h, c.interval)
}
f = a(this).index();
a(this).parent().find(".current").removeClass("current");
a(this).addClass("current");
c.hide(f);
e.fadeOut(c.speed).eq(f).fadeIn(c.speed, function() {
c.show(f);
b = true
});
if (c.autoHeight) {
k.stop().animate({
height: e.eq(f).height()
}, c.speed / 2)
}
}
return false
});
d.find(".rotator-advancer a").click(function() {
if (b) {
b = false;
var l = this.hash.replace("#", ""),
i = e.length;
if (c.autoSlide) {
clearTimeout(g);
g = setTimeout(h, c.interval)
}
if (l == "next") {
f = (f < i - 1) ? f + 1 : 0
} else {
f = (f > 0) ? f - 1 : i - 1
}
d.find(".current").removeClass("current");
d.find(".rotator-num a").eq(f).addClass("current");
c.hide(f);
e.fadeOut(c.speed).eq(f).fadeIn(c.speed, function() {
c.show(f);
b = true
});
if (c.autoHeight) {
k.stop().animate({
height: e.eq(f).height()
}, c.speed / 2)
}
}
return false
})
}
})
}
})(jQuery);
function makeSlider(a) {
var c = {
url: "",
numPost: 5,
newTabLink: false,
labelName: null,
showDetail: false,
summaryLength: 60,
titleLength: "auto",
showThumb: true,
thumbWidth: 200,
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",
interval: 5000,
speed: 500,
hoverPause: true,
crossFade: false,
autoHeight: false,
autoSlide: true,
onInit: function() {},
onHide: function(d) {},
onShow: function(d) {}
};
for (var b in c) {
c[b] = (typeof(a[b]) !== "undefined") ? a[b] : c[b]
}
$.get(c.url + "/feeds/posts/summary/-/EtiketAdı" + (c.labelName === null ? "" : "-/" + c.labelName.replace(/\,(\s+)?/g, "/")) + "?alt=json-in-script&max-results=" + c.numPost, {}, function(s) {
if (s.feed.entry !== undefined) {
var r = s.feed.entry,
q, p, e, o, h = "",
d = "";
for (var m = 0, n = r.length; m < n; m++) {
if (m == r.length) {
break
}
q = r[m].title.$t;
e = ("media$thumbnail" in r[m]) ? '<img alt="' + q + '" src="' + r[m].media$thumbnail.url.replace(/\/s72\-c/, "/s" + c.thumbWidth + (c.squareThumb ? "-c" : "")) + '" style="width:' + c.thumbWidth + "px;height:" + (c.squareThumb ? c.thumbWidth + "px" : "auto") + '">' : '<img src="' + c.noThumb + '" style="width:' + c.thumbWidth + "px;height:" + (c.squareThumb ? c.thumbWidth + "px" : "auto") + '">';
o = ("summary" in r[m] && c.summaryLength > 0) ? r[m].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/[<>]/g, "") : "";
o = (c.summaryLength < o.length) ? o.substring(0, c.summaryLength) + "&hellip;" : o;
for (var l = 0, f = r[m].link.length; l < f; l++) {
p = (r[m].link[l].rel == "alternate") ? r[m].link[l].href : "#"
}
h += '<div class="slider-item">';
h += (c.showThumb && c.showDetail) ? '<div class="image-wrapper">' + e + "</div>" : (c.showThumb && !c.showDetail) ? '<div class="image-wrapper"><a href="' + p + '" title="' + q + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + e + "</a></div>" : "";
h += (c.showDetail) ? '<div class="detail-wrapper"><h4><a title="' + q + '" href="' + p + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + ((c.titleLength == "auto") ? q : q.substring(0, c.titleLength) + (q.length > c.titleLength ? "&hellip;" : "")) + "</a></h4><p>" + o + "</p></div>" : "";
h += "</div>";
$("#" + c.containerId).css({
width: (c.showThumb) ? c.thumbWidth + "px" : $("#" + c.containerId).css("width"),
height: (!c.showDetail && c.squareThumb) ? c.thumbWidth + "px" : $("#" + c.containerId).css("height")
})
}
d = '<div class="slider-rotator-nav"' + (c.showNav === false ? ' style="display:none;"' : "") + ">";
d += (c.showNav === true || c.showNav == "next/prev") ? '<span class="rotator-advancer"><a href="#prev">' + c.navText.prev + "</a></span>" : "";
if (c.showNav === true || c.showNav == "number") {
d += '<span class="rotator-num">';
for (var g = 0; g < c.numPost; g++) {
d += '<a href="#slide-' + g + '" class="' + (g === 0 ? "current" : "") + '">' + (g + 1) + "</a>"
}
d += "</span>"
}
d += (c.showNav === true || c.showNav == "next/prev") ? '<span class="rotator-advancer"><a href="#next">' + c.navText.next + "</a></span>" : "";
d += "</div>";
$("#" + c.containerId).html(h).after(d);
c.onInit();
$("#" + c.containerId).removeClass("loading").customRotator({
interval: c.interval,
speed: c.speed,
autoHeight: c.autoHeight,
hoverPause: c.hoverPause,
crossFade: c.crossFade,
autoSlide: c.autoSlide,
hide: function(i) {
c.onHide(i)
},
show: function(i) {
c.onShow(i)
}
})
} else {
$("#" + c.containerId).removeClass("loading").css({
width: "auto",
height: "auto"
}).html("Error or not found!")
}
}, "jsonp")
};
</script>
<script type="text/javascript">
makeSlider({
url: "http://[blogadi].blogspot.com/" // Add your blog URL
});
</script>
<div id="slider-rotator" class="slider-rotator loading">
</div>


Not: Yukarıdaki kırmızı alanları kendinize göre değiştirmeyi unutmayın.

Örnek Görünüm