Posted by Syed Muhammad Ali
 |
Today we are sharing an awesome Jquery image slider for blogger which would make your blog attractive.
The slider is made by dimpost. We have customized it a little so that it could look more attractive on your blog.
This is an awesome jquery Image slider which has a lot of beautiful features. This would improve you to improve your blog personalization.
You can add this Image slider in your Blog. You just have to add some codes inside your template.
Follow the Below steps to add this widget in Blogger.
- Go to Blogger
- Log-In to your Dashboard
- Go to template section
- Click Edit Html
- Find ]]> by pressing Ctrl+F key.
- Paste the below code just above ]]>.
/* —— ITB Slider ——*/
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
#slider { width:700px;height:306px;
background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/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;
}
#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: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;
} 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;
}
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/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;
}
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}
/* —— ITB Slider ——*/
- Now Search for inside template editor
- Paste the Below Code just Below
- Replace Yellow code with Images link you want to display.
- Replace Red code with the Title of the Image/Post.
- Replace # with your Posts Links
Congrats! You are done.
You can see this awesome slider inside your template.
I hope you like this Slider. Ask any queries in Below Comments and we would love to solve your Problem:)
Follow Us! 
About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter
