ব্লগে Back to top বাটন যুক্ত করুন !

ব্লগে Back to top বাটন যুক্ত করুন প্রিয় ব্লগার বন্ধুরা আপনাদের ব্লগে বেক টু টপ বাটন যুক্ত করে নিন। হু আপনি যেহেতু এই পোস্টটি পড়ছেন তাহলে নিশ্চয়ই আপনি একজন ব্লগার আর যেহেতু আপনি একজন ব্লগার তাহলে আপনি নিশ্চয়ই এটা জানেন যে একটি ব্লগে Back to top বাটনের গুরুত্ব কতটুকু হ্যাঁ এই বাটনটি আপনার ব্লগে অবশ্যই থাকা দরকার, কেননা একজন ভিজিটর যখন আপনার ব্লগ ভিজিট করার সময় scrolling করে নিচের দিকে চলে যাবে তখন এই বাটনটি তাকে উপরে ফিরে আসতে সাহায্য করবে যার ফলে তাকে আর কষ্ট করে scroll করে উপরে আসতে হবেনা শুধু এই বাটনটিতে ক্লিক করলেই তাকে অটোমেটিক উপরে নিয়ে আসবে।

তাহলে চলুন দেখে নেই কিভাবে এটি যুক্ত করবেন. 

প্রথমেই আপনার ব্লগে লগ-ইন করুন

1. এবং Layout এ ক্লিক করুন।
2. এবার add A Gadget এ ক্লিক করুন। 
3. এবার HTML/Java script. সিলেক্ট করুন। 
4. এবার Title এর ঘর ফাকা রেখে Content এর ঘরে নিচের কোড টুকু কপি পেস্ট করুন।

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
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>

<style>
div#page {
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
   padding: 20px;
}
.back-to-top {
   position: fixed;
   bottom: 35px;
   right: 10px;
   text-decoration: none;
   width: 10px;
   height: 20px;
   background-color: #007ABE;
   background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4H5TWDbNRZNZdumLK7ZZgHzAnfai21IrNWOKKF6GTqe3hC9UY38EGoj6DoEvu2fi-cZ5SXqWWUhSHSchMyyOI2N5UhPrSi7R8gb0H0AAWrnJcnX-vrcsmSciUPsYomweugeelFlD3oG2/s1600/up.png");
   background-repeat: no-repeat;
   background-position: 50% 50%;
   border-radius: 2px 2px 2px 2px;
   font-size: 12px;
   padding: 1em;
   display: none;
}
.back-to-top:hover {
   background-color:#000000;
   text-decoration: none;
}
</style>
<a href="#" class="back-to-top" title="Scroll to Top" /></a>
এবার save করে বেরিয়ে আসুন, এবার আপনার ব্লগ ভিজিট করে দেখুন back to top বাটন দেখা যাচ্ছে। তাহলে আজকে এই পর্যন্তই দেখা হবে পরবর্তী টিউনে সেই পর্যন্ত সবাই ভালো থাকবেন আল্লাহাফেজ।

• Tweet
• Share
• Share
• Share
• Share