যুক্ত করুন পেজ Loading Effect ব্লগার / ব্লগস্পট স্টাইল ২ ।

বন্ধুরা সবাই ভাল আছেন তো ভাল থাকলেই আমি খুশি । ক্যামন থাকছেন কমেন্ট করে জানাবেন । যাই হোক আজকে আমি আপনাদের জন্য নিয়ে এলাম পেজ 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 এ ক্লিক করে সেভ করে নিন । আশাকরি বুজতে কোন সমস্যা হলানা কোন প্রকার সমস্যা হলে আমাকে জানাবেন আমি হেল্প করতে চেষ্টা করবো ।


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


এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

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

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

নবীনতর পূর্বতন

نموذج الاتصال