How to Add Slideshow in Blogger Blog

Posted by Unknown in , , on Saturday, April 13, 2013


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. With the help of Google search you can get many more tutorials you need. In this post I am going to show how to add slideshow in blogger above blog post. Using a slideshow you can attract your visitors to your hot and topmost posts. Besides, it makes your blog look professional and beautiful.

Please carefully follow the steps to add a slideshow in 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


<style type="text/css">
 /* JavaScript Image Slider/ */

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSuISWz8unbe75QiOp5wyyCxifWR7IUjWWewj3nyDUOVh0JNX1xGnXRfIe_IUt-8KT4cW4dMh_ydIY8zf63JO4SmvdX5VOuYTXOBmva1-XxgKcp-_Gl02N4Q5-754LX2V7SYMsKmapXV8/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 100%;
 height: 250px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsF12FFtWW8Xd0I9U2OkvtuJCojeALgB0dVk8b7Q_g2W1sTGzeSfyQcwikouuLs5vDhxLE5ngyudYg20UjxDIzzzaSyk3elruh6KnX1bxLun8lNo3ObRLm0KVn5xStxlXbUwJID2eg5g0/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: relavive;
 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibihKGng7FN650WgZi7dW6fv2qiOgAnn7Cp8U4htKvh71jBDgpWUSqJSeUS8izjuG8D4oHiKNCUyTyIMmHpC-41vnyB7lHiXlr6WNLBtcOGsZ0RBpi4PTwPV-e_SLG9etSIqy_IiD-sv0/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://traffic-payout.blogspot.com/2013/01/ways-to-earn-online.html"><img alt="Put your Post Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1iKjFtf_pZB7nql29MMnkyNldz8Q8E-MbW3XMj2vXiuQWOXGn7xbe8ECA5q78ErO_Qlw_XzKbCUi0mnmcG2_mCmfzfXebFNHgrc3KeNYRjFM_MgBpQWLoueVBx4XVuXo9cQaqO-XSqYw/s1600/1.jpg"/></a>

<a href="http://traffic-payout.blogspot.com/2013/04/how-to-seo-blogger-blog.html"><img alt="Put your Post Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlC52vR_ri-8eWBwxyGz4-f4FUVGNN5BqtiHKq_3jqLhUaoWoZ3PKciDotj0i8d9OfL0rUqIBCZOG3AcUCzgMmnLFAFZY0UGeMLR7cDLLg4ex-Bw4wIsempa8m-2itJNcn5uCyadDis2k/s1600/2.jpg" /></a>

<a href="http://traffic-payout.blogspot.com/2013/02/direct-speech-to-indirect-speech.html"><img alt="Put your Post Title" src="image link" /></a>

<a href="http://traffic-payout.blogspot.com/2013/03/add-html-alt-and-title-tags-to-images-of-blogger.html"><img alt="Put your Post Title" src="image link"/></a>
<a href="#"><img alt="Get SSC 2013 Results" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsQm7tos1vkqDPazfJykZC72p6z6DS-B5hjFQ4z0z580cPJUolyKWHWa4uf1VLgs4fb92fYgIJXiZox8veoZGvsVIwY6YmVETTay8nq48_xfpBITcYAv7-h-C5gsFTnqGb-5X_OYGw4s/s1600/3.jpg" /></a>
     </div>
   </div>
</div>

Customization:
To customize the height of the Slider, change the following code. Width does not need changing.

#slider {
 width: 100%;
 height: 250px

To change image of Slideshow
Change the Post link,  image link and Alt tag with your post title.

<a href="Post _link"><img alt="Post title" src="Image_link"/></a>

Hope you can easily do it yourself. If you need any help don’t hesitate to comment and ask your question. 

This entry was posted on Saturday, April 13, 2013 at 5:40 AM and is filed under , , . You can follow any responses to this entry through the RSS 2.0. You can leave a response.