Animated Back to Top / Scroll to Top button widget for Blogger / Blogspo

Today we are going to add a animated Back to Top / Scroll to Top button widget for Blogger and blogspot blogs using javascript and jquery. This widget makes it simple for your visitor to return to top the page in a special animated style by just clicking the button, which always remains on the right bottom of the screen. There are many styles and back to top buttons to choose from...

Common Steps for any Styles

Log into your dashboard. Than go to Layout , now click on edit/html
Find 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>

Style 1 Back to Top with Text only

Be sure you have completed the above Common steps
Now 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

</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

Style 2 Back top Top with Image button

First complete the common steps on the start of the page
Now find

]]></b:skin>

and replace it with this code

#toTop {position:fixed;bottom:10px;right:10px;cursor:pointer;}
]]></b:skin>

Now find

</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.

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPV9HqtioDokMUz50-_xbsjwxIPt833IrJRdQf0iuSmHWyirdDgRr7QUYdgyqC6t29MkgNuO6GaPua-rFIC-IEeIEIUuo36Ke2S6nuqvV6nrf6D_1czbo0PjA-L3kV6RuSsx_wJRn60Kj9/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4p4V5DrT4Q0BOmxKNl6SlnQbURx75HlkrT-pxJFHJx4wDK8tphxoJrJt4yZXoejfTMNZUHkj4ORyaowkluL0a2BKwYbJO_-JFDLhexrWZT4UU7_8gVJQs63B-4X_8W2Bhgnljx9xDHoi6/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZNYmbn6AVvmiQ5zqqEjm4WRCFhqLbpmmSt4Ag6qxVffBZM7XPy_p7FmzT45e9L3C8jtLx5CeQ1j2g13_w7aQPICCINabiUxI53-QU7z4b3NxDJSFu7xJ_IfSFsiZccDGJC8dpMkVt6Sn2/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fmp89LQFkiyr0P62HPaJFTFySGjH_RBNijYUZat8LMiHSICL-qPDK2mzNA65ROs1Y4YK1_jS8YOshr-3iEOeUgwyE-tEpWbt5cPtOOh-jXYutA_HT7i4JUHnCxIKiBbbyu4ibYUdjzAr/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIKRAv86lgOEB0S7E9P2K3aCuUMrUYPrYrhKUU9baElhALIG5jFOsQDAPVKVNyEIwynfgBNrfV9QkfKPF8jiZ7legJ8MY8lkWyKoIDGOKIUe3LrtETJmB6x-1mpvP_synVNCZjONFVAs1/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiwCJ4WBIkhL3UDqS8HQ8THbsjLD9HKXosiqEiVeLkhR3Vv6Cxxg1eWEy4P7SX-ys5z_Isdfh_OomEQf9HI3Nhw6EMiXL5Rm9VRKYemo4ykug7OmjnvgJx2EbtOH9mhmTWErsL6LAyVKIz/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWt-MFlzx9t5QFESSqE6WWL524d8XMtrlaYMVJljEVE7Bnh4FC5gTvjqubnQhwKdj33QBbX3bke3A6Q30U5MyjYKxBbQfQ4Ts1R0IK4xlzg1LxorYUb58tsatGZEZIf836dSbiKvC_PMK2/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqRSoGuQvEzzzNSMXzQ_-3mJZlWlZjy9S4nc-7bHG3f5BHMSUl4t8siHxr2CvOYholSaNTZ9tvT1pVmInlXs5MtqqNOrb7ykn6leebT-a_jRpyg-RcCyBDArrRQD989RHB8c84pUH6Pfu-/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwvPVPNA4IT1tgnGXwC8VbOua1i6RN7LS9KKBAwHKuvaQDO2bljvWnhP5f5ls9rTZ9ms4TkIOMHURE7B4_YDXgXeSo93oDiArOjxlfhf8raulc3laYH-ZSf0sN42HN6RLFgikw8Isa-S0W/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz3U0-TESFQIGzMmSoeXZ4wYOw-WT3lVfIMx0XT4Y8slLYuH4SewgMN-opysQ2pRsM-EecT-M7LanvJ6G6O6NVOAdNg3gwlAczvoLL2tEkr1BO12P_a4Ao-daifdIDeTCZCJ_Qo_7pLGuD/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFNNHyIXe09ddCx3qVqk-vBBICbOLmoSiJYvePfQAQTNvcieJUPGaQZN_QAjWN1r7zixhGeWsqsxOaAXbIAYGRBCj6-An99SCJWTKB50jLELXh3bAuGfQXj-OAZuMTkxoLe_zogQlgiiXw/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8_H31KUZglBKQ9Xl_FSovCEzduxkjcPo41JKb_vodPt3WQyJhhfrCBF2ntbkossuLIvZn-fCMT8R4ySHnAz36mzKnSe7HmRAgfufkx2cCz3Cl6yJBbQXnZtc8S6etG41YTZD9qdquwtoN/s1600/bttp-2.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWq

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6DZbJC90VEnpkrIEw3yWjdhw7ivQgl4gM1SZTRVy5IEePO5sYidMTATGzsF1JCCbAi8H1sTgXx4p8K0vF2X0ITQN3inRV1iimMKG_mFIxGoV5Iz2cRR83ItyITFeZU2v9qGas1Cn2WTf/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQr4cHnFIaHM6WKlnl_4LU6i7xYRsHDl1fEufyGZBjVeGbNUaSWRckQ3_bn1zNA7q6XGt0C6pF4OcNVhUCpvnKNmGhGXPEwDALXlz3U22iSbktuULWmBITUGCtNScPcYOdqZbzuUBWpw5a/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvLg4KikO-zAo6CO_9KNXkZ2-jqQUVYUjc-9iK1ljc-8QD1ACGz-7cw3lK2nivp4hxgAwAd4SBUe-PHymy0YxeK4d_rL9zPQKz6GftqA4FsKjN2B3PAm_c-z2MX1g5T8JCDbDBEP-wpRm/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4mh8fmf-PMW0KqNgv62seZ5uC5wr6Ebkyr9XqOKD1Nkt6jrALHNmJmhdbq2PC-WzLp8iFSyBVZUdo0NlYQigvATIUBoX3mmez9-VLmdFj028-334ZPcaplrebYPGkjqvaGmk2yKHXwbXW/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZIudSABWqSgk6xx-fhGHqWoBHYQ_f6AA8Yu-2lJVVew9X1uNsX31YqVCSX55HULfi1wNpppzWfEpAEd2Ukww6KJLA_oi-LJfbcnvok7aZUA75gkcHf4lKX5aYgeGm71KPmh8ZhBtLCPB7/s400/bttp-19.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C

الأربعاء، 13 أكتوبر 2010

Animated Back to Top / Scroll to Top button widget for Blogger / Blogspo

شارك

0 التعليقات:

تصنيف

المشاركات الشائعة

المتابعون