Apr 7, 2015

কিভাবে ব্লগে Back to Top বাটন যুক্ত করতে হয়?

Back to Top বাটন ব্লগ কিংবা ওয়েবসাইটের জন্য একটি গুরুত্বপূর্ণ অংশ। এটি একটি ওয়েভসাইটকে যেমনি আকর্ষণীয় করে তুলে তেমনি এর মাধ্যমে ভিজিটর-কে আপনার ওয়েভসাইটের সকল পেইজ ঘেটে দেখতে আরও সহজ করে তুলে। অনেক সময় দেখা গেল যে আপনার ব্লগের একটি পোষ্ট অনেক বড় কিঃবা পোষ্টে অনেক কমেন্ট, তখন ভিজিটর আপনার পোষ্টটি পড়ার পর পেজের অনেক নিচে চলে গেল। ঐ সময় ভিজিটর আবার উপরে আসার জন্য অনেক সময় নিল। যার ফলশ্রুতিতে দেখা গেল যে এভাবে বার বার উপরের আসতে আসতে এক সময় ভিজিটর বিরক্তবোধ করলো। কিন্তু সামান্য একটি Back to Top বাটন যুক্ত করে রাখলে ভিজিটর মাত্র এক ক্লিকেই আপনার পেজের হেডারে চলে আসতে পারবে। আমি আজকে যে Back to Top বাটন এর পোষ্টটি করছি এটি কোন ইমেজ এর মাধ্যমে তৈরী করা নয়। এটি সম্পূর্নরূপে CSS3 ও JavaScript এর সমন্বয়ে করা হয়েছে। এটিতে ‍দুটি কালার এফেক্ট দেওয়া হয়েছে। নরমালি এক ধরনের কালার শো করবে এবং মাউস হবার অর্থাৎ মাউস ধরার পর আরেক ধরনের কালার শো করবে। এটি ব্যবহার করে খুবই Smoothly উপরে চলে আসতে পারবেন। নিচের  ছবির মাধ্যমে এর একটি ডেমো দেখে নিতে পারেন অথবা আমার ব্লগের নিচের দিকের ডান পাশে খেয়াল করলেই এর ডেমো দেখতে পারবেন।
কিভাবে যুক্ত করবেনঃ এটি যুক্ত করার জন্য আপনার ওয়েব ডিজাইন সম্পর্কে আলাদা কোন ধারনা থাকতে হবে না। যারা কোন দিনও ব্লগ নিয়ে ঘাটাঘাটি করেনি তারও খুব সহজে এটি যুক্ত করে নিতে পারবে।
  • প্রথমে আপনার ব্লগার একাউন্টে লগ ইন করুন।
  • এরপর আপনার ব্লগের ড্যাশবোর্ডে যান।
  • এখন বাম পাশের Layout অপশন থেকে Add a Gadget এ ক্লি করুন।
  • তারপর HTML/ JavaScript এ ক্লি করুন।
  • এখন নিচের কোডগুলি কপি করে HTML/ JavaScript বক্সে পেষ্ট করুন।
<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("http://4.bp.blogspot.com/-80MHDTM3XRQ/VSPMSNa4fTI/AAAAAAAAD8w/e2Mktw2DY8Q/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 এ ক্লিক করলেই কাজ Ok.
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

0 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: