Automatic Recent Posts Slider With jQuery For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="post hentry"><div class="separator" style="clear: both; text-align: center;"><a href="http://draft.blogger.com/blogger.g?blogID=2377571801251927013" name="8410303999780068786"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y5g4ecZ8QF_K0DI25Nbz1PEpGOBp66j9K1fGhEl7gba_RInD5ln1sZOu3y26usyX9oNSZJWsMxyEVeEioQ0XdLYKeAv_9-I47DYbsUh0zHhdQprHEygzR4wo6sl1ixqvX3HJt77z9DM/s1600/recent-content-image-slider-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y5g4ecZ8QF_K0DI25Nbz1PEpGOBp66j9K1fGhEl7gba_RInD5ln1sZOu3y26usyX9oNSZJWsMxyEVeEioQ0XdLYKeAv_9-I47DYbsUh0zHhdQprHEygzR4wo6sl1ixqvX3HJt77z9DM/s320/recent-content-image-slider-for-blogger.png" width="320" /></a></div><div class="post-body entry-content"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><br /><br />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.This widget is shared by Abu-Farhan and using my own tricks further I customized this plugin to works perfect with your blog.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.  Here I am giving a tutorial about adding recent post slider to blogger.First take a preview on slider.<br /><br /><br /><br /><div style="text-align: center;"><span style="color: #38761d; font-family: 'Courier New', Courier, monospace; font-size: large;"><b>Live Demo ▼</b><br /></span></div><br /><div id="slider"><script src="http://code.helperblogger.com/easySlider.min.js"></script><br /><script> var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts </script><br /><!-- replace with your web address (marked with red color) --><br /><script src="http://ajabingung.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script><br /></div></div><br /><br /><h3>How To Add This Slider To Blogger?</h3><br /><br /><h4>Step 1 - Applying Styles</h4><br /><br /><ol style="text-align: left;"><li>Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template)</li><li>As always download a copy of your template first.</li><li>Now find for ]]></b:skin></li><li>Add below code <b>just before</b> <span style="background-color: #f9cb9c;">]]></b:skin></span></li></ol></div><br /><br /><pre><code>/* START EasySlider By helperblogger.com */<br /><br />#slide-container {<br /> height: 360px;<br /> position: relative;<br /> width: 480px;<br />}<br /><br />#slider {<br /> height: 360px;<br /> left: 25px;<br /> overflow-x: hidden;<br /> overflow-y: hidden;<br /> position: relative;<br /> width: 480px;<br /> font-family: calibri;<br />}<br /><br />.slide-desc {<br /> background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;<br /> color: #FFFFFF;<br /> padding: 10px;<br /> position: absolute;<br /> right: 0px;<br /> text-align: left;<br /> top: 0;<br /> width: 200px;<br /> z-index: 99999;<br />}<br /><br />.slide-desc h2 {<br /> display: block;<br />}<br /><br />.crosscol .widget-content {<br /> position: relative;<br />}<br /><br />#slider ul, #slider li,<br /><br />#slider2 ul, #slider2 li {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br />}<br /><br />#slider2 {<br /> margin-top: 1em;<br />}<br /><br />#slider li, #slider2 li {<br />/*<br /><br />define width and height of list item (slide)<br /><br />entire slider area will adjust according to the parameters provided here<br /><br />*/<br /> width: 480px;<br /> height: 360px;<br /> overflow: hidden;<br />}<br /><br />#prevBtn, #nextBtn,<br /><br />#slider1next, #slider1prev {<br /> display: block;<br /> width: 30px;<br /> height: 77px;<br /> position: absolute;<br /> left: -30px;<br /> text-indent: -9999px;<br /> top: 71px;<br /> z-index: 1000;<br />}<br /><br />#nextBtn, #slider1next {<br /> left: 520px !important;<br />}<br /><br />#prevBtn, #nextBtn, #slider1next, #slider1prev {<br /> display: block;<br /> height: 77px;<br /> left: 0;<br /> position: absolute;<br /> top: 132px;<br /> width: 30px;<br /> z-index: 1000;<br />}<br /><br />#prevBtn a, #nextBtn a,<br /><br />#slider1next a, #slider1prev a {<br /> display: block;<br /> position: relative;<br /> width: 30px;<br /> height: 77px;<br /> background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;<br />}<br /><br />#nextBtn a, #slider1next a {<br /> background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;<br />}<br /><br />/* numeric controls */<br /><br />ol#controls {<br /> margin: 1em 0;<br /> padding: 0;<br /> height: 28px;<br />}<br /><br />ol#controls li {<br /> margin: 0 10px 0 0;<br /> padding: 0;<br /> float: left;<br /> list-style: none;<br /> height: 28px;<br /> line-height: 28px;<br />}<br /><br />ol#controls li a {<br /> float: left;<br /> height: 28px;<br /> line-height: 28px;<br /> border: 1px solid #ccc;<br /> background: #DAF3F8;<br /> color: #555;<br /> padding: 0 10px;<br /> text-decoration: none;<br />}<br /><br />ol#controls li.current a {<br /> background: #5DC9E1;<br /> color: #fff;<br />}<br /><br />ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {<br /> outline: none;<br />}<br /><br />/* END EasySlider By helperblogger.com */<br /></code></pre><br /><br /><br /><br />You can edit above CSS values as you wish.You may use our <a href="http://editor-btsnts.blogspot.com/" target="_blank">HTML Editor</a> to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor)<br /><br /><br /><br /><h4>Step 2 - Adding JavaScript</h4><br /><br /><ul style="text-align: left;"><li>Now find for </body> tag</li><li>Add below code just <b>after/below</b> <span style="background-color: #ea9999;"></body></span> tag.</li></ul></div><br /><br /><pre><code><!-- Start easy content slider by helperblogger.com --><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script><br /><script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function(){<br /> $("#slider").easySlider({<br /> auto: true,<br /> continuous: true<br /> });<br />});<br />//]]><br /></script><br /><!-- End easy content slider by helperblogger.com --><br /></code></pre><br /><br /><br /><br />Now save your template.<br /><br /><br /><br /><h4>Adding The Gadget</h4><ul style="text-align: left;"><li>Now go to Page Layout</li><li>Add a Gadget > HTML/JavaScript</li><li>Paste below piece of code and save it.</li></ul><br /><br /><pre><code><div id="slider"><br /><script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script><br /><script style="text/javascript"><br /> var numposts_gal = 6;<br /> var numchars_gal = 150;<br /> var random_posts = false; // random posts<br /></script><br /><!-- replace with your web address (marked with red color) --><br /><script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script><br /></div><br /></code></pre><br /><br /><br /><br /><br /><br /><ul style="text-align: left;"><li>Now replace <code>yourblog.blogspot.com</code> with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.</li></ul><br /><br /><br /><br /><ul style="text-align: left;"><li>To change number of post find this <code>var numposts_gal = 6;</code> line in above code. (Code Line - 4)</li></ul><br /><br /><br /><br /><ul style="text-align: left;"><li>If you want to change number of characters to show in description find this piece of code <code>var numchars_gal = 150;</code> (Code Line - 5)</li></ul><div>Now save your all the changes and you are done.Visit your blog to see this beautiful slide.</div><div><br /><br /></div><blockquote class="tr_bq">Follow this <a href="http://www.helperblogger.com/2012/03/how-to-displayhide-blogger-widgets-on.html" target="_blank">tutorial</a> to show this gadget only on specific page or only in homepage.</blockquote><div><br /><br /></div><div>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.</div><div>Good day....</div></div>By: http://www.helperblogger.com/<br /><div style="clear: both;"></div></div><div class="post-footer"><div class="post-footer-line post-footer-line-1"></div><div class="post-footer-line post-footer-line-2"></div><div class="post-footer-line post-footer-line-3"></div></div></div></div>

