Back To Top বাটন যে কোন ব্লগ/ওয়েবসাইট এর জন্য গুরুত্বপূর্ণ।কেননা যখন ব্লগের কোন ভিজিটর যখন ব্লগের নিচের দিকে নেমে যাবে তখন সে এক ক্লিক করেই উপরে চলে আসতে পারবে এই উপরে উঠুন বাটন দ্বারা।তাছাড়া এর মাধ্যমে আপনার সাইটের ডিজাইন ও সুন্দর দেখাবে।আর এটা যোগ করা ও খুব সহজ, সামান্য কিছু কোড যোগ করে আপনি এটি যোগ করে নিতে পারেন।
আজ আমি দেখাব কিভাবে এই উপরে উঠুন বাটনটি যোগ করবেন।আশা করি আপনার এটি অনেক কাজে লাগবে।তাহলে শুরু করা যাক।
Back To Top বাটনঃ
- ব্লগে লগিন করুন।
- Template এ যান।
- আপনার টেমপ্লেটটি ব্যাকআপ রাখুন।
- Edit Template এ ক্লিক করুন।
- ctrl+f বা F3 চেপে নিচের কোডটুকু খুজুন।
]]></b:skin>
- এবার এর উপরে নিচের কোডগুলো পেস্ট করুন।
#backtotop{
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}
- উপরের কোডগুলো পেস্ট করা হলে </head> এই কোড টুকু খুজুন এবং এর উপরে নিচের কোড গুলো পেস্ট করুন।
<!-- Back to top button by blogtipsnticks.com-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
<!-- Code provided to you by blogtipsnticks.com-->
- আপনি প্রায় করে ফেলেছেন এবার </body> ট্যাগটি খুজুন।এবং নিচের কোড গুলো এর উপরে বসিয়ে দিন।
<a href="#" id="backtotop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFHMJwbjts5RjQUgnBHc40SO-cigOnXRF3Sr9OKdM52MymeckABQUHLpEA3PEtmZi3zGsAi-LpDZe-e4ITI2Esskk0P52VEVdvg_M3jA3-pzX5-ixjHM-kqJvzJA_-BKrGpBQ4amXaKS4/s48/Metro-Back-Black-48%2520right.png" alt="Back To Top" title="Back To Top" /></a>
ব্যস এবার আপনি সেভ করতে পারেন।সেভ করা আগে আপনি চাইলে লাল কালারের জায়গায় আপনার নিজের ছবির লিঙ্ক দিতে পারেন।যায় হোক সেভ করুন এবং আপনার ব্লগে গিয়ে দেখুন।আশা করি আপনি সফল ভাবে পেরেছেন।
ও খুব সুন্দর একটা পোস্ট অনেক উপকার করলেন।
ReplyDelete