back to top/scroll to top button kaise add karte or kyu add karte hai blogger template me

hello all dear blgger
kabhi kabhi aisa hota hai ki  ham apne blog me baht hi bada post dal dete hai lekin apko pata hai jab koi bhi visiter aise post ko poora padh leta hai to usko apke blog to sabse top section me aane me kuch problem hoti  hi apka visiter chahta hai ki apke blog me koi aisa button ho jispe click karte hai o apke blog ke sabse top hisase me pahuch jata hai 

  jante hai  bLOg me back to top button kyon add karte hai   

bloggers blog me back to top button add karne se ek to hamare visiter ko ye feel hota hai ki chahe jitni badi post ham padhe bas ek click me ham blog ke top me pahuch jaynge 
or dusra hamare blog ki khubsurti badh jati hai 


   kaise add karte hai back to top/scroll to top button  

sabse pahle apko apne blog ke dashboard me jana hai 
waha pe apko LAYOUT pe click karna hai 

uske baad apko ADD A GADGET pe click karna hai 

uske baad apko html/java script pe click kare 

ab apko ye code apke samne jo box open hoge uske niche wale box me peste kar dena hai 

<style>
/********************
BACK TO TOP BUTTON
********************/
.tcb-top {
 position: fixed;
 bottom: 25px;
 right: 0;
color:#fff;
 -webkit-transform: translateX(100%);
 -moz-transform: translateX(100%);
 -ms-transform: translateX(100%);
 -o-transform: translateX(100%);
 transform: translateX(100%);
 background: #222;
 -webkit-transition: all 0.3s ease, -webkit-transform 0.5s 0.3s ease;
 -moz-transition: all 0.3s ease, -moz-transform 0.5s 0.3s ease;
 transition: all 0.3s ease, transform 0.5s 0.3s ease;
 text-transform: uppercase;
 padding: 10px 10px 10px 0;
 opacity: 0;
 visibility: hidden;
 font-weight: bold; }
 .tcb-top-visible {
 opacity: 0.5;
 visibility: visible; }
 .tcb-top-fadeIn, .tcb-top:hover {
 opacity: 1;
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0); }
 .tcb-top:before {
 content: '';
 position: absolute;
 height: 100%;
 width: 50px;
 right: 100%;
 top: 0;
 background: #222 url(http://imgh.us/tcb-direction.svg) no-repeat center 50%;
 background-size: 20px; }
</style>
<a href="#top" class="tcb-top">Top</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script>
jQuery(document).ready(function($){
 // duration of animation while going back to top
 var back_duration = 600,
 // scroll position after which 'back to top' button will be visible
 back_offset = 800,
 // store 'back to top' element in variable for easy access
 back_button = $('.tcb-top');
 // animate back to top
 back_button.on('click', function(e){
 e.preventDefault();
 // running jQuery animate function of 
 $('body,html').animate({
 scrollTop: 0 ,
 }, back_duration
 );
 })
 // making button direction aware
 var lastScrollTop = 0, delta = 5;
 $(window).on('scroll', function(){
 var scrollTop = $(this).scrollTop();
 if( Math.abs(scrollTop - lastScrollTop) <= delta) return false;
 // show button after offset value
 ( scrollTop > back_offset ) ? back_button.addClass('tcb-top-visible') : back_button.removeClass('tcb-top-visible');
 // check if scrolling down
 if(scrollTop > lastScrollTop){
 back_button.removeClass('tcb-top-fadeIn');
 } else {
 // scrolling up? if yes make it fadeIn
 (back_button.hasClass('tcb-top-visible')) ? back_button.addClass('tcb-top-fadeIn') : back_button.removeClass('tcb-top-fadeIn');
 }
 lastScrollTop = scrollTop;
 });
});
</script>

ab apko save button pe click karna hai 
uske baad right side me uper me SAVE AGGRIMENT pe click karna hai or apne blog ko dekhe ki ye trick apke blo pe sahi se work kar rahi hai 

agr apko koi bhi problem hoti hai to aap hame comment  jarur kare 

post padhne ke liye thankxxxx
                              

Share this

gaurav   widget

Receive Quality Articles Straight in your Inbox by submitting your Email below.

Related Posts