You can see the screenshotshot above which I used before in my sidebar, I utilized the images from the different scenes of our country who recently suffered from the disaster made by an earthquake.
JavaScript Image Slider For Blogger
Step 1. Go to Blogger Dashboard
Step 2. Layout
Step 3. Click on Add a Gadget
Step 4. Select HTML/JavaScript (below header) Paste code inside it,
<style type="text/css">
/* By Bloggingtipsandtrix.blogspot.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/AVvXsEgoBwHp0elv-AwIsZQtVDYHuEyxQDsbi_OmfbcQjSjKVt8dNc5vRWyHGcpm3DmQh370geNcZGp81LDYfjPdHVUFYCq8NT7_YDPp_kvYvdzPQtri73Pxf6vW7Lv_5bqAij3gzVll7GTXKdku/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/AVvXsEj0rnG24qKzug5iFJRXiFfBI_Wjaig5MPemu2KbpF0onPNlg2lG7py3K3lmiX_lA-gV4cq8n96E1Pa6cw9ZhJT_E9p3iEwWybuyDDUhYNPQeBt7pZWLNHcN7h4scZAau3-eQPyhB21FgpiG/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;}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- 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://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlAo_g4xaU_5yz68PLJdTck549EyLgNkkNdod6uEOKHAmqCp4GW3u2M2heOLuO6SGH5tqg-WvIEEl4IokYUgaa4Cws3HRQI-Jk2zUTaotEX6e5lz1jckbbYf9rwfRZC24FlQbqCP-mpSb/s1600/image-slider-1.jpg" alt="Image slider1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNv4YHEdoyibKbWKBV6FwqWhMgqJM9scX7Csrag5IZRaDSAblcVnLlN8aaCPmo7jpHDTz1DHDvsqabbrE79X5spSiOHhEvayEJpfTezN8QKFdeO3qOrcd306MTcDKwvjewF0qhxHIB3f0/s1600/image-slider-2.jpg" alt="Image slider 2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyOce91qk_P7k4BddL3-oAVW2b6uzWtjvCZ4iZ0VxJ8Kt7tggyFvAmsfDqgYRmp0wGGgtApHEplAmdpcVrJ7fSW3WNy73tnBYeYgc8fQ5zASIY9zPbBInsjhfpyHZIGMAEGDZeA56soGF/s1600/image-slider-3.jpg" alt="Image slider 3" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuwos4pgPxP3zQD5ryOIL5ke9aLB8UKJ5pGvDiAlq3-b7KzRcr8968BBQ_p8NsEnNtZacnzV4Y-0QrvdAImxlT2el2glCuNpPMoYBu71tJuBuOZiYyKOZDCMXm4ZJDZNZe-QcjNsrJ94Ky/s1600/image-slider-4.jpg" alt="Image slider 4" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6AV_Oi0PlRE-u69j5m0NTDkSuAef5Nan1FnTgC0KpU-tOA7bT3-KDAz2YEXJq0S3Xp39OwDcdC-t3yvWSRTRAhR_b50jB6sOvrWsZcKXJg-xYLV25sVexUMaSt3BIR_5BjvLXMsccw0zu/s1600/image-slider-5.jpg" alt="Image slider 5"/></a>
</div>
<div id="
Image slider1" style="display: none;">
Image Slider by <a href="http://bloggingtipsandtrix.blogspot.com/" target="_blank">bloggingtipsandtrix.blogspot.com</a>
</div>
<div id="
Image slider 2" 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>
- Change the Image URL in black bold texts with your own.
- Replace the texts in orange bold with your own image caption below the image
Customizations:
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
No comments :
Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.
Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.
Best Regards,
GOLDEN WORKS TV