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

13 comments:

චානක අසේල දි සොයිසා said...

නියමයි Drop Down Menu එක................

සසීන්ද්‍ර වීරසිංහ said...

@ chanaka asela : තැංකූ අයියා

Kanishka said...

එල වැඩක්.. මාත් හොය හොය හිටියෙ.. ස්තුතියි..

Anonymous said...

නියමයි මල්ලි වැඩේ ස්තුති

Shirosh said...

නියමයි!
blog ලිපි කැටගරි වෙන විදියට මාතෘකා දෙන්නේ කෙසේද?

සසීන්ද්‍ර වීරසිංහ said...

@ Kanishka | කණියා : ඕක පොඩ්ඩක් වෙනස් කරල ලස්සන කරන්න පුලුවන්ද කියලත් බලන්න අයියෙ. comment එකට ස්තූතියි.

@ admin - www. AnuradhapuraZone.tk : හොඳා හොඳා බ්ලොග් එකට දාලම බලන්නකෝ..

@ Shiroshan Randika : අර pages වලට වෙන් කරන විදිහටනම් මම හිතන්නෙ පුලුවන්.

Anonymous said...

malli kohomada ara adayalama damme.
eka MAXA............

සාරංග said...

මේකත් බැලුවනම්,
බ්ලොග් එකට Menu Bar එකක් දාගමු

සසීන්ද්‍ර වීරසිංහ said...

@ Anonymous : මෙන්න මේකෙ බලන්නt

@ සාරංග : අපුච්චේ........එකම තීම්,එක වගේම පොස්ට් මල කෙලියක්නෙ :D

චතුරංග රූපසිංහ said...

wow shook nee
thaank malli

Sai - BloggerStop.Net said...

I would appreciate a link back buddy!

බිඟූ said...

maxiiii kollaaa..
go head.
here is a kick

සසීන්ද්‍ර වීරසිංහ said...

@ බිඟුවා : බොහෝම තැංකූ ඈ....