ලෙහෙසියෙන්ම බ්ලොගර් බ්ලොග් එකට Multi-tabbed widget එක එකතු කරන්න......

 සුබ දවසක් ... මේ වම තියෙන රූපය බැලුවහම පෙනෙනවා   අද අපි බ්ලොග්  එකට එකතු කරගන්න යන  ගැජට්  එක මොකක්ද කියල... මේ  Muiti-tabbed widget  , බ්ලොගර්  වලට   එකතු   කරගන්න  
තවත්  වෙනස්   ක්‍රම    තියෙනවා ...නමුත්  මේ අද  අපි  කරන්නයන   විදිහ  අනික් ක්‍රම වලට වඩා  පහසුයි , පියවර  දෙකකින්  වැඩේ  ඉවරයි ... ඉතින්   ඔයාලගේ බ්ලොග්   එකේ   සයිඩ්  බාර් එකේ   තියෙන ගැජට්  ටික  පිළිවෙලකට  මෙම  Muiti-tabbed widget  එක මගින්   සකසා   ගන්න පුළුවන්
හරි  එහෙනම් වෙනද  වගේම බ්ලොග් එකේ  ටෙම්ප්ලේට්   එකේ වෙනසක් කරන   නිසා  මුලින්ම
ටෙම්ප්ලේට්  එක ඩවුන්ලෝඩ් කරගෙනම  වැඩේට බහිමු....


ඊට   පස්සේ බ්ලොගර් dashboard >>>>>>Design>>>>>Edit HTML   වලට  යන්න.
ඊට පස්සේ ctrl + F  මගින්  </head>   
සොයාගන්න.. එයට  ඉහලින්  මේ   පහත දැක්වෙන  ජාවා කෝඩ්   එක   එකතු  කරන්න.

<script type='text/javascript'> //<![CDATA[ function tabtampil_oom(TPID, id) { var Tabtampil = document.getElementById(TPID); var TTs = Tabtampil.firstChild; while (TTs.className != "TTs" ) TTs = TTs.nextSibling; var TT = TTs.firstChild; var i = 0; do { if (TT.tagName == "A") { i++; TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");"; TT.className = (i == id) ? "Active" : ""; TT.blur(); } } while (TT = TT.nextSibling); var Halamans = Tabtampil.firstChild; while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling; var Halaman = Halamans.firstChild; var i = 0; do { if (Halaman.className == 'Halaman') { i++; if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px"; Halaman.style.overflow = "auto"; Halaman.style.display = (i == id) ? 'block' : 'none'; } } while (Halaman = Halaman.nextSibling); } function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id); } function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1); document.write('');} //]]> </script>

ඊට   පස්සේ  ටෙම්ප්ලේට් එක  save   කරන්න........

ඊලගට  තියෙන්න Page Elements >>>>>ADD Gadget>>>>>>HTML/JavaScript   මගින්  ගිහින්  පහතින්  දැක්වෙන  ජාවා කොටස   එකතු  කරගන්න.


 <style type="text/css">
 div.TabTampil div.TTs
 {height: 26px; overflow: hidden; }
 div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
 { background-color:  #33CCFF; }
 div.TabTampil div.Halamans
 { clear: both; border: 1px solid #c3c1c1; overflow: hidden;
  background-color: #FFFF66;}
 div.TabTampil div.Halamans div.Halaman
 { height: 100%; padding: 0px; overflow: hidden; }
 div.TabTampil div.Halamans div.Halaman div.Alas
 { padding: 3px 5px; }
 div.TabTampil div.TTs a
 { border-left:1px solid #CC0000; border-right:1px solid #c3c1c1; border-top:1px solid #c3c1c1; border-bottom:0px solid #c3c1c1; float: left; display: block; width: 95px; text-align: center; vertical-align: middle; height: 26px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif; font-size: 15px; font-weight: 940; color: #000000} </style>
 <form action="tabtampil.html" method="get"> <div id="TabTampil" class="TabTampil"> <div style="width: 300px;" class="TTs"> <a>Tab title</a> <a>Tab title</a> <a>Tab title</a></div> <div style="width: 300px; height: 300px;" class="Halamans"> <div class="Halaman"> <div class="Alas"> <br/> Enter your tab code  here  /div> </div> <div class="Halaman"> <div class="Alas"> <br/> Enter your tab code here </div> </div> <div class="Halaman"> <div class="Alas"> <br/> Enter your tab code here </div> </div> </div> </div>
 </form>
 <script type="text/javascript">tabtampil_inisial('TabTampil');</script>



මෙහිදී  #33CCFF;  මගින්  - යොදන  ටැබ්  එකේ background  කලර්  එකත්
           #FFFF66;   මගින් -  body   එකේ    කලර්   එකත්
           #c3c1c1;   මගින්  ටැබ්  එකේ  border    කලර් එක
       
           Tab title - මගින්  යොදන  ටැබ්  එකේ   නම
         
           Enter your tab code here -  අතරට  තමන්ට  අවශ්‍ය කෝඩ් ජාවා / html  එකතු කරගන්න ...අවසානයේ  Save   කරන්න.......
       මේ  html  colors   තමන්ට  අවශ්‍ය  පරිදි  වෙනස්  කරගන්න  ,,, පුළුවන් ,,,ඔන්න   එහෙනම්  කරන්න  තියෙන්නේ  එපමණයි ....සුබදවසක් ....