දෙක තමයි!

ඈ..හ්! මේ දෙක තමයිනෙ :P බ්ලොග් එක ලියන්න පටං අරං අවුරුදු දෙකකුත් උනා... මේ අවුරුද්ද ඇතුලත ලිපි ලියල තියෙන්නෙ හතරයිද කොහෙද (කොහොමද උනන්දුව) :D බ්ලොගේට අවුරුදු දෙකක් උන එකට ලියන්න දෙයක් කල්පනා කොළාට කොළාට මතක් වුන දේවල් ලියන්න ගියොත් "කියල වැඩක් නෑ... ඒ හින්ද ඉතිං ලියල වැඩකුත් නෑ :D "

ඇත්තටම කියනවනම් මට මේ අවුරුද්දෙ කියන්න විසේස දේකුත් නෑ... :D ඒක නිසා මම මේ "දෙක" ඔන්න ඔහෙ සමරලා දානව! කට්ටිය එහෙනම් ගියපාර වගේ පොර නොකා මට සුබ පතල යන්නකො..

ප.ලි : මේක මගෙ දිගම ලිපිය ලෙස ඉතිහාස ගතවෙයි කියල හිතනව! (ඉස්සරහට මිට වඩා දිග එව්ව ලියල ඉතිහාසෙ අලුත් කරගන්නත් ඕනෙ නෑනෙ :D )

ඉතුරු ටික

සරල Drop Down menu එකක් blogger වලට....

මම මීට කලින් මේ වගෙ පොඩි වැඩ කෑල්ලක් බ්ලොග් එකට දාන හැටි ලිව්වා. ඒ වගේම තව ගොඩක් අයට වැදගත්වෙන බ්ලොගර් වල නැති මේ වැඩ කෑල්ල ඔයාලටත් වැදගත් වෙයි කියල මම හිතනවා.

(මේ තියන photo එකෙන් පේන්නෙ ඒක තමයි.)

මේ Drop Down menu එක ඔයාලගෙ බ්ලොග් එකට දාන්න ඕනෙ මෙහෙමයි.

1. ඉස්සරලම බ්ලොග් එකට ලොග් වෙලා, "Layout" වල තියන "Edit HTML" එකට යන්න.
ඊට පස්සෙ මේ පහල තියන code එක </head> කියන ටැග් එකට උඩින් අලවන්න.

<!--jquery-DD-Menu-Starts-->
<style type='text/css'>
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #636566; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #010101;
white-space: nowrap}

#jsddm li a:hover
{ background: #b0adad}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #b4b4b4; /*LIGHT-GREEN*/
color: #030303}

#jsddm li ul li a:hover
{ background: #777775}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);
$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->

රතු පාටින් තියන තැන් වල ඔයාලගෙ බ්ලොග් එකට ගැලපෙන පාටවල් දාන්න. ඊට පස්සෙ Save කරන්න.

2. දැන් "Layout" වල තියන "Page Elements" වලට ගිහින් "Add a Gadget" එකේ "HTML/JavaScript" එක ක්ලික් කරන්න.

එතකොට මේ වගේ එකක් එනවනේ...
ඊලඟට මේ පහල තියන code එක ඒකෙ තියන "Content" කියන කොටසට past කරන්න.

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">අවශ්‍ය පිටු හෝ වෙනත් link</a></li>
<li><a href="#">අවශ්‍ය පිටු හෝ වෙනත් link</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">අවශ්‍ය පිටු හෝ වෙනත් link</a></li>
<li><a href="#">අවශ්‍ය පිටු හෝ වෙනත් link</a></li>
<li><a href="#">අවශ්‍ය පිටු හෝ වෙනත් link</a></li>
<li><a href="#">අවශ්‍ය පිටු හෝ වෙනත් link</a></li>
<li><a href="#">අවශ්‍ය පිටු හෝ වෙනත් link</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>

මේකෙ ඔයාලට ඕනෙ තැන් ඕනැ විදිහට Edit කරල (මම දාල තියන "අවශ්‍ය පිටු හෝ වෙනත් link" කියන එකයි අවශ්‍ය නම් අනික් එව්වයි) save කරල බ්ලොග් එකට ගිහින් බලන්න.
එතකොට වැඩේ හරියන්න ඕනෙ. :D

ඉතුරු ටික

Blog එක ලස්සන කරගන්න පුළුවන් වැඩක්...

....

සුභ අලුත් අවුරුද්දක් හැමෝටම.....!!
කාලෙකට පස්සෙ තමයි අද මේ ලිපිය ලියන්නෙ.මම වෙනද ලියපු ලිපි වලට වඩා මේ ලිපිය ටිකක් වෙනස්..(මේක ඔයාලගෙ බ්ලොග් එක අවුරුද්දට ලස්සන කරගන්න පුළුවන් වැඩක්)....




(මෙන්න මේ වගේ)
මෙහෙමයි කරන්න ඕනෙ.....

* ඉස්සරලම බ්ලොග් එකට ලොග් වෙලා Layout වල තියන page Elements ගිහින් Add a Gadget කියල තියන කො‍ටුවෙ click කරලා HTML/JavaScript වලට මේ code එක දාන්න(Log in -> Layout -> Add a Gadget)......

<script language="javascript">


// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='YOUR TEXT HERE...';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

(රතු අකුරෙන් තියන තැන Font colour එකයි ඔයාලට ඕනැ වචනය Type කරන්න)
දැං preview කරල බලන්න, හරිනම් save කරන්න.

ප.ලි.

කලින් දාන්න බැරි වුනාට සමාවෙන්න....
විශේෂ ස්තූතිය චමිත අයියට

ඉතුරු ටික