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/AVvXsEhsqLNdF2LtsZpD4JkLzOgs2rSSQJdiPF2Zf7J8OThmRKs8xJWG3Z4MnMV7gyJlxxANRm8BD2JTzua6WtAkFPR497wya7REISM3oMEdMJ2Rrrs60Bsq6J8RThpTgnIXq_9evhv4Fbkd-_xS/s1600/MBL-Loading-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTVnnl0l99YgAOCtHD3RJF-ILi604xN0iAB6xzqDyxk0yWLq_Jh-kAo6rRRuw3Y47OtTfsK1EYnOnVrZ9NZjvxybvH0ucu6M9Th0pjkUJOl-QHzhVGHotSVEBavMXFgIlR2J118tNYijp4/s1600/MBL-Loading-2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilj4U03WD-RT5BzWD0p8HW6N8i-9P1-FaLAuxB_DL_HzULjdQCnpyKvzPKhs9d80sx1P1RbWXESxDnTZdjkx5LBtRbCp0P0UAQF2tKxQmH4DJkqWTtu9rvqjNYVMngbvDnp1z_xOptk4jI/s1600/MBL-Loading-3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCeBCaVfcTTQY11vVhkgSna2RkE41e-mJoHV4htLk7Qg3TME3AaUIsbxRlJ_j3ls5T7rcD76GhRtQa2NvAwdWr5xYqqZ_AgCFVM7smkByemboS7Dt0jtqZ2qK5XuShvFIdV1QIFLMhXTx/s1600/MBL-loading-4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02NZxV__EZYH43w_QGZQ8IhQVwaNgUj3Q_ftbwb7rdcqVyidgpJMIoBjkQreIKrfLc9nAFmi8XACfe9OcOVaoMBymXtxohG6OfS-b9Tw5HvC8kezErs33gz7p0BJY-1Dq-AfQmKMZXb3i/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq0F97AB6jO4jWW7uOWMbFiW7-57zaLs55L-ulbiKkarfRxGPXn-d8CCI3ADO-XVw-BiibjbOYQOIenNUxuPwgOAtP-ZjPn-GLTy4MoxqdS-sftp9cD1J-olm4I2njPgps_O-AB0JqvhsX/s1600/MBL-loading-6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4huhpIU2OC6MhyL-RibvX8qdjQddbQS_mHj_lujsYGw0F3U_ggU1MbLcJpTzt_MduNvgwMhAmn6XVu1_QJ7yy54OI-Ej2h1KvhEvRh6s6_t_10mhwu8FGKDc_1jKVnxXMTNlL4JXWVrBC/s1600/MBL-loading-7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqUe0fLcAwG8WZUmDm6FJi9oEknS_361D6S0IAnvVFoYxJ1GV8X3icsUfcKcV3x8hKT_8vbf2npXjxZGqQFM3W6CoJmHVCK3FCXAm4WRPvI01FyBa2Rm51w7KJ5kU_avzzg-ExRoflw9fJ/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>

ඔන්න එහෙනං .. කස්ටිය මේක ගෙන බලන්නකෝ .. එහෙනං බුදුසරණයි කිවුවා ආයෙත් මෙවුවා මෙවුවා එකකින් හම්බු වෙමු ඈ