Crazy Computer World: Blogger image slider

Showing posts with label Blogger image slider. Show all posts

FlexSlider Basic Image Slider For Blogger

/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flexslider .slides, .flexslider .slides img, .flex-direction-nav { margin: 0 !important; padding: 0 !important; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 45px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent; left: -50px; }
.flex-direction-nav .flex-next { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent; right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.5; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.5; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 0.9; }

/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}
</style>
    

      <div id="flex-isfb">
        
        <div id="preloader"></div>
        <style>
        /* Preloader */
        #preloader {
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:#fff; /* change if the mask should have another color then white */
            z-index:999999999999; /* makes sure it stays on top */
        }
        
        </style>
        <div class="flexslider">
          <ul class="slides">
            <li>
                <a href="#">
                <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
                </a>
            </li>
            <li>
                <a href="#">
                <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
                </a>
            </li>
            <li>
                <a href="#">
                <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
                </a>
            </li>
          </ul>
        </div>
      </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
  animation: "slide",
  controlNav: true, 
  directionNav: true,
  easing: "swing",
  slideshowSpeed: 3000,        
     animationSpeed: 600, 
      });
    });
    //<![CDATA[
        $(window).load(function() { 
            $('#preloader').delay(350).fadeOut('slow'); 
        })
    //]]>
</script> </code></pre>
</blockquote>
</div>

FlexSlider Basic Image Slider For Blogger

This is a responsive jQuery image slider. It has some really nice features that makes you like it. The most cool feature is it is ex...

+ Read more »

