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

मनोज जैसवाल : सभी पाठकों को मेरा प्यार भरा नमस्कार।कभी कभी आपकी पोस्ट या होम पेज में सामग्री काफी ज्यादा हो जाती है,फल स्वरूप आपको अपना माउस कर्सर ऊपर नीचे करना होता है,आपकी या आपके पाठको की सुविधा के लिए यह विजेट प्रस्तुत किया जा रहा है। आज तकनीकी पोस्टों के क्रम में पेश है,अपने ब्लॉग पर बैक टू टाप एंव टाप टू बाटम बटन लगाएँ !!मेरी पिछली पोस्ट आइये जानते हैं इंटरनेट पर सबसे बड़े हमले का सच को अत्यधिक पसंद करने के लिए आप सभी का हार्दिक धन्यवाद,वैसे तो मै आपको अपनी पोस्ट टेम्पलेट में बिना बदलाब किये 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 है तो लाल रंग से लिखा कोड ना लगाएँ।
अब अपने टेम्पलेट को सेव कर दें एंव ब्लॉगगिंग का आनंद लें।

क्या आपको यह लेख पसंद आया? अगर हां, तो ...इस ब्लॉग के प्रशंसक बनिए !!