«

»

Munna Haque

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

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

আসুন শুরু করি

  • প্রথমে আপনার ব্লগে লগইন করুন www.blogger.com এ গিয়ে
  • পরে Design—>Edit HTML 
  • এখন Expand Widget Template ক্লিক করুন ( দেখুন html কোড বক্স এর উপরেই আছে )
  • এইবার CTRL + F দিয়ে </head> খুজে বের করুন
  • এখন নিচের কোড গুলো ঠিক </head>  এর উপরে পেষ্ট করুন
  • <style>
    /*  jQuery page loading effect by 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>
  • এইবার সেইভ করুন । ব্যাস কাজ শেষ ।
  • ধন্যবাদ
  • আগে প্রকাশ টেকটিউনন্সে

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


এ সম্পর্কিত আরো কিছু টুইট:

প্রফেশনাল PSD Web Template - Part 5 ( কালার ফুল টেমপ্লেট )
নিজে নিজে Adobe photoshop শিখতে চাইলে PDF ফাইলটি ডাউনলোড করে নিন
বিজয় দিবস উপলক্ষে ৫০% ছাড়ে ওয়েব ডিজাইন এন্ড ডেভেলপমেন্ট কোর্সে ভর্তি চলছে
খুব সহজে গিটার শিখুন – তাল বা রিদম ও লয় (Don’t Miss)
সর্ব সেরা অফার FREE Domain + Unlimited Disk Space+Unlimited Bandwidth ৫০% মূল্য ছাড় 1520 /-
বাংলাদেশে এই প্রথম ফ্রী সি প্যানেল ওয়েব হোস্টিং
কখন revenuehits এর এড সমূহের রুপ পরিবর্তন ?

মন্তব্য দিনঃ

comments

About the author

Munna Haque

Munna Haque

Permanent link to this article: http://techtweets.com.bd/web-developing/munnahaque/31739

1 comment

  1. Davy Jones
    Davy Jones

    thanks a lot. Like the effect 😀

মন্তব্য করুন