কেমন আছেন সবাই ??? আশাকরি ভাল আছেন। বরাবরের মত এবারেও এটি ব্লগার টিউটোরিয়াল নিয়ে উপস্থিত হলাম। আজকে আপনাদের সাথে আমি খুব ভাল সুন্দর একটি জিনিষ শেয়ার করবো। সেটা হচ্ছে Loading ইফেক্ট আশা করি আপনাদের ভাললাগবে। তবে একটা কথা আপনি যদি প্রফেশনাল ভাবে ব্লগিং করতে চান এবং ব্লগে ভাল ভিজিটরস আশা করেন তবে এইটা না লাগানোই ভাল। কারণ এই ইফেক্ট গুলো সাধারণত পারসোনাল এবং নিজস্ব ব্লগে এড করা হয়। তাই ব্যাপারটা মাথায় রাখবেন। তবে যদি ডিমো ব্লগে দেখে ভাল লাগে তবে এড করতে দিদ্ধা করবেন না, কারণ আপনার ব্লগ আপনার কাছে যথেষ্ট প্রীয় এবং পরে যদি এই ব্যাপারে কোন কম্প্লেইন আসে তবে আবার রিমূভ করে দিবেন।
আসুন শুরু করি
- প্রথমে আপনার ব্লগে লগইন করুন http://www.blogger.com এ গিয়ে
- পরে Design--->Edit HTML
- এখন Expand Widget Template ক্লিক করুন ( দেখুন html কোড বক্স এর উপরেই আছে )
- এইবার CTRL + F দিয়ে </head> খুজে বের করুন
- এখন নিচের কোড গুলো ঠিক </head> এর উপরে পেষ্ট করুন
- <style>
/* jQuery page loading effect by http://www.nethelp24.blogspot.com */
#md-loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(http://www.liddabitsweets.com/wp-content/plugins/simplemap/inc/images/loading.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.MD #md-loading { display: none; }@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#md-progress-bar {
position: absolute;
top: 0; left: 0;
background: #de1301;
opacity: 0.8;
width: 0;
height: 18px;
}
#md-loader {
height: 100%;
display: none;
}
</style>
<script>(function($){
$("html").removeClass("MD");
$("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script> - এই কোডটুকু <body> খোজেঁ বের করুন
- এখন ঠিক <body> এর নিচে , নিচের কোড গুলো কপি করে পেষ্ট করুন
- <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div></b:if> - এইবার সেইভ করুন । ব্যাস কাজ শেষ ।
No comments:
Post a Comment