বাউন্স ইফেক্ট পেজ লোডিং ব্লগস্পট ব্লগে ব্যবহার করুন

বাউন্স ইফেক্ট পেজ লোডিং এটা খুব মজার একটি জিনিস এটা ব্যবহার করে ব্লগকে একটা নতুন রূপ দিতে পারেন। ব্লগে যখুন কোন ভিজিটর ভিজিট করছে সেই সময় কিছুটা হলেও ব্লগ লোড হতে সময় লাগে সেই সময় এর মধ্যে এই অসাধারন বাউন্স ইফেক্ট টা সেই ভিজিটর এর সামনে ভেসে উঠবে। কি মজার তাই না ? হুম এই ধরনের টিপস ইতিমধ্যে এসো বন্ধুতে অনেক শেয়ার করা হয়েছে কিন্তু সেগুল ভিন্ন ইফেক্ট এবং আজকের টিও ভিন্ন। এটা নিয়ে বিস্তারিত আর কিছুই নেই নিচে থেকে এর লাইভ রূপ অর্থাৎ ডেমো দেখেনিন তাহলে বিষয় বুঝে যাবেন। তাহলে চলুন শুরু করা যাক কিভাবে ব্লগার অর্থাৎ ব্লগস্পটে কিভাবে এটা ব্যবহার করবেন।


loading-effect-blogspot




বাউন্স ইফেক্ট পেজ লোডিং ব্লগস্পট ব্লগে কি ভাবে ব্যবহার করবেন ?



প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন ড্যাশবোর্ড থেকে 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>


উপরের কোড থেকে হাইলাইট করা কালার কোড মুছে সেখানে আপনি ইচ্ছে মত কালার কোড ব্যবহার করতে পারেন। যেকোনো চাইলে আপনার থিমের সঙ্গে মিল রেখেও কালার ব্যবহার করতে পারেন।


এবার একি ভাবে <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>


উপরের কাজ সব ঠিক ঠাক ভাবে করা শেষ হলে Save Template এ ক্লিক করুন এবং আপনার ব্লগ ভিজিট করে চেক করুন দেখুন ঠিক ভাবে কাজ করছে কিনা। আশাকরি ঠিক ভাবেই কাজ করবে যদি উপরের নিয়ম মেনে ঠিক ভাবে কাজ করেন।

তাহলে আজকের মত এই পর্যন্ত আবারও দেখা হবে নতুন কিছু নিয়ে। পোস্টটি ভাল লাগলে বন্ধুদের সঙ্গে সোশ্যাল মিডিয়াতে শেয়ার করুন, কমেন্ট করুন। কোন রকম সমস্যা হলে অবশ্যই কমেন্টে জানান।

একটি মন্তব্য পোস্ট করুন

2 মন্তব্যসমূহ

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!