বন্ধুরা সবাই আশাকরি ভালো আছেন সব সময় সুস্থ এবং ভালো থাকেন আল্লাহ্ এর কাছে সেটাই দোয়া করি । যাই হোক আজকে আমি আপনাদের জন্য Animated Page Loading Effect নিয়ে এলাম অনেকের মনে প্রশ্ন যাগতে পারে এটার কাজ কি ? হুম তাদের বলবো ভালো একটি প্রশ্ন ? এটার কাজ আসলে সেরকম কিছুই না জাস্ট ব্লগটিকে প্রফেশনাল লুক দেওয়া । আপনি এটা আপনার ব্লগে অ্যাড করলে আপনি নিজেই বুজতে পারবেন এটা কতটা মজার ।
এটা কোথাই কিভাবে কাজ করে ?
♦ উপরের চিত্রে দেখুন এর স্টাইল ঠিক উপরের চিত্রের মতো । এটা কোথাই কাজ করে , আপনি যক্ষুনি কোন পেজ বা ব্লগ এর কোন লিঙ্ক বা পোস্টে ক্লিক করবেন তখুনি এটা শো করবে ঠিক উপরের চিত্রের মতো করে । নীচে থেকে ডেমো দেখে নিন
♦ উপরের আমার ডেমো ব্লগে গিয়ে যেকোনো একটি পোস্টে ক্লিক করুন দেখুন পেজ লোডিং ইফেক্ট পেয়ে যাবে । আশাকরি এতো ক্ষণে দেখে নিয়েছেন এবং বুঝেও গেছেন । যাই হোক নীচে থেকে দেখে নিন কিভাবে এটাকে আপনার ব্লগে অ্যাড করবেন ।
কিভাবে আপনার ব্লগে যুক্ত করবেন ?
১// আপনার ব্লগ লগইন করুন তারপর ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।
২// এবার ডান পাশ থেকে ব্যাকআপ বাটন এ ক্লিক করে আপনার টেম্পলেট এর ব্যাকআপ নিয়ে নিন ।
৩// এবার Edit HTML এ ক্লিক করে আপনার কীবোর্ড এর
</body>
৪// উপরের কোড খুজে পেলে তার ঠিক উপরে নীচের কোড গুলো কপি করে পেস্ট করুন ।
<style>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/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('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/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 এ ক্লিক করে সেভ করে নিন ।
শেষ কিছু কথাঃ
▬ভালো থাকবেন সুস্থ থাকবেন▬
▬আল্লাহ্ হাফেজ▬