বন্ধুরা সালাম নিবেন সবাই আশাকরি ভালো আছেন আপনাদের দোয়াই আমিও ভালো ও সুস্থ আছি যাই হোক আজকে আমি আপনাদের সাথে খুব সুন্দর একটি পেজ Loading Spinner নিয়ে এলাম এটা ব্যবহার করলে আপনি আপনার ব্লগকে করে তুলতে পারবেন দারুন আকর্ষণীয় । এর আগেও এই বিষয় নিয়ে আমি অনেক পোস্ট করেছি কিন্তু সেগুলো সাথে আজকের স্টাইলের অনেক পার্থক্য আছে আগের গুলো শুধু ফটো পরিবর্তন করলেই নতুন স্টাইল হয়েযেতে । যাই হোক আজের এই স্টাইল দেখে নিন আশাকরি আপনাদের পছন্দ হবে এবং ব্যবহারও করতে পারবেন । নীচে থেকে ফটো ডেমো দেখে নিন ।
☞ পেজ লোডিং ইফেক্ট আপনার ব্লগার ব্লগে কিভাবে যুক্ত করবেনঃ
১// প্রথমে আপনার ব্লগ লগইন করুন ।
২// ড্যাশবোর্ড থেকে Template → Edit HTML এ ক্লিক করুন ।
৩// এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে নীচের ট্যাগ দুটির মধ্যে যেকোনো একটি খুজুন ।
<body> বা </body>
৪// উপরের দুটি কোডি দরকার যদি আপনি প্রথম কোড মানে <body> এটি খুজে না পান তাহলে </body> খুজুন ।
৫// যদি <body> এই ট্যাগ খুজে পান তাহলে <body> এই ট্যাগ এর ঠিক নীচে নীচের কোড গুলো কপি পেস্ট করুন । আর যদি উপরের কোড খুজে না পান কিন্তু </body> এই ট্যাগ খুজে পান তাহলে নীচের কোড গুলো </body> ট্যাগ এর ঠিক উপরে কপি পেস্ট করুন ।
<div id="loader">
<div class="spinner">
<div class="spinner-inner"></div>
</div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type="text/javascript">
$(window).load(function () {
setTimeout(function () {
$(".spinner").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style>
<div class="spinner">
<div class="spinner-inner"></div>
</div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type="text/javascript">
$(window).load(function () {
setTimeout(function () {
$(".spinner").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style>
৬// এবার Save Template এ ক্লিক করে বেরিয়ে আসুন । আপনার ব্লগ ভিজিট করে দেখুন আশাকরি কাজটি করতে আপনি সফল হয়েছেন ।
নোটঃ ৫ নাম্বার স্টেপটি অবশ্যই ভালো ভাবে বুঝে করুন না হলে Save করার আগে প্রিভিউ দেখে নিন ।
☞ তাহলে আজকের এই পোস্টটি এবং পেজ লোডিং স্টাইল পছন্দ হলে অবশ্যই বন্ধুদের সাথে শেয়ার করুন এবং পোস্ট কেমন লাগলে সেটা জানাতে ভুলবেন না এবং কে কে ব্যবহার করলেন লিঙ্ক গুল আমার সাথে শেয়ার করতে পারেন নীচের কমেন্ট বক্সে । ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্ হাফেজ ।