12 April 2013

Add A Attractive SlideShow Widget for Blogger Blog

jQuery is a compressive form of JavaScript and has great ability to improve blog appearance. As a developer point of view, it seems to be one of the greatest language which can easily modified your existing CSS entities as previous we launched a tricks, which enable Bloggers blog to display Adsense ad in between the articles, only jQuery make it possible and you can read complete article from here.

But here we talking about slideshow widget jQuery enables user to easily make slideshow widget that's why we are using it. If we talk about slideshow widget, it has very useful application in blogs you can represent important article, pages and services to readers in a professional manner. Many big blogs generally use this widget, if you are also interested to use this widget for Blogger blog then follow the steps.

How To Install Slideshow Widget To Blog

  1. Log in to Blogger dashboard.
  2. Click on your blog title and then choose Layout option from left side menu.
  3. Click Add a Gadget button and choose HTML / JavaScript from list. 

  1. Now paste the following code within the text box appeared.
<!--Code at www.allbloggingtricks.com-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
   $('#btrix_slider3').s3Slider({ 
      timeOut: 3000
   }); 
}); 
</script>
<style>
#btrix_slider3 {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#btrix_slider3Content {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.btrix_slider3Image {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.btrix_slider3Image span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}
</style>

<br />
<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image"> 
<img src="http://3.bp.blogspot.com/-cWRM9k-TjHg/UWftkRbSjBI/AAAAAAAAC3Y/x51llDlRvkY/s1600/1.jpg" /> 
<span class="left"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span> 
</li>
<li class="btrix_slider3Image"> 
<img src="http://2.bp.blogspot.com/-gGIB0ZidIHg/UWftkSVe-UI/AAAAAAAAC3c/oP81rya0UY4/s1600/2.jpg" /> 
<span class="left"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span> 
</li>
<li class="btrix_slider3Image"> 
<img src="http://1.bp.blogspot.com/-3is-vmPTmGI/UWftkffjuHI/AAAAAAAAC3g/snGy5UH5zkw/s1600/3.png" /> 
<span class="top"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span>
</li>
<li class="btrix_slider3Image"> 
<img src="http://4.bp.blogspot.com/-rHjVa2jba_U/UWftlBmpHhI/AAAAAAAAC3w/8yMencJfHNY/s1600/5.jpg" /> 
<span class="bottom"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span> 
</li>
<li class="btrix_slider3Image"> 
<img src="http://1.bp.blogspot.com/-f-3f9LZRVgg/UWftlJ5iqqI/AAAAAAAAC30/RzkkgDEe9bM/s1600/4.png" /> 
<span class="bottom"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
<br />
<!--Code at www.allbloggingtricks.com-->
  1. And drag this widget from sidebar to above the Blog Posts area as in figure below.
Finally click Save arrangement and see the result on your blog.

Modification

  • Replace HEADING HERE and DESCRIPTION HERE with corresponding image details.
  • If you want to use different image, change all URL with other image URLs.
If you have further query or suggestion related to this topic, you can make comment below.

More articles.

