• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

How to Add a Tiny jQuery Circleslider to Blogger

Posted by Mohsin On 10/28/2013 05:05:00 AM 3 comments

Tiny Circleslider is a small jQuery plugin generating a circular carousel of images that we can slide infinitely (circular). When clicking on the red dot, the main picture moves to the left and another set of images will slide out. There is noting complicated about using this type of carousel, however when it's about customizing it, it's necessary to use a bit of arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.

Demo

Click on the red dot, then move it along the circle:
jquery slider, image slider for blogger



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. From your Blogger's dashboard, select your blog

Step 2. Go to Template and click the Edit HTML button:


Step 3. Click anywhere on the code area and search by using the CTRL + F keys for this tag:
</head>
Step 4. Just above the </head> tag, add the following scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>
Step 5. We need to add the CSS styles above the </head> tag, as well:
<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>
Screenshot
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 carousel.
To add it inside a post the click the New post on the left side of your dashboard and paste the code below by going to the HTML tab:
<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>
blogger template
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)
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.

3 comments:

The Nokia 5228 is such a good phone that has the price of a midrange phone and features of
a high end phone. Whitehill, Karen Jacobs, Iwaski and Michael Khandros.
"Next class we will begin learning about Impressionism.

Look into my site ... digital cameras
beginners

Make this whole process part of the photographer's
grade. Online courses also provide baby boomers the chance to learn something new.
The internet is the best and cheapest way to help you improve
your photographic skills.

My web site dslr photography basics (http://www.youtube.com)

Make this whole process part of the photographer's grade.

Photographs are very important for event management companies;
hence many opportunities are available in this field for professional photographers.

"Next class we will begin learning about Impressionism.

Also visit my page; photography tips for
beginners

Post a Comment

All types of Comments are welcome