ব্লগে যুক্ত করুন আকর্ষণীয় Back To Top Button


হ্যালো বন্ধুরা, TechRajjo.Com – Create Your Own Creativity তে আপনাকে স্বাগতম । কেমন আছেন সবাই ? নিশ্চয় ভালো আছেন । আর ভালো আছেন বলেই হয়তো আমাদের টেক রাজ্য থেকে আপনার পছন্দের এই আর্টিকেলটি পড়তে বসছেন । আমরা আমাদের টেক রাজ্যে প্রতিনিয়ত প্রযুক্তি বিষয়ক বিভিন্ন আর্টিকেল শেয়ার করে থাকি । যাতে মানুষ প্রযুক্তিকে সহজে জানতে ও বুঝতে পারে ।  তারই ধারাবাহিকতায় আজকে আপনাদের জন্য নিয়ে এসেছি প্রযুক্তি বিষয়ক আরেকটি আর্টিকেল । পোস্টের টাইটেল পড়ে এতক্ষণে নিশ্চয় বুঝে গেছেন যে, আজকে আমরা কোন বিষয় নিয়ে আলোচনা করবো ।

তার আগে আপনার কাছে আমাদের রিকুয়েস্ট, আপনি যদি আমাদের ব্লগটি সাবস্ক্রাইব না করে থাকেন, তাহলে এখনি সাবস্ক্রাইব করে নিন । তাহলে প্রযুক্তি বিষয়ক নিত্যনতুন আর্টিকেল সবার আগে পৌঁছে যাবে আপনার কাছে ।

তাহলে চলুন আর কথা না বাড়িয়ে মূল আলোচনায় ফিরে যাই ।

আপনার নিশ্চয় একটি ব্লগ বা ওয়েবসাইট আছে । আর আছে বলেই আপনি আমার আজকের এই আর্টিকেল পড়তে বসেছেন । যাই হোক – আপনার যদি একটি ব্লগ বা ওয়েবসাইট থেকে থাকে তাহলে আজকের আর্টিকেলটি আপনার জন্যই । Back to Top বাটন ব্লগ কিংবা ওয়েবসাইটের জন্য একটি গুরুত্বপূর্ণ অংশ। এটি একটি ওয়েভসাইটকে যেমনি আকর্ষণীয় করে তুলে তেমনি এর মাধ্যমে ভিজিটর-কে আপনার ওয়েভসাইটের সকল পেইজ ঘেটে দেখতে আরও সহজ করে তুলে। অনেক সময় দেখা গেল যে আপনার ব্লগের একটি পোষ্ট অনেক বড় কিঃবা পোষ্টে অনেক কমেন্ট, তখন ভিজিটর আপনার পোষ্টটি পড়ার পর পেজের অনেক নিচে চলে গেল। ঐ সময় ভিজিটর আবার উপরে আসার জন্য অনেক সময় নিল। যার ফলশ্রুতিতে দেখা গেল যে এভাবে বার বার উপরের আসতে আসতে এক সময় ভিজিটর বিরক্তবোধ করলো। কিন্তু সামান্য একটি Back to Top বাটন যুক্ত করে রাখলে ভিজিটর মাত্র এক ক্লিকেই আপনার পেজের হেডারে চলে আসতে পারবে। আমি আজকে যে Back to Top বাটন এর পোষ্টটি করছি এটি কোন ইমেজ এর মাধ্যমে তৈরী করা নয়। এটি সম্পূর্নরূপে CSS3JavaScript এর সমন্বয়ে করা হয়েছে। এটিতে ‍দুটি কালার এফেক্ট দেওয়া হয়েছে। নরমালি এক ধরনের কালার শো করবে এবং মাউস হবার অর্থাৎ মাউস ধরার পর আরেক ধরনের কালার শো করবে। এটি ব্যবহার করে খুবই Smoothly উপরে চলে আসতে পারবেন। নিচের  ছবির মাধ্যমে এর একটি ডেমো দেখে নিতে পারেন অথবা আমার ব্লগের নিচের দিকের ডান পাশে খেয়াল করলেই এর ডেমো দেখতে পারবেন।

