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

Breaking

Movies, TV Series, Softwares, Music, Games, Trailers, Technology News, Blogger, Sinhala Tricks, Tips and Tutorials.

Sunday, September 11, 2011

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

ඔයාලගේ 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 එකක්,

4 comments:

  1. එල එල,ඉස්සරහට අපෙම කියලා
    SLIDE SHOW එකකුත් දාන්න කියලා දේන්න.ජයවේවා!!!!

    ReplyDelete
  2. me mekata "Link 1, Link 2..3,4,5 wage digatama add kala ta aulak wenne nadda?

    ReplyDelete
  3. @ Chinthaka :

    ► අනිවා මචන් Slide Show එකක් දාන හැටි කියලා දෙන්නම්...

    ► කිසිම අවුලක් නෑ මචන්. ඔනේ තරම් ඇඩ් කරපන්...

    ReplyDelete