Obviously, we need to add the javascript jQuery library in our template:
Step 1. From your Blogger's dashboard, go to Template > press the Edit HTML button
Step 2. Search for the </head> (CTRL + F) tag and just above it, add the following code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>We would lack the CSS styles that we need to add above the </head> tag as well:
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>
<style>
#rotatescroll { /* is the rectangle container */
height: 300px;
position: relative;
width: 300px;
}
#rotatescroll .viewport { /* is the rectangle containing the images */
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
width: 300px
}
#rotatescroll .overview { /* is the list with the images */
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}
#rotatescroll .overview li { /* each item of the list */
float: left;
height: 300px;
position: relative;
width: 300px;
}
#rotatescroll .overlay { /* the image with the circle overlapping the list */
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CQuo8Gx_OCzh0LRIVDuvuQJ9PVKRui2Rs6CAthqhxsCqkG1XlI1ZpDnq-Of984XcryV3fk1fI0c8uQZJwIE4bU3XZls0yX2x1QmbXocCXWUYaVml0rWZtFm8lKMG_BneF4azvCD5Hp4/s1600/bg-rotatescroll.png) no-repeat 0 0;
height: 300px;
left: 0;
position: absolute;
top: 0;
width:300px;
}
#rotatescroll .thumb { /* the red circle that allows us to navigate */
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2sdKgvpdX761gSJB9sHtPi13L7US0L30VLij7wL6oh0HnVeVb0Cb84JbhbZ9pvzAiskWKleQeDBJoCn8iTMMIKjWF72NlWsOdZKvXjtEC_zf_FZE1JwytR2j5Tda0j2LzWXgtU18fs4/s1600/bg-thumb.png) no-repeat 0 0;
cursor: pointer;
height: 26px;
left: 137px;
position: absolute;
top: -3px;
width: 26px;
z-index: 200;
}
#rotatescroll .dot { /* the points indicating the position of each image */
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcl1rJb9uevsukwYwgCwF6Ur9hpIaPINMom3EpDba6N0lZ2wOpMFrQ9tGNGdV5NS-smakKOX9AV8NCgCnUdl6TpT9ZraN93emkyi73KWK2j9s_7ipDlUKrvG-KsK7fwBUrovqzG_ionCQ/s1600/bg-dot.png) no-repeat 0 0;
display: none;
height: 12px;
left: 155px;
position: absolute;
top: 3px;
width: 12px;
z-index: 100;
}
#rotatescroll .dot span { /* are hidden by default */
display: none;
}
</style>
Screenshot |
Create a New post and paste on the HTML section, the code below:
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="imageURL" /></li>
<li><img src="imageURL" /></li>
<li><img src="imageURL" /></li>
<li><img src="imageURL" /></li>
<li><img src="imageURL" /></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
</script>
Screenshot |
Note: replace the imageURL text with the URL of your images
and here are other options that could be added, separated by commas:
snaptodots - false if you want no dots to be shown when dragging them
hidedots - false if you want to display the internal points (by default is true)
intervaltime - is the time between slides (by default 3500)
radius - defines the size of the circle (by default is 140)
0 komentar:
Post a Comment