Installing the Back To Top Button on the Blog

Installing the Back To Top Button on the Blog

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. 


𝕵𝖔𝖑𝖆
𝕵𝖔𝖑𝖆 Kyɛfa yɛ fɛ, nanso sɛ woannya mfaso mfi kyɛfa mu a, so wokɔ so kyɛ? Me nsusuw sɛ ɛho hia, momma yɛnkɔ so nkyerɛw blog

Post a Comment for "Installing the Back To Top Button on the Blog"