Hottest Now: HSC English Suggestion 2014, SSC English Suggestion 2014, Get Affordable SEO Services from Us

Please Like Us

Saturday, April 13, 2013

How to Add Slideshow to Blogger - Blogger Widgets



How to Add Slideshow in Blogger
Today it is very common to have an own blog for oneself. But many of us have little knowledge of HTML, CSS and JavaScript.  So what, can’t you create a professional Blog? Of course you can do it yourself. If you are new, I suggest you try free blogger of Google.

I always share all the new information and resources to you. In this post I am going to share a feature post slideshow for Blogger post. I'll show how to add a slider to blogger blog above blog post. Using a featured post slider in blog, you can attract your visitors to your hot and topmost posts. Besides, it makes your blog look professional and beautiful and increases pageviwes.
1. Slideshow for Blogger (version 1)

How to Add Slideshow to Blogger Blog

I have shared a featured post Slideshow html code for blogger blogs. You can easily customize it. I shall continue sharing more Beautiful Slideshow Widgets for Blogger. Hope you will love them.

Please carefully follow the steps to add this slideshow to blogger blog.

Step 1: Go to your Blogger’s Dashboard > Click on Arrow button > and click Layout from dropdown menu.

Step 2: Click on Add a Gadget above you Blog post > than add HTML/JavaScript Gadget from pop up window. If cannot see “Add a Gadget” above Blog post, you have to add widget container above blog post.

Add slideshow in blogger

Step 3: Now put the following code in HTML box

/* JavaScript Image Slider by Online Tutorials/ */

<style type="text/css">
#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 100%;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(http://2.bp.blogspot.com/-p3DImXCalaU/UZcn2TmsF6I/AAAAAAAAAdk/1IcvEkGMXaQ/s1600/ribon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 100%;
 height: 250px;
 background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: relative;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="http://onlinetutorial-bd.blogspot.com/2013/01/ways-to-earn-online.html"><img alt="Top Ways To Make Money Fron Online" src="http://3.bp.blogspot.com/-YYe3uqmecy4/UWes4iq0EII/AAAAAAAAAY8/awUFwMNFeHs/s1600/1.jpg"/></a>

<a href="http://onlinetutorial-bd.blogspot.com/2013/04/how-to-seo-blogger-blog.html"><img alt="How To SEO Blogger Blog" src="http://2.bp.blogspot.com/-sZVRPAqU8jo/UWevvavxbVI/AAAAAAAAAZQ/pmqZR_ACGEk/s1600/2.jpg" /></a>

<a href="http://onlinetutorial-bd.blogspot.com/2013/02/direct-speech-to-indirect-speech.html"><img alt="Change Direct Speech to Indirect Speech" src="#" /></a>

<a href="http://onlinetutorial-bd.blogspot.com/2013/03/add-html-alt-and-title-tags-to-images-of-blogger.html"><img alt="Add HTML Alt and Title Tag to Images of Blogger" src="#" /></a>

<a href="http://onlinetutorial-bd.blogspot.com/p/exam-results.html"><img alt="Get SSC 2013 Results" src="http://4.bp.blogspot.com/-ZvsvINYCyAs/UWfNgvDxQYI/AAAAAAAAAZg/CrchDmGpuEc/s1600/3.jpg" /></a>
</div>
</div>

Customization:

  • To customize the height of this Slider, change the following code. Width does not need changing.
#slider {
 width: 100%;
 height: 250px
  • You must change "Slider Image", "Post link" and "Post Title". For this change the red colored text in following HTML code.
<a href="Post _link"><img alt="Post title" src="Image_link"/></a>


How to Show Slideshow Only on Homepage: Update


To show slider only on homepage, add a conditional tag for with the widget you have used for Slideshow. Go to Template >> Edit HTML >> Search for the widget and add red coloured conditional tag below.

Normally, you can find the widget in "Mainblog/ Mainwrapper" if you put slideshow over blog post. I suggest you use a widget title and search the title in HTML editor. Thus you can easily find the widget. Now add the red coloured tag as shown in the code.


<b:widget id='HTML5' locked='false' title='Testing Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Hope you can easily add this Blogger Slideshow yourself. If you need any help don’t hesitate to comment and ask your question. Enter your email ID bellow for getting new Blogger Widgets in your inbox directly.

Filed Under: ,

Get free daily email updates!

Follow us!

23 comments:

  1. Can I change the sliding effects and the slide interval?

    ReplyDelete
    Replies
    1. You can not change sliding effect. I will back to you soon about interval time.

      Delete
  2. Is there a way to center each image within the frame?

    ReplyDelete
    Replies
    1. At first, I have to say that you should fix the image size according to your slide size. Then you upload to blogger and add it to slide.

      By the way, you can change the position of image.
      Search the code and change relative to center.
      #slider img {
      position: relative;

      Delete
  3. True there are some code change for the slide within the frame. Wilmington SEO

    ReplyDelete
  4. Replies
    1. Thank your for visiting my blog. To add a photo, replace your photo/image link/url with red coloured image link.

      If you have a photo on your computer you have to upload it to blogger, then get image link/url. Read how to upload images to Blogger

      Delete
  5. Please let me know how I take off the "What's Hot" on the frame of the slideshow. Thanks!

    ReplyDelete
    Replies
    1. Thnks for visiting Online Tutorials, To remove the ribon image "what's Hot", just remove the url of background form #ribbon section or you can remove whole background tag.

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Hey!
    Is there a way to have it displayed only in the homepage?

    ReplyDelete
  8. I have updated the post with your answer. See customization.

    ReplyDelete
    Replies
    1. Wow that's so cool!! I am going to try it out right now!!
      thank u :)

      Delete
  9. though I save the whole coding only the 1st two coding lines is present when I open back...
    and instead of the slider only the /* Javascript... */ text appears :(

    ReplyDelete
    Replies
    1. You can use this conditional tag for the widget you have used for slideshow. See new update. Thank you

      Delete
  10. thank you for the post ..but i am not able to keep a image in my first slide rest all workes fine..i tried every thing but the image does not appear
    my blog chartknowledge.in

    ReplyDelete
  11. one more thing is that how do i round the corners of the slide show

    ReplyDelete
  12. Just came across your tutorial after struggling to figure this out! This was so, so helpful! Thank you.
    website design

    ReplyDelete
  13. How can I change the interval time?

    ReplyDelete
  14. this is nonsense. when i added this code it redirects to helperblogger.com site

    ReplyDelete
  15. What should be the size of the image to fit the slider? Thanks

    ReplyDelete
  16. Tnx a lot.. :) http://appscoder.blogspot.com/

    ReplyDelete

Support Us

If our tutorials helped you, please kindly show your love by adding our Badge bellow on your site.

Ping your blog, website, or RSS feed for Free
 

Need Services?

We provide professional SEO, Web Development, Website Customization and Content writing services.

Step by Step SEO

This is a step by step seo guide for new Bloggers. If you are new to SEO, this is for you.

All Blogging Tutorials

This is a table of content page covering all the blogging and SEO Tutorials.


Free counters!

Contact

If you have any query, send us a mail or you can call us:

Email: contact@onlinetutorials-bd.com
Phone: 880 1552 980981

Online Tutorials © 2013. All Rights Reserved | Template Style and Design by ABDUL AWAL