How to Add a Tiny jQuery Circle Slider to Blogger

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

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'/>
<script src="http://bloggingtipsandtrix.googlecode.com/svn/jquery.circleslider.js"/>

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:

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

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook