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

You may have come across on many blogs with content slider with cool slideshows. Just Wondering, I also need this slider for my blog, but don’t want to add every new post to it manually because it will take a huge time and I have also other to do. Then finally I solved this problem and also shared here. In this post we are going to discuss about How to implement this Light-weight EasySlider jQuery to slide a slider for blogger . This slider is a light-weight and responsive slider and free to use, which is also one of the most used Sliders in all kind websites and blogs.As a blogger you need a widget or something that shows your recent post to make your blog a live and interactive. Recent posts slider is a best way to show of you blog’s recent posts as a slide show.You may see the slider such slider in many wordpress blogs but when coming to blogger it is certainly not much seen.If you are thinking that customization’s will be hard then you are wrong,this gadget is very easy to customize and very easy to add.You don’t need to add images,text or any links like other sliders all is Automatic :D.Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and generate more clicks to your site.This gadget displays your most recent posts and includes a small description and also full post title with light background that also make it more cool then it is. But has the added bonus of using an animated effect that moves smoothly through the posts.T here are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I’ve found are not really suitable for a beginner because as I said before that they want manually added data and this will not ask you anything anytime just after adding it.DEMO SreenShootFeatures:1.) Awesome And Stylish Featured Slider.2.) Simple To Use And Easy To Add.3.) Quick Loading Time.4.) J-Query 1.6 Added. (Don;t Add If You Have This One)5.) Automatic Slider.6.) Slides Will Be Taken From Latest Blog Post Automatically.7.) Don’t Need To Update This Slider Manually.8.) Slide Can Be Control Upto Your Desire.9.) Post Title And A Few Words From Post Start Will Be Also Shown.10.) Text Will Be On Slide With Light Background.11.) Professional Look.12.) Fully Customizable.13.) You Can Control What To Show Or What To Not.14.) Can Show It On Your Desired Page/Post.(Contact Us If You Want This Option)15.) Manually Next/Prev Image Button Added.16.) NoImage Thumbnail Will Be Shown If Your Blog Post Didn’t Have Any Image.17.) Automatic Slider Will Be Turned Off If Used Manually.18.) Latest/Recent Blog Post Will Be Fetched From RSS.19.) EasySlider Code Used To Be Slide.20.) Fully Changeable CSS Added.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.) Press [CTRL+F] To Search Code.7.) Now Copy The Below Code And Paste It Before Code..8.) Click “Save Template” And Done. // // '); for (var i = 0; i numPosts) { numposts_gal = numPosts } for (i = 0; i < numposts_gal; ++i) { var entry_gal = json.feed.entry[indexPosts[i]]; var posttitle_gal = entry_gal.title.$t; for (var k = 0; k < entry_gal.link.length; k++) { if (entry_gal.link[k].rel == 'alternate') { posturl_gal = entry_gal.link[k].href; break } } if ("content" in entry_gal) { var postcontent_gal = entry_gal.content.$t } s = postcontent_gal; a = s.indexOf(" '); document.write(posttitle_gal + ' '); var re = / ]*>/g; postcontent_gal = postcontent_gal.replace(re, ""); if (showpostsummary_gal == true) { if (postcontent_gal.length ') } else { postcontent_gal = postcontent_gal.substring(0, numchars_gal); var quoteEnd_gal = postcontent_gal.lastIndexOf(" "); postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal); document.write(postcontent_gal + '...'); document.write(' ') } } document.write(' '); document.write(' ') } document.write(' ')}//]]> #slide-container {position: relative;height: 250px;width: 550px;font-family: calibri;}.slide-desc {background: transparent url(https://lh4.googleusercontent.com/-Gwj5tWXtzvg/U0dQmwblIJI/AAAAAAAANgg/PxMxSsyaKbw/s5/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 5px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;line-height:20px;}.slide-desc h2 {display: block;}#slider li {width: 550px;height: 250px;overflow: hidden;margin: 0;padding: 0;list-style: none;}#prevBtn, #nextBtn {display: block;width: 30px;height: 77px;position: relative;left: -30px;text-indent: -9999px;top: -150px;z-index: 99999999;}#nextBtn{left: 550px !important;top: -225px;}#prevBtn a, #nextBtn a {display: block;position: relative;width: 30px;height: 77px;background: url(https://lh4.googleusercontent.com/-EHVvsQ5fX9I/U0X8PVTpraI/AAAAAAAANdE/IoMKaNrBoSM/s30/Left-Double-Black-Arrow.png) no-repeat 0 0;}#nextBtn a {background: url(https://lh3.googleusercontent.com/-OY9I57xINJA/U0X8PWoUexI/AAAAAAAANdA/5w-W78xEgqw/s30/Right-Double-Black-Arrow.png) no-repeat 0 0;} 9.) Then To “Layout“.10.) Click “Add A Gadget” Where You Want To Add It.11.) Now Scroll To “HTML-JAVASCRIPT”12.) Click “+” Icon To Add It.13.) Now Copy The Below Code And Paste It To There.14.) Leave The Title Empty.15.) Click Save, Now You Are Done. Customization:1.) Change auto: true, To auto: false, To Stop Automatic Start Slider.2.) Change continuous: true To continuous: false To Stop Continuous Slider.3.) Change var showpostthumbnails_gal = true; To var showpostthumbnails_gal = false; To Hide Post Pic In Slider.4.) Change var showpostsummary_gal = true; To var showpostsummary_gal = false; To Hide Summary Of Post.5.) Change var random_posts = false; To var random_posts = true; To Show Random Post Instead Of Latest One.6.) Change var numchars_gal = 150; To var numchars_gal = any#; To Increase/Decrease Summary Length.7.) Change var numposts_gal = 10; To var numposts_gal = any#; To Change The Post Count In Slider.8.) Change var img_width = 550; To var img_width = any#; To Change he Width Of Image In Slider And Also In CSS Red Text Too.9.) Change var img_height = 250; To var img_height = any#; To Change The Height Of Image In Slider And Also In CSS Red Text Too.10.) Change www.exeideas.com With Your Blog URL.From My Side:Your questions,queries and feedback are always welcome.Also if you need any help about customizing this gadget then feel free to ask me.I’ll glad to help you…