अपने ब्लॉग पर बैक टू टाप एंव टाप टू बाटम बटन लगाएँ !!

नोज जैसवाल : सभी पाठकों को मेरा प्यार भरा नमस्कार।कभी कभी आपकी पोस्ट या होम पेज में सामग्री काफी ज्यादा हो जाती है,फल स्वरूप आपको अपना माउस कर्सर ऊपर नीचे करना होता है,आपकी या आपके पाठको की सुविधा के लिए यह विजेट प्रस्तुत किया जा रहा है। आज तकनीकी पोस्टों के क्रम में पेश है,अपने ब्लॉग पर बैक टू टाप एंव टाप टू बाटम बटन लगाएँ !!मेरी पिछली पोस्ट आइये जानते हैं इंटरनेट पर सबसे बड़े हमले का सच को अत्यधिक पसंद करने के लिए आप सभी का हार्दिक धन्यवाद,वैसे तो मै आपको अपनी पोस्ट टेम्पलेट में बिना बदलाब किये Back To Top का बटन अपने ब्लॉग पर लगायें। में एक कोड दिया था,लेकिन वह विजेट आपके ब्लॉग पर नीचे से ऊपर ले जाने के लिए था। लेकिन इस विजेट की विशेषता यह है कि प्रस्तुत विजेट से आप या आपके पाठक आपके ब्लॉग पर नीचे से ऊपर एंव ऊपर से नीचे दोनों तरफ सिर्फ बटन पर क्लिक कर आसानी से जा सकेगें। इसे लगाना बेहद आसान है,आप नीचे दिए आसान से तरीके से इसे अपने ब्लॉग पर स्थापित कर सकते है,इसका लाइव डेमों आप यहाँ देख सकते है।


इसे अपने ब्लॉग पर कैसे स्थापित करें?
  • आप अपने ब्लॉगर एकाउंट में लॉन्ग इन हों Bloggerले आउट -->टेम्पलेट पर जाएँEdit HTML
  • Tick on Expand Widget Templates check box
  • इसे खोजें (using CTRL + F) for ]]></b:skin> in your blogs HTML
  • नीचे दिया CSS कोड ठीक इसके ऊपर कापी कर पेस्ट कर दें। ]]></b:skin>

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIXn8Ksa3VMqrun98WYNpfw9tC-xUXVBfSz9mjFALM4jb0__yWTeImFLLzdMxaNdfg9470IGCmQkWj0W5SjvDfyr_rQqWfaLBSq6bhUd8WS9KINw_z87Kri5ofbsm21t8K0EUnn2Ybvo/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3vfTrfl77yUxSqgc3i88emMFdsOp0qqpcKCdCTeGeFF_Gi-37wMz0qcmifUOQnMxTeU2D_ds7FgK5VC53IGxtW-pT1wPiujvURZdPYV7zyAUf1VAZRe8HI9QRBdvP-1k02JCwrNExUas/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
Note:- These button will shown at right side of the page. if you want to show these buttons at left side then replace above red colored text right with Left.
  • अब इस कोड को खोजें। </body>
  • नीचे दिया कोड ठीक इसके ऊपर कापी कर पेस्ट कर दें। </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
अगर आपके ब्लॉग में पहले ही jQuery plugin है तो लाल रंग से लिखा कोड ना लगाएँ।
अब अपने टेम्पलेट को सेव कर दें एंव ब्लॉगगिंग का आनंद लें।
क्या आपको यह लेख पसंद आया? अगर हां, तो ...इस ब्लॉग के प्रशंसक बनिए !!
इस पोस्ट का शार्ट यूआरएल चाहिए: यहाँ क्लिक करें। Sending request...
Comment With:
OR
The Choice is Yours!

