বন্ধুরা সবাই ভাল আছেন তো ভাল থাকলেই আমি খুশি । ক্যামন থাকছেন কমেন্ট করে জানাবেন । যাই হোক আজকে আমি আপনাদের জন্য নিয়ে এলাম পেজ Loading Effect স্টাইল ২ এর আগে আমি দেখিয়ে ছিলাম সেটির Effect টি ছিল আলাদা আর আজকে আমি আপনাদের যেটি দেবো তার Effect আলাদা । কি পেজ Loading Effect জিনিস টি বুজতে পারলেন তো যদি না পারেন তাহলে নীচে থেকে ডেমো দেখে নিন আর লক্ষ করুন Loading বলে একটি ফটো আসবে । আশাকরি বুজতে পারলেন ।












এবার দেখে নিন কিভাবে যুক্ত করবেন ! 


১) আপনার ব্লগ লগ ইন করুন তারপর ড্যাশবোর্ড থেকে Template এ ক্লিক করুন তারপর Edit HTML এ ক্লিক করুন । 


২) এবার আপনার কীবোর্ড এর Ctrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।


</head>


৩) এবার উপরের কোডটি খুজে পেলে তার ঠিক উপরে বা আগে নীচের কোডটি কপি করে পেস্ট করুন ।




<style>
/*  jQuery page loading effect by www.asobondhu.blogspot.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://www.electricalcart.com/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>



নোট : উপরে লাল আর সবুজ রঙ্গে ঘিরা Url টি মুছে আপনার ইছা মতো Gif ফটো Url দিতে পারনে । আর সবুজ রগে ঘিরা কোডটি মুছে আপনার ইছা মতো রঙ এর কোড দিতে পারেন ।



৪) এবার একি ভাবে কীবোর্ড এর Ctrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।



<body>



৫) উপরের কোডটি খুজে পেলে তার ঠিক নীচে বা পরে নীচের কোডটি কপি করে পেস্ট করুন ।



<div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div>


নোট : আপনি যদি চান শুধু মাত্র হোম পেজে এই স্টাইল যুক্ত করবেন তাহলে নীচের কোডটি কপি করে পেস্ট করুন ।



<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>



* এবার Save Template এ ক্লিক করে সেভ করে নিন । আশাকরি বুজতে কোন সমস্যা হলানা কোন প্রকার সমস্যা হলে আমাকে জানাবেন আমি হেল্প করতে চেষ্টা করবো ।


* তাহলে আজকের মতো এই পর্যন্ত ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।


শেয়ার করুন :→

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

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

 
Top
Blogger Widgets