Tuesday, April 19, 2011

Customized Side Menu එකක් බ්ලොග් එකට දාගන්න..

මේක ලස්සන Side Menu එකක්. ඉතින් මේවගේ එකක් බ්ලොග් එකට දාගන්න කැමතිනම් මේ ලිපියේ තියන විදිහට වැඩ ටික කරන්න. බොහොම සරලව මේක අපේ අඩවියට අතුල් කරගන්න පුථවන්.
   1.මුලින්ම සුපුරැදු පරිදි Design යන්න.
   2.දැන් Page element > Add Gadget > HTML/JavaScript එකක් අරගෙන පහල කෝඩ්එක එතන පේස්ට් කරන්න.
පහල කෝඩ් එකේ දම් පාටට තියන ප්‍රවර්ග වලට කැමති නමක් ලබාදෙන්න. තැඹිලි පාටට තියන වෙබ් ඇඩ්රස් කැමති විදිහට වෙනස් කරන්න.
මේ ලිපියට කමෙන්ට් එකක් දාල යන්නත් අමතක කරන්න එපා..
<center><div id="menu">
<ul>
<li><a class="current" href="http://yorurl.com">මුල පිටුව</a></li>
<li><a href="http://yoururl.com">අප ගැන</a></li>
<li><a href="http://yoururl.com">බ්ලොග් ට්රික්ස්</a></li>
<li><a href="http://yoururl.com">පරිගණක තාක්ෂණය</a></li>
<li><a href="http://yoururl.com">අප සමග සම්භන්ද වන්න</a></li>
</ul>
</div></center>
<style> /* -------------------------- AUTHOR : STYLED MENUS URL : http://www.styledmenus.com Copyrights by STYLED MENUS Widget From http://supushpithasoft.blogspot.com ----------------------------*/ *{ margin:0; padding:0; } #menu{ background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXsev4OJbTI/AAAAAAAACBc/0EEtXs7ckkg/s1600/menu_026_bg.jpg) no-repeat; width:172px; height:191px; padding:15px; } #menu ul{ list-style:none; padding:0 0 0 8px; } #menu li{ list-style:none; display:block; padding:10px 0; } #menu li a{ list-style:none; display:block; background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseueLX9TI/AAAAAAAACBM/BQCk16wweRQ/s1600/menu_026_b.gif) no-repeat left center; color:#ffe991; font-weight:bold; text-transform:uppercase; font-size:11px; line-height:1.2em; text-decoration:none; padding:0 5px 0 25px; } #menu li a:hover{ background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center; color:#fff; text-decoration:none; } #menu li .current{ list-style:none; display:block; background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center; color:#fff; font-weight:bold; text-transform:uppercase; font-size:11px; text-decoration:none; padding:0 5px 0 25px; } #menu li a.current, #menu li a:hover.current{ background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center; color:#fff; text-decoration:none;  } </style>

1 comment:

ලිපිය ගැන හිතුන ඕන දෙයක් පහල ටයිප් කරලා යන්න.
ඹයාලාගේ අදහස් මට ගොඩක් වටිනවා.