Automatic Recent Posts Slider With jQuery For Blogger

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 wordpres...

Baca selengkapnya »

Automatic Recent Posts Slider With jQuery For Blogger

<br /><br /><br /><br /><br /><br /><pre><textarea style="height: 78px; width: 597px;"><!-- Start easy content slider by helperblogger.com --><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script><br /><script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function(){<br /> $("#slider").easySlider({<br /> auto: true,<br /> continuous: true<br /> });<br />});<br />//]]><br /></script><br /><!-- End easy content slider by helperblogger.com --><br />




Now save your template.

Step 3 -Adding The Gadget

• Now go to Page Layout


• Add a Gadget > HTML/JavaScript


• Paste below piece of code and save it.

<div id="slider"><br /><script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script><br /><script style="text/javascript"><br /> var numposts_gal = 6;<br /> var numchars_gal = 150;<br /> var random_posts = false; // random posts<br /></script><br /><!-- replace with your web address (marked with red color) --><br /><script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script><br /></div><br />

• Now replace yourblog.blogspot.com with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.


• To change number of post find this var numposts_gal = 6; line in above code. (Code Line - 4)


• If you want to change number of characters to show in description find this piece of code var numchars_gal = 150; (Code Line - 5)

Now save your all the changes and you are done.Visit your blog to see this beautiful slide.

