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

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

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

ALSO READ: [না দেখলে পস্তাবেন] ফ্রি ডোমেইনে Adsense?? আপনার সাইটিকে Adsense এর জন্য Apply করবেন? আপনার সাইটি কি Adsense এর জন্য উপযোগী? Adsense Approve হচ্ছে না বা হয়নি?
ALSO READ: NewsPro Premium Blogger Template Free Download
তো শুরু করা যাক। শুরু করার আগে আপনি ভিডিওটি দেখে নিন তা হলে ভালো ভাবে বুঝতে পারবেন। আর যদি ইতিমধ্যে ভিডিওটি দেখে দিয়ে থাকেন তাহলে দেখার দরকার নেই।
You are now Watching This Video. Thanks for watching and Don't Forget to subscribe our channel.


How to Install Back to Top Button With Smooth Scrolling on Blogger

1. Font Awsome installation: প্রথমে আপনি আপনার ব্লগার সাইটে লগিন করুন। এরপর যে সাইটে Back to Top Button With Smooth Scrolling on Blogger Install করবেন সেই সাইটে যান। তারপর Templates এ ক্লিক করুম, এরপর Edit HTML এ ক্লিক করুন। এবার নিচের দেওয়া কোডটি < 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 এর সাথেই থাকুন এবং সাবস্ক্রাইব করুন আমাদের ইউটিউব চ্যানেল কে। .


from WikiBN http://bit.ly/2VYSjA8
via WikiBN
Next Post Previous Post
No Comment

You cannot comment with a link / URL. If you need backlinks then you can Contact with us

Add Comment
comment url