আপনার ব্লগে যুক্ত করুন জটিল Loading ইফেক্ট ( ভাল লাগবেই )

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

আশা করি ভাল লাগবে এবং সময় পেলে আমার প্রযুক্তি ব্লগ থেকে ঘুরে আসবেন আমার ব্লগ

Level 0

আমি Readul Haque। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 7 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 41 টি টিউন ও 268 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

লাইভ ডেমো কোথায় ভাই ?

Level 0

Where is the DEMO ??