The Back To Top Button For The Latest Kang Ismet Blog

The Back To Top Button For The Latest Kang Ismet Blog - Hello, This time I want to give a cool back to top button like Kang Ismet's blog. Who is not familiar with Ismet, Kang Ismet is a blogger who is famous in Indonesia through the uniqueness of blog tutorials that always make visitors feel at home lingering on their blogs.

Long story short, last year somehow my blog, Ismet, whose address at blog.kangismet.net was rarely updated. I myself don't know what the cause is, it's possible that there is a business or activity in the real world that doesn't allow for updates in cyberspace ... but now the blog ismet is rebuilt and starts sharing interesting tutorials for you Blogger friends.

Okay without a lot of length, here I will share a back to top button used on Kang Ismet's blog with its latest look. What's interesting about this button is the addition of a social media link icon that you can fill in with the social media account link. How interested in trying it? Please follow the following tutorial

Installing the Back To Top Button on the Latest Kang Ismet Blog

1. Log in to the blog> Open Template> Copy the code below before ]]> </ b:skin> or </style>

#fixed-bar{position:fixed;bottom:0;right:0;z-index:100;width:25%;height:38px;clear:both;margin:0;overflow:hidden}#fixed-bar a{float:right;margin:0;padding:0;width:38px;height:42px;font-size:22px;text-align:center;color:#fff;transition:all .3s ease-in}#fixed-bar a.first{background-color:#48cf89}#fixed-bar a.first:hover{background-color:#40bb7b}#fixed-bar a.gplus{background-color:#c95325}#fixed-bar a.gplus:hover{background-color:#bd4e23}#fixed-bar a.fb{background-color:#4591b1}#fixed-bar a.fb:hover{background-color:#3f84a1}#fixed-bar a.twit{background-color:#76bdda}#fixed-bar a.twit:hover{background-color:#67acc8}#fixed-bar a.impoh{background-color:#f8b26b}#fixed-bar a.impoh:hover{background-color:#e9a25a}.bottom-wrapper{max-width:100%;;margin:0 auto} 

2. Then copy the code below before </ body>

<div id='fixed-bar' style='display:none'>
<div class="bottom-wrapper">
<a class="go-top first" href="#"><span class="fa fa-arrow-up"></span></a>
<a class="gplus" href="#" target="_blank" title="Site on Google+"><span class="fa fa-google-plus" style="margin-top:8px"></span></a>
<a class="fb" href="#" target="_blank" title="Site on Facebook"><span class="fa fa-facebook" style="margin-top:8px"></span></a>
<a class="twit" href="#" target="_blank" title="follow me"><span class="fa fa-twitter" style="margin-top:8px"></span></a>
<a class="impoh" href="#" title="Info"><span class="fa fa-paperclip" style="margin-top:8px"></span></a>
</div>
</div>
<script type='text/javascript'>
$("#fixed-bar").hide(),$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#fixed-bar").slideDown(200):$("#fixed-bar").slideUp(200)}),$(".go-top").click(function(){return $("html,body").animate({scrollTop:0},600),!1})});
</script> 

Change the code marked with your social media address.

3. Save the template.

Maybe that's all I can share, if there is less and more can be added in the comments column. Thank you for reading, hopefully useful.