আপনার ব্লগার সাইটে এড করে নিন Back to Top Button With Smooth Scrolling
আসাসালামু ওয়ালাইকুম। আজকের এই টিউনে আমি আপনাদেরকে দেঝাবো যে কীভাবে আপনি আপনার ব্লগার সাইটে Back to Top Button With Smooth Scrolling Install দিবেন। আপনি হয়তো লক্ষ্য করে থাকবে যে, আমার সাইটে ইতিমধ্যে এটি Install করা আছে। আপনার সাইটে যদি তা করা না থাকে তাহলে আপনি আমার এই টিউনটি ফলো করে খুব সহজেই আপনি আপনার সাইটে তা install করিয়ে নিতে পারবেন। এটা খুব একটা কঠিন কাজ নয় শুধু আমাকে ফলো করুন।
তো শুরু করা যাক। শুরু করার আগে আপনি ভিডিওটি দেখে নিন তা হলে ভালো ভাবে বুঝতে পারবেন। আর যদি ইতিমধ্যে ভিডিওটি দেখে দিয়ে থাকেন তাহলে দেখার দরকার নেই।
How to Install Back to Top Button With Smooth Scrolling on Blogger
প্রথমে আপনি আপনার ব্লগার সাইটে লগিন করুন। এরপর যে সাইটে Back to Top Button With Smooth Scrolling on Blogger Install করবেন সেই সাইটে যান। তারপর Templates এ ক্লিক করুম, এরপর Edit HTML এ ক্লিক করুন।
1. Font Awsome installation:
নিচের দেওয়া কোডটি < head> এর পর অথবা </ head> আগে বসিয়ে দিন।
আপনি যদি ইতিমধ্যে আপনার সাইটে Font Awsome Install করে থাকেন তাহলে এই কাজটি করা লাগবে না।
2. CSS installation: এবার নিচের দেওয়া কোডটি ]]></b:skin> অথবা </style> এর উপরে পেস্ট করে দিন।
.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: red;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
background-color: #888888;
}
.scroll-top-wrapper.show {
visibility:visible;
cursor:pointer;
opacity: 1.0;
}
.scroll-top-wrapper i.fa {
line-height: inherit;
}
2. JQuery and HTML installation:এবার নিচের দেওয়া কোডটি </body> এর উপরে বসিয়ে দিন।
<script>
$(function(){
$(document).on( ‘scroll’, function(){
if ($(window).scrollTop() > 100) {
$(‘.scroll-top-wrapper’).addClass(‘show’);
} else {
$(‘.scroll-top-wrapper’).removeClass(‘show’);
}
});
$(‘.scroll-top-wrapper’).on(‘click’, scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != ‘undefined’ ? verticalOffset : 0;
element = $(‘body’);
offset = element.offset();
offsetTop = offset.top;
$(‘html, body’).animate({scrollTop: offsetTop}, 500, ‘linear’);
}
</script>
<div class=”scroll-top-wrapper “>
<span class=”scroll-top-inner”>
<i class=”fa fa-2x fa-arrow-circle-up”></i>
</span>
</div>
তারপর Template টি Save করে দিন। ব্যাস কাজ শেষ। এখন আপনি সাইটটি Preview করে দেখুন এটি করতিছে কী না। কোথাও কোন সমস্যা হলে জানাবেন। ভালো থাকুন সুস্থ থাকুন WIKIBN এর সাথেই থাকুন এবং সাবস্ক্রাইব করুন আমাদের ইউটিউব চ্যানেল কে। .
This post is copied via feed form WikiBN.COM !! Please stop coping via feed and remove this post. If you don’t do it we will take a action against your site.
