எவ்வாறு உங்களுடைய Blogger ல் Page Loading Effect ஐ நிறுவுவது.
Labels: Blogger Tips
இன்றைக்கு ஒரு அற்புதமான விட்ஜெடை பற்றி பார்ப்போம். அது எப்படிப்பட்டது என்றால் உதாரணத்திற்கு நீங்கள் இணையத்தில் ஒரு விளையாட்டை துவங்குவதற்கு முன்னாள் அது சில வினாடிகள் 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 செய்யவும்
.palathum10m thanks
கருத்துகள் இல்லை:
கருத்துரையிடுக