ඔන්න යාලුවනේ ගෙනාවා Blog එකක් කරන අපේ යාලුවන්ට ටිකක් වැදගත් වෙන Post එකක්. ඉතින් අද කියන්න යන්නේ අපේ බ්ලොග් එකට Page Loading Effect එකක් බ්ලොග් එකට එකතු කරගන්න විදිහ ගැනයි. Page Loading Effect එකක් බ්ලොග් එකට දාද්දි බ්ලොග් එක Visit කරන අයට කරදරයක් හා බ්ලොග් එකේ Page Load වෙද්දි ස්ලෝ වෙන නැති එකක් වෙන්නත් ඕණනේ. ඉතින් දැන් මේ දෙන Stylish CSS3 Page Loading Effect එක ඒකට හොදම විසදුමක්. බ්ලොග් එක ස්ලෝ වෙන්නෙත් නෑ. වැඩෙත් ලස්සනයි. හරි මෙහෙමයි වැඩේ කරගන්නේ.
මේ තියෙන්නේ අපි දාගන්න යන Page Loading Effect එක. [ Demo ]
Stylish CSS3 Preloader For Blogger
Features:
Very impressive and stylish look!
Loads faster and doesn't affect blog speed.
Minified javascript and CSS codes are used.
Easy to install
Features:
Very impressive and stylish look!
Loads faster and doesn't affect blog speed.
Minified javascript and CSS codes are used.
Easy to install
Page Loading Effect එක Blog එකට එකතු කරගන්නේ මෙහෙමයි.
Step 1 ] මුලින්ම ඔයාගේ Blogger Dashboard එකට ගොස් Template >> Edit HTML යන්න.
Step 2 ] CTRL + F Press කරලා <head> කියන එක Search කරලා පහත තියන Code එක ඊට යටින් Copy >> Paste කරන්න. ( පහත රූපය )
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link href='http://googledrive.com/host/0B-3SIKm-BBF_b2pCTnJEVmNBRVE' rel='stylesheet'/>
<link href='http://googledrive.com/host/0B-3SIKm-BBF_bm85Nl9SU01PWEU' rel='stylesheet'/>
<script src='https://googledrive.com/host/0B-3SIKm-BBF_bDEtbHNLdFM1TEk'/>
<script src='https://googledrive.com/host/0B-3SIKm-BBF_elc0VG5jUFZDSzg'/>
<script>$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 7000 );
});</script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link href='http://googledrive.com/host/0B-3SIKm-BBF_b2pCTnJEVmNBRVE' rel='stylesheet'/>
<link href='http://googledrive.com/host/0B-3SIKm-BBF_bm85Nl9SU01PWEU' rel='stylesheet'/>
<script src='https://googledrive.com/host/0B-3SIKm-BBF_bDEtbHNLdFM1TEk'/>
<script src='https://googledrive.com/host/0B-3SIKm-BBF_elc0VG5jUFZDSzg'/>
<script>$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 7000 );
});</script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
Step 3 ] හරි දැන් </header> කියන එක Search කරලා පහත Code එක ඒකට උඩින් Copy >> Paste කරන්න. ( පහත රූපය )
<body class='demo'>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>
<div class='loader-section section-left'/>
<div class='loader-section section-right'/>
</div>
</div>
</body>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>
<div class='loader-section section-left'/>
<div class='loader-section section-right'/>
</div>
</div>
</body>
Customization:
පලවෙනි Code එකේ Higjlight කරලා තියන 7000 අගය වෙනුවට ඔයාලට කැමති අගයක් දෙන්න. ඒකෙන් වෙන්නේ Effect එක පෙන්වන තත්පර ගණනයි.
Step 4 ] Save Template ක්ලික් කරලා Blog එක Refresh කරලා බලන්න.
