আসসালামু অলাইকুম , আজকে আমি আপনাদের জন্য নিয়ে নিয়ে এলাম দারুন মজার একটি ওয়েডগেট জানিনা এর আগে কেউ দেখেছেন কিনা । আজকের ওয়েডগেটটি সম্পূর্ণ আলাদা কারন এতদিন আমারা দেখে এসেছি 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 এ ক্লিক করে বেরিয়ে আসুন । 


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

শেয়ার করুন :→

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

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

 
Top
Blogger Widgets