লেখক: বাউন্স ইফেক্ট পেজ লোডিং এটা খুব মজার একটি জিনিস এটা ব্যবহার করে ব্লগকে একটা নতুন রূপ দিতে পারেন। ব্লগে যখুন কোন ভিজিটর ভিজিট করছে সেই সময় কিছুটা হলেও ব্লগ লোড হতে সময় লাগে সেই সময় এর মধ্যে এই অসাধারন বাউন্স ইফেক্ট টা সেই ভিজিটর এর সামনে ভেসে উঠবে। কি মজার তাই না ? হুম এই ধরনের টিপস ইতিমধ্যে এসো বন্ধুতে অনেক শেয়ার করা হয়েছে কিন্তু সেগুল ভিন্ন ইফেক্ট এবং আজকের টিও ভিন্ন। এটা নিয়ে বিস্তারিত আর কিছুই নেই নিচে থেকে এর লাইভ রূপ অর্থাৎ ডেমো দেখেনিন তাহলে বিষয় বুঝে যাবেন। তাহলে চলুন শুরু করা যাক কিভাবে ব্লগার অর্থাৎ ব্লগস্পটে কিভাবে এটা ব্যবহার করবেন।
বাউন্স ইফেক্ট পেজ লোডিং ব্লগস্পট ব্লগে কি ভাবে ব্যবহার করবেন ?
প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন ড্যাশবোর্ড থেকে Template সিলেক্ট করুন এবং নতুন পেজ থেকে Edit HTML এ ক্লিক করুন। নতুন একটি পেজ আসবে সেখানে নিচের কোড গুল বসান।
এবার কীওয়ার্ড এর CTRL+F প্রেস করে </head> ট্যাগ সার্চ করুন এবং এর ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন।
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script>
<style>
#load-page-seocips { background-color:#00CCFF; width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; }
.dots-container { padding:0; position:absolute; text-align:center; top:50%; width:100%; }
.dots { -webkit-animation:bounce 1.5s infinite linear; animation:bounce 1.5s infinite linear; background:#FFF; border-radius:50%; display:inline-block; height:20px; text-align:center; width:20px; }
.dots:nth-child(1) { -webkit-animation-delay:.2s; animation-delay:.2s; }
.dots:nth-child(2) { -webkit-animation-delay:.4s; animation-delay:.4s; }
.dots:nth-child(3) { -webkit-animation-delay:.6s; animation-delay:.6s; }
.dots:nth-child(4) { -webkit-animation-delay:.8s; animation-delay:.8s; }
.dots:nth-child(5) { -webkit-animation-delay:1s; animation-delay:1s; }
@-webkit-keyframes bounce {
0% { -webkit-transform:translateY(0); } 15% { -webkit-transform:translateY(-15px); } 30% { -webkit-transform:translateY(0); }
}
@keyframes bounce {
0% { transform:translateY(0); } 15% { transform:translateY(-15px); } 30% { transform:translateY(0); }
}
</style>
<script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script>
<style>
#load-page-seocips { background-color:#00CCFF; width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; }
.dots-container { padding:0; position:absolute; text-align:center; top:50%; width:100%; }
.dots { -webkit-animation:bounce 1.5s infinite linear; animation:bounce 1.5s infinite linear; background:#FFF; border-radius:50%; display:inline-block; height:20px; text-align:center; width:20px; }
.dots:nth-child(1) { -webkit-animation-delay:.2s; animation-delay:.2s; }
.dots:nth-child(2) { -webkit-animation-delay:.4s; animation-delay:.4s; }
.dots:nth-child(3) { -webkit-animation-delay:.6s; animation-delay:.6s; }
.dots:nth-child(4) { -webkit-animation-delay:.8s; animation-delay:.8s; }
.dots:nth-child(5) { -webkit-animation-delay:1s; animation-delay:1s; }
@-webkit-keyframes bounce {
0% { -webkit-transform:translateY(0); } 15% { -webkit-transform:translateY(-15px); } 30% { -webkit-transform:translateY(0); }
}
@keyframes bounce {
0% { transform:translateY(0); } 15% { transform:translateY(-15px); } 30% { transform:translateY(0); }
}
</style>
উপরের কোড থেকে হাইলাইট করা কালার কোড মুছে সেখানে আপনি ইচ্ছে মত কালার কোড ব্যবহার করতে পারেন। যেকোনো চাইলে আপনার থিমের সঙ্গে মিল রেখেও কালার ব্যবহার করতে পারেন।
এবার একি ভাবে <body> বা </body> সার্চ করুন এবং তার ঠিক উপরে বা আগে নিচের কোড গুল বসিয়ে দিন। তবে আপনি দ্বিতীয় ট্যাগ সার্চ করুন এবং এর ঠিক উপরে বসিয়ে দিন কাজ হয়ে যাবে।
<div id="load-page-seocips">
<div class="dots-container">
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
</div>
</div>
<div class="dots-container">
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
</div>
</div>
উপরের কাজ সব ঠিক ঠাক ভাবে করা শেষ হলে Save Template এ ক্লিক করুন এবং আপনার ব্লগ ভিজিট করে চেক করুন দেখুন ঠিক ভাবে কাজ করছে কিনা। আশাকরি ঠিক ভাবেই কাজ করবে যদি উপরের নিয়ম মেনে ঠিক ভাবে কাজ করেন।
তাহলে আজকের মত এই পর্যন্ত আবারও দেখা হবে নতুন কিছু নিয়ে। পোস্টটি ভাল লাগলে বন্ধুদের সঙ্গে সোশ্যাল মিডিয়াতে শেয়ার করুন, কমেন্ট করুন। কোন রকম সমস্যা হলে অবশ্যই কমেন্টে জানান।
