HIGH-QUALITY SLIDE DISPLAY ON BLOGGER HTML CODE Add a high-quality slide show on your blogger Html code below. Easy to paste this code ...
HIGH-QUALITY SLIDE DISPLAY ON BLOGGER HTML CODE
Add a high-quality slide show on your blogger Html code below. Easy to paste this code ad a gadgets place on your sidebar or the top of your post. And replace images on this code 'yellow' highlight. Add title and description. |
SLIDE SHOW HTML CODE COPY AND PASTE THIS CODE ON YOUR BLOG OR WEBSITE
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btrix_slider3').s3Slider({
timeOut: 3000
});
});
</script>
<style>
#btrix_slider3 {
width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
height: 430px;
position: relative;
overflow: hidden;
margin-left: 0;
}
#btrix_slider3Content {
width: 590px;
position: absolute;
top: 0;
margin-left: 0;
}
.btrix_slider3Image {
float: left;
position: relative;
display: none; top: 0;
border:1px solid #ddd;
}
.btrix_slider3Image span {
position: absolute;
font: 10px/15px sans-serif,Arial, Helvetica;
padding: 10px 10px;
background-color: #000;
color: #fff;
filter:'alpha(opacity=70)';
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .5;
text-align:justify;
}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
width: 570px !important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 570px !important;
height:90px;
}
.left {
left: 0;
top: 0;
width: 110px !important;
height: 335px;
}
.right {
right: 0;
bottom: 0;
width: 80px !important;
height: 319px;
}
</style>
<br />
<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZI2s0bOFsrrDJMvOUM0-1NKKD-HQ1nJ4Q7W7m5rVNgvPCMKIDzlgnL-ABC7a2Gw-LYzg2AFk8Ggdqyv6Hg5wQ81qlUsp8fmUhhQAZEEVQyo1Rx_rvpWapP-bsR1xioRAb9B-3IA1kpyD/s1600/mokshame.jpg" />
<span class="left"><h3>
TITTLE </h3>
DESCRIPTION</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVsUHkb3CxDgYNvXSlRqk7Oep81TpLeoCMEBO6ITEJ-Mtb9AfN9e3N6Gi3e3m6FLmDCizqDGXT0RwlQktr5ERa9lyL_4oac_iljRG_ZZeIBG6XD2ZVoYG1yRkrx6zZIIklNecSNZUeU566/s1600/esoyum.jpg" />
<span class="left"><h3>
TITTLE </h3>
DESCRIPTION</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUL4XhFs1tU7vu_E-4hZb3eZdvNMUnS5xESK6LFbC_FQG2EwvyyqngLQvPcIxo1t8E5Jj3aC5MCwL7MnCBo96WLpJYhyphenhyphenjleFTdcKZkCF-3gu25j7eQnmIJ-B_DIw8JFFlcIAx4hFRfnNWU/s1600/PULARKALA.jpg" />
<span class="top"><h3>
TITTLE </h3>
DESCRIPTION</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKV_LCwnmeUzSmRtzOh_LIwLUbLn6c7vviZDp9Bn7XzuKzWZT302eTvD6tT0JaVWFkvjeT5EYcmynAD45x04J19tm_DAY4C6w5GbvQ9ZS1jHWZl0IMj_JMuACRUcBRWM8dbB7Be72FjKa/s1600/NALLIDA.jpg" />
<span class="bottom"><h3>
TITTLE</h3>
DESCRIPTION</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW5fdhC0nfxJEKOVSxa75r8nVBWNmKF48J0U-qkduao3aKJRSWOyjGGX5lzuh2Uv4PCbwlWVdnFckNdiKS3LhJQUz1yT6augUCxsd7CzICTWDL-MCudLucHHPPgkaOWOcOyYLpQfmUy_pQ/s1600/SWARGA.jpg" />
<span class="bottom"><h3>
TITTLE </h3>
DESCRIPTION</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btrix_slider3').s3Slider({
timeOut: 3000
});
});
</script>
<style>
#btrix_slider3 {
width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
height: 430px;
position: relative;
overflow: hidden;
margin-left: 0;
}
#btrix_slider3Content {
width: 590px;
position: absolute;
top: 0;
margin-left: 0;
}
.btrix_slider3Image {
float: left;
position: relative;
display: none; top: 0;
border:1px solid #ddd;
}
.btrix_slider3Image span {
position: absolute;
font: 10px/15px sans-serif,Arial, Helvetica;
padding: 10px 10px;
background-color: #000;
color: #fff;
filter:'alpha(opacity=70)';
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .5;
text-align:justify;
}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
width: 570px !important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 570px !important;
height:90px;
}
.left {
left: 0;
top: 0;
width: 110px !important;
height: 335px;
}
.right {
right: 0;
bottom: 0;
width: 80px !important;
height: 319px;
}
</style>
<br />
<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZI2s0bOFsrrDJMvOUM0-1NKKD-HQ1nJ4Q7W7m5rVNgvPCMKIDzlgnL-ABC7a2Gw-LYzg2AFk8Ggdqyv6Hg5wQ81qlUsp8fmUhhQAZEEVQyo1Rx_rvpWapP-bsR1xioRAb9B-3IA1kpyD/s1600/mokshame.jpg" />
<span class="left"><h3>
TITTLE </h3>
DESCRIPTION</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVsUHkb3CxDgYNvXSlRqk7Oep81TpLeoCMEBO6ITEJ-Mtb9AfN9e3N6Gi3e3m6FLmDCizqDGXT0RwlQktr5ERa9lyL_4oac_iljRG_ZZeIBG6XD2ZVoYG1yRkrx6zZIIklNecSNZUeU566/s1600/esoyum.jpg" />
<span class="left"><h3>
TITTLE </h3>
DESCRIPTION</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUL4XhFs1tU7vu_E-4hZb3eZdvNMUnS5xESK6LFbC_FQG2EwvyyqngLQvPcIxo1t8E5Jj3aC5MCwL7MnCBo96WLpJYhyphenhyphenjleFTdcKZkCF-3gu25j7eQnmIJ-B_DIw8JFFlcIAx4hFRfnNWU/s1600/PULARKALA.jpg" />
<span class="top"><h3>
TITTLE </h3>
DESCRIPTION</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKV_LCwnmeUzSmRtzOh_LIwLUbLn6c7vviZDp9Bn7XzuKzWZT302eTvD6tT0JaVWFkvjeT5EYcmynAD45x04J19tm_DAY4C6w5GbvQ9ZS1jHWZl0IMj_JMuACRUcBRWM8dbB7Be72FjKa/s1600/NALLIDA.jpg" />
<span class="bottom"><h3>
TITTLE</h3>
DESCRIPTION</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW5fdhC0nfxJEKOVSxa75r8nVBWNmKF48J0U-qkduao3aKJRSWOyjGGX5lzuh2Uv4PCbwlWVdnFckNdiKS3LhJQUz1yT6augUCxsd7CzICTWDL-MCudLucHHPPgkaOWOcOyYLpQfmUy_pQ/s1600/SWARGA.jpg" />
<span class="bottom"><h3>
TITTLE </h3>
DESCRIPTION</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
ssss
Reply Delete