Create "Scrol To Top" Button For Blogger

Today i,m going to teach you the methode of adding a scrol top to top button on blogger with this button your visitor easily see your full blog and back upward fastly and also see this post this is important Stylish Back to top button on blogger

1) Go to blogger dashboard and click on template then click on edit html
2) press Ctrl+F butoon and find these codes ]]></b:skin>
3) Now add below CSS codes before these codes ]]></b:skin>


/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }



4) now find </body>
5) Finally paste the below codes before this code </body>


<A HREF="#" ID="TOTOP">^ SCROLL TO TOP</A><SCRIPT SRC='HTTP://AJAX.GOOGLEAPIS.COM/AJAX/LIBS/JQUERY/1.3.2/JQUERY.MIN.JS' TYPE='TEXT/JAVASCRIPT'></SCRIPT><SCRIPT TYPE='TEXT/JAVASCRIPT'>/*-----------------------* JQUERY PLUGIN: SCROLL TO TOP* BY CRAIG WILSON, PH.CREATIVE (HTTP://WWW.PH-CREATIVE.COM)* BRING TO YOU BY ZEN FROM HTTP://ZENPLATE.BLOGSPOT.COM* COPYRIGHT (C) 2009 PH.CREATIVE LTD.* DESCRIPTION: ADDS AN UNOBTRUSIVE "SCROLL TO TOP" LINK TO YOUR PAGE WITH SMOOTH SCROLLING.* FOR USAGE INSTRUCTIONS AND VERSION UPDATES TO GO HTTP://BLOG.PH-CREATIVE.COM/POST/JQUERY-PLUGIN-SCROLL-TO-TOP.ASPX* DO NOT DELETE THESE INFOMATION* VERSION: 1.0, 12/03/2009-----------------------*/
$(FUNCTION(){$.FN.SCROLLTOTOP=FUNCTION(){$(THIS).HIDE().REMOVEATTR("HREF");IF($(WINDOW).SCROLLTOP()!="0"){$(THIS).FADEIN("SLOW")}VAR SCROLLDIV=$(THIS);$(WINDOW).SCROLL(FUNCTION(){IF($(WINDOW).SCROLLTOP()=="0"){$(SCROLLDIV).FADEOUT("SLOW")}ELSE{$(SCROLLDIV).FADEIN("SLOW")}});$(THIS).CLICK(FUNCTION(){$("HTML, BODY").ANIMATE({SCROLLTOP:0},"SLOW")})}});
$(FUNCTION() {$("#TOTOP").SCROLLTOTOP();});
</SCRIPT>


NOW SAVE TEMPLATE AND YOUR SCROL; TOP BUTTON IS READY

Tags:

0 Responses to “Create "Scrol To Top" Button For Blogger”

Post a Comment

Subscribe

Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio. Duis mollis

Designed by BloggingNeed