কোনো ওয়েবসাইটে ঢুকার পর সাইট লোড হওয়ার সময় যে অ্যানিমেশন বা লোডিং স্ক্রীনটি দেখা যায় সেটিই Preloader Animation। প্রিলোডার ওয়েবসাইটের রেংকিং বা সার্চ ইঞ্জিন অপটিমাইজেশন কোনোটিই করে না। তাহলে, এটির কাজ কী? কেন আমরা ব্লগে Preloader ব্যবহার করবো?
আমরা প্রত্যেকেই নিজেদের ব্লগকে ভিজিটরদের কাছে একটু আলাদাভাবে উপস্থাপন করতে চাই। তাই আমরা ব্লগের জন্য সুন্দর ডিজাইন এবং ভালো মানের টেমপ্লেট বাছাই করি, যেনো ব্লগটি দেখতে প্রফেশনাল লাগে। প্রিলোডার ও ঠিক একই কাজটি করে থাকে, এটি আপনার ব্লগকে সুন্দর এবং প্রফেশনাল লুক দেয়। ফেসবুক, ইউটিউব সহ অনেক বড় বড় সাইটেও Preloader ব্যবহার করা হয়।
ওয়েবসাইট লোডিং হওয়ার সময় ভিজিটররা সাদা স্ক্রীনের বদলে Preloader স্ক্রীনটি দেখবে। এটি একদিকে যেমন আকর্ষণীয় দেখায়, অন্যদিকে ভিজিটররা আপনার ব্লগটি ব্যবহার করে আনন্দ পাবে। যদিও ব্লগে ভিজিটর ধরে রাখার জন্য কনটেন্ট সবচেয়ে জরুরী বিষয়, তবুও যারা নিজেদের ব্লগকে ইউনিক দেখাতে চান, তারা প্রায়ই এটি ব্যবহার করেন।
আজ আমি যে Preloader Animation টি শেয়ার করবো, সেটি আপনার ওয়েবসাইটের স্পীডের ওপর কোনো প্রভাব ফেলবে না। আপনার ব্লগ লোড নিতে যত সময় নিবে, ততক্ষণই অ্যানিমেশনটি চলবে। আমি এটি অন্য ব্লগেও টেস্ট করেছি, স্পীডে কোনো তফাৎ দেখি নি।
কীভাবে ব্লগে Preloader যুক্ত করবো?
➠ আপনার ব্লগে লগইন করুন। ড্যাশবোর্ডের বাম পাশে "Theme" এ ক্লিক করুন। এরপর "Edit HTML" এ ক্লিক করুন। ব্লগারের নতুন ভার্সনের ক্ষেত্রে, "Theme" এ ঢোকার পর উপরে ডান পাশে মেন্যু (⋮) তে ক্লিক করলে Edit HTML অপশনটি পাবেন।
➠ স্ক্রল করে নিচে যান, বা [ Ctrl + F ] দিয়ে <body> ট্যাগটি খুঁজুন।
➠ নিচের কোডটি কপি করে <body> ট্যাগের নিচে পেস্ট করে দিন।
<div id='loader'><div class='balls'/><div class='balls'/><div class='balls'/><div class='balls'/></div><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".balls").fadeOut("slow"); setTimeout(function () { $("#loader").fadeOut("slow") }, 1000) }, 1000) }); </script><style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#33948b;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#d6d150;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#51a1ff;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#eb5757;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>
➠এরপর Theme টি Save করুন।
এবার আপনার ব্লগটি ভিজিট করে দেখুন Preloader ঠিকমতো দেখা যাচ্ছে কী না। যদি Preloader না আসে, তাহলে কোডগুলো ঠিকভাবে বসিয়ে পুনরায় চেক করুন।
পোস্টটি কেমন লাগলো, জানাতে পারেন নিচের কমেন্ট বক্সে। ব্লগার সম্পর্কিত বিভিন্ন টিপস এবং ট্রিকস নিয়ে পোস্ট পেতে সাথেই থাকুন। ধন্যবাদ।
Tags:
Blogspot