Progress ScrollBar By Askwithloud
How do I make an progress scrollbar by askwithloud?
This is a post progress scrollbar widget for blogger.. What is a progress scrollbar by askwithloud? How do you make a progress scrollbar by askwithloud? This script and codes were developed by Prince on 15 December 2022, Thursday.
Progress ScrollBar By Askwithloud Previews
Progress ScrollBar By Askwithloud - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Progress ScrollBar By Askwithloud</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class='post-body'> <h2 class='post-title'>This is a Demo of this Widget <b>(</b>Scroll down to see the Magic<b>)</b></h2> <p><b>Askwithloud is one of the best for blogging tips and tricks. Learn about seo, HTML and Javascript in very simple way.</b></p> <p><b>1-:</b> Learn-How to Add New Code Highlighter In Blogger-<a href="http://www.askwithloud.com/2015/07/How-to-add-new-code-highlighter-in-blogger.html" target="_blank">Add New Code Highlighter In Blogger</a></p> <p><b>2-:</b> Learn-How to Fix Do Not Track Your Own Page Views In Blogger-<a href="http://www.askwithloud.com/2015/07/How-to-fix-do-not-track-your-own-page-views.html" target="_blank">Fix Do Not Track Your Own Page Views In Blogger</a></p> <p><b>3-:</b> Learn-How to Add Responsive Recent Post Slider Widget in Blogger-<a href="http://www.askwithloud.com/2015/07/add-responsive-recent-post-slider.html" target="_blank">Add Responsive Recent Post Slider Widget in Blogger</a></p> <p><b>4-:</b> Learn-How to Fix A Popular Post Widget Error-<a href="http://www.askwithloud.com/2015/07/how-to-fix-popular-post-widget-error.html" target="_blank">How to Fix A Popular Post Widget Error</a></p> <p><b>5-:</b> Learn-How to Setup Custom Robots Header Tags in Blogger-<a href="http://www.askwithloud.com/2015/07/how-to-setup-custom-robots-header-tags.html" target="_blank">Setup Custom Robots Header Tags in Blogger</a></p>
</div> <div class='post-body'> <p><b>6-:</b> Learn-How to Divide A Blog Article into 2 Columns-<a href="http://www.askwithloud.com/2015/07/how-to-divide-blog-article-into-2.html" target="_blank">Divide A Blog Article into 2 Columns</a></p> <p><b>7-:</b> Learn-How To Remove Quick Edit Icon on Blogger-<a href="http://www.askwithloud.com/2015/07/how-to-remove-quick-edit-tool-on-blogger.html" target="_blank">How To Remove Quick Edit Icon on Blogger</a></p> <p><b>8-:</b> Learn-How To add DISQUS Comment Box Widget In Blogger-<a href="http://www.askwithloud.com/2015/07/disqus-comment-box-widget-for-blogger.html" target="_blank">DISQUS Comment Box Widget For Blogger</a></p> <p><b>9-:</b> Learn-How To Setup A Bigrock Domain Name in Blogger-<a href="http://www.askwithloud.com/2015/07/how-to-setup-bigrock-domain-name-in.html" target="_blank">Setup A Bigrock Domain Name in Blogger</a></p> <p><b>10-:</b> Learn-How to Hide Post/Pages Title in Blogger-<a href="http://www.askwithloud.com/2015/07/how-to-hide-post-pages-title-in-blogger.html" target="_blank">How to Hide Post/Pages Title in Blogger</a></p> <p><b>11-:</b> Learn-How to Add Mouse Hover Social Media Widget In Blogger-<a href="http://www.askwithloud.com/2015/07/mouse-hover-social-media-widget-for-blogger.html" target="_blank">Add Mouse Hover Social Media Widget In Blogger</a></p>
</div> <div class='post-body'> <p>That's it ! I hope you like this widget! Stay tuned for more blogger widgets, tips and tricks! Thanks for reading @<b>Prince</b></p>
</div>
<div id='scroll'></div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Progress ScrollBar By Askwithloud - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
body { background-color:#f9f9f9; font-size:16px; color:#444; font-family: 'PT Sans Narrow', sans-serif;
}
.post-body h2{ color:#33D3A2;
}
.post-body { max-width:680px; margin:20px auto; border:10px solid #f0f0f0; padding:15px 20px; background-color:#fff; color:#444;
}
#scroll { display:none; position:fixed; top:0; right:15px; z-index:500; padding:3px 8px; background-color:#33D3A2; color:#fff; border-radius:3px; font-size:14px;
}
#scroll:after { content: " "; position: absolute; top:50%; right:-10px; height:0; width:0; margin-top:-6px; border:6px solid transparent; border-left-color:#369fcf;
}Progress ScrollBar By Askwithloud - Script Codes JS Codes
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(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000);
});
| Developer | Prince |
| Username | Askwithloud |
| Uploaded | December 15, 2022 |
| Rating | 3 |
| Size | 3,075 Kb |
| Views | 8,096 |
Do you need developer help for Progress ScrollBar By Askwithloud?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Prince (Askwithloud) Script Codes
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Andrea Berardi | Aberry | 1,330 Kb |
| Board Site | IndianaLuft | 10,542 Kb |
| Classy Blockquote Styling | Andrewwright | 3,212 Kb |
| Fireworks Show | Arianalynn | 3,048 Kb |
| Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
| Isometric css island | Xaddict | 2,950 Kb |
| Voting App - register | MatheusLima92 | 1,948 Kb |
| Direction-icon | Alexandremasy | 3,323 Kb |
| Review test | Otro_user_gil | 4,054 Kb |
| Monochrome Form | AlienPiglet | 3,096 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!