Multi-Tabbed Widget အား Blog Footer Section တြင္ထည့္ျခင္း

အားလံုးပဲမဂၤလာပါခင္ဗ်ာ။ ဒီတစ္ခါေတာ့ Multi-Tabbed Widget ကုိ Footer Section မွာ ထည့္သြင္းနည္းကုိ ေဖာ္ျပေပးသြားမွာျဖစ္ပါတယ္။ ကၽြန္ေတာ္အရင္ေဖာ္ျပခဲ့တာက Sidebar မွာထည့္သြင္းနည္းကုိပဲ ရွင္းျပခဲ့တာပါ။ ဒါေပမယ့္ အခ်ိဳ႕ေသာ Blog ေတြမွာက Sidebar ကႏွစ္ဘက္ရွိေနၿပီး width ကလည္း က်ဥ္းေတာ့ ထည့္ရတာအဆင္မေျပဘူး ဆုိလုိ႔ Footer Section မွာ ထည့္နည္းကုိ ေဖာ္ျပ ေပးလုိက္ရျခင္းျဖစ္ပါတယ္။ ကၽြန္ေတာ္ အခု Tab (၆)ခုထည့္လုိ႔ရေအာင္ Code ေတြကုိ ျပင္ေပးလုိက္ပါတယ္။ မိမိဘေလာ့ဂ္မွာရွိတဲ့ Footer Section ရဲ႕ Width နဲ႔ကုိက္ညီေအာင္ Tab ေတြကုိ အတုိး/အေလွ်ာ့လုပ္လုိ႔ရေအာင္လည္း ရွင္းျပထားပါတယ္။ ေအာက္ကအဆင့္မ်ားအတုိင္း လုိက္လုပ္ၾကည့္ၾကပါဗ်ာ။ စမ္းသပ္ထားတဲ့ နမူနာကုိေတာ့ ဒီမွာ နဲ႔ ဒီေနရာေတြမွာ ၾကည့္ပါခင္ဗ်ာ။

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

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

• အခု အေရးအႀကီးတဲ့ Trick ေလးတစ္ခု လုပ္ပါ့မယ္။ အဲဒါကေတာ့ မိမိတုိ႔ ဘေလာ့ဂ္မွာ ရွိတဲ့ Link Color Code ကုိျပင္ေလးကုိျပင္ပါ့မယ္။ ဘေလာ့ဂ္အမ်ားစုမွာ ဒီ Trick ေလးကုိ လုပ္စရာမလုိေပမယ့္ အခ်ိဳ႕ေသာ ဘေလာ့ဂ္ေတြမွာေတာ့ ျပင္ဖုိ႔လုိတဲ့အတြက္ ထည့္သြင္းရွင္းျပရျခင္းျဖစ္ပါတယ္။ ဘာပဲျဖစ္ျဖစ္ လုိသည္ျဖစ္ေစ၊ မလုိသည္ျဖစ္ေစ ျပင္လုိက္တာေကာင္းပါတယ္။ 

•  color:$linkcolor ေလးကုိ ရွာလုိက္ပါ။ ေတြရင္ “$linkcolor” ေနရာမွာ “#000000” ကုိ အစားသြင္းလုိက္ပါ။

• ]]></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 .footer-tab, div.domtab div .footer-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 .footer-tab ul li {
list-style: none;
padding: 3px 0 5px 0;
}
div.domtab div .footer-tab ul li a
{
list-style: none;
margin: 0;
padding: 0;
}
div.domtab div .footer-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 #footer-tabs-1 .widget,
body#layout #footer-tabs-2 .widget,
body#layout #footer-tabs-3 .widget
body#layout #footer-tabs-4 .widget
body#layout #footer-tabs-5 .widget
body#layout #footer-tabs-6 .widget
{
display: block; clear: both;
}
div.domtab div {display: block; clear: both;}

• အေပၚကကုတ္ေတြထဲက အျပာေရာင္နဲ႔ျပထားတာေတြကေတာ့ မိမိထားခ်င္တဲ့ Tab အေရအတြက္ပဲ ျဖစ္ပါတယ္။ အကယ္၍ မိမိ Tab ထပ္တုိးခ်င္တယ္ဆုိရင္ body#layout #footer-tabs-6 .widget  ရဲ႕ေအာက္ကေန body#layout #footer-tabs-7 .widget, body#layout #footer-tabs-8 .widget စသည္ျဖင့္ ထည့္သြားႏုိင္ပါတယ္။ ေလွ်ာ့ခ်င္ရင္ေတာ့ ဖ်က္ေပးလုိက္ပါ။ width: 110px ကေတာ့ Tab တစ္ခုခ်င္းစီရဲ႕ Width ျဖစ္ပါတယ္။ မိမိ Template နဲ႔ကုိက္ညီေအာင္ ျပင္ေပးနုိင္ပါတယ္။

• ဒီတစ္ခါေတာ့ မတူညီတဲ့ 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'/>

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

<div id='footer-wrapper'>

<div id='lower-footer'>
<b:section class='footer' id='footer'>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>

