Welcome visitor! Please wait till I load my blog page...

.......

Animated Recent posts for blogger with thumbnails and Simple Spy


Post this time I will teach you how to make a recent post with a thumbnail and simple spy. And certainly recent post that I made this time different from the others, because of recent post that I make the thumbnail appear in these widgets.Examples of recent post can be seen here Interest to make this widget. Please follow this instruction below :

  • 17+ Featured Content Slider for Blogger Using jQuery Tutorial



  • STEP #1
    Log in to Blogger, go to Design ->





    Add a Gadget of HTML/JavaScript type.



    <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>



    <style type="text/css" media="screen">



    <!--


    #spylist {



    overflow:hidden;



    margin-top:5px;



    padding:0px 0px;



    height:350px;



    }



    #spylist ul{



    width:220px;



    overflow:hidden;



    list-style-type: none;



    padding: 0px 0px;



    margin:0px 0px;



    }



    #spylist li {



    width:208px;



    padding: 5px 5px;



    margin:0px 0px 5px 0px;



    list-style-type:none;



    float:none;



    height:70px;



    overflow: hidden;



    background:#fff url(http://1.bp.blogspot.com/_AstD3fky-O0/TPqUOD822nI/AAAAAAAAALU/IqHlrBo0W6Y/s1600/bdlab-blogspot-com.jpg) repeat-x;



    border:1px solid #ddd;



    }







    #spylist li a {



    text-decoration:none;



    color:#4B545B;



    font-size:11px;



    height:18px;



    overflow:hidden;



    margin:0px 0px;



    padding:0px 0px 2px 0px;



    }



    #spylist li img {



    float:left;



    margin-right:5px;



    background:#EFEFEF;



    border:0;



    }



    .spydate{



    overflow:hidden;



    font-size:10px;



    color:#0284C2;



    padding:2px 0px;



    margin:1px 0px 0px 0px;



    height:15px;



    font-family:Tahoma,Arial,verdana, sans-serif;



    }







    .spycomment{



    overflow:hidden;



    font-family:Tahoma,Arial,verdana, sans-serif;



    font-size:10px;



    color:#262B2F;



    padding:0px 0px;



    margin:0px 0px;



    }


    -->



    </style>


    <script language='JavaScript'>


    imgr = new Array();



    imgr[0] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";


    imgr[1] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

    imgr[2] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";


    imgr[3] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";


    imgr[4] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";



    showRandomImg = true;



    boxwidth = 255;


    cellspacing = 6;



    borderColor = "#232c35";



    bgTD = "#000000";



    thumbwidth = 70;



    thumbheight = 70;



    fntsize = 12;


    acolor = "#666";



    aBold = true;



    icon = " ";


    text = "comments";



    showPostDate = true;



    summaryPost = 40;


    summaryFontsize = 10;


    summaryColor = "#666";


    icon2 = " ";


    numposts = 10;



    home_page = "http://24works.blogspot.com/";







    limitspy=4



    intervalspy=4000







    </script>







    <div id="spylist">



    <script src='http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/animated_recent_posts.js' type='text/javascript'></script>



    </div>

    <span style="font-size:5px;position:absolute;"><a title='Blogger Widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>


    Now Click Save



    Note :If your template already have a jquery do not put again, just copy after it
    Html from above a few things could be replaced :

    1. homepage address
    home_page = “http://24works.blogspot.com/”;

    2. Style

    from above style/css, you can change :

    width : 220px;
    width:208px:

    customize base on your template
    and
    background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
    or background:#fff url(http://1.bp.blogspot.com/_AstD3fky-O0/TPqUOD822nI/AAAAAAAAALU/IqHlrBo0W6Y/s1600/bdlab-blogspot-com.jpg) repeat-x;

    Customize the colors of backuground

    3. image size
    thumbwidth = 70;
    thumbheight = 70;

    Match your needs

    4. How many post you will show
    numposts = 10;

    Base on what you need to show












    UPDATE:  I updated some of my posts, this post I update Animated Recent posts for Blogger / Blogspot with thumbnails - Simple Spy........



















    Thanks to  abu-farhan because this widget has been combined with simple animation Spy.

    9 comments:

    1. sorry for asking, what did u mean by "Note :If your template already have a jquery do not put again, just copy after it" ? can you explain a little bit?

      ReplyDelete
    2. Good work, how to change their four thumnail these? one more question, and if not installed jquery homepage can you explain, thank you for the second question and of course I wait your answer.

      ReplyDelete
    3. Thank you so much super work
      It works to perfection

      ReplyDelete
    4. Hello, Friend.
      you are doing great job, wish you best of luck.

      ReplyDelete
    5. download free full version games from freegamezcity blogspot com

      ReplyDelete
    6. nice.
      http://my-techzine.blogspot.com

      ReplyDelete