බ්ලොගයට ලස්සන දිග ඇරෙන Menu එකක් දැන්ම දා ගන්න

[Recycle Bin]

බ්ලොගයට ලස්සන දිග ඇරෙන Menu එකක් දැන්ම දා ගන්න

බ්ලොගයට ලස්සන දිග ඇරෙන Menu එකක් දැන්ම දා ගන්න..

​

ඔන්න කට්ටියට තවත් පට්ට ගැජට් එකක් ගේනවා...මෙකෙන් වෙන්නේ ඔයාලගේ ලිපි වර්ග කරලා ඔයලාගේ ලිපි බලන්න එන්නේ යාලුවොන්ට ලිපි වලට යන්න ලෙසි වෙනවා..ඔයලත් කැමතිනම් මේ ගැජට් එක ඔයාලගේ බ්ලොගයට දා ගන්න මම එකට උදව් කරන්නම්..එකට පහල තියෙන විදියට වැඩ ටික ඔයාලා කරන්න...


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

</head>


ඉට පස්සේ </head>
කොඩ් එකට පහලින් මම පහල දිලා තියෙන කොඩ් එක Copy,Past කරන්න.


});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SuvG9uqdygI/AAAAAAAAAGg/RGkds76x-Ks/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHEn2GZ9I/AAAAAAAAAGo/s4ncczdnOd0/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHKqBeOXI/AAAAAAAAAGw/qGYlY4ckLWc/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>




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



<ul class="topnav">

<li><a href="YOUR LINK HEAR">Home</a></li>
<li>
<a href="YOUR LINK HEAR">Name</a>
<ul class="subnav">
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name;/a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
</ul>
</li>
<li>
<a href="#">Templates</a>
<ul class="subnav">
<li><a href="YOUR LINK HEAR">Name;/a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
</ul>
</li>
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>
<li><a href="YOUR LINK HEAR">Name</a></li>

</ul>




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

දැන් ඔයාලගේ බ්ලොගයටත් ලස්සන දිග ඇරෙන Menu එකක් තියෙනවා.

ussagath lipiyaki

Add + Rep if u like my post
​

 

[maheshmat]

great

 

[heshi32]

thx lokkaz...

 

[WwW.lk]

thanx machan

 

[Recycle Bin]

great

 

[Recycle Bin]

thx lokkaz...

WC bro

 

[tcpik]

Good Post...

 

[Recycle Bin]

Good Post...

tnx bro

 

[Recycle Bin]

thanx machan

elazzz

 

[Core]

I can't see any JavaScript codes only CSS .!

 

[mdrc111]

good work machan

 

[tharindudoo]

Elaa

 

[dj.damith]

ela

 

[j@naka_86]

Oh Niyamai onna magen 1k +

 

[Chooty malli]

Thanks

 

[Dreams001]

Thnxx ayyo. +rep denawa thamai nodee innaha ithin hoda thread ekkakata

 

[Nic]

nice

 

[Recycle Bin]

nice

 

[chanakacm]

maru..meka use karapu aya kawda

 

[amila.ela]

ela