Jquery puts reality on our imaginations, today in this tutorial I will show one trick that shows how this plug-in works. This is called " tiny circleslider" .When dragging on the red dot, the images will move from right to the left and the succedding set of images will slide out respectively.
See Demo Here
In order to make it work, first task is to add the javascript jQuery library in our template:
Step 1. Go to Blogger's dashboard
Step 2. Click Template >> Edit HTML button:
Step 3. Click anywhere on the code area and search by using the CTRL + F keys for the tag below:
Step 4. Just above/before the tag above, add the following scripts below:
Step 6. Save the changes by clicking the Save Template button
Now here's the HTML that has to be added to where we want to display the circle slider
Note: Replace the image URL 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)
If you want to add it to your sidebar, simply go to Layout, click the Add a Gadget link > from the popup window, choose HTML/Javascript and paste the code inside the empty box.
Credit: I would like to say thanks to helplogger for the script above!
Adding the Tiny Circleslider to the Blog
In order to make it work, first task is to add the javascript jQuery library in our template:
Step 1. Go to Blogger's dashboard
Step 2. Click Template >> Edit HTML button:
Step 3. Click anywhere on the code area and search by using the CTRL + F keys for the tag below:
</head>
Step 4. Just above/before the tag above, add the following scripts below:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>Step 5. Now, we are going to add the CSS styles above the </head> tag or just put it above the scripts that you put in step 4:
<script src="http://bloggingtipsandtrix.googlecode.com/svn/jquery.circleslider.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/AVvXsEijtmZtBlqZdw4aINStqDwHE7TzNtZzs36bfSGnz9X921o45nu-trAOMLzbI_jfOfLECJHOW2-FiiTQSrpZV13hrTqJYE1bxczVx_LWkzPQs8PtN_pNs81h7-q3ITnDJ8748L0l5Q2k_bXU/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/AVvXsEhV1UjkunK2TsEp1h9cX2sPV8EAjhhsTRQM0cM7W4bSpWUvPm5EVYeAa53sCD_uNXS02agWR9E3wBzgbU9CMN6kGzfDgrBdTrzZyANnpUyE8EgXef6Hjz_KG-MhOUId2IbYj6xq0xFMNQBu/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/AVvXsEhUrgiamJFh9dROBd_n_KaWOQF5HxXkGw0R-JVy6I9Ae6QRIfPIqEJdfLjPekpTFvFkEMdykVR57B8IB5hoflwTzSjeKwXWRGN2cYdAvVImVF32qvZOblBSlK2U5PgGWgtSiGlTFqn_N3O7/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>
Step 6. Save the changes by clicking the Save Template button
Now here's the HTML that has to be added to where we want to display the circle slider
To add it inside a post:
- Click the New post or select a post from your previous publish articles,
- Then switch your Blogger Editor's page on HTML mode.
- And finally, paste 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>
Note: Replace the image URL 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)
If you want to add it to your sidebar, simply go to Layout, click the Add a Gadget link > from the popup window, choose HTML/Javascript and paste the code inside the empty box.
Credit: I would like to say thanks to helplogger for the script above!
