Tab View ဆိုတာေလးကို ဘယ္လိုလုပ္မလဲ

အားလံုးမဂၤလာပါဗ်ာ။
ဒီေန႕ကၽြန္ေတာ့္ေမြးေန႕ပါ။ ကၽြန္ေတာ့ေမြးေန႔ အထိမ္းအမွတ္ေရးထားတဲ႔ သူရဲေကာင္းမႀကီးသို႕(သို႕မဟုတ္) အေမသို႕ post ေလးမွာ Comment ၀ိုင္းခ်ီးျမွင့္ၾကတာကို ေက်းဇူးအထူးတင္ပါတယ္။ ကၽြန္ေတာ္စီစဥ္ထားတာက အဲဒီ post ေလးကို print ထုတ္ ၿပီး အေ၀းမွာရွိတဲ့ကၽြန္ေတာ့္အေမဆီကို စာပို႔ေပးခ်င္လို႔ပါ။ ကၽြန္ေတာ္တစ္ေယာက္တည္း ေရးထားတာထက္စာရင္ ကၽြန္ေတာ္ခင္မင္ရတဲ႔ ။ ေလးစားရတဲ႔ Blogger ေတြဆီက Comment ေလးေတြပါ ပါေစခ်င္လို႕ Comment ေတြလိုက္ေတာင္း ရျခင္းျဖစ္ပါတယ္။

Comment ေရးေပးသူမ်ားနဲ႔ Cbox ကေနေအာ္သြားသူမ်ား။ ကၽြန္ေတာ့္ မေတာက္တစ္ေခါက္စာ ေလးေတြကို လာဖတ္ေပးသူ မ်ားကို အထူးေက်းဇူးတင္ပါတယ္။

အေပၚကေခါင္းစဥ္ေလးကိုျပန္ညႊန္းရရင္ေတာ့ Kendhin ေရးထားတာပါ။ Tab View ေလးေတြ Blogger Template ေတြမွာ ထည့္ပံုထည့္နည္းေလးေပါ့။ ကၽြန္ေတာ့္ ဘေလာက္ညာဘက္ က search နဲ႔ Catagories Tab ေလးေတြလို ပံုစံေလးပါ။ ကိုယ့္ Template ေနရာေလးက က်ဥ္းေနမယ္ဆိုရင္ေတာင္ Tab ကေလးေတြသံုးၿပီး widget ေလးေတြ ထည့္လို႕ ရတာေပါ့ဗ်ာ။စလိုက္ရေအာင္.............

အရင္ဆံုးလုပ္ရမွာက ထံုးစံအတိုင္း Blogger ကို log in ၀င္ ၿပီးရင္

Layout>>>Edit HTML>>>Download Full Template ကေန ကိုယ့္Template ကိုယ္ Backup လုပ္ထားလိုက္ေပါ့။
ၿပီးရင္ေတာ့ေအာက္က HTML Coding ေလးေတြထဲကေနၿပီးေတာ့
]] >< /b:skin >
ဆိုတာေလးကိုရွာၿပီး ေအာက္မွာ ျပထားတဲ႔ Coding ေလးေတြကို ]]> < /b:skin > မတိုင္ခင္မွာ ကူးထည့္လိုက္ပါဗ်ာ။

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

အနီေရာင္ခ်ယ္ထားတဲ႔ စာေလးေတြေရွ႕က Color Code ေလးေတြကို ကိုယ့္စိတ္ႀကိဳက္ေျပာင္းလို႕ရပါတယ္ခင္ဗ်ာ။Color Code ေတြကေတာ့ ဒီေနရာမွာ ၾကည့္လို႕ရပါတယ္ဗ်။ၿပီးရင္ေတာ့ ေနာက္တစ္ဆင့္အေနနဲ႔ </head>မတိုင္ခင္မွာ
 

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

Code ေလးကိုကူးထည့္ေပးလိုက္ပါ

ၿပီးရင္ Template ကို Save လုပ္လို႕ရပါၿပီ။ေနာက္ Page Element ေနရာကို ျပန္သြားၿပီး add a page element ကေန HTML/Java Script ကိုေခၚၿပီး ေအာက္က Code ေတြကို ကူးထည္႕လိုက္ပါဦး။

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

အဲဒီေနရာမွာ အစိမ္းနဲ႔ေဖာ္ျပထားတဲ႔ Tab 1,2,3 စတဲ႔ ေနရာေတြမွာ ကိုယ္ထည့္မယ့္ Wiget ရဲ႕ နာမည္ စသည္ ထည့္ေပးပါ။ ဥပမာ..C Box...ဘာညာေပါ့။အျပာနဲ႔ ေရးထားတဲ႔ ေနရာမွာေတာ့ လိုအပ္သလို အက်ဥ္းအက်ယ္ ခ်ိန္ညိွပါခင္ဗ်ာ။
ေနာက္ အနီနဲ႔ေရးထားတဲ႔ Code ေတြေနရာမွာေတာ့ ကိုယ္ထည့္ခ်င္တဲ႔ Script, ပံု, ဘာညာ ထည့္ေပါ့ဗ်ာ။
ေနာက္ထပ္Tab ေတြ လိုခ်င္ေသးရင္ ေတာ့ မွိတ္တုပ္မွိတ္တုပ္ ျဖစ္ေနတဲ႔ Code ေတြေနာက္ကေန ထပ္ျဖည့္ေပါ့ဗ်ာ။
ဒါပါပဲ။ လိုအပ္တာရွိရင္ ေတာ့Comment မွာျဖစ္ျဖစ္ Original Post ပိုင္ရွင္ ဆီမွာျဖစ္ျဖစ္ သြားေမးလို႕ရပါတယ္
ကၽြန္ေတာ္စမ္းလုပ္ၾကည့္ထားတာေလးကေတာ့ဒီမွာပါ

ေပ်ာ္ရႊင္နိုင္ၾကပါေစဗ်ာ။။။