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
