Sekarang ada banyak orang yang tersedia hanya tetapi tidak fitur yang ok untuk menggunakannya karena Anda harus hati-hati waktu pembukaan Anda juga jadi berpikir dua kali sebelum menggunakan kode di web Anda yang dapat membuat waktu bongkar Anda tinggi efek SEO yang buruk. Tapi yang satu ini ringan dan harus banyak kode. Semua ada di sini Anda juga tidak perlu memukul orang lain URL. Sekarang pergi untuk itu dan pakaian kode untuk menggunakannya.
Fitur:
1.) Pure JavaScript JQuery Ditambahkan.2.) JQuery Berkas Ditambahkan.
3.) CSS Ditambahkan.
4.) Sederhana Dan Cepat Loading Code.
5.) Bisa Bekerja Dengan Any Browser.
6.) Bekerja Dengan Setiap Blogger Domain.
7.) Bisa Set The Post Hitung Too.
8.) Gaya Dalam Desain.
9.) Memuat Icon.
10.) Pilih Gambar, Text, Judul.
Cara Tambah Di Blogspot?
1.) Pergi Untuk Anda www.blogger.com2.) Buka Keinginan Anda "Blog".
3.) Pergi Untuk "Layout".
4.) Klik "Add A Gadget" Di mana Anda Ingin Tambah Ini.
5.) Sekarang Gulir Untuk "HTML-JAVASCRIPT"
6.) Klik "+" Icon Tambah Ini.
7.) Sekarang "Copy" The bawah Kode Dan "Paste" It To Ada.
8.) Tinggalkan The "Judul" Empty.
9.) Klik "Simpan", Sekarang Anda Apakah Selesai.
CSS:
<style>/* Blogger Feed Rotator Plugin */
.slider-rotator {
width: 600px;
height: 340px;
border: 1px solid #ccc;
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-PJ7BcqXvPUQi5uhLufUUIg83AAmKbyUf3hlzugo7_lxo_A81IjjMVm8dhFSi1HuYha7wg0DgGegp7fE1zGJf-xH3yavY0FO4rSUMG4dX8kHNmrhgJhwC1cVkEWbAL8dhP0lSXHOrcpP0/s1600/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
}
.slider-rotator-nav a {
display: inline;
background-color: #333;
color: white;
padding: 4px 8px;
line-height: 2.6em;
margin: 0 2px;
text-decoration: none
}
.slider-rotator-nav a:hover {
background-color: #111
}
.slider-rotator-nav a.current {
background-color: #3B4B7E
}
</style>
HTML:
<div id="slider-rotator" class="slider-rotator loading"></div>
JavaScript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
/* Blogger Feed Rotator Plugin */
(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: "http://www.blogsmanado.blogspot.com",
numPost: 5,
newTabLink: false,
labelName: null,
showDetail: true,
summaryLength: 60,
titleLength: "auto",
showThumb: true,
thumbWidth: 250,
squareThumb: true,
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",
showNav: true,
navText: {
prev: "<",
next: ">"
},
containerId: "slider-rotator",
interval: 6000,
speed: 1000,
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/" + (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">
makeSlider({
url: "http://blogsmanado.blogspot.com/" // Add your blog URL
});
</script>
1.) Mengedit HTML Anda & CSS Per Kebutuhan Anda. Jika Kurang memahami ikuti saja caranya disini.
No comments:
Write komentar