අපේ බ්ලොගයට ලස්සන Drop Down CSS Menu එකක් දා ගමු 22

කොහොමද කට්ටියට අද මම ඔයාලට අරගෙන ආවේ ඔයාලගේ බ්ලොග් එකට දා ගන්න පට්ට  Drop Down CSS Menu එකක් ...මම හිතනවා ඔයලා හැමොම මේ එකට කැම්ති වෙයි කියලා..ඔයාලට මෙ  ලස්සන Drop Down CSS Menu එක  ඔයාලගේ බ්ලොග් එකට දා ගන්න මම උදව් කරන්නම්.පහල මම කියල තියෙන විදියට වැඩ ටික කරන්න..

පියවර 1. Dashboard >> Desing >> Edit HTML යන්න..මතක ඇතුව Expand Widget Templates තැනට හරියක් දෙන්න..දැන් මම පහල දිලා තියෙන කොඩ් එක හොයා ගන්න

</head>

පියවර 2. දැන් ඔයාලා </head> කොඩ් එකට පහලින් මම පහල දිලා තියෙන කොඩ් එක Copy ,Past කරන්න.

<style type='text/css'><br /> <br /> #catmenucontainer{<br /> <br /> height:29px;<br /> <br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5qqfueb6OWrztuFLplyRVBIeQdjQkVvA0bywZGWCLRKj2JlNgZVZnJRfRyxhcyagC8DSyHKXI8QLwbop-j_XtfG6ulLZHGreC7iBuRloSFUzwnL0uwbp0wvJ9rtyQ3rOuDBL91mbwh8c/) repeat-x;<br /> <br /> display:block;<br /> <br /> padding:0px 0 0px 0px;<br /> <br /> font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;<br /> <br /> font-weight:normal;<br /> <br /> border-top:1px solid #686D6F;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu ,#catmenu ul {<br /> <br /> margin: 0px 5px;<br /> <br /> padding: 0px;<br /> <br /> list-style: none;<br /> <br /> height:29px;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu a {<br /> <br /> color: #999;<br /> <br /> display: block;<br /> <br /> font-weight: normal;<br /> <br /> padding: 4px 10px 6px 10px;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu a:hover {<br /> <br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsOzhi6SD1if3hReqnbFJ_at_hdMPVPr2KyMHs464m5XSz16nrP6wtkvPpD0ObLr4cwBnfDE5mlGxlK6BOfyzd3VHkboE34F4LGKaJStidTclbqvfkuAyEEgWLihgp3UBlvlpky6yRbgj/) repeat-x;<br /> <br /> color: #fff;<br /> <br /> display: block;<br /> <br /> text-decoration: none;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu li {<br /> <br /> float: left;<br /> <br /> margin: 0px;<br /> <br /> padding: 0px;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu li li {<br /> <br /> float: left;<br /> <br /> margin: 0px 0px 0px 0px;<br /> <br /> padding: 0px;<br /> <br /> width: 130px;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {<br /> <br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5qqfueb6OWrztuFLplyRVBIeQdjQkVvA0bywZGWCLRKj2JlNgZVZnJRfRyxhcyagC8DSyHKXI8QLwbop-j_XtfG6ulLZHGreC7iBuRloSFUzwnL0uwbp0wvJ9rtyQ3rOuDBL91mbwh8c/) repeat-x;<br /> <br /> width: 150px;<br /> <br /> float: none;<br /> <br /> margin: 0px;<br /> <br /> padding: 4px 10px 5px 10px;<br /> <br /> color:#E8EBEE;<br /> <br /> border-bottom:1px solid #2C3133;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu li li a:hover, #catmenu li li a:active {<br /> <br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsOzhi6SD1if3hReqnbFJ_at_hdMPVPr2KyMHs464m5XSz16nrP6wtkvPpD0ObLr4cwBnfDE5mlGxlK6BOfyzd3VHkboE34F4LGKaJStidTclbqvfkuAyEEgWLihgp3UBlvlpky6yRbgj/) repeat-x;<br /> <br /> width: 150px;<br /> <br /> float: none;<br /> <br /> margin: 0px;<br /> <br /> padding: 4px 10px 5px 10px;<br /> <br /> color:#fff;<br /> <br /> border-bottom:1px solid #2C3133;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu li ul {<br /> <br /> position: absolute;<br /> <br /> width: 10em;<br /> <br /> left: -999em;<br /> <br /> z-index:1;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu li:hover ul {<br /> <br /> left: auto;<br /> <br /> display: block;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu li:hover ul, #catmenu li.sfhover ul {<br /> <br /> left: auto;<br /> <br /> }<br /> <br /> </style>

දැන් Template එක Save කරන්න...Save Template 

පියවර 3. දැන් ඔයලා Layout >> Page Element >> Add a gadget >> "html/java script" එකක් ගන්න..එකට මම පහල දිලා තියෙන කොඩ් එක copy කරගෙන ඔයාලා "html/java script" එකට past කරන්න.

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>

<li><a href='Your URL' title='our title'>Home</a></li>
<li><a href='your URL' title='our title'>Web Design</a>
<ul class='children'>

<li><a href='Your URL' title='our title'>HTML</a></li>
<li><a href='Your URL' title='our title'>CSS</a></li>
<li><a href='Your URL' title='our title'>JavaScript</a></li>
</ul>

</li>



<li><a href='Your URL' title='our title'>Templates</a>

<ul class='children'>
<li><a href='Your URL' title='our title'>1 Column</a></li>

<li><a href='Your URL' title='our title'>2 Column</a></li>

<li><a href='Your URL' title='our title'>3 Column</a></li>

<li><a href='Your URL' title='our title'>4 Column</a></li>
</ul>

</li>

<li><a href='Your URL' title='our title'>Subscribe</a>
<ul class='children'>
<li><a href='Your URL' title='our title'>Email&lt;/a></li>
</ul>

</li>

<li><a href='Your URL' title='our title'>News&lt;/a></li>
<li><a href='Your URL' title='our title'>Google&lt;/a>

<ul class='children'>
<li><a href='Your URL' title='your title'>Yahoo&lt;/a></li>
<li><a href='Your URL' title='our title'>title&lt;/a></li>
</ul>

</li>

<li><a href='Your URL' title='our title'>About</a></li>
<li><a href='Your URL' title='our title'>Contact</a></li>
<li><a href='Your URL' title='our title'>PrivacyPolicy</a></li>
</ul>

</div>
</div>

ඊට පස්සේ "html/java script" එක Save කරන්න..


වැදගත්

නිල් පාටින් ඇති ස්ථාන වලට ඔයාලට අවශ්‍ය ප්‍රවර්ගයක් දෙන්න
රතු පාටින් ඇති තැන් වලට ඔයලා දුන් ප්‍රවර්ගයේ URL එක නිවරදිව දෙන්න
කොල පාටින් ඇති Drop Down ලැයිස්තුවට ඔයලා කැමති ප්‍රවර්ගයක් දෙන්න

කොහොමද වැඩේ

ඔයාලට මොනවා හරි දැන ගන්න ඔනේ නම්..මගෙන් අහන්න මම ඔයලට උදව් කරන්නම්
ඔබට ජය