Blog တြင္ Multi-Tabbed Widget ထည့္ျခင္း

အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ..ကၽြန္ေတာ္အခု ေဖာ္ျပမွာကေတာ့ ဘေလာ့ဂ္မွာ Multi-Tabbed Widget ထည့္သြင္းနည္းပဲျဖစ္ပါတယ္။ ဒီ Widget ကုိထည့္ျခင္းအားျဖင့္ မိမိတုိ႔ဘေလာ့ဆုိဒ္ဘားရဲ႕ ေနရာယူမႈ ကုိလည္း က်ံဳးသြားေစပါတယ္။ အခု ကၽြန္ေတာ္ တစ္ေနရာတည္းမွာ Recent Posts, Labels နဲ႔ Archives တုိ႔ကုိ ဘယ္လုိ ထည့္မလဲဆုိတာ အဆင့္(၂)ဆင့္နဲ႔ေျပာျပသြားမွာျဖစ္ပါတယ္။ ကၽြန္ေတာ္စမ္းသပ္ထားတဲ့ နမူနာေလးကုိ ဒီေနရာမွာ ၾကည့္ႏုိင္ပါတယ္။ Multi-Tabbed Widged လုပ္နည္း အမ်ားအျပားရွိတဲ့အနက္ ဒီနည္းေလးကေတာ့ လြယ္ကူရွင္းလင္းၿပီး ေကာင္းမြန္းစြာအလုပ္လုပ္ပါတယ္။

အဆင့္(၁)။ Template တြင္ လုိအပ္သည့္ Code မ်ားျဖည့္စြက္ ျပင္ဆင္ျခင္း

• အရင္ဆုံး မိမိဘေလာ့ဂ္ကုိ Backup လုပ္ထားဖုိ႔လုိပါတယ္။ Layout==>>Edit HTML (Download Full Template)။

•   </b:skin> ဆုိတာကိုရွာပါ။ ေတြ႕ရင္ ေအာက္မွာေပးထားတဲ့ကုတ္ေတြကုိ </b:skin>ရဲ႕အေပၚကေန ကပ္ၿပီး ထည့္ေပးလုိက္ပါ။

div.domtab
{
padding:0;
width:100%;
font-size:90%;
}
ul.domtabs
{
float:left;
width:100%;
margin:0;
list-style:none;
padding-left: 0;
}
ul.domtabs li
{
float:left;
padding:0 5px 0 0;
text-align: center;
width: 110px;
}
ul.domtabs a:link,
ul.domtabs a:visited,
ul.domtabs a:active,
ul.domtabs a:hover
{
padding:.5em 1em 0;
display:block;
background:#999;
color: #333;
height:2em;
font-weight:bold;
text-decoration:none;
}
html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover
{
height:auto;
min-height:2em;
}
ul.domtabs a:hover
{
background:#ccc;
}
div.domtab div
{
clear:both;
width:auto;
color:#ddd;
padding:0 5px;
margin: 0 0 1em 0;
}
div.domtab div .sidebar-tab, div.domtab div .sidebar-tab .widget-content
{
margin: 0 0 0;
padding: 0;
}
ul.domtabs li.active a:link,
ul.domtabs li.active a:visited,
ul.domtabs li.active a:active,
ul.domtabs li.active a:hover
{
background:#ccc;
color: #333;
}
div.domtab div .sidebar-tab ul li {
list-style: none;
padding: 3px 0 5px 0;
}
div.domtab div .sidebar-tab ul li a
{
list-style: none;
margin: 0;
padding: 0;
}
div.domtab div .sidebar-tab ul
{
width: 100%;
margin: 0;
padding: 0;
}
#domtabprintview{
float:right;
padding-right:1em;
text-align:right;
}
#domtabprintview a:link,
#domtabprintview a:visited,
#domtabprintview a:active,
#domtabprintview a:hover
{
color:#ccc;
}
div.domtab div a:link,
div.domtab div a:visited,
div.domtab div a:active
{
color:$linkcolor;
padding:1em .5em;
font:bodyfont;
text-decoration: none;
}
div.domtab div h2 a,
div.domtab div h2 a:hover,
div.domtab div h2 a:active
{
color:#cfc;
display:inline;
padding:0;
font-weight:normal;
font-size:1em;
}
body#layout #sidebar-tabs-1 .widget,
body#layout #sidebar-tabs-2 .widget,
body#layout #sidebar-tabs-3 .widget {
display: block; clear: both;
}
div.domtab div {display: block; clear: both;}

• ဒီတစ္ခါေတာ့ မတူညီတဲ့ Widget ေတြၾကားမွာ Switch လုပ္ဖုိ႔အတြက္ Javascript Code ေတြထည့္ရမွာ ျဖစ္ပါတယ္။ ဒါေၾကာင့္ </head> ဆုိတာကုိရွာပါ။ ေတြ႕ၿပီဆုိရင္ သူ႔အေပၚကေနကပ္ၿပီး ေအာက္မွာေပးထား Code ေတြကုိ ထည့္ေပးပါမယ္။

<!--[if gt IE 6]>

<style type="text/css">

html>body ul.domtabs a:link,

html>body ul.domtabs a:visited,

html>body ul.domtabs a:active,

html>body ul.domtabs a:hover

{

height:3em;

}

</style>

<![endif]-->

<script src='http://www.hotlinkfiles.com/files/2432401_qrgfv/domtab_it-traveller.js' type='text/javascript'/>

