බ්ලොගයට ලස්සන Tabbed Navigation System එකක්

කවුරුත් කැමති වෙයි මේ Gadget එකටනම්. මේකෙන් බ්ලොගේ ගොඩක් ඉඩ ඉතුරු වෙනවා. Tab හතරක් විතර දාගන්න පුළුවන් නිසා ඉඩ ගැන අමුතුවෙන් කතා කරන්න දෙයක් නෑනේ. කැමති නම් Tab හතරකට වඩා දාගන්නත් පුළුවන්. මේක Java Script දන්න අයටනම් ගොඩක් වැඩ ගන්න පුළුවන්. Java Script දන්නේ නැති කෙනෙකුට උනත් මේක ලේසියෙන් හදාගන්න පුළුවන්. හරි මං කියලා දෙන්නම් මේ Gadget එක දාගන්නේ කොහොමද කියලා.

මුලින්ම බ්ලොගේට Log වෙන්නකෝ. Design ඊට පස්සේ ගිහින් Edit HTML ගන්න. ඊට පස්සේ Expand Widget Templates ගන්න. හැමදේම කරගන්න කලින් ඔයාගේ Template එක Download කරගන්න අමතක කරන්න එපා. දැන් Key Board එකේ ctrl බොත්තම සමග F Press කරන්න. දැන් මේ </head> කොටස හොයාගන්න. දැන් ඊට කලින් මේ Code ටික Copy කරලා Paste කරගන්න. ඊට කලින් කිව්වේ </head> කොටසට උඩින්. ඒ කිව්වෙ </head> කොටස මේ Code එකට පහලින් තියෙන විදියට.

<script src='http://quiterandom.com/js/domtab/domtab.js' type='text/javascript'> </script>


දැන් මේ කොටස ]]</b:skin> හොයාගෙන ඉස්සර වගේම මේ කෝඩ් ටික මේ ]]</b:skin> කොටසට උඩින් Paste කරන්න.

*main container*/
div.domtab {margin: 0; padding: 0;}

/*tabs*/
ul.domtabs {float: left; margin: 0; padding: 0;}

ul.domtabs li {
background: #999;
float: left;
list-style: none;
margin: 0 2px 0 0;
padding: 2px 3px;
text-align: center;
}

ul.domtabs li:hover, ul.domtabs li.active {background: #CCC;}
ul.domtabs li a {color: #333; font-weight: bold; text-decoration: none;}

/*tabs containers*/
div.domtab div.tab-container {
border: 3px solid #ccc;
clear: both;
display: block;
padding: 10px;
}


දැන් Template Save කරගන්න. දැන් එතනින් ඉවත් වෙලා යන්න. ඊට පස්සේ Add Gadget ගිහින් HTML/JavaScript ගන්න. දැන් මේ Code ටික Type කරගන්න.

/<div class='domtab'>

<ul class='domtabs'>
<li><a href='#tab1'>මාතෘකාව 1</a></li>
<li><a href='#tab2'>මාතෘකාව 2</a></li>

<li><a href='#tab3'>මාතෘකාව 3</a></li>
</ul>

<div class='tab-container'>
<a id='tab1' name='tab1'></a>

විස්තරය 1.
</div>

<div class='tab-container'>
<a id='tab2' name='tab2'></a>

විස්තරය 2.
</div>

<div class='tab-container'>
<a id='tab3' name='tab4'></a>

විස්තරය 3.
</div>

</div>


විස්තරය වෙනුවට අපි කැමති නම් උනත් දාගන්න පුළුවන්.. උදාහරණ ලෙස මහජන සේවා දැන්වීමක්. කැමතිනම් තව Tab දාගන්නත් පුළුවන්. දැන් Gadget එක වැඩ ගීහින් බලන්නකෝ. හොදයි නම් ප්‍රතිචාරයකුත් දාන්නකෝ. තව වැඩි විස්තර දැනගන්න මෙන්න මෙතනින් යන්න...