Page loading effect එකක් ඔබේ blog එකට එකතු කරගමු !

හුග දවසකට පස්සේ මට හිතුනා අපේ බ්ලොග් ලියන සහෝදර සහෝදරියන් වෙනුවෙන් මොනවා හරි ලියන්න ඕනේ කියලා. ඉතින් Blogger Tricks යටතේ අපි අවසානයට කතා කලේ Google Custom Search Engine එකක් හදාගෙන එය ඔබේ බ්ලොග් එකට එකතු කරගන්න විදිය ගැනයි. ඉතින් අද අපි කතා කරන්න යන්නේ page loading effect එකක් ඔබේ බ්ලොග් එකට එකතු කරගන්න විදිය ගැනයි. ඔයාගේ බ්ලොග් එකට මෙය එකතු කරගන්න කලින්demo එක බලල ඉන්නකෝ.
Page Loading Effect එකක් Blog එකට එකතු කරගන්නේ කොහොමද?
  • මුලින්ම ඔබ ඔබේ Blogger Dashboard එකට ගොස් Template—>Edit HTML යන්න.
  • “Expand Widget Templates” යන්න ඉදිරියේ ඇති check box එකට tick mark එකක් දාන්න.
  • Ctrl+F keys බාවිතයෙන් ඔබේ බ්ලොග් එකේ HTML codes අතරින් </head> tag එක හොයාගෙන එයට ඉහළින්, පහත දී තිබෙන codes ටික එකතු කරගන්න.
<style>
/* Page loading effect by www.trickslanka.com */
#tl-loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.TL #tl-loading { display: none; }
 
@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#tl-progress-bar {
position: absolute;
top: 0; left: 0;
background: #387518;
opacity: 0.8;
width: 0;
height: 18px;
}
#tl-loader {
height: 100%;
display: none;
}
</style>
<script>
 
(function($){
 
$("html").removeClass("TL");
 
$("#header").ready(function(){ $("#tl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#tl-progress-bar").stop().animate({ width: "75%" },1500) });
 
$(window).load(function(){
 
$("#tl-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#tl-loading").fadeOut("fast",function(){ $(this).remove(); });
});
 
});
})(jQuery);
</script>
  • මීලගට <body> tag එක හොයාගෙන එයට පහලින්, පහත දී තිබෙන code එක එකතු කරගන්න. ඔබේ බ්ලොග් එකේ සැම පිටුවක්ම open වෙන විට ඔබට හා ඔබේ visitors ලා හට මෙම effect එක දර්ශනය වෙනවා.
<div id='tl-loading'><div id='tl-progress-bar'></div><div id='tl-loader'>Loading...</div></div>

හෝ

ඔබට අවශ්‍ය මෙම loading effect එක home page එකේ පමණක් දර්ශනය වීමටනම් පහත codes ටික <body>ටැග් එකට පහලින් එකතු කරගන්න.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tl-loading'><div id='tl-progress-bar'></div><div id='tl-loader'>Loading...</div></div></b:if>
  • ඊට පසුව template එක save කරන්න.
එච්චරයි. !! එහෙමනම් ඉතින් ඔබට සුබ දවසක් !!
Previous
Next Post »