Blogger

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

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

আপনার ব্লগার সাইটে এড করে নিন Back to Top Button With Smooth Scrolling বাটন,How to Install Back to Top Button With Smooth Scrolling on Blogger,Easy way to Install Back to Top Button With Smooth Scrolling on Blogger,Wikibn,blogger back to top button,Blogger Tips and trick,Jquery back to top butoon,smooth scroll back to top,back to top button for blogger,Css back to top button,কীভাবে আমি আমার ব্লগার সাইটে Back to to Button এড করব,ব্লগারে Back to top বাটন এড করা,Wikibn.com,Jquery back to top button,Scroll to top button for blogger,stylish design back to top button button,Smooth scroll to top button code for blogger,blogger site e scroll to top button lagano,'scroll to top button' for blogger,smooth scroll to to button for my website,html and css scroll to top button code,Css3 scroll top top button,blogger weight code

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 এর সাথেই থাকুন এবং সাবস্ক্রাইব করুন আমাদের ইউটিউব চ্যানেল কে। .

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.

Imran Hossan

I am Imran, a student with the dream of becoming a professional developer, I love to explore, explore, learn interesting things on the Internet.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Adblock Detected

Hey Dear!! Thank you for visit on TuneBN. Please Disable your AD Blocker to continue browsing.