2013 July 15 Archive - EXEIdeas – Let's Your Mind Rock

After our previous post about How To Add Automatic Recent/Latest Posts JQuery Slider For Blogger? Here in this tutorial I will share a new and awesome code of automatic blog label thumbnail carousel slider for your blog to make it stylish and also decrease your blog bounce rates and increasing blog engaging with your visitors. All you have to do only replace with your own label and the slider will work based on the label that you add in the given code. This widget is only applicable for Blogger templates only.There are many features added in this slider and all of those are very useful and needed. Like you don’t have to update this slider after your every new post, it will automatically fetch your latest post from your RSS And will add it to his slider. These post will be shown as thumbnail and the title only that are ok to attach a visitor to click on it and to open it.From this you can also increase your SEO too like it will help you to decrease your bounce rate and also will increase your page-views and time on site count. You can engage your visitor in your awesome posted and it will also change your template style into awesome.Before going to the tutorial, you can see demo in screen-shoot available easily In which you can see two arrows at sliders ends that are button to slide it manually. Still it will remain slide automatically. The rest of hottest features are listed below, before using the code, you must have to know about all of these.CLICK HERE TO SEE DEMOFeatures:1.) Awesome And Stylish Design.2.) Speed Up Loading Time.3.) Quick To Install And Easy To Use.4.) SEO Friendly.5.) Will Decrease Your Bounce Rate.6.) Engage Your Readers In Your Awesome Articles.7.) Based Upon Carousel Slider Code.8.) J-Query 1.7.2 Added.9.) Contain HTML-CSS-JavaScript-JQuery-Images Only.10.) Automatically Fetch Latest Posts From Your Desired Label.11.) You Can Control Your Post Count Easily.12.) Automatic Slides After Your Desired Time.13.) Visitor Can Also Move Your Post Manually Through Buttons.14.) It Will Show Post Top Image Thumbnail And Post Title.15.) You Can Customized It’s Design Via Easy CSS.16.) You Can Also Change JQuery Code According To Your Desire.17.) It Will Remain Sliding Between Your Allowed Latest Post From Label.18.) You Can Add It Anywhere In Your Template Or Layout.19.) You Can Bound It To Display On Your Desired Page/Post.(How To Display Gadgets On Your Desire Page/Post In Blogger?)20.) Short And Easy Codes With A Lot Of Extra Customizations Easily.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Go To “Template“.4.) Click “Edit HTML“.5.) Now Click Within Code Box.6.) Go There Where You Want To Add This Slider.7.) Now Copy The Below Code And Paste It There. #carousel {width:950px;height:185px;margin-bottom:0;position:relative;display:block;}#carousel .container {position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center;}#carousel #previous_button {position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc;}#carousel #previous_button:hover {background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center;}#carousel #next_button {position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc;}#carousel #next_button:hover {background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center;}#carousel ul {width:100000px;position:relative;margin-top:10px;}#carousel ul li {background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin:0 4px 20px 7px;padding:6px;}#carousel ul li:hover {filter:alpha(opacity=75);opacity:.75;}#carousel ul li a.slider_title {color:#222;display:block;margin-top:5px;}#carousel ul li a.slider_title:hover {color:#cd1713;}#carousel a img {display:block;background:#fff;margin-top:0;} //<![CDATA[(function ($) {$.fn.jCarouselLite = function (o) {o = $.extend({btnPrev: null,btnNext: null,btnGo: null,mouseWheel: false,auto: null,speed: 200,easing: null,vertical: false,circular: true,visible: 3,start: 0,scroll: 1,beforeStart: null,afterEnd: null}, o || {});return this.each(function () {var running = false,animCss = o.vertical ? "top" : "left",sizeCss = o.vertical ? "height" : "width";var div = $(this),ul = $("ul:first", div),tLi = $(".car", ul),tl = tLi.size(),v = o.visible;if (o.circular) {ul.prepend(tLi.slice(tl - v - 1 + 1).clone()).append(tLi.slice(0, v).clone());o.start += v}var li = $(".car", ul),itemLength = li.size(),curr = o.start;div.css("visibility", "visible");li.css({overflow: "hidden",float: o.vertical ? "none" : "left"});ul.css({padding: "0",position: "relative","list-style-type": "none","z-index": "1"});div.css({overflow: "hidden","z-index": "2"});var liSize = o.vertical ? height(li) : width(li);var ulSize = liSize * itemLength;var divSize = liSize * v;li.css({width: li.width()});ul.css(sizeCss, ulSize + "px").css(animCss, -(curr * liSize));div.css(sizeCss, divSize + "px");if (o.btnPrev) $(o.btnPrev).click(function () {return go(curr - o.scroll)});if (o.btnNext) $(o.btnNext).click(function () {return go(curr + o.scroll)});if (o.btnGo) $.each(o.btnGo, function (i, val) {$(val).click(function () {return go(o.circular ? o.visible + i : i)})});if (o.mouseWheel && div.mousewheel) div.mousewheel(function (e, d) {return d > 0 ? go(curr - o.scroll) : go(curr + o.scroll)});if (o.auto) setInterval(function () {go(curr + o.scroll)}, o.auto + o.speed);function vis() {return li.slice(curr).slice(0, v)};function go(to) {if (!running) {if (o.beforeStart) o.beforeStart.call(this, vis());if (o.circular) {if (to = itemLength - v + 1) {ul.css(animCss, -((v) * liSize) + "px");curr = to == itemLength - v + 1 ? v + 1 : v + o.scroll} else curr = to} else {if (to itemLength - v) return;else curr = to}running = true;ul.animate(animCss == "left" ? {left: -(curr * liSize)} : {top: -(curr * liSize)}, o.speed, o.easing, function () {if (o.afterEnd) o.afterEnd.call(this, vis());running = false});if (!o.circular) {$(o.btnPrev + "," + o.btnNext).removeClass("disabled");$((curr - o.scroll itemLength - v && o.btnNext) || []).addClass("disabled")}}return false}})};function css(el, prop) {return parseInt($.css(el[0], prop)) || 0};function width(el) {return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight')};function height(el) {return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom')}})(jQuery)//]]> // ")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s = s.join("");s = s.substring(0,chop-1);return s;}function showrecentposts(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;img = new Array();document.write(' ');for (var i = 0; i < numposts1; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var pcm;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}for (var k = 0; k imgr.length-1) j=0;img[i] = imgr[j];s = postcontent ; a = s.indexOf(" ('+pcm+' '+text+') ' : '';var month = [1,2,3,4,5,6,7,8,9,10,11,12];var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day = postdate.split("-")[2].substring(0,2);var m = postdate.split("-")[1];var y = postdate.split("-")[0];for(var u2=0;u2 '+posttitle+'

';document.write(trtd);j++;}document.write(' ');}//]]> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;); (function($) { $(document).ready(function(){$(&quot;#carousel .container&quot;).jCarouselLite({auto:4000,scroll: 1,speed: 800,visible: 5,start: 0,circular: true,btnPrev: &quot;#previous_button&quot;,btnNext: &quot;#next_button&quot;});})})(jQuery) 8.) Click Save, Now You Are Done.Customization:1.) Don’t Add J-Query 1.7.2 If You Already Have It.2.) Change http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg With Your Desired Image To Show Where You Don’t Have Post Image.3.) Change false To true If You Want To Show Random Image From Your Post As Thumbnail.4.) Change true To false Is You Want To Stop Bolding Title Text.5.) Change 150 To Your Desired Summary Text Count. (Not Needed)6.) Change 25 To Your Desired Title Text Count.7.) Change 10 To Your Desired Post Count To Be Slide.8.) Change Your Label Name With Your Desired Label Name That’s Post You Want To Show In This Slider.9.) Change CSS According To Your Desire.10.) Save and Done…