Follow this tutorial to show this gadget only on specific page or only in homepage.

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.

Good day....

By: http://www.helperblogger.com/

Automatic Recent Posts Slider With jQuery For Blogger

Now save your template. Step 3 -Adding The Gadget Now go to Page Layout Add a Gadget > HTML/JavaScript Paste below piece of code and save...

Baca selengkapnya »

Edit CSS in the Template Designer

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="answer_heading"><h2 class="answer-title"> </h2></div><div class="article_content article-content-175740" id="article-content-div">Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of <b>cascading style sheets</b> (CSS). To add custom CSS snippets to your template, go to the <b>Template</b> <a class="zem_slink" href="http://en.wikipedia.org/wiki/Tab_key" rel="wikipedia nofollow" target="_blank" title="Tab key">tab</a> and click <b><a class="zem_slink" href="http://www.tumblr.com/customize" rel="homepage nofollow" target="_blank" title="Customize">Customize</a></b>. Then, add your code to the field located in the<b> Advanced | Add CSS</b> tab. Changes you make will reflect instantly in a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Live_preview" rel="wikipedia nofollow" target="_blank" title="Live preview">live preview</a> beneath the editor.<br /><img height="228" src="http://storage.googleapis.com/support-kms-prod/SNP_2907889_en_v0" width="550" /><b>Note:</b> Editing CSS allows you to change the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Look_and_feel" rel="wikipedia nofollow" target="_blank" title="Look and feel">look and feel</a> of your blog. For changes to the actual content of your blog, including the adding of gadgets or changes to the layout, click <b>Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia nofollow" target="_blank" title="HTML">HTML</a></b> on the <b>Template</b> tab. Also remember that, like other customizations, your CSS will be removed if you change designs.<br />For a comprehensive list of various CSS tweaks, please see the <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=41954">What can I do with CSS</a> article in our Help Center.</div><div class="last-updated">updated 02/15/2013 </div><div class="zemanta-pixie"><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div></div>

Edit CSS in the Template Designer

Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of cascading style ...

Baca selengkapnya »

Edit CSS in the Template Designer

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="answer_heading"><br /><h2 class="answer-title"><br /><br /></h2><br /></div><br /><div class="article_content article-content-175740" id="article-content-div"><br />Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of <b>cascading style sheets</b> (CSS). To add custom CSS snippets to your template, go to the <b>Template</b> <a class="zem_slink" href="http://en.wikipedia.org/wiki/Tab_key" rel="wikipedia nofollow" target="_blank" title="Tab key">tab</a> and click <b><a class="zem_slink" href="http://www.tumblr.com/customize" rel="homepage nofollow" target="_blank" title="Customize">Customize</a></b>. Then, add your code to the field located in the<b> Advanced | Add CSS</b> tab. Changes you make will reflect instantly in a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Live_preview" rel="wikipedia nofollow" target="_blank" title="Live preview">live preview</a> beneath the editor.<br /><br /><img height="228" src="http://storage.googleapis.com/support-kms-prod/SNP_2907889_en_v0" width="550" /><br /><b>Note:</b> Editing CSS allows you to change the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Look_and_feel" rel="wikipedia nofollow" target="_blank" title="Look and feel">look and <br />feel</a> of your blog. For changes to the actual content of your blog, <br />including the adding of gadgets or changes to the layout, click <b>Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia nofollow" target="_blank" title="HTML">HTML</a></b> on the <b>Template</b> tab. Also remember that, like other customizations, your CSS will be removed if you change designs.<br /><br />For a comprehensive list of various CSS tweaks, please see the <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=41954">What can I do with CSS</a> article in our Help Center.</div><br /><div class="last-updated"><br />updated<br />02/15/2013<br /></div><br /><div class="zemanta-pixie"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div><br /></div><br />

Edit CSS in the Template Designer

Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of cascading style s...

Baca selengkapnya »