jQuery Carousel Slider for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_tb444twjHXiU-mtSNhI0N5Kk1zp3J2KXEyZWN-SrJmUA29V4WUHcBfupmi5j-lE9o_Ps_SGinCWnnL0OAv4lK-J0gkjwrOqb5OyPdwkEd78THeZvt4aKh5tU5Z0q-9gYVhO3q13fZRLs/s1600/screenshots-of-carousel-slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_tb444twjHXiU-mtSNhI0N5Kk1zp3J2KXEyZWN-SrJmUA29V4WUHcBfupmi5j-lE9o_Ps_SGinCWnnL0OAv4lK-J0gkjwrOqb5OyPdwkEd78THeZvt4aKh5tU5Z0q-9gYVhO3q13fZRLs/s1600/screenshots-of-carousel-slider.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;"><b>This is a responsive jQuery carousel slider. It has some really cool features that makes you like it. The most cool feature is it is fully responsive; you don't have to tensed about the sliders width / height even all images width and height are auto adjustable. And also you can set minimum/maximum number of images to be appear on occasion of various size screen/browser. So overall it is quite a beautiful carousel slider. Here it is customized for blogger so you can just copy and paste the code to install on your blog. </b></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<h3 style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 20px; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
Let’s Install the jQuery Carousel Slider to your Blogger Blog</h3>
<div style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<ol>
<li><b>Go to Blogger Dashboard > Layout > Add a Gadget</b></li>
<li><b>Select HTML/Javascript</b></li>
<li><b>Copy the code below and paste on it.</b></li>
</ol>
<div>
<b><br /></b></div>
</div>
</div>
<blockquote>
<pre><code>
<style type="text/css">
/*
* jQuery FlexSlider v2.0
* http://crazycomputerworld1.blogspot.com/
*
* Copyright 2014 Crazy Computer World 
* Free to use.
*
* Contributing author: Yash Raj
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){   
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: <span style="color: red;">false</span>,
    itemWidth: <span style="color: red;">210</span>,
    itemMargin: <span style="color: red;">0</span>,
    minItems: <span style="color: red;">1</span>,
    maxItems: <span style="color: red;">4</span>
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
    <li>
      <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" />
    </li>
  </ul>
</div>
</code></pre>
</blockquote>
<br />
 <span style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;"> </span><span style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">4. Save, and were done.</span><br />
<br style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;" />
<b><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">NOTE: </span></b><br />
<ul style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<li><b>Forget about width and height it will adjust auto.</b></li>
<li><b>There is some other things you can change, see below. I guess I don't have to explain that because they are named like as they are.</b></li>
</ul>
<pre style="background-color: white; font-size: 14px; line-height: 22.399999618530273px;"><code><b>    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4</b></code></pre>
<pre style="background-color: white; color: #4f4f4f; font-size: 14px; line-height: 22.399999618530273px;"><code><span style="color: red;">
</span></code></pre>
<pre style="background-color: white; color: #4f4f4f; font-size: 14px; line-height: 22.399999618530273px;"><code><span style="color: red;">
</span></code></pre>
</div>

jQuery Carousel Slider for Blogger

This is a responsive jQuery carousel slider. It has some really cool features that makes you like it. The most cool feature is it is...

+ Read more »

jQuery Image Slider with Thumbnails for Blogspot

<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
 <div class="jslider_images">
      <ul>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a></li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a>Tree in field with blue sky.</li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a></li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a></li>
   </ul>
    </div> 
    
 <div class="jslider_thumbs">
        <div>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
</code></pre>
</blockquote>
</div>

jQuery Image Slider with Thumbnails for Blogspot

Here I came up with another awesome image slider for blogspot. This is a 'jQuery Image Slider with Thumbnails' Lets S...

+ Read more »

Nivo Slider - jQuery Image Slider For Blogger

<div id="pagewrap">
<div id="slidewrap">
 <div id="slider">
 <a href="<span style="color: red;">#</span>" target="_blank"><img alt="" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>" src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" /></a>
 <a href="<span style="color: red;">#</span>" target="_blank"><img alt="" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>" src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" /></a>
 <a href="<span style="color: red;">#</span>" target="_blank"><img alt="" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>" src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" /></a>
 <a href="<span style="color: red;">#</span>" target="_blank"><img alt="" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>" src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" /></a>
 <a href="<span style="color: red;">#</span>" target="_blank"><img alt="" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>" src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" /></a>
 <a href="<span style="color: red;">#</span>" target="_blank"><img alt="" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>" src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" /></a>
 </div>
</div>
</div></code></pre>
</blockquote>
<br />
<b><br /></b>
<b>4. Change the red colored link with yours. and blue colored images link with your images.</b><br />
<b><br /></b></div>

Nivo Slider - jQuery Image Slider For Blogger

Today I'm sharing another awesome, beautiful image slider for blog. It is made with jQuery. and of course HTML and CSS but the...

+ Read more »

Pure CSS3 Image Slider for Blogspot (Cycle Style)

#slider li.firstanimation {
 -moz-animation:cycle 25s linear infinite; 
 -webkit-animation:cycle 25s linear infinite;  
}
#slider li.secondanimation {
 -moz-animation:cycletwo 25s linear infinite;
 -webkit-animation:cycletwo 25s linear infinite;  
}
#slider li.thirdanimation {
 -moz-animation:cyclethree 25s linear infinite;
 -webkit-animation:cyclethree 25s linear infinite;  
}
#slider li.fourthanimation {
 -moz-animation:cyclefour 25s linear infinite;
 -webkit-animation:cyclefour 25s linear infinite;  
}
#slider li.fifthanimation {
 -moz-animation:cyclefive 25s linear infinite;
 -webkit-animation:cyclefive 25s linear infinite;  
}

#slider .tooltip {
 background:rgba(0,0,0,0.7);
 width:300px;
 height:60px;
 position:relative;
 bottom:75px;
 left:-320px;
 -moz-transition:all 0.3s ease-in-out;
 -webkit-transition:all 0.3s ease-in-out;  
}
#slider .tooltip h1 {
 color:#fff;
 font-size:24px;
 font-weight:300;
 line-height:60px;
 padding:0 0 0 20px;
}
#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {
 left:0px;
}

/* PROGRESS BAR */
.progress-bar { 
 position:relative;
 top:-5px;
 width:680px; 
 height:5px;
 background:#000;
 -moz-animation:fullexpand 25s ease-out infinite;
 -webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; } 
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:325px; opacity:0; z-index:0; } 
 21% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-moz-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; } 
 60% { top:325px; opacity:0; z-index:0; }
 61% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:325px; opacity:0; z-index:0; }
 21% { top:-325px; opacity:0; z-index:-1; }
 50% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-webkit-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; }  
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; z-index:0; } 
 60% { top:325px; opacity:0; z-index:0; } 
 61% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}
</style>

<div class="container">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="background-color: #eeeeee; color: #3d85c6; line-height: 21.119998931884766px;">About Image</span></h1>
            </div>
            </li>

