ब्लॉग को अच्छे से design करने के लिए Back to top scroll बटन को add करना बहुत जरुरी है. इससे हमारे ब्लॉग की design और भी ज्यादा attractive हो जाती है और साथ ही इससे visitors को top पर scroll करने में आसानी होती है. यदि अपने अभी तक इस widget को अपने ब्लॉग में add नहीं किया है तो आप इस post की मदद से आप अपने ब्लॉग में आसानी से back to top widget को अपने ब्लॉग में add कर सकते हो.
आप 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 जरूर करें।
very nice post.
keep sharing
Thanks. Keep visiting in blogginghindi.