BloggingHindi - Blogging Aur Internet Ki Sabhi Jankari

  • About Us
  • Contact Us
  • Blogging
  • WordPress
  • SEO

Blog Me Back To Top Scroll Button Kaise Add Kare.

Last Updated on April 11, 2022 by Md Arshad Noor 2 Comments

ब्लॉग को अच्छे से design करने के लिए Back to top scroll बटन को add करना बहुत जरुरी है. इससे हमारे ब्लॉग की design और भी ज्यादा attractive हो जाती है और साथ ही इससे visitors को top पर scroll करने में आसानी होती है. यदि अपने अभी तक इस widget को अपने ब्लॉग में add नहीं किया है तो आप इस post की मदद से आप अपने ब्लॉग में आसानी से back to top widget को अपने ब्लॉग में add कर सकते हो.

Blog me back to top button kaise add kare


आप internet पर बहुत सारे websites में visit किये होंगे और आपने बहुत सारे sites में देखा होगा की वहाँ पर back to top का scroll बटन होता है. इस बटन की help से हम एक click में site के top bar में scroll हो जाते है. ज्यादा तर लोग हमारे ब्लॉग की post को mobile से ही read किया करते हैं और जब हमारे ब्लॉग में long length का post होता है तो mobile में बहुत scroll करने पड़ते हैं. इसीलिए जब हमारे ब्लॉग में back to top का scroll button होगा तो इससे visitors को बहुत आसानी होगी।
recently, मेने अपने ब्लॉग में भी back to top button को add किया है. इससे मुझे बहुत अच्छे results मिले हैं. इसको blog में add करना बहुत important होता है. क्योकि अगर हमारे ब्लॉग में visitors नहीं आये तो बेकार है और जब हम अपने ब्लॉग में ऐसे widgets को add करेंगे, जिससे visitors को आसानी हो तो इससे visitors भी हमारे ब्लॉग को like करेगा। जब हमारे ब्लॉग में back to top बटन होगा तो इससे visitors हो top में scroll करने में आसानी होगी. इसीलिए इस widget को blog में add करना जरुरी है. तो चलिए अब हम जानते हैं की इस widget को ब्लॉग में कैसे add करें.

अपने ब्लॉग में Back to Top button को add कैसे करें.

निचे में हम आपको step by step बता रहे हैं की Back to top बटन को ब्लॉग में कैसे add करें. अगर आप इसे अपने ब्लॉग में add करना चाहते हो तो निचे दिए गए steps को follow करें।
Step 1: सबसे पहले Blogger में login करें और फिर Themes ->Edit HTML में जाएँ.

Step 2: अब CTRL+F बटन दबाकर <head> को find करें और <head> के निचे आपको निचे दिया हुआ Font Awesome की code को add करना है.

<link href=’http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css’ rel=’stylesheet’/>
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’></script>

Step 3: फिर से CTRL+F बटन को दबा कर ]]></b:skin> को find करें और  ]]></b:skin> पहले निचे दिया हुआ code को add करें.

/******back to top button for blogger by blogginghindi.com**********/
.back-to-top { z-index:99999; position: fixed; bottom: 0.2em; right: 10px; background-color: transparent; font-size: 20px; padding: 0px 0px 0px 2px; display: none; border-radius: 30%; }
.back-to-top:hover { background-color: transparent; margin-bottom: 8px; font-size: 20px; }
.back-to-top i.fa.fa-arrow-up { color: #ff7211; padding: 4px 5px; border-radius: 50px; background-color: #222; font-size: 28px; border: 2px solid #fff; }
.back-to-top i.fa.fa-arrow-up:hover { color: #fff; padding: 4px 5px; border-radius: 50px; background-color: #222; font-size: 30px; border: 2px solid #ff7211; }

Step 4: अब फिर से CTRL+F बटन को दबाएँ और </body> को find करें और </body> के पहले निचे दिया हुआ code को add करें.

<a class=’back-to-top’ href=’#’><i class=’fa fa-arrow-up’></i></a>
<script type=’text/javascript’>
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery(‘.back-to-top’).fadeIn(duration);
        } else {
            jQuery(‘.back-to-top’).fadeOut(duration);
        }
    });
    jQuery(‘.back-to-top’).click(function(event) {
        event.preventDefault();
        jQuery(‘html, body’).animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Step 5: अब finally आप template को save कर दीजिए. 



में उम्मीद करता हूँ की आपको यह जानकारी अच्छा लगा होगा और आपने अपने ब्लॉग में back to top widget को add कर लिया होगा. यदि आपको इस post से सम्बंधित कोई सवाल पूछना है तो comment करें. हमारे ब्लॉग की latest updates को सीधे अपने email में पढ़ने के लिए हमारे ब्लॉग की feedburner से subscribe करें. अगर post अच्छा लगे तो इसे social media पर share जरूर करें।

You May Also Like

  • Blog Me Facebook Page Box Widget Kaise Add Kare (100% Tested)

    Blog Me Facebook Page Box Widget Kaise Add Kare (100% Tested)

  • Blog Me Post Schedule Kyu Aur Kaise Kare

    Blog Me Post Schedule Kyu Aur Kaise Kare

  • Blog Me Use Karne Ke Liye Top 12 Web Fonts

    Blog Me Use Karne Ke Liye Top 12 Web Fonts

  • Blog Me YouTube Subscribe Button Kaise Add Kare – Full Guide

    Blog Me YouTube Subscribe Button Kaise Add Kare – Full Guide

About Md Arshad Noor

हेलो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में इस ब्लॉग में रेगुलर नई नई आर्टिकल्स लिखता हूँ. यहाँ पर हम ज्यादातर Blogging, Make Money, SEO, WordPress आदि से सम्बंधित Article मिलेगी. आपको हमारी लेख पसंद आती है तो इसे सोशल मीडिया में शेयर करें। अगर आपको कोई सहायता चाहिए तो कमेंट कीजिए।

COMMENTs ( 2 )

  1. Sufyan says

    very nice post.

    keep sharing

    Reply
    • Md Arshad Noor says

      Thanks. Keep visiting in blogginghindi.

      Reply

Leave a Reply Cancel reply

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

Please do not spam! otherwise your comment will be removed.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Useful Articles

Google Keyword Ranking Check karne ke liye 5 Best Website

Website Ko User Friendly Banane Ke Liye 5 Secrets

PHP Version Ko Upgrade Karke Site Speed Ko 20% Increase Kare

WordPress Toolbar/Adminbar Ko Hide Aur Customize Kaise Kare

Adsense Account Kaise Banaye [Step By Step]

Blogging Ke 10 Important Myths ke Bare Me Apko Pata Hona Chahiye

Hostlelo Review – A Great Solution for New Bloggers

QR Code Kya Hai? QR Code Kaise Banaye aur Scan Kaise Kare

Blog Me Live Cricket Score Widget Kaise Add Kare

7 Karn WordPress Me Jyada Plugin Use Nahi Karni Chahiye

Directory Browsing Kya Hota Hai-Isko Disable Karne Ke 2 Tarike

Twitter Account Ko Secure Kaise Rakhe

Blog ko Delete kaise kare aur Delete kiya hua blog wapas kaise laye

About Us

mdarshadnoorहेल्लो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में अररिया, बिहार का रहने वाला हूँ. मुझे नयी चीजें सीखना-सिखाना बहुत पसंद है. में पिछले 5 सालों से ब्लॉगिंग के फील्ड में हूँ. इस ब्लॉग में आपको ब्लॉगिंग और इन्टरनेट से सम्बन्धित जानकारी मिलेगी.

SUBSCRIBE OUR NEWSLATTER

हमारे नवीनतम पोस्ट की सूचना एवं उपयोगी सामग्री प्राप्त करने के लिए हमसे जुड़ें

Posts for WP Users:

WordPress Theme Select Karne Se Pahle 8 Chize Consider Kare

WordPress User Roles Ke Bare Me Puri Jankari [With Customization]

Contact Form 7 Ke CSS & JS Ko Only Contact Us Page Me Load Kaise Kare

WordPress Toolbar/Adminbar Ko Hide Aur Customize Kaise Kare

WordPress.com Serious Blogger Ke Liye Bekar Kyu Hai? 8 Reasons

More Posts from this Category

DMCA.com Protection Status

Recommended For You

Adsense CPC Kaise Badhaye? – 10 Tips in Hindi

No-Follow Backink Ke 5 Fayde (Benefits) Apko Janna Chahiye

Adsense Account Ko Ban Kyo Karti hai? Top 11 Karan

Blog Ki Traffic Kaise Badhaye? Top 10 Tips

Adsense Account Me Payee name Aur Address Kaise Change kare

Apne Blog/website ke Liye Sitemap kaise Banaye.

Copyright © 2021 - All rights reserved. AboutContactSitemapDisclaimer