.

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 .


13 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
  10. <a href="https://cado188bet.blogspot.com/>https://cado188bet.blogspot.com/</a>

    ReplyDelete
  11. INSTEAD OF GETTING A LOAN,,  I GOT SOMETHING NEW
    Get $5,500 USD every day, for six months!

    See how it works
    Do you know you can hack into any ATM machine with a hacked ATM card??
    Make up you mind before applying, straight deal...

    Order for a blank ATM card now and get millions within a week!: contact us
    via {automatedcardsonline@gmail.com}

    We have specially programmed ATM cards that  can be use to hack ATM
    machines, the ATM cards can be used to withdraw at the ATM or swipe, at
    stores and POS. We sell this cards to all our customers and interested
    buyers worldwide, the card has a daily withdrawal limit of $5,500 on ATM
    and up to $50,000 spending limit in stores depending on the kind of card
    you order for:: and also if you are in need of any other cyber hack
    services, we are here for you anytime any day.

    Here is our price lists for the ATM CARDS:

    Cards that withdraw $5,500 per day costs $200 USD
    Cards that withdraw $10,000 per day costs $850 USD
    Cards that withdraw $35,000 per day costs $2,200 USD
    Cards that withdraw $50,000 per day costs $5,500 USD
    Cards that withdraw $100,000 per day costs $8,500 USD

    make up your mind before applying, straight deal!!!

    The price include shipping fees and charges, order now: contact us via
    email address:: {automatedcardsonline@gmail.com

    ReplyDelete
  12. calculate contact form 7 is free plugin for calculate field between each other in contact form 7

    Popup message contact form 7 is free plugin for open popup after success and failed button

    ReplyDelete
  13. Hi, Nice article. Thank you for the article. Please see my article about Best WordPress Slider Plugin.

    ReplyDelete

© Copyright 2012, Template style of Haseeb malik - Design by Haseeb malik.