Image slider are helpful for every successful blog to show their achievements or also any latest or popular topics by using images. In Image sliders you can add different images to show your own Profession images which makes your users to trust your as a good professional blogger Or otherwise your can display any related images to your blog which given better effect on your blog also.
This slider have image slice effect every time new image comes in 12 slices which makes this slider best and beautiful. This Slider is Officially Made By Menucool.com but i make some changes and customize it for using it on blogger easily. Now Your can use this official slider on you blogger blog easily by following below simple steps.
Steps To Add JavaScript Image Slider
- Go To Blogger Dashboard >> Then Layout
- Now click on Add a Gadgets Button
- Then choose HTML/JavaScript
- Now paste the below coding in Gadget box
<style type="text/css">
/* JavaScript Image Slider By crunch-plus.blogspot.com/ */
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 500px;
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/AVvXsEj6dKmVAjceqVuTuLfapV3CZKzR5le9G-vxRQqIyfjvS4ePBDE4h0JSK_9Qeyk6XixLaGQJ5OoW-qxVteDH0rYtPB1z9o9yuO26lQOBDwPZjJMzkHUJjIz5F-L2kPh_v_P0bJfhqcp7bLw/s109/slider-ribbon.png) no-repeat; z-index: 7;
}
#slider {
width: 500px;
height: 218px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFfPaSiVOh6F6mUYpcIFJxcxpG8ZsyoXvOVBOSWR1Np_dR566ZiY8GnZDxG5i8agRAiCkHSWJlX7tTTjCs1ckoMT8FrXM9eRhVoDfZX6Y9RbwlLO52q39SNrqHbmJp_MQfCDX8RnKN8Po/s50/load.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
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/AVvXsEgVibzjStFEUB0NYCbDMYYxs48D6gMdRiH43H1jNzLrxqFgW5sGHj9exXsw3extOtA9Ko7dKPOHmylwyeoSLatYtgvID8sjDshamzgbsXelLvgmtlYWp0XWoVlsrGQb_uqf5wbFiNYmSbY/s22/slider-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="https://googledrive.com/host/0B_1mqJd2tC8qLXpKRHhzd2RXTlU" type="text/javascript"></script>
<div id="sliderFrame"> <div id="ribbon"></div> <div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-zgglZA8RNnCeVznxeWz1IMjzXlpmJlCt4oujGEN6S5kMg2XrrJ2IdMEBP6GZFtTZ5dtu3RhSyOgOfTMYNpy4oCKllNbt8bEjdkGhiXCy9gp5Q2VKpiwKjN-Sunr57SxcFZgNfI1PJeQ/s500/slider5.jpg" alt="Image Slider By crunch-plus.blogspot.com"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoLD20IszHfSs3T4AYdNjCAe1XJeBstHyTSIuSlwluMWktXZV_fvrVJ0Cigc2YQWxMzxLYgjMtuvU-bHZclzsCP5aDaoRZpqNMoEs9JmXsj-9Aul7_1JahNUgscK30NgdPehYb9g5nlM/s500/slider4.jpg" alt=" "/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaMSB8onNPaGaOgRYNsfzqjg5qB8yMt5TumkOSfAh1JGWl8quBvQGoiBw3UYIvrmhDVM2vmQ0sitZftCnelGuYJ6oFKdJwUSQkr8BDfMLU9qYJugglSVz2YsE1Zz47bUMexiI_YvAxfQ/s500/slider3.jpg" alt=" "/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqDUmU3prWZPWu7_aXPOcgfCu7-1d_kA8dKc_1iFCPIK4x8P0f5lrozN6DRg8-JwDl2AJ79hFNnLShO7cJMNxeq7sYnYU7Bn6LRRUyMEsUm6Be1sllurL2jEt8MEdiu2dB6JNqeNSWs0/s500/slider1.jpg" alt=" "/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVuLG7TgT4rv5WTiP0bJSUM9azbYTTdinhDF9BmVXfZVa49UkQa1n9oWq1OIFe1DgjqTDOrBvZrSbC_5g805sc2q2kjeyd90wcHG-MqO4AQxU3ZsLkY-nAupNz0sM2tpRuFnudIW3FX4/s500/slider.jpg" alt=" "/></a>
</div></div><br/><br/><br/>
Manual Customization
- Change Each and Every Setting on the bases of mention colors
Slider Width
Slider Height
- Change Both Height And Width mention with above color with manual size.
Image URL
- Replace the URL of Images with Your Image Links in the place mention color code URL
Link URL
- Replace This code any URL Link pages in Images
Image Text Caption
- Replace this code For Changing Image Caption
- After changing setting click on the save button of gadget box
