blog එක ලෝඩ් වෙනකන් ෆට්ට වැඩක් කරමුද

 
මේකයි දැන් ඔය බ්ලොග් එක ස්ලෝ අයගේ ලෝඩ් වෙනකන් නිකන්ම සුදු පාටට තියනවට වඩා ලස්සනයි නේද එතනට ලෝඩින් වගේ එකක් හරි මොකක් හරි එෆෙක්ට්ස් එකක් වටෙනවනන් .. ඔන්න මමනං දාගත්තා... ඔයාලත් දාගෙනම බලන්න එහෙනං ඈ ..  මම පියවරෙන් පියවරට .. කියල දෙන්නම් ඈ ..




මුලින්ම   Blogger.com >> Your Blog >> Template >> Edit HTML >> Proceed. ඔතනට යන්න හරිද ..

ඊට පස්සේ දෙයියනේ කියල ctrl+F  ඔබලා  එකේ ]]>

</b:skin> කියල ගහලා සර්ච් කරන්න .  ඊට පස්සේ එකට උඩින් 

මේ පහල දීල තියන කෝඩ් එක  පේස්ට් කරන්න .. මතක තියාගන්න 

මේකේ Loading-GIF-Here කියන තැනට ඔය පහල කරකැවී කැවී 

තියන එවන් ලෝඩ් වෙනකොට වැටෙන්න ඕනි gifඉමේජ් එකේ 

ලින්ක් එක දාන්න

#mbl-lazyloading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(Loading-GIF-Here) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #mbl-lazyloading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#mbl-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #de1301;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#mbl-loader {
    height: 100%;
    display: none;
}

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvYajEyQiIsw8cNbKnb_4kP3bEOURZc2bVwtZ17rPtBJvC-kCPXLBOtGnZzF5y4Tk-MJ78RW8jxOSgTf3g0FC-vhT7JbQojG0y48WLiKJ-hezENx6K8j6evfEyI0QBoABrb_JmDMdfKZW/s1600/MBL-Loading-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Gux5tZzasdJp7dlPGL5X3CPlktQt4lHW-6ugWZAmIWnKWMPKcedaVhg6D-mDgd_aBichpsVUXgsiScGAwxR2dv94OGnL6NlbBOoAgOLtSO5NUkFX1uxFVBCD3e4wa6AiflpoujDhfBL9/s1600/MBL-Loading-2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NdarvIn4T4wT6n3fJ65jiGsRQXkujXqQ-O8P_4mOIO4ok1sVlUOW5I8XhcizebcDBnfQG5znN04X9eq5yxs4mm-TIaiabblFgwRt55VBLzfyBIdNoldUnIxdn4cIuDWcOBjFwdjcDCm4/s1600/MBL-Loading-3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX5KzJ9Q9RMZYnxRpGpDl4VdRIVwAEb908z8K8ik0bPqqIUeqAjUgzrW-w6ZtBSndhVJkUfvypPhde9_mhqBdkZozu5siI_dx30uBoaci-Lxy0T8j2LD_47C2TA8lYHWE_-HsTD1WAVsW8/s1600/MBL-loading-4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxstMP4zfSDOouMSlCKQ6W8zWs8JRJrO_IoXL7f75F-e5NXcHkOrenUQnOH1ZHXoxGKW0GfUk3sY7FsxZo5RgW9JEb0kqKkiaUeZ3Cj0Z-8xHBJ9Nk-eTaQKvMLUQ7aww1uGFfXA37uLy/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgitfgaGaM0pKEKccvo8qeqOS-x-8V7NmLiJcRIm_9IGfLxa-CAnTbeK51JJRW0ks5gVYHdoVWztmXBhL6GRrv8AfaSxFI-thifs_ltksb9gZpymYer7dpuKU334aU7M-N5YZoJltcGcFaE/s1600/MBL-loading-6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuS4WQidhzrQ4KSsqxianNOBndq99L3a8EFFEMCNCxKJvyl_J14hyphenhyphencTn1Ikd-6iU-N4XvCIXk-3MYGvzinHvEz_2bJoTF0gYs-_IBZGLnGfrdlD72q6N_J-mYih4GJzPZduKqYWbLt8K9F/s1600/MBL-loading-7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFgNsTsW3Ze19MOe-wVolnmJegLugyepFItaerJfGiTHzEAsZv8LYYzHmVyoa48X4JQUnmyriOuEzQJ9QqsqBxBZRKmTJ9kj3hKr5T6s2U-QggbowxC6vgBqCi0aCEEy-SNY5BEBxubTXP/s320/loading_bar.gif

එක දැම්මට පස්සේ ඊළඟට ආයෙම </head> කියන එක සර්ච් කරගන්න ඊට පස්සේ එකට උඩින් පහල දිල තියන කෝඩ් ටික 

දාන්න 

<script>

(function($){

$("html").removeClass("MD"); 


$("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

දැන් ඊලඟට  ආයෙම   </body>  කියන එක සර්ච් කරලා 
හොයාගන්න ඊට පස්සේ එකට උඩින් පහල දිල තියන කෝඩ් 

දෙකෙන් එකක්  පේස්ට් කරන්න .. 

මේ කෝඩ් එක දැම්මම ඔය එෆෙක්ට් එක වැඩ කරන්නේ හෝම් පේජ් එකේ විතරයි 

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://sudusm.blogspot.com">sudu mahaththaya</a></div></div></b:if>

මේක දැම්මම හෝම් පේජ් එකේ විතරක් නෙවෙයි ලෝඩ් වෙන හැම පෙජ් එකේම මේක පේනවා ..

<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://sudusm.blogspot.com">sudu mahaththaya</a></div></div>