හරහට යන එවයි නිවී නිවී පත්තු වෙන එවයි (blog tricks)

ඔන්න එහෙනං අදත් පාන්දරම තවත් බ්ලොග් වැඩ කැල්ලක් අරගෙන ආවා.... බ්ලොග් වැඩේ කෙසේ වෙතත් මට හරියටම මාස 3ක් ගියා විසිටර්ස්ලා 6000ක්  මේ බ්ලොගියට ගෙන්න ගන්න එත් මේ දවස් දෙකට හරියටම 3016ක් ඇවිල්ලා තියනවා එකත් මරු මරේ මාරු ..  .හැබැයි ඉතින් මුලින්ම ටෙක් පොස්ට් (නිශාන් අයියා කියන විදියට ) බලන්න අපු අය කොහෙන් කොහොම හරි නතර වෙලා තියෙන්නේ 18+ ගොඩේ තමයි හික්ස්.. මොන කරන්නද ජම්මෙට ඇරියත් පුරුද්දට අරින්න බැහැ කියනවනේ.. එකත් කමක් නැහැ කියමු.. සමහර උදවිය.. ආදරයට ට්‍රික්ස් බලන්නත් ගිහින්.. එකත් හොදයි ... බැරි වෙලාවත් බ්ලොග් වර්ගීකරණයක් එහෙම කරොත් මගේ එක දාන්නේ මොන ගොඩටද කියල හිතාගන්න බැරි වෙයි..
අහා තව දෙයක්.. නොහික්මුණු ඇසේ අයියන්දියා මරු පොස්ට් එකක් දාල තියනවා back track ගැන..එකත් ඔය හැකර් හැකර් කියාගන්න අයට වටිනවා...

කතාවෙන් කතාව පොස්ට් එක දික් වෙනවා එහෙනං අපි දැන් වැඩේට බහිමුකො.. අද උදේ පාන්දර කියල දෙන්න යන්නේ ලස්සනට අකුරු නිවී නිවී පත්තු වෙන්නේ  <Blink> සහ ඔය අකුරු එක පැත්තකට යන්නේ <Marquee>..අන්න ඒ වගේ එකක් කොහොමද බ්ලොග් එකට දාන්නේ කියල කියල දෙන්න ..  මේකයි.. මේක බ්ලොග් පොස්ට් එකට නෙවෙයි ඕනිනං java script ගැජට් එකක් ඇතුලේ උනත් දාන්න පුළුවන්

මුලින්ම අපි

blink

වෙන ටෙක්ස්ට් එකක් දාන්නේ කොහොමද කියලා බලමු.

මුලින්ම මේ ටෙක්ස්ට් එක දාන්න ඕනි බ්ලොගියට  මේ බ්ලින්ක්ස් වෙන්න අවශ්‍ය CSS  ඒ කියන්නේ ]]></b:skin>  එකට උඩින් දාන්නේ ..අන්න ඒවට තමයි CSS කියන්නේ .. මේ CSS දාගෙන ඉන්න ඕනි.. එහෙනං

අලුත් interface එක තියන අය       Templates > Edit HTML

පරණ interface  එක තියන අය      Design > Edit HTML   ගිහින්

 CTRL+F  ඔබලා මුලින්ම  ]]></b:skin>   හොයාගෙන ඉන්නකෝ .. ඊට පස්සේ පහත සදහන් කෝඩ් ටික  ]]></b:skin>   වලට උඩින් දාන්න...

#Blinker {display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left; }

@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
 -moz-animation-play-state: paused;
 }

@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
 -webkit-animation-play-state: paused;

 }

දැන් templet එක save කරගන්න .. දැන් කරන්න තියෙන්නේ පොඩි දෙයි..  දාන පොස්ට් එකේ කොහේ හරි.. බ්ලින්ක් කරන්න ඕනි නම් හෝ ජව ස්ක්‍රිප්ට් එකක බ්ලින්ක් කරන්න ඕනි නම් හෝ පහත සදහන් කෝඩ් ඇතුලේ  බ්ලින්ක් වෙන්න ඕනි ටෙක්ස්ට් එක( Blinking Text here)දාන්න..

<div id="Blinker" >Blinking Text here</div>

හරි අපි දැන් ඊළගට බලමු <Marquee> එහෙම නැත්තන් අර හරහට යන්නේ අන්න එක දාන විදිය.. මේක නිකන්ම හරහට යන්න විතරක් නෙවෙයි හරහට යන text එකට  ලින්ක් දාන්නත්  පුළුවන් .ක්‍රමයක් ගැන..

සුදු මහත්තයාගේ blog අවකාශය +++---මුල් පිටුවට යන්නක්ලික් කරන්න .

සුදු මහත්තයාගේ blog අවකාශය +++--- මුල් පිටුවට යන්නක්ලික් කරන්න .

උඩ පේනවනේ demo එක ඉතින් මේ විදියේ <Marquee>   එකක් ඇඩ් කරගන්නේ මෙහෙමයි... ඉහත මම කිවුවා වගේ .. මුලින් පහත මම දීල තියන CSS කෝඩ් ටික ඔබේ බ්ලොගයේ ටෙම්ප්ලේට්ස් වලට එකතුකර ගන්න ඕනි .. ඉතින්

අලුත් interface එක තියන අය       Templates > Edit HTML

පරණ interface  එක තියන අය      Design > Edit HTML   ගිහින්

 CTRL+F  ඔබලා මුලින්ම  ]]></b:skin>   හොයාගෙන එකට උඩින්  මේ කෝඩ් ටික දාන්න

.myMarquee {width:500px; height:80px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.7);-o-border-radius: 18px 18px;-moz-border-radius: 18px 18px;-webkit-border-radius: 18px 18px;border-radius: 18px 18px;background:#f8f8f8;background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));}

.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:10s;-moz-animation-name: scroll;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:10s;-webkit-animation-name: scroll;}

.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px; }

.scroller div a {color:#c00;}

@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
 -moz-animation-play-state: paused;
 }

@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
 -webkit-animation-play-state: paused;
 }

දැන් ටෙම්ප්ලේට්ස් එක save කරගන්න ... දැන් ඉතින් දාන පොස්ට් එකේ හරි ජාව ස්ක්‍රිප්ට් එකේ හරි පහත සදහන් කෝඩ් ඇතුලේ ඔබට දාන්න ඕනි ලින්කුව සහිත හෝ රහිත ටෙක්ස්ට් එක දාන්න ..

<div class="myMarquee">

<div class="scroller">

<div>
your text here <a href="#">links</a>.</div>
<div>
your text here <a href="#">links</a>.</div>

</div>
</div>

ඔතන your text here කියන තැනට දාන්න ඕනි text ක දාන්න ඒ text එකේම ලින්ක් වෙන්න ඕනි එකට   link  විය යුතු text එක link කියන තැනටත් ..ඒ ලින්ක් එක ක්ලික් කරාම යන්න ඕනි ලින්ක් එක # තැනටත් දාන්න......

එහෙනන වල් කතාවක් එහෙම බල බල ඉන්න වෙනද වගේම :P  තවත් පොස්ටුවකින් හම්බු වෙමු ජයෙන් ජය ...