සරල 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