78 comments:

  1. very helpful post.thanks a lot.

    Regards,
    http://genuinecontent.blogspot.com

    ReplyDelete
  2. Visiting your blog after 3 months Shahabz. Great post as usual. But I have a small complaint. For new visitors its little difficult to locate topics in your blog. Please do something on that... (it took more than 15 minutes to locate your post on face book like menu bar)

    All the best :)

    ReplyDelete
  3. Your information is really useful. Thanks a lot.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. That is really great..
    do visit my health and travel blog at
    www.yelisyengkhoiba.blogspot.com

    ReplyDelete
  6. A very informative article and lots of really honest and forthright comments made! This certainly got me thinking a lot about this issue so thanks a lot for posting!
    residential painter

    ReplyDelete
  7. Nice Sharing its really helpful you doing a great job and you explain all things very deeply.
    Regards:
    __**Your All Choices**__

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. I guess this will be a useful info for my friend, so defiantly will portion this with him.

    ReplyDelete
  10. Really, a photo slideshow increases the beauty of your blog. But I would like to say about post slide show. With a post slideshow you can show most popular posts on a slideshow. I have shared how to add a post slideshow in Blogger

    ReplyDelete
  11. Awesome Slideshow widget, thank you so much

    ReplyDelete
  12. great! nice! easy to use. thank you.

    ReplyDelete
  13. comments widget should be awesome like yours because it helps in building relationship with readers and engaging conversation ,many of the top bloggers like you have written about it and also give importance to it.thanks for sharing.comments widget for blogger

    ReplyDelete
  14. nice share of this tutorial. Good job.

    ReplyDelete
  15. Very nice. But when i put in my blog...it somehow appears on the left rather than in the centre. I'm using a blogger template. Is it because of that? Thanks

    ReplyDelete
  16. AWESOME POST..EXCELLENT JOB...GRT...THANX..

    ReplyDelete
  17. Great slide show! Is there a code to control the speed of the images being shown? Thanks for your reply

    ReplyDelete
    Replies
    1. Adjust timeOut: 3000 factor where 3000 is in milli seconds.

      Delete
  18. Nice Post.Good Looking Templated.I Liked It.Keep Posting.

    Visit My Blog If you Want Learn More Pro Tricks.
    http://protrickshub.blogspot.com

    ReplyDelete
  19. Nice post, thanks for your help.

    ReplyDelete
  20. Trying to figure out how to add this functionality to a PAGE. Anyone?

    ReplyDelete
    Replies
    1. i want that too . pls let me know if u have figured it out by now.

      Delete
  21. nice post admin thanks for sharing

    ReplyDelete
  22. Wow what a great slideshow! Is there anyway to remove the grey box and heading/description?

    ReplyDelete
  23. how to remove my slideshow ?? http://androidfree2k.blogspot.com/

    ReplyDelete

  24. Hello,please can you solve my problem.I want to post some Ques/Ans in my blog and for that i want that Answer will disclose after clicking on Answer button and answer will open in a short window you can chek it on the link http://indiagktime.blogspot.in/
    then use click me button to see answer so
    How can i code this. please tell me.

    ReplyDelete
  25. AWESOME POST..EXCELLENT JOB...GRT...THANX..
    With Regard`s
    AllLoveBooks.com
    visit at - http://www.alllovebooks.com/

    ReplyDelete
  26. Okay, sounds easy enough I'll test it out. :-) Thanks. I'm assuming I have to put the pictures on flicker or some other server type.

    ReplyDelete
  27. Hi. I'm using this and have been modifying it a little bit for my blog. It looks awesome so far, but I have a little problem. Since the slideshow is placed right above the "Blog Posts" area, it stays as a main part of the page, no matter how you go about navigating the page. Is there any way to make this appear only on the homescreen?

    ReplyDelete
  28. hi can you tell me how I change the size of slide to ajust in my home page.

    ReplyDelete
  29. You are the man Shahabz Malik. This is the perfect type of slide I was looking for. Thanks a lot.

    ReplyDelete
  30. Thank you ! but i look for automatic slide show




    lose your weight

    ReplyDelete
  31. Good information sharing with us. Thanks for your blog. Everetttravels is the best India Tourism company. - http://www.everetttravels.com/India-Tourism.html

    ReplyDelete
  32. You are a lifesaver! I’ve been looking everywhere for this, and am I excited! It works
    perfectly! Thank you so much for this awesome tutorial!

    ReplyDelete
  33. Very nice and cool sharing nice sharing admin
    Please Visit www.wallz1.com for Hd Wallpapers

    ReplyDelete
  34. Muito Bom Gostei imenso , onde é para defenir os tamanhos?

    ReplyDelete
  35. This really good!!
    Please can u tell me how to make it come only on the homescreen?

    ReplyDelete
  36. Thanks a lot for the code. Could you kindly tell me on how to make the slideshow repeat itself so that the pictures are repeating itself. Many thanks in advance :)

    ReplyDelete
  37. how to fit slideshow on the page haeder

    ReplyDelete
  38. Hi,
    I need a Code for Chain Slider. Can any one help me?

    ReplyDelete
  39. very nice tip, awesome.. one question though, say i want to remove the heading and description pan so that to the slide show can view photos only.. how will i do that? thanks

    ReplyDelete
  40. It worked for me, but I can't seem to get rid of the < li >, the listing on the left bottom next to the pictures. Any ideas?

    Post at:
    http://www.thebudgetdiary.com/

    ReplyDelete
  41. kindly use your twitter. am having problems with the slide show

    ReplyDelete
  42. very very nice! is it possible to place a entire album (more than 30 pictures) from a picasa webalbum?

    ReplyDelete
  43. Thanks, this was exactly what I needed..

    ReplyDelete
  44. Paypalmoneyadder2013-2014.blogspot.com
    http://live-web-tv.blogspot.com
    http://steamwallethacks2014.blogspot.com
    http://riot-generator-points.blogspot.com
    http://gta-2014.blogspot.com
    http://grandtheftauto05.blogspot.com

    ReplyDelete
  45. a place where you can latest news and other news
    visit this
    http://www.newsmarkaz.net/

    ReplyDelete
  46. Love this and got it to work ok but how do I slow it down??
    thanks in advance

    ReplyDelete
  47. Thanks for sharing. nice. admin

    ReplyDelete
  48. thanks for sharing useful information.I am very much interested in reading articles. This blog was really an awesome site which I had never found it anywhere. Lots of stuff in this site ! Really helpful for most of them

    ReplyDelete
  49. nice information,thanx for great article.

    ReplyDelete
  50. How Can I make it slide only in home page?

    ReplyDelete
  51. If we talk about slideshow widget, it has truly helpful practice in blogs you can characterize critical stipulation, servants more utilitys to lecturers in a pro course. Numerous generous blogs largely employ this widget, if you are also attentive to use this widget for Blogger blog therefore chase the paces. FreeDebtConsolidationQuotes.com

    ReplyDelete
  52. Nice Post !
    Keep Posting , Good Luck !

    ReplyDelete
  53. Good POST ..One request post a Image of the Slider that helps more and more

    ReplyDelete
  54. Thank you Brother. Worked fine in my website.

    tomclancythedivision.blogspot.com

    ReplyDelete
  55. Hi
    How to make slider only for home page?

    ReplyDelete
  56. This post is very helpful for me. And it is a nice post about Add A Attractive SlideShow Widget for Blogger Blog. I like it a lot. Thanks

    clipping mask

    ReplyDelete
  57. Good Tutorial..

    For learning and spiritual lectures........ log on to;

    http://www.scoutshrm.blogspot.com

    ReplyDelete
  58. I liked the title.
    The article too is informative and useful. Great job.
    You can also visit
    www.greatesthackersite.blogspot.com for information regarding latest hacking and technology.

    ReplyDelete
  59. It's really a nice and helpful piece of information. I'm glad that you shared this helpful info with us. Please keep us informed like this. I want to say it would supply up to !
    clipping path service company

    ReplyDelete
  60. will you visit my blog:
    http://disneyworldx.blogspot.com

    ReplyDelete
  61. Can you add this gadget or code to within Pages in Blogger?

    ReplyDelete
  62. Awesome post. Very informative. Have already implemented it on my site.
    SSC General Knowledge Question Paper

    ReplyDelete
  63. Thank you so much it is awesome

    ReplyDelete
  64. thank you boss on the share of a comment on the widget, and greetings blogwalking

    Obat Perangsang Wanita

    ReplyDelete

Related Post