আপনার ব্লগার সাইটে এড করে নিন Back to Top Button With Smooth Scrolling

আসাসালামু ওয়ালাইকুম। আজকের এই টিউনে আমি আপনাদেরকে দেঝাবো যে কীভাবে আপনি আপনার ব্লগার সাইটে Back to Top Button With Smooth Scrolling Install দিবেন। আপনি হয়তো লক্ষ্য করে থাকবে যে, আমার সাইটে ইতিমধ্যে এটি Install করা আছে। আপনার সাইটে যদি তা করা না থাকে তাহলে আপনি আমার এই টিউনটি ফলো করে খুব সহজেই আপনি আপনার সাইটে তা install করিয়ে নিতে পারবেন। এটা খুব একটা কঠিন কাজ নয় শুধু আমাকে ফলো করুন।

ALSO READ:[না দেখলে পস্তাবেন] ফ্রি ডোমেইনে Adsense?? আপনার সাইটিকে Adsense এর জন্য Apply করবেন? আপনার সাইটি কি Adsense এর জন্য উপযোগী? Adsense Approve হচ্ছে না বা হয়নি?

ALSO READ:NewsPro Premium Blogger Template Free Download

তো শুরু করা যাক। শুরু করার আগে আপনি ভিডিওটি দেখে নিন তা হলে ভালো ভাবে বুঝতে পারবেন। আর যদি ইতিমধ্যে ভিডিওটি দেখে দিয়ে থাকেন তাহলে দেখার দরকার নেই।

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> আগে বসিয়ে দিন।

<link rel="stylesheet" id="font-awesome-css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css" media="screen"/>

আপনি যদি ইতিমধ্যে আপনার সাইটে Font Awsome Install করে থাকেন তাহলে এই কাজটি করা লাগবে না।

Also Read: Termux দিয়ে নাম্বার হাইড করে যে কারো ফোনে ফ্রীতে হাজার হাজার মেসেজ দিয়ে তার ফোনের বারোটা বাজিয়ে দিন [With Proof]

2. CSS installation: এবার নিচের দেওয়া কোডটি ]]></b:skin> অথবা </style> এর উপরে পেস্ট করে দিন।

/*Smooth Scroll to Top by WWW.WIKIBN.COM*/
.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 src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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 এর সাথেই থাকুন এবং সাবস্ক্রাইব করুন আমাদের ইউটিউব চ্যানেল কে। .

SUBSCRIBE US ON YOUTUBE