How to Add Slideshow to Blogger - Blogger Widgets

How to Add Slideshow to Blogger - Blogger Widgets

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.

- See more at: http://www.onlinetutorials-bd.com/2013/04/how-to-add-slideshow-in-blogger-blog.html#sthash.pXWAKXv5.dpuf

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.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH3Od6ENN_BMZyb_T2IhsOVxLGS7Zyy99XJmEtKS0dRvudGQHS9T8LoHPHGDwwDw54KUiJzf4jS64aN5anmz_yMxiDIC-wFcuEPC4-7tiBWCg66VJjP0yLuZDtOFgHKEZcwD5d9zP-N8U/s1600/ribon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 100%;
 height: 250px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZ6iiWEog8iRmSowbKr7XiAZN7EHhwmhUfF1AhXQkQHjUBq9wS68FGHyUHNnCdk6Z7U6ddskQ7fe-xiaY_xkPTTIWensAeulYYoOOqqSVkWpziSA_f26AxxsaAWy_3u5Y1YaJytYNuOs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgWqXRXrJQGClNhkXD_8nl8Mq8wfXRqO6IQZyDqRL1XO3bPxr4L4O8PcPGx-MidctuM7RrIjtpelVRmKL0okB4e8rA6owblmTC6ApNJN2pKva-MJgYeZYpEO65q8BT2-MJJ7qoD5sb4r8/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://arifpowerpc.blogspot.com/2013/01/ways-to-earn-online.html"><img alt="Top Ways To Make Money Fron Online" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-WljulscF_JOC00v9k6LCVEY7e2QslDABq3dXfi82IzBzWkiswogpduUiV8C-6ItxqFvfY10QnUxOS6BgZFp77u_VG6rBatqNO81S2ZcHBfDjA9mCLhisFw3OgaDzz_pgfZWxvQoAlv8/s1600/1.jpg"/></a>

<a href="http://arifpowerpc.blogspot.com/2013/04/how-to-seo-blogger-blog.html"><img alt="How To SEO Blogger Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6EqLg1VsFnLroWdBHh6WGNf6jp-wiVEVS5Kq-2PfIuAG-YlIFbYTNNyvVJOxgPNwBgIqkwWoaHeq9Ukx6fQq1YtDsGp9H5ZWerQplGYt3TpGxgBZ8wp4QxMo2ycwhPBathxlUPgBnUz8/s1600/2.jpg" /></a>

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

<a href="http://arifpowerpc.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://arifpowerpc.blogspot.com/p/exam-results.html"><img alt="Get SSC 2013 Results" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoMW7sXFBmCioPqqCPGI7JV929SkCuSj_tWJZ6iScluNmK0_cXRGF05ChmmiqU9RsR56skw10Omi5oXLIJTnT7mcSF_kHO1bNYaqK0HfBgYwOr1hRGuE31SVCjkiid0yCORUPMWvXjEjc/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>

Hope you can easily add this Blogger Slideshow yourself.