<li id="second" class="secondanimation">
            <a href="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="background-color: #eeeeee; color: #3d85c6; line-height: 21.119998931884766px;">About Image</span></h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="background-color: #eeeeee; color: #3d85c6; line-height: 21.119998931884766px;">About Image</span></h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="background-color: #eeeeee; color: #3d85c6; line-height: 21.119998931884766px;">About Image</span></h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Caption</span>"/>
            </a>
            <div class="tooltip">
            <h1><span style="color: #3d85c6;"><span style="background-color: #eeeeee; line-height: 21.119998931884766px;">About Image</span></span></h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div></code></pre>
</blockquote>
<br />
<b> <span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">4. Change the </span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">blue</span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;"> colored link with yours. and </span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">red</span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;"> colored images link with your images.</span></b></div>

Pure CSS3 Image Slider for Blogspot (Cycle Style)

Here I came up with a stylish and hot image slider for blogger that is just using pure CSS3. No Javascript or jQuery is used. ...

+ Read more »

Add JavaScript Image Slider to Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCqo_FhMiraw54VCS3RNAJQxY31YpyQ6KCylU9He4jlBs_NqHePXERjqjmSsF30h6NC-A-N2LPHw-3KNCTmd-lFDtMVOKmiE6DOY2HBOPHvaCD5KuuHCjIKd-eKBW3zY2RUlBQbUG9jje/s1600/javascript-image-slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCqo_FhMiraw54VCS3RNAJQxY31YpyQ6KCylU9He4jlBs_NqHePXERjqjmSsF30h6NC-A-N2LPHw-3KNCTmd-lFDtMVOKmiE6DOY2HBOPHvaCD5KuuHCjIKd-eKBW3zY2RUlBQbUG9jje/s1600/javascript-image-slider.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;">Here I’m sharing a cool JavaScript image slider for blogger. It could be easily usable as featured content on blog. </span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;">A really cool slider is this. It has pretty nice sliding effect, and a less loading time as created by Javascript, no jQuery or flash used. And another thing is it’s easily customizable. I have customized it little to suite perfectly for blog. </span></b></div>
<br />
<br />
<br />
<h3 style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 20px; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
Let’s Install the Image Slider to your Blogger Blog</h3>
<div style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<b>1. Go to Blogger Dashboard > Layout > Add a Gadget<br />2. Select HTML/Javascript<br />3. Copy the code below and paste on it.</b></div>
<div style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<b><br /></b></div>
<div style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<b><br /></b></div>
<div style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<b><br /></b></div>
<div style="text-align: left;">
<br />
<blockquote>
<pre><code>
<style type="text/css">
/* http://crazycomputerworld1.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/AVvXsEh3AowKAENqSZG6tvZZ4JyntOS6_8Xp-mL0njPtj9k2jXEfKZc2DsIDSD1cpNHu6smRhrxyEHc5kog0KRa42C0l1fFgxS1swWCJSb7he79b88ELfi8aHpyod722hpQ__fuuStn33vE3m23o/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/AVvXsEj9HW4g6xur76KiExfAYh9RqUynpWx03IgHpjE4QyWUcmvUwdAniKuKqmnPbHJriLEx6NKNV9DQenfKckU_Ah2DELvKoloJa1hTNX-78tf20L7pJMEdgyS-WXXxgjOdBDU-d75rZUfDLPMN/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="<span style="color: red;">#</span>"><img src="<span style="color: red;">Paste Image Url Here</span>" alt="<span style="color: #3d85c6;"><span style="background-color: #eeeeee;">Image Caption</span></span>" /></a>
<a href="<span style="color: red;">#</span>"><img src="<span style="color: red;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6;">Image Caption</span>" /></a>
<a href="<span style="color: red;">#</span>"><img src="<span style="color: red;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6;">Image Caption</span>" /></a>
<a href="<span style="color: red;">#</span>"><img src="<span style="color: red;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6;">Image Caption</span>" /></a>
<a href="<span style="color: red;">#</span>"><img src="<span style="color: red;">Paste Image Url Here</span>" alt="<span style="background-color: #eeeeee; color: #3d85c6;">Image Caption</span>"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://crazycomputerworld1.blogspot.com/" target="_blank">Crazy Computer World</a>
</div>
</div></code></pre>
</blockquote>
<br /></div>
</div>

Add JavaScript Image Slider to Blogger

Here I’m sharing a cool JavaScript image slider for blogger. It could be easily usable as featured content on blog. A really cool ...

+ Read more »