এখানে আরেকটি বিষয় আপনাকে বলে রাখতে চাই সেটা হল – আপনি যদি আপনার ব্লগের জন্য কাস্টম থিম/ব্ল্যাংক থিম ব্যবহার করে থাকেন তাহলে আপনি এই পদ্ধতিতে আপনার ব্লগে Back To Top Button ব্যবহার করতে পারেন । আর যদি আপনি ব্লগারের জন্য তৈরি করা কমপ্লিট থিম ব্যবহার করেন তাহলে আপনাকে নতুন করে Back To Top Button ব্যবহার করতে হবে না । কারণ কমপ্লিট থিমে এই বাটনটি ডিফল্টভাবে সেট করা থাকে । আপনার ব্লগে এই বাটনটি ডিফল্টভাবে সেট করা আছে কিনা সেটা দেখার জন্য আপনার ব্লগের নিচের দিকে ডান পাশে খেয়াল করুন । যদি এই বাটনটি দেখা যায় তাহলে নতুন করে যুক্ত করার প্রয়োজন নেই । আর যদি না দেখা যায় তাহলে আমার দেখানো পদ্ধতিতে আপনার ব্লগে যুক্ত করে নিতে পারেন । এটি যুক্ত করার জন্য আপনার ওয়েব ডিজাইন সম্পর্কে আলাদা কোন ধারনা থাকতে হবে না। যারা কোন দিনও ব্লগ নিয়ে ঘাটাঘাটি করেনি তারও খুব সহজে এটি যুক্ত করে নিতে পারবে।

https://3.bp.blogspot.com/-rg9RXiW7p-c/VSPRW7wTMTI/AAAAAAAAD9A/mZ2gb6ploqg/s1600/Blogger%2BBack%2Bto%2BTop%2BButton.gif

যেভাবে যুক্ত করবেনঃ 

·        প্রথমে আপনার ব্লগার একাউন্টে Login করুন।

·        এরপর আপনার ব্লগের Dashboard এ যান।

·        এখন বাম পাশের Layout অপশনে যান । এখানে আপনার ব্লগের থিমের Layout দেখতে পাবেন । এখান  থেকে ডান পাশের  Add a Gadget এ ক্লি করুন।

·        তারপর HTML/ JavaScript এ ক্লি করুন। এখন আপনার সামনে  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://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>

Code ID No. TRCN-5190006
Download

·       পেস্ট করা হয়ে গেলে Save বাটনে ক্লিক করুন । হয়ে গেলো আপনার ব্লগের জন্য একটি আকর্ষণীয় Back To Top বাটন যুক্ত করা ।


এই ছিল আজকের বিস্তারিত আলোচনা । জানিনা আপনাদের কতটুকু বুঝাতে পেরেছি । তবুও যদি ভালো লেগে থাকে আপনার বন্ধুর সাথে শেয়ার করে তাকেও জানার সুযোগ করে দিন । তবেই আমাদের লিখা সার্থক হবে । আর আমরা আরও ভালো ভালো আর্টিকেল লিখতে উৎসাহ পাবো ।

শেষ কথাঃ আপনার মূল্যবান সময় ব্যয় করে আলোচ্য আর্টিকেলটি পড়ার জন্য আপনাকে অসংখ্য ধন্যবাদ । আমি আশা করবো উক্ত আর্টিকেলটির মাধ্যমে আপনি সামান্য কিছু হলেও জানতে, বুঝতে ও শিখতে পেরেছেন । তারপরও যদি কারও বুঝতে অসুবিধা হয় কিংবা কোন প্রকার সমস্যা হয় তাহলে কমেন্ট করে আমাদের জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের জন্য চেষ্টা করবো, ইনশাআল্লাহ।
আজ এ পর্যন্তই । আবার আপনাদের সামনে হাজির হবো অন্য কোন প্রযুক্তি বিষয়ক আর্টিকেল নিয়ে । ততদিন সবাই ভালো থাকুন, সুস্থ্য থাকুন আর টেক রাজ্যের সাথেই থাকুন । ধন্যবাদ...

ব্লগে যুক্ত করুন আকর্ষণীয় Back To Top Button ব্লগে যুক্ত করুন আকর্ষণীয় Back To Top Button Reviewed by CEO on Saturday, June 01, 2019 Rating: 5

No comments:

It can be commented that the post was good. You can also comment on any problem. We will try to solve as much as possible.

Powered by Blogger.