Page Loading Effect
Hello Friends,
இன்றைக்கு ஒரு அற்புதமான விட்ஜெடை பற்றி பார்ப்போம். அது எப்படிப்பட்டது என்றால் உதாரணத்திற்கு நீங்கள் இணையத்தில் ஒரு விளையாட்டை துவங்குவதற்கு முன்னாள் அது சில வினாடிகள் Loading  ஆகும், அதேபோல் உங்களுடைய Blogger ஐ துவங்கும்போதும் அது Load ஆவதை இந்த விட்ஜெட்டை நிறுவுவதன் மூலம் காட்ட முடியும்.

அப்படிப்பட்ட விட்ஜெட்டை எவ்வாறு உங்களுடைய blogger ல் நிறுவுவது என்பதற்கு கீழே உள்ள படிமுறைகளை பின்பற்றவும்.

உங்களுடைய Blogger ஐ திறந்து Template >> Edit HTML >> Proceed என்பதற்கு சென்று

]]></b:skin>

என்பதை கண்டுபிடித்து அதற்கு மேல், கீழே உள்ள CSS Code இணை இணைக்கவும்.

#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;
}

மீண்டும்

</head>

என்பதை கண்டுபிடித்து </head> க்கு மேல் பின்வரும் HTML Code ஐ இணைக்கவும்.

<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>

உங்களுடைய முகப்பு பக்கத்தில் மாத்திரம் இந்த Loading Effect ஐ தெரியப்படுத்த மறுபடியும்

</body>

என்பதை கண்டுபிடித்து அதற்கு மேல் பின்வரும் HTML Code ஐ சேர்த்து கொள்ளவும்.

<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://palathum10m.blogspot.com/">Palathum10m</a></div></div></b:if>

உங்களுடைய அனைத்து பக்கங்களிலும் இந்த Page Loading Effect ஐ காண்பிப்பதற்கு கீழே உள்ள Code ஐ </body> க்கு மேல் இணைத்து கொள்ளவும்.

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

இப்போது மேலே உள்ள Loading-GIF-Here எனுமிடத்தில் பின்வரும் Link ல் உங்களுக்கு பிடித்ததை (click செய்து பார்க்கவும்) இணைத்துக்கொள்ளவும்.








அவ்வளவுதான் இப்போது உங்களுடைய வலைத்தளத்தை திறந்து பாருங்கள்.

If You Enjoyed This Post Please Take 5 Seconds To Share It.

எமது பயனுள்ள பதிவுகளை மின்னஞ்சல் மூலம் பெற்றுக்கொள்ள கீழே உள்ள பெட்டியினுள் உங்களுடைய மின்னஞ்சல் முகவரியை கொடுத்து Subscribe என்பதை click செய்யவும்.


பின்னர் உங்களுடைய மின்னஞ்சலை திறந்து எமது தளத்திலிருந்து வந்திருக்கும் Link ஐ click செய்து Active செய்து கொண்டு எமது பதிவுகளை இலவசமாக பெற்று கொள்ளுங்கள்.

0 comments:

Translate

Link To My Website

Followers

Archives

Related Posts Plugin for WordPress, Blogger...

Subscribe

Recommend on Google
Powered by Blogger.