Saturday, 31 August 2013

Making Different: How to show percentage value along with the scrollbar in blogger

Making Different
Blogger Widgets | Blogger Templates | Tips and Tricks | How-tos manual 
Learn from successful entrepreneurs.

Pick up tips and advice from the noteworthy when you subscribe to Startup Frontier! Read interviews on how they launched and built their businesses.
From our sponsors
How to show percentage value along with the scrollbar in blogger
Aug 31st 2013, 09:22, by Nitin Maheta

In today’s post , i will explain that how you can add/show percentage value to scrollbar in blogger blog. actually it is not important for your blog, but this is for those who want to give unique effect to scroll-bar in their blog. it may be helpful for your readers to check that how much they have scrolled down or up or how much content left to be read.

Also Read:-  How to Create "Sticky" Sidebar Widget in Blogger Using jQuery

Check the preview below and follow the steps, if you want to add this right to your blog.

Preview :

Untitled

How to add percentage value to scrollbar in blogger?
1. Go to blogger –> Tempalte –> Edit HTML
2. CTRL + F to find this : ]]></b:skin>
3. Copy and paste below code just above this : ]]></b:skin>

#scroll {  display: none;  position: fixed;  top: 0;  right: 20px;  z-index: 500;  padding: 3px 8px;  background-color: #2187e7;  color: #fff;  border-radius: 3px;  }  #scroll:after {  content: " ";  position: absolute;  top: 50%;  right: -8px;  height: 0;  width: 0;  margin-top: -4px;  border: 4px solid transparent;  border-left-color: #2187e7;  }

4. Next search for </head>
5. Copy and paste below code just after </head>

<div id='scroll'></div>

Make sure you pasted the code after </head> and before <body> like this :

</head>  <div id='scroll'></div>  <body>

6. Now, again search for </body>
7. Copy and paste below code just above </body>

<script type='text/javascript'>  /*<![CDATA[*/  var scrollTimer = null;  $(window).scroll(function() {  var viewportHeight = $(this).height(),  scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,  progress = $(this).scrollTop() / ($(document).height() - viewportHeight),  distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;  $('#scroll')  .css('top', distance)  .text(' (' + Math.round(progress * 100) + '%)')  .fadeIn(100);  if (scrollTimer !== null) {  clearTimeout(scrollTimer);  }  scrollTimer = setTimeout(function() {  $('#scroll').fadeOut();  }, 1500);  });  /*]]>*/  </script>

8. Save template.

That’s it.

How to show percentage value along with the scrollbar in blogger

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions

No comments:

Post a Comment

THANK YOU FOR COMMENT ON HTTP://TWEEKNTRICK.blogspot.com