New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



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.
add tiny jquery circleslider
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(http://4.bp.blogspot.com/-Ot8KEdqWA58/Um59McoG1bI/AAAAAAAAEgY/ZzK7Qidizrg/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(http://1.bp.blogspot.com/-SY8PG9E-_ZQ/Um59McKv1vI/AAAAAAAAEgc/tEDJm6soGfE/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(http://3.bp.blogspot.com/-O0kN8rvZGSE/Um59MRdOpHI/AAAAAAAAEgQ/XCiipR_fCKM/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:
tilt  hover effect
Hello folks! This is Viral Apps, 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

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...