Installing the Back To Top Button on a Blog - This time I will share a simpler back to top button. For those of you who want to put the button back up or back to top, here I will share how to install the code on your blog.
Although this button is quite simple, I think it feels very attractive and minimalist. This button will appear in the lower right corner of your blog. Okay! Immediately we go to the tutorial:
1. Login to Blogger> Click Templates> Edit HTML> Add the code below just above the code ]]></b:skin> or </style>
/* Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}
2. After that, add the code below just before the code </body>
<div class="backtotop hide"><span></span>Top</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>
3. Last save the template and see the results.
0 comments