Blogger Blog Mein Jore Smooth Scrolling Back To Top Button

Hey friends, kaisa hai ap? aj mai ek blog designing post lekar hajir hoon. Agar ap apne blog readers ko kuch extra subidha dena chahte hai to Back To Top button ek accha option hai. Jyadatar blogger templates mein ye pahle se hi load kar dia jata hai, lekin agar apki blogger template mein ye back to top button nehi hai ya ap usse customize karna chahte hai ya use replace karna chahte hai to ye post apke liye helpful rahega.

smooth-scrolling-back-to-top-button-for-blogger-blog-in-hindi

Kabhi kabhi humare blog posts jyada bada ho jata hai. Tab readers jab padte padte post ki end mein chala jata, use upad ane ke liye mouse use karna padta hai aur ye unke liye ek parishani ka karan bhi hai. Back To Top button apne blog mein jorne se ap apne readers ko ye parishani se mukti de sakte hai aur blog navigation ko bhi improve kar sakte hai.

Ye Back To Top button entirely CSS3 aur JavaScript ko milake banaya gaya hai. Icon ke taur mein  Font Awesome use kia gaya hai. Is button mein click karke readers smoothly scroll karke niche se upad ja sakta hai.

Kaise Blog Mein Back To Top Button Jorenge?


Simply niche diye gaye steps ko follow kare.

Step 1. Pahle apne blogger account mein login karke Dashboard > Template > Edit HTML mein jae.

Step 2. Abh codes mei kahi bhi click karke keyboard mein se CTRL+F key ek saath press karke ]]></b:skin> tag ko search kare.

Step 3. Uske baad niche diye gaye codes ko copy karke ]]></b:skin> tag ki niche paste kare.
/* Back To Top Button By HelperBus
-------------------------------------- */
.back-to-top{position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background-color:#0c9b81;color:#fff;width:45px;height:45px;line-height:44px;right:25px;bottom:-25px;border-radius:50px;transition:all 0.5s ease-in-out;transition-delay:0.2s}
.back-to-top:hover{background-color:#0caa8e;color:#fff;transition:all 0.2s ease-in-out;transition-delay:0s}
.back-to-top.show{visibility:visible;cursor:pointer;opacity:1;bottom:25px}
.back-to-top i.fa{font-size:28px;line-height:inherit}
Step 4. Abh fir se CTRL+F key press karke </head> tag ko search kare.

Step 5. Abh niche wale scripts ko </head> tag ki upad/age/above mein paste karein.
<script type='text/javascript'>
//<![CDATA[
$(function(){
    $(document).on( 'scroll', function(){
        if ($(window).scrollTop() > 100) {
            $('.back-to-top').addClass('show');
        } else {
            $('.back-to-top').removeClass('show');
        }
    });
    $('.back-to-top').on('click', scrollToTop);
});
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
Step 6. Fir se CTRL+F key press karke </body> tag ko search kare.

Step 7. Abh niche ki codes ko </body> tag ki upar/above/age paste kare.
<div class='back-to-top'>
 <span class='back-to-top-icon'>
  <i class='fa fa-angle-up'/>
 </span>
</div>
Step 8. Finally, Save Template button mein click karke apna template save kare.

Recommended Posts:

Note: Agar apki template mein pahle se Jquery aur Font Awesome stylesheet add nehi kia hua hai to apko pahle ye dono install kar leni hogi. Lekin mere hisab se jyadatar template mein ye pahle se hi jura hua hota hai. Isliye tension na leke pahle test karke dekhe. Uske baad agar na hua to ap mujhse contact kar sakte hai. Main ye dono chij apki template mein jorne mein madat karunga.

SHARE THIS

Author:

I'm an 18 years aged Passionate Blogger from West Bengal, India. I just love to write articles and share them with people. The day was 28th September 2015, when my dream of having a website comes true and I made this website to help you and peoples like you!

Previous Post
Next Post
7/12/2016 11:14 pm

badhiya jankari hai dost but aapne mujhe bataya nahi ki ye sub header design aapne apne blog me kaise add kiya hai

Reply
avatar
7/12/2016 11:49 pm

Hey Rohan, Mai iske barein mein ek post likhunga baad mein. Still then stay with us.

Reply
avatar