• အေပၚက ကုတ္ထဲက အျပာေရာင္နဲ႔ျပထားတဲ့ Javascript file ေလးကုိ မိမိအလုိက် တုိက္ရုိက္ File Hosting ဆုိဒ္တစ္ခုခုမွာ တင္ရင္ ပုိေကာင္းပါတယ္ (ဥပမာ..http://www.hotlinkfiles.com/)။ အဲဒါဆုိ လင့္ေဒါင္းကုန္တာေတြ မျဖစ္ႏုိင္ေတာ့ဘူးေပါ့။ ႏုိ႔မုိ႔ဆုိ ဟုိလူဆဲြဒီလူဆဲြနဲ႔ လင့္ေဒါင္းတာေတြျဖစ္ႏုိင္လုိ႔ပါ။

• အခုတစ္ခါ ေအာက္မွာ ေပးထားတဲ့ ကုတ္ေတြကုိ ရွာရမွာျဖစ္ပါတယ္။ Template အမ်ားစုမွာေတာ့ ေအာက္မွာ အနီေရာင္နဲ႔ျပထားတဲ့ကုတ္အတုိင္း ရွိေနတတ္ပါတယ္။ 

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar-top-section' preferred='yes'>

<b:widget id='HTML3' locked='false' title='Subscribe' type='HTML'>

• ဒါေပမယ့္ အခ်ိဳ႕ေသာ Template ေတြမွာေတာ့ <div id='sidebar> နဲ႔ <div id='right-column'> ဆုိၿပီး ရွိေနတတ္တာကုိ သတိျပဳဖုိ႔လုိပါတယ္။

• ဘယ္လုိပဲျဖစ္ျဖစ္ပါ။  <div id='sidebar-wrapper'>,<div id='sidebar>,<div id='right-column'>အစရွိတဲ့ ကုတ္(၃)မ်ိဳးအနက္ တစ္မ်ိဳးမ်ိဳးရဲ႕ေအာက္၊ <b:section...... မစခင္မွာ ေအာက္မွာ ေပးထားတဲ့ ကုတ္ေတြကုိ ထည့္ေပးလုိက္ပါ။

<div class='domtab'>

<ul class='domtabs'>

<li><a href='#recent'>Recent Posts</a></li>

<li><a href='#cats'>Categories</a></li>

<li><a href='#arc'>Archives</a></li>

</ul>

<div style='border: 3px solid #ccc;'>

<p><a id='recent' name='recent'> </a>

<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'/></p>

</div>

<div id='toggleText' style='display: none; border: 3px solid #ccc;'>

<p><a id='cats' name='cats'> </a><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'/></p>

</div>

<div id='toggleText' style='display: none; border: 3px solid #ccc;'>

<p><a id='what' name='arc'/>

<a id='arc' name='arc'> </a><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'/></p>

</div>

</div>

• ဒါဆုိရင္ Template မွာ လုိအပ္တဲ့ Code ေတြ ျပင္ဆင္ျဖည့္စြက္ျခင္းအဆင့္ ၿပီးသြားပါၿပီ။ Template ကုိ Save မလုပ္ပါနဲ႔အုံး။ Preview အရင္ၾကည့္ပါ။ error မရွိဘဲ ေကာင္းမြန္စြာ အလုပ္လုပ္တယ္ဆုိမွ Template ကုိ Save လုပ္ပါ။ error မရွိဘူးဆုိရင္ ေအာက္က ပုံေလးလုိ ဆုိဒ္ဘားမွာ ျပေနမွာ ျဖစ္ပါတယ္။

• ဒီအဆင့္မွာ မ်က္စိလည္တတ္လုိ႔ ကၽြန္ေတာ္ေျပာျပတာေတြကုိ ေသခ်ာမွတ္ၿပီး လုိက္လုပ္ဖုိ႔လုိပါတယ္။ အရင္ဆုံး Recent Posts ကုိထည့္မွာျဖစ္တဲ့အတြက္ Recent Posts ဆုိတာကုိ Click လုပ္ပါမယ္။ အဲဒီလုိ Click လုပ္လုိက္တာနဲ႔ ေအာက္မွာရွိတဲ့ Add a Gadget က active ျဖစ္သြားပါလိမ့္မယ္ ( Add a Gadget ကုိေဘာင္ခတ္ထားသည့္ dash line မ်ားမွာ မ်ဥ္းထူအျဖစ္သုိ႔ေျပာင္းသြားပါလိမ့္မည္)။

• အဆုိပါ Active ျဖစ္သြားသည့္ Add a Gadget ကုိ Click လုပ္လုိက္ပါ။  Blogger Recent Post ႏွင့္ Recent Post Advanced တုိ႔မွ ႏွစ္သက္ရာကုိ Add လုပ္ပါ။ အကယ္၍ မိမိဘေလာ့ဂ္မွာ Recent Post Widget ထည့္ၿပီးသားျဖစ္ပါက ယင္း Widget ကုိ drag ဆဲြၿပီး Add a Gadget ေအာက္သုိ႔ ပုိ႔ေပးပါ (ေအာက္ကပံုကုိၾကည့္ပါ)။

• ဒါဆုိရင္ Recent Posts အတြက္ၿပီးသြားပါၿပီ။ က်န္ရွိတဲ့ Categories (Labels) နဲ႔ Archives ေတြကုိလည္း Recent Posts အတုိင္းလုပ္ၾကည့္လုိက္ပါ။ အားလုံးအဆင္ေျပၾကပါေစဗ်ာ။ ကၽြန္ေတာ္ရဲ႕တင္ျပပုံ ညံ့ဖ်င္းမႈေၾကာင့္ အဆင္မေျပတာမ်ားရွိရင္လည္း Comment (or) C-box မွာေမးျမန္းေဆြးေႏြးႏုိင္ၾကပါတယ္။