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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifyFuCePVZ3HfF_GQ6hhp_d0_rzmPW1mJBtuA1CgvYz1hlyzlX1LSuxfTdiYe6af9IYDyIbCLFvAk_Y1cE-Oda5hzV3FTNvyoKxbTjWb5iD2N9wTxvLObeSRstlRaTb5HLEx19UWf6y0o/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6BCbibb_Nqq57PinzuF9RVyqkhGTA1aMoXLXm35tg-a2PUZs4l_CI9BZHG_QehbmycmAGi0Z3slyIEUwIMXWNvmfpG6emT64DhHmQxZhizUoa5FZC9E8n1QiTnmf-1L0pAdfqplaZgU0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEios6VXkn1xXWDGWTU5Uw3toxET91jSfqroLNjgGfQ5tXuZQBPNpSUSbEX23THiRh0vus3djIdADs6z1rzejmDZ46upaK1zYjtg_vV2U5HtrNZ5IDvODns6Mav1UR7-uWn53xxvmlNSnt8/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEios6VXkn1xXWDGWTU5Uw3toxET91jSfqroLNjgGfQ5tXuZQBPNpSUSbEX23THiRh0vus3djIdADs6z1rzejmDZ46upaK1zYjtg_vV2U5HtrNZ5IDvODns6Mav1UR7-uWn53xxvmlNSnt8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEios6VXkn1xXWDGWTU5Uw3toxET91jSfqroLNjgGfQ5tXuZQBPNpSUSbEX23THiRh0vus3djIdADs6z1rzejmDZ46upaK1zYjtg_vV2U5HtrNZ5IDvODns6Mav1UR7-uWn53xxvmlNSnt8/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none; 
}
</style>