Thursday, 18 October 2012

Recent post slider widget for blogger

Recent post slider in blog
Recent post slider in blog
hello everyone today i,m going to teach you a new thing which is really cool and you going to love this. You know some blogs has a slider for images and other things but now i,m telling you that how to add recent post slider in blogger.com blog It is really simple and you can install it without any html knowledge . You can see it's demo first so that you can decide it is good for your blog or not.

Now if you want to install this script in blogger you have to do some step's .
  • Goto blogger
  • then in dashboard
  • then go in layout 
  • then add a gadget and select html/javascript
  • now paste the following code in it 
<style>#slide-container {height: 360px;position: relative;width: 480px;}#slider {height: 360px;left: 25px;overflow-x: hidden;overflow-y: hidden;position: relative;width: 480px;font-family: calibri;}.slide-desc {background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 10px;position: absolute;right: 0px;text-align: left;top: 0;width: 200px;z-index: 99999;}.slide-desc h2 {display: block;}.crosscol .widget-content {position: relative;}#slider ul, #slider li,#slider2 ul, #slider2 li {margin: 0;padding: 0;list-style: none;}#slider2 {margin-top: 1em;}#slider li, #slider2 li {/*define width and height of list item (slide)entire slider area will adjust according to the parameters provided here*/width: 480px;height: 360px;overflow: hidden;}#prevBtn, #nextBtn,#slider1next, #slider1prev {display: block;width: 30px;height: 77px;position: absolute;left: -30px;text-indent: -9999px;top: 71px;z-index: 1000;}#nextBtn, #slider1next {left: 520px !important;}#prevBtn, #nextBtn, #slider1next, #slider1prev {display: block;height: 77px;left: 0;position: absolute;top: 132px;width: 30px;z-index: 1000;}#prevBtn a, #nextBtn a,#slider1next a, #slider1prev a {display: block;position: relative;width: 30px;height: 77px;background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;}#nextBtn a, #slider1next a {background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;}/* numeric controls */ol#controls {margin: 1em 0;padding: 0;height: 28px;}ol#controls li {margin: 0 10px 0 0;padding: 0;float: left;list-style: none;height: 28px;line-height: 28px;}ol#controls li a {float: left;height: 28px;line-height: 28px;border: 1px solid #ccc;background: #DAF3F8;color: #555;padding: 0 10px;text-decoration: none;}ol#controls li.current a {background: #5DC9E1;color: #fff;}ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {outline: none;}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts
</script>
<script src="http://haseebnet.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

  • Now replace haseebnet.blogspot.com with your blog address
  •    var numposts_gal = 6; var numchars_gal = 150; adjust it with your need
Code source: Lordhtml.blogspot.com
Thank you very much for reading this article if you want any help about this topic or about any other topic please ask me .


9 comments:

  1. simple and lightweight.. Nice.... thks for the info.. would be useful on my upcoming projects :-)

    ReplyDelete
  2. thx

    i use it on http://secondwinner.blogspot.com/ :D

    ReplyDelete
  3. Thanks that is so easy to install, my blog is http://facebooktopic.blogspot.com/

    ReplyDelete
  4. Great widget, is there any way to slow down the speed of the slideshow? Thanks!

    ReplyDelete
  5. i heard that such widget also helps in reducing the bounce rate so i think that recent post widget should be more attractive so that it can engage the user and we can get more pageviews.and i think your widget will do this job for me.thanks for sharing.http://indiamp3song.blogspot.in

    ReplyDelete
  6. http://newsmarkaz.blogspot.com/

    Watch Latest News IN this Blog

    ReplyDelete
  7. I edited some values and now the text doesn't move with the images. The thumbnails slide, but the text is the same.

    ReplyDelete
  8. With increasing importance of social media marketing in the corporate world, Twitter is oneof the lucrative opportunities for business managers to promote their products and services.Hence increasing the number of followers on your corporate Twitter account would mean more and more people are receiving your marketing messages and enhancing your capabilities to attract potential new customers. Large numbers of followers on an account also reflects the credibility and reliability of the Twitter account. Keeping these benefits in view, many small companies have established an offer to increase followers in return for a nominal fee.
    They provide you with user ids of followers that you can add to your company’s account and buy real twitter followers. The payment is quite appropriate and attracts a lot of companies which are looking to enhance their customer following.

    ReplyDelete
  9. hi there,

    i have this problem with my blog:

    •"This is default featured post X title" with your featured post title.
    •"#" with your featured post URL.
    •"Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com." with your slider description.
    •Slider image address with your slider image.


    i don't know what to replace this command so that the slides on my
    blog will be updated to my posts. I don't have any knowledge with
    html. if you can help me just provide the step by step instruction.

    i tried to contact the templates author many times but i haven't
    received any reply until now. hope you can be the one to help
    me and i will appreciate it very much

    thanks

    ReplyDelete