Home � Java scripts � Add attactive Image Slider to Blogger Easily

Add attactive Image Slider to Blogger Easily

Unknown | 00:15 | 0 comments

In this article I'm gonna  explain   How  to  add  attractive image slider to blogger. It will  make  your blog  attractive and You  can  change image by changing Image links. make sure  you  have to use same  pixel images. Follow below steps to add this attractive element to your blog too.


Step 01 - Log in to your blogger dash board.
Step 02 - Select layout
Step 03 - Add a gadget and Select "HTML/Java Script"
Step 04 - Past below cost inside it and save


 <style type="text/css">


#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/AVvXsEi85gKvMSc94-QwcpjRqV8B27iUsAu9m5lYQ52RBSgsE84QSH3YAUb9BKreR2zq1uy-BxHxPeypf8hlWzB2OgXZgXTsjHF9W3w_sp_OrE0LVHaA56kO48c-UCTgMBni0ZukKCPdMGqVIPLE/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/AVvXsEh5T6WIOOcDBg4KiW2gntKaJ9LXE0J5SFS58WewnCaE5XgOlFDLijiPM4lfGi7i2BkzI8yEdzyPC_81IRY2Y60TRxU4g6kKe5cbpKG-C778EUVvvjxuv4rigvCePWs9oo1tmRbmYXaU59pc/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/AVvXsEjqDX28BJPb2fjSlsZ3rT0ChSaDRSzQNPE1UVhzDEJrEXntfa75BWpL2YJEAO_jfqa4t5LBu8LFiWgHZkX86yFkB-yGYhYalaQ_y2lv4M3dUhLPhdg8aaPgmBnxEHLbLWbEV1cJ6aUN4NE1/s320/Google+site+map+submition.png" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhidDhS4HCN3UjFgsqVf8BrEqqc7JPfv0pAImmlIRgJRVfGpVtfLwtA5YeOO8k_F2KR1Dwo1kAzQVJiw-c6ezr_6cH7229tQgUOymCMMmcuMyR_K9INY3Yzj-O3xm3RMq26vGgCzeBw6v43/s320/Meta+tags.png" alt="Add meta tags effectively" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqly32xTqCwUAtazTFStPA598XObvxlzZ1387QVGBOqvQB92SMgJAx5GBM62jgsIFJU9_2TMrOYPuPsy_Y4BDOhMVswxsslmo7uZZWmhFN3QZrms-42FjDKhYrPjMCHCX8eULh8z3smlB/s320/Style+01.png" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtWtuifZauE9fZmsM2pPG1phYqWkJKD2rtpWGZ1koPrZmhHQFunBReORALr0xfTe1VhBEkS0VbqSAF9SmCLhzGElPmIVJTByikOAQ3-dYMwZ0fbtkWw_BTs2qhlrpNCYXNWVzrzzK3s9q/s320/Style+06.png" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDX28BJPb2fjSlsZ3rT0ChSaDRSzQNPE1UVhzDEJrEXntfa75BWpL2YJEAO_jfqa4t5LBu8LFiWgHZkX86yFkB-yGYhYalaQ_y2lv4M3dUhLPhdg8aaPgmBnxEHLbLWbEV1cJ6aUN4NE1/s320/Google+site+map+submition.png" alt="Submit site map to google"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://freedomforbloggingtricks.blogspot.com/" target="_blank">Freedom For Blogging Tricks</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>

Step - 05 you can change image by changing image links

Category: Java scripts

About GalleryBloggerTemplates.com:
GalleryBloggerTemplates.com is Free Blogger Templates Gallery. We provide Blogger templates for free. You can find about tutorials, blogger hacks, SEO optimization, tips and tricks here!

How to create Recent Posts Widget for Blogger Text CSS Hover Effect

How to create an Attractive Recent Comments widget

Adding Related Post Widget For Your Blog With Thumbnail

How to show Contact form in a unique Page

Add attactive Image Slider to Blogger Easily

0 comments

Sponsors

Popular Posts

Followers

Labels

Recent Comments

About Me

Blog Archive

Contact Form

Categories

Visitors