«

»

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>
  • এইবার সেইভ করুন । ব্যাস কাজ শেষ ।
  • ধন্যবাদ
  • আগে প্রকাশ টেকটিউনন্সে

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


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

HTML শিখুন HTML5 সহ (পর্ব-5)
SQL নিয়ে জানুন কিছু টুকিটাকি কথা!
ইন্টারনেট ও তথ্যপ্রযুক্তি সম্পর্কে যাবতীয় তথ্য জানতে চাইলে PDF ফাইলটি এখনি ডাউনলোড করে নিন (না দেখলে...
ওয়েব ডিজাইন ও ডেভোলপমেন্ট শিখতে চান? ঘরে বসে প্রফেশনাল ওয়েব ডিজাইনার/ডেভোলপার হতে চান? (মেগা টিউন)
Freelancing করে কাজ পাচ্ছেন না তাহলে আমাদের দেশীয় সাইটি থেকে আয় করুন।
আর অন্যের উপর নির্ভ‌‍‍রশীল নয়,এবার নিজেই হয়ে যান এডমিন CREATOR &amp; বায়ার।
আপনার ব্লগে পৃথিবীর সহজতম উপায়ে আপ এবং ডাউন বাটন যোগ করে নিন।

মন্তব্য দিনঃ

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 😀

মন্তব্য করুন