How to Add Slideshow in Blogger Blog

Free Online Tutorials | Digital Marketing | Tech Courses

Get free certifications online courses, best free online courses designed to help grow your business or jumpstart your career. You can learn absolute best free online classes for learning something new by taking our free online courses, discount courses, digital marketing, online business, SEO and diploma courses available for you to learn free or you can purchase from our affiliate link for 45% discounts with lifetimes access.

How to Add Slideshow in Blogger Blog

HostArmada - Affordable Cloud SSD Web Hosting
How to Add Slideshow in Blogger Blog

How to Add Slideshow in Blogger Blog


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.

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 a 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.

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(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.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: 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(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="https://www.freeonlinetutorials.in/2020/10/how-to-add-widget-above-blog-post.html"><img alt="Put your Post Title" src="https://1.bp.blogspot.com/-6EdwoskEgT4/X38epNUqwUI/AAAAAAAAJ44/FiwS1Ji5AnwiGY6CP7C7FuqZtC9lv3ANACLcBGAsYHQ/w640-h346/how-to-add-widget-above-blog-post.webp"/></a>



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-keyword" 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.

Blockchain Council | Certified Blockchain & Healthcare Professionalâ„¢
Santosh Kumar
We only promote those products or services that are thoroughly investigated and truly feel to deliver value to you with quality online courses. Facebook | Twitter | Pinterest | LinkedIn

Related Posts

Post a Comment

Subscribe Our Newsletter

Get Exclusive Tips and Tutorials That I Only Share With our Email Subscribers? Subscribers to our newsletter have been proven to be smarter, better looking so why waiting?

By completing this form, you agree to our Terms of Service and Privacy Policy