বন্ধুরা সবাই আশাকরি ভালো আছেন সব সময় সুস্থ এবং ভালো থাকেন আল্লাহ্ এর কাছে সেটাই দোয়া করি । যাই হোক আজকে আমি আপনাদের জন্য Animated Page Loading Effect নিয়ে এলাম অনেকের মনে প্রশ্ন যাগতে পারে এটার কাজ কি ? হুম তাদের বলবো ভালো একটি প্রশ্ন ? এটার কাজ আসলে সেরকম কিছুই না জাস্ট ব্লগটিকে প্রফেশনাল লুক দেওয়া । আপনি এটা আপনার ব্লগে অ্যাড করলে আপনি নিজেই বুজতে পারবেন এটা কতটা মজার এটা কোথাই কিভাবে কাজ করে ,উপরের আমার ডেমো ব্লগে গিয়ে যেকোনো একটি পোস্টে ক্লিক করুন দেখুন পেজ লোডিং ইফেক্ট পেয়ে যাবে
আশাকরি এতো ক্ষণে দেখে নিয়েছেন এবং বুঝেও গেছেন ,যাই হোক নীচে থেকে দেখে নিন কিভাবে এটাকে আপনার ব্লগে অ্যাড করবেন ।
আশাকরি এতো ক্ষণে দেখে নিয়েছেন এবং বুঝেও গেছেন ,যাই হোক নীচে থেকে দেখে নিন কিভাবে এটাকে আপনার ব্লগে অ্যাড করবেন ।
কিভাবে আপনার ব্লগে যুক্ত করবেন ?
১// আপনার ব্লগ লগইন করুন তারপর ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।
২// এবার ডান পাশ থেকে ব্যাকআপ বাটন এ ক্লিক করে আপনার টেম্পলেট এর ব্যাকআপ নিয়ে নিন ।
৩// এবার Edit HTML এ ক্লিক করে আপনার কীবোর্ড এরCtrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।
</body>
৪// উপরের কোড খুজে পেলে তার ঠিক উপরে নীচের কোড গুলো কপি করে পেস্ট করুন ।
<style>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXdskCGnJHdgB7POFSxhwi-rRzWRF-iL7FCh-uRNRIhsfq53BV4Hh5iR4ShsWTBN4WbSdkTJzS3ggCprQ5wFv56TJD7DhW5Wj82MLRRXlA9DowGjiIwRyRM7laHmIaYDqEcwft6VqW3Rs/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXdskCGnJHdgB7POFSxhwi-rRzWRF-iL7FCh-uRNRIhsfq53BV4Hh5iR4ShsWTBN4WbSdkTJzS3ggCprQ5wFv56TJD7DhW5Wj82MLRRXlA9DowGjiIwRyRM7laHmIaYDqEcwft6VqW3Rs/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
নোটঃ আপনি চাইলে উপরের কালার করা লিঙ্ক মুছে সেখানে অন্য কোন Animated ফটো অ্যাড করতে পারেন ।
৫// Save Template এ ক্লিক করে সেভ করে নিন ।


No comments:
Post a Comment