Stylish And Awesome Blogger Feed Rotator Widget

This Article Was Live On December 10th, 2015 And So Far Have: 0 Comments...
Last Updated on December 10th, 2015

Blogger Slider is really a widget pertaining to blogger that can show your recent posts of one’s desired blog with great and amazing interface. This widget updates routinely and there is no need to edit the widget and create images, titles and also description over and over. You simply have to add your URL with the blog and your setup will be complete.

Now there are many one available only but not features are ok to use them because you have to watch out your loading time too so think twice before using the codes on your web that can make your loading time high of bad SEO effect. But this one is light weight and have to bunch of codes. All is here you you also do not have to hit any others URLs. Now go for it and garb the code to use it.

CLICK HERE TO SEE DEMO

Table of Contents

Features:

1.) Pure JavaScript JQuery Added.
2.) JQuery File Added.
3.) CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.
6.) Work With Any Blogger Domain.
7.) Can Set The Post Count Too.
8.) Stylish In Design.
9.) Loading Icon.
10.) Pick Image, Text, Title.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Layout”.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now “Copy” The Below Code And “Paste” It To There.
8.) Leave The “Title” Empty.
9.) Click “Save”, Now You Are Done.

Recommended For You:

6 Social Media Tricks You MUST Have Up Your Sleeve

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('data:image/gif;base64,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');
 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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://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.dte.web.id",
 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: "&lt;",
 next: "&gt;"
 },
 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) + "&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://netzspot.blogspot.com/" // Add your blog URL
});
</script>

Customization:

1.) Change your Blog URL and go for editing in JavaScript if you can or we are here to help you out. Rest is good to go..

Recommended For You:

Powerful Tips To Optimize Your Website For Local SEO

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…