How to Add image slider in blogger blog - Slideshow for Blogger

Today in this post, i will be sharing with you on how to add image slider in blogger blog. At the end of this post, you will be able to add ...

How to Permanently Delete a Blogger Blog

How to Add Floating Share Button to A Blogger Blog

Top 5 Most Useful Android Applications for Bloggers

Today in this post, i will be sharing with you on how to add image slider in blogger blog. At the end of this post, you will be able to add a slider to your blogger blog as well change the images in the slider to y6our ready images.

Follow the steps below to get started.


How to Get Started
=> Login to your Blogger Dashboard.

=> Go to Layout then Click on Add A Gadget as shown in below picture.

=> A pop up menu come up, Select HTML/JavaScript

=> Copy and paste below code in the HTML/JavaScript box.

<style type="text/css"> /* http://dimpost.com */ #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;} #slider { width:700px;height:306px;/* Make it the same size as your images */ background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw0z1rOImmaRIMM6c3zLTXFNclvKBW0CUc0rrIR1e8KYU0T4Zsl2FjuKFMX-rKjdDTt4_FMj8eDCMerkCrN8JUXiyDiqVE6hkmU0UU-WHVxGz7yeXulwaZQZmYfJzXmkacr6bi0_BmWHPK/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto;/*make the image slider center-aligned */ box-shadow: 0px 1px 5px #999999; } #slider img { position:absolute; border:none; display:none; } /* the link style (if an image is wrapped in a link) */ #slider a.imgLink { z-index:2; display:none;position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%; } /* Caption styles */ div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0px; bottom:15px; 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; } /* ------ built-in navigation bullets wrapper ------*/ div.navBulletsWrapper { top:320px; left:280px; /* Its position is relative to the #slider */ width:150px; background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; } /* each bullet */ div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3G04Z9Zc39mPBOyGKZ027r9JpQVfrmnzQND2o9TMYYpEvlLK809EWl2B5tNawrr5vZuKEndK0C3c8-H2ztmO8JAXQqeSJAPLaakXvqmWE_DFpfTncl4yRZKQDw5dVgdbATTHbyWOALwz/s1600/bullet.png) no-repeat 0 0; float:left;overflow:hidden;vertical-align:middle;cursor:pointer; margin-right:11px;/* distance between each bullet*/ _position:relative;/*IE6 hack*/ } div.navBulletsWrapper div.active {background-position:0 -11px;} /* --------- Others ------- */ #slider { transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } </style> <script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="slider"> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikf4GgDuKWF0Um1B8hmNzwSTC8MIc-tJ_x8imd9WZs8hx3IQyvfedCO_SbDNBpdV0WgA7778gtos0XbqqHCAlaWEwq57ED8A-z_HWWd2-C3V7m_w8UUY5Z1CNbygQbgC1xasl4FT-uLcMX/h120/image-slider-1.jpg" alt="#htmlcaption1" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDk96BbPeZFNHTNX2gIZ8hZPt-seMjCEotot4mvleHpzocGHTvtRMWzxXGQaecxBBzIxRcXRUvZY0aFPiLuZ9qOP3Ovl31HnEoWZGsJ_pqnTbbj0FfEyL2h4vPj31zbgJb-YWlsbnYPkb/h120/image-slider-2.jpg" alt="Go UP!" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnD4KUrPTQVcRZ6HhWIOKNkL7TXJurk6vumBnC-ypMfEvrZSMjYo3Ee9iNWfvo8TI_MjKKuR0WkVf7Ygnl0wQCxhGJCi0_YlzG6hpJcmv7FsjQiC_V42x0uZ6Qgdxe20f9R3fOxsArNYc/h120/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKqlFL9XJ3bwtPzhRDmEzPIDjJuepFGyQ_G5xmRwWtsro3zmJL5v7dPyWxAaB6Sxg6qcGhmBONIDcudQpnit5aE6BGEmH5RdwaikxQ_HO3dmkeAgzl4XJadzocomvOAkB6Vo8DypWLWsQd/h120/image-slider-4.jpg" alt="#htmlcaption2" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49bfq_KifG2BHCD70Ic5qeF5UaC4mCLXYJ0z5ZKt-Wd5UXt1PnlvVDl9ZZMuikYSEW4xzrj_A3NzWiYRkUiVt4qB5jXpz2XCe7F20gWYSmrUi63NkLPlXlQjhmAtVVm9TuUIm6HtTaTao/h120/image-slider-5.jpg" alt="Stay Connected"/></a> </div> <div id="htmlcaption1" style="display: none;"> Code by <a href="http://www.teyusfreedomtobrowse.com" target="_blank">Teyusfreedomtobrowse</a> </div> <div id="htmlcaption2" style="display: none;"> <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks. </div> </div>

=> Save

That 's all. You have successfully created a slider.


To Configure your slider:

• You can change the images in the slider just by replacing the links below

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikf4GgDuKWF0Um1B8hmNzwSTC8MIc-tJ_x8imd9WZs8hx3IQyvfedCO_SbDNBpdV0WgA7778gtos0XbqqHCAlaWEwq57ED8A-z_HWWd2-C3V7m_w8UUY5Z1CNbygQbgC1xasl4FT-uLcMX/h120/image-slider-1.jpg
2.  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDk96BbPeZFNHTNX2gIZ8hZPt-seMjCEotot4mvleHpzocGHTvtRMWzxXGQaecxBBzIxRcXRUvZY0aFPiLuZ9qOP3Ovl31HnEoWZGsJ_pqnTbbj0FfEyL2h4vPj31zbgJb-YWlsbnYPkb/h120/image-slider-2.jpg
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnD4KUrPTQVcRZ6HhWIOKNkL7TXJurk6vumBnC-ypMfEvrZSMjYo3Ee9iNWfvo8TI_MjKKuR0WkVf7Ygnl0wQCxhGJCi0_YlzG6hpJcmv7FsjQiC_V42x0uZ6Qgdxe20f9R3fOxsArNYc/h120/image-slider-3.jpg
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKqlFL9XJ3bwtPzhRDmEzPIDjJuepFGyQ_G5xmRwWtsro3zmJL5v7dPyWxAaB6Sxg6qcGhmBONIDcudQpnit5aE6BGEmH5RdwaikxQ_HO3dmkeAgzl4XJadzocomvOAkB6Vo8DypWLWsQd/h120/image-slider-4.jpg
5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49bfq_KifG2BHCD70Ic5qeF5UaC4mCLXYJ0z5ZKt-Wd5UXt1PnlvVDl9ZZMuikYSEW4xzrj_A3NzWiYRkUiVt4qB5jXpz2XCe7F20gWYSmrUi63NkLPlXlQjhmAtVVm9TuUIm6HtTaTao/h120/image-slider-5.jpg  

•  You can also change the Height and Width of the slider.

Hope it helps...

If you face any difficulty setting up a slider for your blogger blog, don't hesitate to use the comment box below this post for swift assistance.

In order not to miss my next post, feel free to subscribe here. It is absolutely free!

Do you need a professional blog that will be ready in the next 7days? Do you wanna Learn blogging and become a professional blogger in the 14days? Mail me at Teyustheblogger@gmail.com

 

Oladipupo Olutayo

FACEBOOK – www.fb.com/olutayo.segun or www.fb.com/teyusfreedom
TWITTER – www.twitter.com/teyusthedon
2GO - Teyus

Thank you!

Read my post on:

• 3 sure ways to make money offline
• How to Add Awesome Contact Form Widget in Blogger Blog
• 3 best ways to make money online
• How to Check Blogger your Mobile Version on PC
• How to Send attachment Files/Documents on Facebook via PC