Multi-Functional Toolkit for Blogger

Good day Bloggers :) Today I am going to share a simple but really helpful and useful toolkit for your blog.

Introduction

Okay, to make this toolkit, I integrated and combined almost 3 plugins/widgets that I have already posted in this blog. I used my previous post Smooth Scrolling Widget and added a quick page navigation to provide your visitors an easy way to browse all over your blog. Using a little CSS trick I *somehow* copied the on hover effect of google android. I also used 4 jquery/s - for fading effect; for smooth scrolling; for toggle function; and for the next and previous post title. But don't worry I minified it so it won't affect your blog's pagespeed. So let's get it going. To install, just follow these easy steps.

Features

Lightweight CSS
Improved HTML
Minified Script
SEO friendly
Flat Design
Fully Customizable
Responsive

External Scripts

FontAwesome (?)
Jquery Library v1.9.1 or higher (?)

Live Demo

Demo

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
Search for </body> then add this code before it; then

<div id='top'/>
<div id='bottom'/>

Search for <b:includable id='post' var='post'> and right after it, add the following code

<ul id='Mba-scrollToTop' style='display:none'><li><a class='toolbutton' href='#top'><i class='fa fa-chevron-up'/></a></li><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='expand-tool' style='display:none;'><li class='prev'>
<ul><li><b:if cond='data:olderPageUrl'> <a class='toolbutton' expr:href='data:olderPageUrl'><i class='fa fa-chevron-right'/></a>
<a class='older-link tooltip' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/><b:else/> <a class='toolbutton' expr:href='data:olderPageUrl'><i class='fa fa-chevron-right'/></a><a class='tooltip' rel='previous'><span>You are viewing Last Post</span></a> </b:if> </li></ul></li><li><a class='toolbutton' href='#comments'><i class='fa fa-comments'/></a></li><li class='next'> <ul><li><b:if cond='data:newerPageUrl'> <a class='toolbutton' expr:href='data:newerPageUrl'><i class='fa fa-chevron-left' expr:href='data:newerPageUrl'/></a><a class='newer-link tooltip' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/><b:else/> <a class='toolbutton' expr:href='data:newerPageUrl'><i class='fa fa-chevron-left'/></a><a class='tooltip' rel='next'><span>You are viewing Most Recent Post</span></a></b:if></li></ul> </li><li><a class='toolbutton' href='#bottom'><i class='fa fa-chevron-down'/></a></li></div><li><a class='toolbutton' id='tool-expand' onClick='toggle(&quot;expand-tool&quot;);'><span class='expand-plus2'><i class='fa fa-plus'/></span><span class='expand-minus2'><i class='fa fa-minus'/></span></a></li></b:if><b:if cond='data:blog.pageType != &quot;item&quot;'><li><a class='toolbutton' id='last' href='#bottom'><i class='fa fa-chevron-down'/></a></li></b:if></ul>

CSS

Search for ]]></b:skin> then add this css code before it

#Mba-scrollToTop{background:#fff;padding:0;width:40px;list-style:none;position:fixed;top:30%;right:0;cursor:pointer;z-index:99999}#top{position:absolute;top:0}#Mba-scrollToTop li a.toolbutton{width:40px;display:block;text-align:center;border:1px solid #d4d4d4;border-bottom:0;color:#d4d4d4;height:40px;line-height:40px;position:relative;-webkit-transition:all .4s ease;transition:all .4s ease;font-size:80%}#Mba-scrollToTop li #last{border-bottom:1px solid #d4d4d4}#Mba-scrollToTop li #tool-expand{background:#ed5564;border:1px solid #d14b58;color:#fff}#Mba-scrollToTop li #tool-expand:hover,#Mba-scrollToTop li a.toolbutton{text-decoration:none;text-transform:none}#Mba-scrollToTop li a.toolbutton:focus,#Mba-scrollToTop li a.toolbutton:hover{color:#fff}#Mba-scrollToTop li a.toolbutton:before{position:absolute;content:"";width:15px;height:15px;opacity:.5;top:9px;bottom:11px;left:10px;right:10px;background-color:#fff;border-radius:100%;-webkit-transition:all .4s ease;transition:all .4s ease;z-index:-1}#Mba-scrollToTop li a.toolbutton:focus:before,#Mba-scrollToTop li a.toolbutton:hover:before{width:40px;height:40px;opacity:1;background-color:#d4d4d4;border-radius:0;top:0;left:0;bottom:1px;right:0}#Mba-scrollToTop li,#Mba-scrollToTop li ul{list-style:none;padding:0;}#Mba-scrollToTop li ul li{position:relative}#Mba-scrollToTop li ul li a.tooltip{text-decoration:none;color:#fff;line-height:40px;height:40px;display:inline-block;background:#ed5564;right:60px;top:0;position:absolute;padding:0 10px;-webkit-transition:all .4s ease;transition:all .4s ease;white-space:nowrap;visibility:hidden;opacity:0}#Mba-scrollToTop li:hover ul li a.tooltip{right:45px;visibility:visible;opacity:1}#Mba-scrollToTop li ul li a.tooltip:before{position:absolute;display:block;content:"";border-color:transparent transparent #ed5564 transparent;border-style:solid;border-width:5px;height:0;width:0;top:15px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);right:-9px}.expand-minus2{display:none}

JScript

Search for </body> then add the following code before it

<script type='text/javascript'>
//<![CDATA[
function toggle(t){$("#"+t).animate({height:"toggle"},400)}jQuery(document).ready(function(){var t=150,n=500
jQuery(window).scroll(function(){jQuery(this).scrollTop()>t?jQuery("#Mba-scrollToTop").fadeIn(n):jQuery("#Mba-scrollToTop").fadeOut(n)})}),$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash)
if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},500),!1}})}),$(document).ready(function(){$("#tool-expand").click(function(){$(".expand-plus2").toggle(),$(".expand-minus2").toggle()})}),function(t){var n=t("a.newer-link"),e=t("a.older-link")
t.get(n.attr("href"),function(e){n.html("<span>"+t(e).find(".post h1.post-title").text()+"</span>")},"html"),t.get(e.attr("href"),function(n){e.html("<span>"+t(n).find(".post h1.post-title").text()+"</span>")},"html")}(jQuery)
//]]> 
</script>

Final Words

You can of course change its colors by replacing #ed5564 and #fff with your desired colors.

You can also add more buttons by adding <li><a href='/'><i class='fa fa-home'></i></a></li> or something similar inside the UL tag.

Thank you for reading! Find this toolkit useful? Leave your thoughts and ideas on how to improve this toolkit in the comment section below!