আপনার ব্লগে কিভাবে ব্যাক টু টপ বাটন যোগ করবেন

আপনার ব্লগে কিভাবে ব্যাক টু টপ বাটন যোগ করবেন

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

আমি আজকে যে Back to Top বাটন এর পোষ্টটি করছি এটি কোন ইমেজ এর মাধ্যমে তৈরী করা নয়। এটি সম্পূর্নরূপে CSS3 ও JavaScript এর সমন্বয়ে করা হয়েছে।

কিভাবে যুক্ত করবেনঃ এটি যুক্ত করার জন্য আপনার ওয়েব ডিজাইন সম্পর্কে আলাদা কোন ধারনা থাকতে হবে না।  


১ আপনার ব্লগার একাউন্টে লগ ইন করুন।
২ তার পর আপনার ব্লগের ড্যাশবোর্ডে যান।
৩ এরপর বাম পাশের Layout অপশন থেকে Add a Gadget এ ক্লি করুন।
৪ এখন HTML/ JavaScript এ ক্লি করুন।
৫ নিচের কোডগুলি কপি করে HTML/ JavaScript বক্সে পেষ্ট করুন নিচের ছবির দিকে খেয়াল করুন।

<script src="https://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/AVvXsEiNm4iRSbTFYzoxy-ZUPnkp55IbPqMkSAHMDxqsq8a8-tRq1a_TRwR8zX-CqClPJ8OQek9PnLygM4ySw9F8Gkf3vSX6_2KqYHNNDrweVPRemon0IyRW610Z2mhRmlwU14R5hxaaNnRpOfyS/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 এ ক্লিক করলেই আপনার কাজ এবার ব্লগে গিয়ে ডান দিকে খেয়াল করুন

আজ এ পর্যন্তই আবার দেখা হবে নতুন কোনো বিষয় নিয়ে সেই পর্যন্ত ভালো থাকবেন সুস্থ থাকবেন আপনার পাশের মানুষটিকে ভালো রাখুন খোদা হাফেজ