Merhaba bu yazımızda Blogger kayıtlarınızı daha etkili bir şekilde ziyaretçilerinize sunabileceğiniz ve blogumda da kullandığım numaralı mini slayder blogger eklentisini kurulumunu sizlerle paylaşacağım.
Kurulum Aşamaları
- Blogger kullanıcı paneline gidin.
- Yerleşim seçeneği tıklayın.
- Gadget ekle seçeneğinden Html/Java Scrip widgetini seçin.
- Aşağıda paylaştığım kodu kopyala yapıştır yaptıktan sonra www.teknoox.blogspot.com yerine kendi url adresinizi giriniz ve kaydetme işlemini yapınız.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
function loadJS(e, t, n) { "use strict"; var i = window.document.createElement("script"); var o = t || window.document.getElementsByTagName("script")[0]; i.type = "text/javascript"; i.src = e; o.parentNode.insertBefore(i, o); setTimeout(function () { i.type = n || "text/javascript" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
<div id="slider-rotator" class="slider-rotator loading">
</div>
<script>
//<![CDATA[
(function (a) {
a.fn.customRotator = function (c) {
c = a.extend({
interval: 6000,
speed: 1000,
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: "https://teknoox.blogspot.com",
numPost: 5,
newTabLink: false,
labelName: null,
showDetail: true,
summaryLength: 60,
titleLength: "auto",
showThumb: true,
thumbWidth: 320,
squareThumb: false,
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",
showNav: true,
navText: {
prev: "<i class='fa fa-arrow-left'></i>",
next: "<i class='fa fa-arrow-right'></i>"
},
containerId: "slider-rotator",
interval: 6000,
speed: 1000,
hoverPause: true,
crossFade: true,
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/" + (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) + "…" : 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 ? "…" : "")) + "</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">
//<![CDATA[
makeSlider({
url: "https://teknoox.blogspot.com/" // Change to your blog URL
});
//]]>
</script><style>
.slider-rotator{background:#fff;font-family:roboto;width:300px!important;min-height:200px;height:auto !important;padding:10px;color:#fff;margin:0 auto;position:relative;overflow:hidden;text-align:left}.slider-rotator.loading{display:none;background-position:50% 50%;background-repeat:no-repeat}.slider-rotator .slider-item{position:absolute;padding:0;background-color:transparent;top:0;right:0;bottom:auto;left:0;display:none}.slider-rotator img{display:block;border:none;outline:none;padding:0 0;margin:0 auto;box-shadow:none;}.slider-rotator h4{font-size:16px;text-transform:none;margin:0;padding:15px 0;color:#242424;text-align:center}.slider-rotator h4 a{color:#242424!important;line-height:1.5;text-decoration:none}.slider-rotator h4 a:hover{color:#e79c5a;text-decoration:none}.slider-rotator p{margin:10px}.slider-rotator-nav{text-align:center;margin:10px auto}.slider-rotator-nav a{font-size:13px;display:inline;background-color:#fff;color:#222;border:0;padding:5px 10px;line-height:2.6em;border:1px solid rgba(0,0,0,0.08);margin:0 2px;text-decoration:none}.slider-rotator-nav a:hover{background-color:#fff;color:#ec407a;border-color:#ec407a}.slider-rotator-nav a.current{background-color:#ec407a;color:#fff}
</style>
Diğer Yayınlar