33 कमेंट्स “अपने ब्लॉग पर बैक टू टाप एंव टाप टू बाटम बटन लगाएँ !!”पर

  1. बेहतरीन

    ReplyDelete
    Replies
    1. मोहित जी,पोस्ट पर राय के लिए आभार।

      Delete
  2. Very Nice Widget

    ReplyDelete
    Replies
    1. Shivangi sexena जी,पोस्ट पर राय के लिए आभार।

      Delete
  3. अच्छी जानकारी दी है लेकिन हमने पहले से बोटम टू अप वाला बटन लगा रखा है उसको हटाकर इसको लगाना होगा जो फुर्सत मिलनें से जरुर करेंगे !!
    आभार !!

    ReplyDelete
    Replies
    1. पूरण खण्डेलवाल जी,आपका स्वागत है।

      Delete
  4. Prem Raj जी,पोस्ट पर राय के लिए आभार।

    ReplyDelete
  5. बहुत बढिया विजेट मनोज जी.अभी लगाता हूँ इसे

    ReplyDelete
    Replies
    1. दिनेश शुक्ला जी,आपका स्वागत है।

      Delete
  6. बहुत बढिया विजेट मनोज जी.

    ReplyDelete
    Replies
    1. सनिल सक्सेना जी,पोस्ट पर राय के लिए आभार।

      Delete
  7. शानदार विजेट थैंक्स.

    ReplyDelete
    Replies
    1. सोनू पंडित जी,पोस्ट पर राय के लिए आभार।

      Delete
  8. बहुत ही बेहतरीन विजेट है मनोज जी पेज को उपर निचे करने के लिए,धन्यबाद.

    ReplyDelete
    Replies
    1. राजेंद्र जी,पोस्ट पर राय के लिए आभार।

      Delete
  9. उपयोगी जानकारी के लिये धन्यवाद.

    ReplyDelete
    Replies
    1. सुशील बाकलीवाल जी,पोस्ट पर राय के लिए आभार।

      Delete
  10. शानदार विजेट मनोज जी थैंक्स.

    ReplyDelete
    Replies
    1. नीरज सक्सेना जी,पोस्ट पर राय के लिए आभार।

      Delete
  11. अच्छा विजेट मनोज जी.

    ReplyDelete
    Replies
    1. Ajay Sharma जी,पोस्ट पर राय के लिए आभार।

      Delete
  12. बेहतरीन विजेट मनोज जी,धन्यवाद.

    ReplyDelete
    Replies
    1. mohit जी,पोस्ट पर राय के लिए आभार।

      Delete
  13. बहुत अच्छे विजेट है आपके ब्लॉग पर थैंक्स.

    ReplyDelete
    Replies
    1. हरीश बिष्ट जी,पोस्ट पर राय के लिए आभार।

      Delete
  14. Very Nice Widget Sir Thanks.

    ReplyDelete
    Replies
    1. Babu Ram जी,पोस्ट पर राय के लिए आभार।

      Delete
  15. बहुत बढिया विजेट मनोज जी.

    ReplyDelete
    Replies
    1. Vikas sexena जी,पोस्ट पर राय के लिए आभार।

      Delete
  16. बहुत ही बेहतरीन विजेट है मनोज जी.

    ReplyDelete
    Replies
    1. Shivam Kumar जी,पोस्ट पर राय के लिए आभार।

      Delete
  17. मनोजजी बहुत उपयोगी जानकारी।

    ReplyDelete
    Replies
    1. प्रवीण पाण्डेय जी,पोस्ट पर कमेन्ट के लिए आभार।

      Delete

Widget by:Manojjaiswal
Related Posts Plugin for WordPress, Blogger...
  • रफ़्तार
  • Online Marketing
    Praca poznań w Zarabiaj.pl
    Technology-Internet blog
     

    Blog Directories

    क्लिक >>

    About The Author

    Manoj jaiswal

    Man

    Behind

    This Blog

    Manoj jaiswal

    is a 56 years old Blogger.He loves to write about Blogging Tips, Designing & Blogger Tutorials,Templates and SEO.

    Read More.

    ब्लॉगर द्वारा संचालित|Template Style by manojjaiswalpbt | Design by Manoj jaiswal | तकनीक © . All Rights Reserved |