2017-04-16

Responsible Back To Top Button For Blogger | Back To Top Button Blog Me Kaise Add Kre

Article By: Abhinav Last Updated : April 16, 2017 ( 6 Comments )

Hello Readers,

Iss post me mai aapko btaunga ki apne blog pe Back To Top button kaise add kre.

Agar aapke blog pe bhut se information hai. Ya aap long post likhte hai to ye button aapke blog pe hona bhut jaroori hai. Taki aapke visitors aasani se menu button ke paas jaa ske.

Note :- Back To Top button add krne me koi presaani bhi aa skti hai. So, Please sbse pehle apne blog ke template ka backup bna le. Agar aapko nhi pta ki template ka backup kaise bnaya jata hai to ye post pdhe : Blogger Blog Me Template Ka Backup Kaise Le

Chliye ab jaante hai ki apne blog pe Back To Top button kaise add kiya jaye.

How To Add Back To Top Button

Step1 : Sbse pehle apne blogger account me login kre.

Step2 : Ab Template me jaaye or Edit HTML pe click kre.

Step3 : Jb template khul jaaye to apne keyboard se Ctrl+F button dbaaye.

Step4 : Ab aapko ek upr search box dikhega usme <head> likh ke search kre.

Step5 : Ab niche diye gye code ko copy kre or <head> ke just baad paste kre.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Step6 : Ab usi search box me ]]></b:skin> likh ke search kre.

Step7 : Ab niche diye code ko copy kre or ]]></b:skin> ke pehle paste kre.

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;

}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 10px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
}

Step8 : Ab usi search box me </body> search kre. Or niche waale code ko copy krke </body> se thik pehle paste kr de.

</script>
<a href='javascript:' id='return-to-top'><i class='fa fa-chevron-up'/></a>
<script type='text/javascript'>
// ===== Back to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        
        $('#return-to-top').fadeIn(200);  
    } else {
        $('#return-to-top').fadeOut(200);   
    }
});
$('#return-to-top').click(function() {     
    $('body,html').animate({
        scrollTop : 0                      
    }, 500);
});
</script>

Step9 : Finally, Ab Save Template pe click kre or result dekhe.

Friends, Agar aapko hmara ye post psnd aaya to please share jarur karen.
Or hmare Facebook Page ko like kijiye.