නියම Horizontal Navigation Menu එකක් බ්ලොග් එකට දාගන්න..

මෙන්න නියම භාණ්ඩයක් ගෙනාවා. මේක නම් සුපිරි Navigation Menu එකක්. මේක අපිට ප්‍රයෝජනේ වෙන්නේ අපේ බ්ලොග් එකේ එක එක පේජර්ස් වලට යන්න තමා. ඉතින් මේක දාගන්න කැමති අය ඉන්නවනං ඉක්මනටම මේක දාගන්න.

මුලින්ම බ්ලොගර් වලට ලොග් වෙන්න.
දැන් Design >> Page elements >> Add Gadgets >> HTML/Java Script එකක් ගන්න.
දැන් පහල කෝඩ් එක එතන පේස්ට් කරන්න.
වැදගත් :- පහල කෝඩ් එකේ Link 1 2 3 ආදී වශයෙන් තියන තැනට HTML/Java Script එකේ කෝඩ් එක පේස්ට් කරාට පස්සේ ඒ Link එකිලා තියන තැන් වලට Link එකේ අපිට දිස්වෙන්න ඕනෙ නම දෙන්න. # කියලා දාලා තියන තැන් වලට Link එකේ URL එක දෙන්න.


උදා :- <ul> <li><a href="http://www.google.com"><span>Google</span></a></li> <li>
  

 <style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNXSCz_MFVzukn1yfhxXMeOK0YAxNJC6-Z4fdGFrRC9Tylp1JtYjCykTzgLyClUbSozfDnFGQh3QsnXZoefIfwH-fs3MWTwr5xzvNyLY2DylLcdKJg4RDhsisYd6aV6ZdhK1tQSE5Pnw/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifciwp4h9qjny-Wa-o_TYU2d_26Fg4E6te7a-fFrKqZtF-DyGPZOfGsj_4A2c4NDDTclaMtxUl2PDYascuwz1YP6WI12_raHMfJDOLBueyzWDGhQSXIYxc81mNcji7HIpkDurFA9_0SnA/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

දැන් Save කරන්න.

වැඩේ ඉවරයි. කමෙන්ට් එකකුත් දාන්න. මේ සයිට් එකට අකමැත්තක් නැත්නම් ෆලෝ එකකුත් දාන්න..

සුභ දවසක්..!