ඔයාලගේ Blog එකට Horizontal CSS Menu Bar එකක්

හොදයි දැන් මම කියලා දෙන්න යන්නේ ඔයාලට කොහොමද Horizontal CSS Menu Bar එකක් දාගන්නේ කියලා. මේකෙන් ඔයාලගේ Blog එක ලස්සන කරගන්න පුළුවන් වගේම පිළිවෙලකට තියාගන්න පුළුවන්. ඒක එක Topic වෙන වෙනවම දාලා පිලිවෙලකට තියාගන්න පුළුවන්. තවද බලන කෙනාටත් මාතෘකා ලේසියෙන් තොරාගෙන බලන්න පුළුවන්. මම වැඩිය කතා කරන්න යන්නේ නෑ මේ ගැන. මොකද ඔයාලා හැමෝම වගේ දන්න නිසා.

හරි මෙහෙමයි මේක දාගන්න ඕනේ.

1.  මුලින්ම ඔයාලා Blogger එකට log වෙලා layouts එකට යන්න.

2.  ඊට පස්සේ Add gadget යන්නෙන් HTML/Javascript ‍තෝරන්න.

3.  ඊට පස්සේ මම පහල දාලා තියෙන Code එක ඒකට Paste කරගන්න.

<style>
#nav1 {
margin: 0;
padding: 6px 7px 0;
height:37px;
background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIjUdF78ACitJ6WRphb9WoTmQyhRFrntyDlEpis62pCN3RfNjhZanl7nd2SnRBy3KCN8g79zWz-g7YT3vkXRR7S4K8QbzSfOvtF6bggf5irF8zBS-iARTbBXusQIB3KvuDXCk_s8xeLicm/s320/image1.png) repeat-x 0 -110px;
line-height: 100%;

border-radius: 3em;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav1 li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}


/* main level link */
#nav1 a {
font-weight: bold;
color: #000000;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;

-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav1 a:hover {
background: #000;
color: #fff;
}

/* main level link hover */
#nav1 .current a, #nav1 li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2fHrn-RWbjgjLaeDoiT46Yw4SPPYIy4xtOOp6INBOoKabPJKbT36e4l4rFo2QNawPAlc42SxUQg-EXY8d_uTsNsq3hr1FFTznXoDLXtjkQ4V6xB14Rwf_mp4ihdJ6HBcAMP9O4VTDAirg/s320/image1.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav1 ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;

-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav1 ul a:hover {
background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2fHrn-RWbjgjLaeDoiT46Yw4SPPYIy4xtOOp6INBOoKabPJKbT36e4l4rFo2QNawPAlc42SxUQg-EXY8d_uTsNsq3hr1FFTznXoDLXtjkQ4V6xB14Rwf_mp4ihdJ6HBcAMP9O4VTDAirg/s320/image1.png) repeat-x 0 -100px !important;
color: #fff !important;

-webkit-border-radius: 0;
-moz-border-radius: 0;

text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav1 li:hover > ul {
display: block;
}

/* level 2 list */
#nav1 ul {
display: none;

margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIjUdF78ACitJ6WRphb9WoTmQyhRFrntyDlEpis62pCN3RfNjhZanl7nd2SnRBy3KCN8g79zWz-g7YT3vkXRR7S4K8QbzSfOvtF6bggf5irF8zBS-iARTbBXusQIB3KvuDXCk_s8xeLicm/s320/image1.png) repeat-x 0 0;
border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav1 ul li {
float: none;
margin: 0;
padding: 0;
}

#nav1 ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
color: #000000;
}

/* level 3+ list */
#nav1 ul ul {
left: 181px;
top: -3px;
}

/* rounded corners of first and last link */
#nav1 ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav1 ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav1 {
display: inline-block;
}
</style>
<ul id="nav1">
<li class="current"><a href="/">Home</a></li>
<li><a href="#">level 1</a>

<ul>
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>

<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>
</li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

උඩ තියන Code එකේ " # " කියන තැන් වලට ඔයාලා දාන ලින්ක් එකේ URL ටික දෙන්න. ඒ වගේම Link 1, Link 2, Link 3 කියලා තියන තැන් වලට ඔයාලා දාන්න ඉන්න ලින්ක් වල නම් ටික දෙන්න. ඊලගට Link 1.1, Link 1.2, Link 2.1... වගේ තියෙන්නේ අර ප්‍රධාන ලින්ක් වල Sub Link ටිකයි.

" මෙහෙම කියනකොට සමහර විට පැහැදිලි නැතිවෙයි. ඔයාලා අර Code එක දාගෙන ඒක Save කරගෙන බලන්න. එතකොට ඔයාලට තේරෙයි කරන්න ඕන විදිහ."

4.  ඊටපස්සේ HTML/Javascript එක Save කරන්න.

දැන් වැඩේ හරි. මේ ලිපිය ඔයාලට ප්‍රයෝජනවත් වුනානම් Comment එකක් දාලා යන්න.

Saagaraya Blogger, Blogger Sinhala Tutorial, බ්ලොග් ට්‍රික්ස්, Blogger ගැන සිංහලෙන්, Blogger Tutorial සිංහලෙන්, බ්ලොග් ටිප්ස්, සිංහලෙන් ඉගෙන ගමු, බ්ලොගර් උදවු, Blog එකට Menu Bar එකක්,