Back Button to Top Fish Bait Version
Back to Top Version of Fish Bait - Back to Top button is a button to return to the top of the web page without having to use the scrollbar. This back to top function is to make it easier for visitors to return to the top quickly. We often see the usual back to top display, but this time it will be different from usual.
This Back to Top button is as if we were fishing, so when the scrollbar is rolled down automatically the hook with the fish bait drops down, when the scrollbar is rolled up the hook rises up again. Then when the hook with the bait is clicked, the scrollbar rolls back up.
Installing the Back Button to Top Fish Bait Version
1. Open Blog> Template> Save this code above the code ]]></b:skin> or </style>
/* Back to Umpan Ikan */
.umpanikan{background-image:url(https://3.bp.blogspot.com/-cYh1IxsmhD4/VyLubMGA9gI/AAAAAAAADAw/v5_BdKLkkrwVosuBC8gTlXYSN_l0Qo_NwCLcB/s1600/umpanikan.png);background-repeat:no-repeat;position:relative}
#umpanikan{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#umpanikan-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#umpanikan:hover > #umpanikan-bubble,#umpanikan:hover > #umpanikan-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#umpanikan-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99}2. Then save this code above the code </body>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#umpanikan").css("top","0"):n("#umpanikan").css("top",o-700+"px")}),n("#umpanikan").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#umpanikanTOP").offset().top},"slow")})});
//]]>
</script>3. Save this code under the <body> code
<div id="umpanikanTOP"></div>
<div class="umpanikan" id="umpanikan">
<div id="umpanikan-bubble">Back to the top</div>
</div> Please change the writing that I mark as desired.4. Save the template.
What do you think? Unique is not, hopefully the Back to Top Button for this Fish Bait Version can give you a new feel. May be useful.
Post a Comment for "Back Button to Top Fish Bait Version"