Crazy Computer World: jQuery Image 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/AVvXsEgmnwBRa2Uo4zuaLKbBtW5fu1-CDjeBHg8BLfRsw_FQ5GdjTMEFf0w95wL6vRIKzWzSm6K-fqlquvBEnuPEtL7uAXZjJ7_FYdOAfrnz_9LzVuCjvWlD7mRpfdrArfAoAdPa3aq58PCfBn_k/s1600/Untitled-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnwBRa2Uo4zuaLKbBtW5fu1-CDjeBHg8BLfRsw_FQ5GdjTMEFf0w95wL6vRIKzWzSm6K-fqlquvBEnuPEtL7uAXZjJ7_FYdOAfrnz_9LzVuCjvWlD7mRpfdrArfAoAdPa3aq58PCfBn_k/s1600/Untitled-1.jpg" /></a></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;">Today I'm sharing another awesome, beautiful </span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;">image slider for</span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;"> blog. It is made with jQuery. and of course HTML and CSS but the main awesomeness, sliding effect is made with jQuery.</span></b></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;"><br /></span></b></div>
<h3 style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 20px; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
Lets Step forward to adding this jQuery Image Slider to Blogger</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="text-align: center;">
<br /></div>
</div>
<blockquote>
<pre><code><style type="text/css"/>
 /* http://crazycomputerworld1.blogspot.com/ - Basic Style */
body{
 background: transparent;
 font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
 margin:0;
 padding:0;
}
a{outline:0 none}
#pagewrap{
 margin:10px auto;
 padding:0;
 position:relative;
 height:400px;
 width: 640px;
}
#slidewrap{position:absolute;}
#slider {
    border-color: #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 10px 10px 30px;
    box-shadow: 0 0 3px #2F2F2F;
    height: 280px;
    margin: 10px;
    position: relative;
    width: 600px;
}
#slider images{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider images {
 position:absolute;
 top:0px;
 left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:6;
 display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
    display:none;
}
.nivo-caption{
 position:absolute;
 right:20px;
 text-align:center;
 top:130px;
 width:192px;
 z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
    bottom: -23px;
    display: block;
    height: 15px;
    left: 204px;
    position: absolute;
    text-align: center;
    width: 192px;
    z-index: 51;
 opacity: 0.6;
}
.nivo-controlNav a{
 background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
 display:inline-block;
 height:14px;
 width:14px;
 text-indent:-9999px;
 cursor:pointer;
}
.nivo-controlNav .active{
 background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); 
}
 </style>
 <script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>
 <script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(window).load(function() {
  $('#slider').nivoSlider();
 });
 </script>

<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 »