ব্লগস্পট ব্লগের জন্য Back to To & Down বাটন !!

আসসালামু অলাইকুম , আজকে আমি আপনাদের জন্য নিয়ে নিয়ে এলাম দারুন মজার একটি ওয়েডগেট জানিনা এর আগে কেউ দেখেছেন কিনা । আজকের ওয়েডগেটটি সম্পূর্ণ আলাদা কারন এতদিন আমারা দেখে এসেছি Back to Top বাটন যুক্ত করা যাই কিন্তু আজাকে আমি আপনাদের দেখেবো কিভাবে Back to To & Down  মানে উপরে ফিরুন এবং নিচে আসুন বাটন । তাহলে দেরিনা করে নিচে থেকে দেখে নিন কিভাবে করবেন ।











কিভাবে যুক্ত করবেন নিচের টিপস দেখুন ! 


  • প্রথমে আপনার ব্লগ অ্যাকাউন্ট লগইন করুন ।
  • ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।
  • এবার Edit HTML এ ক্লিক করুন এবং কীবোর্ড এর CTRL+ F প্রেস করে নিচের ট্যাগটি খুজুন ।

]]></b:skin>

  • উপরের ট্যাগ এর ঠিক উপরে নিচের কোড গুলো কপি পেস্ট করুন ।


.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://cdn0.iconfinder.com/data/icons/arrows-android-l-lollipop-icon-pack/24/collapse2-16.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://cdn0.iconfinder.com/data/icons/arrows-android-l-lollipop-icon-pack/24/expand2-16.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);
}


  • এবার Save Template এ ক্লিক করে নিচের স্টেপ দেখুন ।
  • একি ভাবে এবার CTRL+F প্রেস করে নিচের ট্যাগ খুজে বের করুন ।

</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>


  • Save Template এ ক্লিক করে বেরিয়ে আসুন । 


☞ ব্যাস হয়েগেল আশাকরি কাজটি করতে আপনাদের কোন রকম সমস্যা হলনা কোন সমস্যা হলে অবশ্যই যানাবেন । আমি হেল্প করতে করবো । ভালো লাগলে বন্ধুদের সাথে শেয়ার করুন । ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।

এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

একটি মন্তব্য পোস্ট করুন

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!

নবীনতর পূর্বতন

نموذج الاتصال