• အေပၚက code ေတြထဲက <div id='footer-wrapper'>,<div id='lower-footer'>တုိ႔ရဲ႕ေအာက္၊ <b:section class='footer' id='footer'> မစခင္မွာ ေအာက္မွာ ေပးထားတဲ့ ကုတ္ေတြကုိ ထည့္ေပးလုိက္ပါ။

<div class='domtab'>
<ul class='domtabs'>
<li><a href='#recent'>Recent Posts</a></li>
<li><a href='#lab'>Labels</a></li>
<li><a href='#arc'>Archives</a></li>
<li><a href='#twi'>Twitters Update</a></li>
<li><a href='#com'>Comment</a></li>
<li><a href='#fish'>Fish Feed</a></li>
</ul>
<div style='border: 3px solid #ccc;'>
<p><a id='recent' name='recent'> </a>
<b:section class='footer-tab' id='footer-tabs-1' preferred='yes'/></p>
</div>
<div id='toggleText' style='display: none; border: 3px solid #ccc;'>
<p><a id='lab' name='lab'> </a><b:section class='footer-tab' id='footer-tabs-2' preferred='yes'/></p>
</div>
<div id='toggleText' style='display: none; border: 3px solid #ccc;'>
<p><a id='arc' name='arc'> </a><b:section class='footer-tab' id='footer-tabs-3' preferred='yes'/></p>
</div>
<div id='toggleText' style='display: none; border: 3px solid #ccc;'>
<p><a id='twi' name='twi'> </a><b:section class='footer-tab' id='footer-tabs-4' preferred='yes'/></p>
</div>
<div id='toggleText' style='display: none; border: 3px solid #ccc;'>
<p><a id='com' name='com'> </a><b:section class='footer-tab' id='footer-tabs-5' preferred='yes'/></p>
</div>
<div id='toggleText' style='display: none; border: 3px solid #ccc;'>
<p><a id='what' name='fish'/>
<a id='fish' name='fish'> </a><b:section class='footer-tab' id='footer-tabs-6' preferred='yes'/></p>
</div>
</div>

• အေပၚက Code ေတြထဲက အနီေရာင္နဲ႔ ျပထားတာကေတာ့ Tab Name ေတြျဖစ္ၿပီး အျပာေရာင္က အဲဒီ Tab Name ကုိ ကုိယ္စားျပဳတဲ့ အမည္ေတြပဲျဖစ္ပါတယ္။ Tab Name ေတြကုိ မိမိစိတ္တုိင္းက် ေပးလုိ႔ရတယ္ (ဥပမာ...Recent Post = ယခင္ေရးသားခ်က္မ်ား)။

• ေနာက္ထပ္ Follower ဆုိတဲ့ Tab တစ္ခုထပ္တုိးခ်င္တယ္ဆိုပါက အေပၚ ကုတ္ထဲက <ul> Section မွာ <li><a href='#foll'>Followers</a></li> ဆုိတာေလးထည့္ၿပီး div section ထဲက tabs-5 ႏွင့္ tabs-6 ၾကားတြင္ ေအာက္က ကုတ္ေတြကုိထည့္ပါ။

<div id='toggleText' style='display: none; border: 3px solid #ccc;'>
<p><a id='foll' name='foll'> </a><b:section class='footer-tab' id='footer--tabs-6' preferred='yes'/></p>
</div>

• အေပၚကထပ္ၿပီးထည့္လုိက္တဲ့ Code ေတြၾကည့္ရင္ "foll" ဆုိတဲ့ "Followers" ရဲ႕ ကုိယ္စားျပဳအမည္ကုိ လဲႊမွားၿပီးထည့္၍မရေၾကာင္း သတိျပဳပါ။ ယခင္ရွိၿပီးသား tabs-6 ကုိ tabs-7 ဟု ေျပာင္းလုိက္ပါ။
  

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

အဆင့္(၂)။ Page Elements တြင္ Multi-tabbed Widget ထည့္သြင္းျခင္း

• ဒီအဆင့္ကေတာ့  Blog တြင္ Multi-Tabbed Widget ထည့္ျခင္း  ဆုိတဲ့ ပုိ႔စ္မွာ တင္ျပထားခဲ့တဲ့အတုိင္း အတူတူပဲမုိ႔ ထပ္ၿပီးေဖာ္ျပမေနေတာ့ပါဘူး။ အခုတင္ျပခဲ့တာကလည္း အဲဒီ Code ေတြကုိ ျပန္ျပင္ထားတာပါ။ ကၽြန္ေတာ္ရဲ႕ ေရးသားတင္ျပပုံ ညံ့ဖ်င္းမႈေၾကာင့္ မရွင္းလင္းတာမ်ားရွိရင္ နာလည္ေပးၾကဖို႔ေမတၱာရပ္ခံပါတယ္။ အဆင္မေျပတာမ်ားရွိခဲ့ရင္ Comments နဲ႔ C-box မွာေရးသြားခဲ့ၾကပါခင္ဗ်ာ…