wordpress me back to top button kaise lagaye

Last Updated on 4 years by websitehindi

दोस्तों अगर आप wordpress ब्लोगर है तो आपको मालूम होगा की जब रीडर पोस्ट को पूरा पढ़ लेता है तो साईट के ऊपर में आना चाहता है | उस वक्त ऊपर आने में बहुत परेशानी होती है | और हमे धीरे – धीरे आना पड़ता है इसलिए भिजीटर सोचता है की कोई ऐसा setting सेट किया हो जिसके द्वारा टॉप में एक सेकेंड के भीतर जाया जा सके |

तो दोस्तों परेशां होने की जरुरत नही है | एक ऐसा भी setting किया जा सकता है की आप कुछ ही समय में इसका लाभ उठा सकते हो |
तो आइये जानते है की back तो टॉप बटन wordpress में कैसे सेट करे |

wordpress में back तो टॉप बटन सेट कैसे करे

back to टॉप बटन
इस इमेज को फॉलो करे
  1. सबसे पहले wordpress में login करके डैशबोर्ड में appearance पर click करे |
  2. wedgets पर click करे | इसले बाद एक न्या पेज खुलेगा |
  3. इस पेज में निचे जाकर text पर click करे |
  4. अब एक न्या पेज खुलेगा इस पेज में sidebar पर click करे
  5. अब add widgets पर click करे
अब यहाँ पर इस कोड को coppy करके न्या पेज के बॉक्स में past कर दे | कोड को past करने के बाद save पर click करे |
<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(https://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>

 

अब आप अपने वेबसाइट में देख सकते है back to top बटन लगा होगा | अगर बटन सेट करने में कोई प्रॉब्लम आये तो आप कमेंट बॉक्स में कमेंट करके पूछ सकते है |

Read also

WordPress me Google Analytics Kaise Install Kare

wordpress blog ko google search console par submit aur verify kare

yandex webmaster tools me website ko submit kaise kare details

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top