Common Steps for any Styles
Log into your dashboard. Than go to Layout , now click on edit/htmlFind the bellow code
<body>
and replace it with this code<body>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery.scroll.pack.js' type='text/javascript'/>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery.easing.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$("#toTop").scrollToTop({speed:1000,ease:"easeOutBounce",start:700});
});
</script>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery.scroll.pack.js' type='text/javascript'/>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery.easing.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$("#toTop").scrollToTop({speed:1000,ease:"easeOutBounce",start:700});
});
</script>
Style 1 Back to Top with Text only
Be sure you have completed the above Common stepsNow find
]]></b:skin>
and replace it with this code#toTop { width:100px;background:#f1f1f1;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
]]></b:skin>
Again find]]></b:skin>
</body>
and replace it with this code<a href="#" id="toTop">^ Scroll to Top</a>
</body>
Save your Template. check the new back to top blogger widget</body>
Style 2 Back top Top with Image button
Now find
]]></b:skin>
and replace it with this code#toTop {position:fixed;bottom:10px;right:10px;cursor:pointer;}
]]></b:skin>
Now find]]></b:skin>
</body>
and replace it with this code<a href='#' id='toTop'><img src='http://2.bp.blogspot.com/_Mje-lwg4sv8/S-jZyLcLCPI/AAAAAAAAAJA/BmXjvZRJJLM/s1600/up3.png'/></a>
</body>
You can change the button image just replace the red code above with the icons code bellow.</body>
http://4.bp.blogspot.com/_Mje-lwg4sv8/S-jZr6cFtqI/AAAAAAAAAIw/Uht7x2MVD78/s1600/webdev-arrow-up-icon.jpg
http://3.bp.blogspot.com/_Mje-lwg4sv8/S-jZtve2HEI/AAAAAAAAAI0/s8soyvi23dA/s1600/scroll_arrow_top.gif
http://2.bp.blogspot.com/_Mje-lwg4sv8/S-jZuy7d_jI/AAAAAAAAAI4/0oKyKI_gjQ0/s1600/to-top-button.png
http://4.bp.blogspot.com/_Mje-lwg4sv8/S-jZwhGGv1I/AAAAAAAAAI8/gYaWPVxikA4/s1600/up.png
http://2.bp.blogspot.com/_Mje-lwg4sv8/S-jZyLcLCPI/AAAAAAAAAJA/BmXjvZRJJLM/s1600/up3.png
0 comments:
Post a Comment