Menu Tabs သုံးခုဆင္႔လုပ္ရန္

7:21 AM ---
                  ကြ်န္ေတာ္႔ ညီေလးတစ္ေယာက္က ကြ်န္ေတာ္႔ကို ျပႆနာရွာေနတာ ၾကာပါျပီ ။ link ေတြကို HTML ကေန တင္ခ်င္လုိ႔တဲ႔ဗ်ာ ။ ေတြ႔တုိင္းအကိုေရ လုပ္ပါဦး လုပ္ပါဦးနဲ႔ ။ အေကာင္႔ေတာင္ သိပ္မဖြင္႔ခ်င္ေတာ႔ဘူး ။ ဒီလုပ္နည္းကို ကြ်န္ေတာ္ကိုယ္တုိင္ စမ္းဖူးပါတယ္ ။ လုပ္တတ္ပါတယ္ ။ ဒါေပမယ္႔ သူေျပာေနတာေတြက ကြ်န္ေတာ္ တုိင္ပတ္ေနလုိ႔ေလ ။ ဒါေပမယ္႔ သူ႔ဝက္ဆုိဒ္က လင္ခ္႔ကို ေပးျပီးေတာ႔ သူရဲ႔ လုိခ်င္တဲ႔ ပုံစံ ျဖစ္ေနတဲ႔ ျပႆနာကို စိတ္ရွည္စြာ ေျပာျပေနေလရဲ႔ ။ ကြ်န္ေတာ္က ညီ ဒီလုပ္နည္းကို အကိုသိတယ္ ။ တစ္ဆင္႔ခ်င္းလုပ္ရတာ ။ တစ္ဆင္႔မွားတာနဲ႔ မရဘူး လုိ႔ေျပာေတာ႔ သူ႔ကို တစ္ဆင္႔ခ်င္းဆီ သင္ေပးတဲ႔ဗ်ာ ။ ၾကည္႔ပါဦး ေတာ္ေတာ္ေခါင္းမာတဲ႔ေကာင္ေလးလုိ႔ အျပစ္မေျပာရက္ပါဘူး ။ လုိခ်င္တာကို မရရေအာင္ လုပ္တတ္တဲ႔ စိတ္ဓါတ္ကုိ ခ်ီးက်ဴးပါတယ္ဗ်ာ ။ အဲလုိေကာင္ေလးေတြ မ်ားမ်ားရွိပါေစလုိ႔ :)
တစ္ခုေတာ႔ မလြယ္ဘူး ေနာက္လုပ္ခ်င္တာ ရွိရင္ မရမက ပူဆာဦးမွာ ေသခ်ာတယ္ ။ ညီေလးေရ ညီေလးတြက္ အကိုတကယ္ေရးေပးလုိပါျပီေနာ္ ။ သူေရးခုိင္းတာ တစ္လေေလာက္ေတာင္ ရွိေတာ႔မယ္ ထင္႔ ။

စကားေၾကာကလည္း ရွည္ေနမိေသးတယ္ ။ ဒီပုိစ္႔ကို မေရးခင္မွာ ပုိစ္႔ေခါင္းစဥ္ကို နားလည္ေအာင္ ရွင္းျပေပးပါဦးမယ္ ။ ကြ်န္ေတာ္႔ဆုိဒ္ရဲ႔ cctv ေအာက္က ပုံစံကို ၾကည္႔လုိက္ပါ ။ menu tabs သုံးခုနဲ႔ လုပ္ထားတာကို ေတြ႔ရပါမယ္ ။ အဲဒါကို ေျပာတာ သူက ။ သူလုပ္ထားတာ ရွိတယ္။ လင္ခ္႔က ေသေနေလရဲ႔ ။ ေျပာေနတာ ၾကာပါတယ္ ။ စရေအာင္ဗ်ာ ။ ကြ်န္ေတာ္ ပိုစ္႔ေတြေရးရင္ အရွင္းဆုံးနဲ႔အတုိဆုံးပဲ ေရခ်င္တယ္ဗ်ာ ။ နားလည္းနားလည္လြယ္ေအာင္ ရွည္ေနရင္ မလုပ္ရဲမွာ စုိးရတယ္ေလ ။ နည္းနည္းေတာ႔ သည္းခံျပီးေတာ႔ စမ္းၾကည္႔ပါဗ်ာ ။ ေအာင္ျမင္သြားရင္ ဝမ္းသာျဖစ္ရတဲ႔ အရသာကို ခံစားေစခ်င္လုိ႔ပါ ။

အားလုံးပဲ HTML ကို ျပင္တတ္ျပီးသားဆုိေတာ႔ ပုံေတြ အစုံလင္မျပေပးေတာ႔ဘူး ။ လုိအပ္သေလာက္ေလးပဲ တင္ေပးပါမယ္ ။ ရွင္းေအာင္ေရးေပးပါမယ္ဗ်ာ ။ ခု ထုံးစံအတုိင္းပဲ ။
Login to Blogger dashboard » layout » Edit HTML  ျပီးရင္ေတာ႔ ]]</b:skin> ရွာရပါမယ္ ။ ရွာနည္း သိေလာက္ပါျပီ ။ ပုိစ္႔တုိင္းလုိလုိေျပာျပပါတယ္ ။ ဒါေပမယ္႔ မသိေသးတဲ႔ သူေတြရည္ရြယ္ျပီး ပုိစ္႔တုိင္း ထပ္ထပ္ေျပာပါမယ္ ။ သိျပီးသားဆုိျပီး ဘာမွ မေျပာပါနဲ႔ မသိေသးတဲ႔ သူေတြ ရွိပါတယ္ ။ ေတြ႔ျပီလား ေတြ႔ရင္ ေအာက္က စာသားေတြကူးျပီးေတာ႔ ေစာနက ရွာတဲ႔ စာရဲ႔ ေရွ႔မွာ Past လိုက္ပါဗ်ာ ။ ရွင္းပါတယ္ေနာ္.....
/*--------TechTasks Tabber CSS-------------------------*/
.techtasksTabber
{}
.tab_container {
border: 1px solid #0080FF;/*--Set The Border Color Of Tab Container--*/
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff; /*--Set The BackGround Color Of Tab Container--*/
}
.tab_content {
padding: 10px;
font-size: 1.1em;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #0080FF;/*Bottom Border Color Of Tab Menu */
width: 100%;
}
ul.tabs li {
float: left;
margin-right:5px;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-bottom:1px solid #0080FF;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0; /*Set Background color of Tab menu*/
}
ul.tabs li a {
text-decoration: none;
color: #000; /*Set tab text Link Color*/
display: block;
font-size: 1.1em;
padding: 0 5px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;/* Set Tab Mouse over Background Color */
}
ul.tabs li.active{
background: #fff;/* Set Active Tab Background Color */
color:#0080FF;
border:1px solid #0080FF;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
ul.tabs li.active a:hover /*--Set the active tab mouse hover properties--*/
{
background: #fff; /* Set active Tab Mouse over Background Color */
}
/*----------End TechTasks Tabber CSS--------------*/

အုိေခဗ်ာ ။ တစ္ဆင္႔ေတာ႔ ျပီးျပီ က်န္တာ ဘာမွမလုပ္ပါနဲ႔ဦး ။ မလုပ္နဲ႔လုိ႔ ေျပာတာကို လုပ္မိရင္ေတာ႔ ။ ဟဲဟဲ ေျဖရွင္းရေတာ႔မွာေပါ႔ :)
</head> ဆုိတဲ႔ စာကို ထပ္ရွာေပးပါဦး .....ေတြ႔ျပီလား ေတြ႔ရင္ေတာ႔ အဲဒီစာရဲ႔ေရွ႔မွာပဲ ။ ေအာက္က စာသားေတြကို ကူးျပီးေတာ႔ ထည္႔ေပးလုိက္ပါ ။ အဲ.. ေျပာဖုိ႔ေမ႔လုိ႔ ရွာခုိင္းတဲ႔ စာကို ဘီးလွည္႔ျပီး မရွာနဲ႔ Ctarl + F နိပ္ျပီး ရုိက္ထည္႔လုိက္ ။ လြယ္တယ္ေနာ္...
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
/*----------Start TechTasks Tabber Script--------------*/
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
/*----------End TechTasks Tabber Script--------------*/
</script>

ကဲဗ်ာ ။ တစ္ဆင္႔ျပီးသြားျပန္ပါျပီဗ်ာ ။ ေနာက္တစ္ခုေလာက္ပဲ ထပ္ရွာေပးလုိက္ပါေနာ္ ။
ရွာရမွာက <div id='sidebar-wrapper'> or <div id='sidebar'> ပါ ။ တစ္ခုမဟုတ္တစ္ခု ေတြ႔ရမွာပါ ။ ႏွစ္ခုစလုံးကို ရွာတာ မဟုတ္ဘူးေနာ္ ။ စိတ္ခ်လုိ႔မရလုိ႔ တန္တန္မွာရတယ္ ။ သေဘာေပါက္ :)
ေတြ႔ျပီ ထားေတာ႔  အဲ.. ဒီတစ္ခါေတာ႔ အဲဒီစာရဲ႔ အေနာက္မွာ ထည္႔ရမယ္ေနာ္ ေရွ႔ေနာက္လြဲလုိ႔ေတာ႔ ရမွာ မဟုတ္ဘူးေနာ္ ။ ေရွ႔က လုပ္သြားတဲ႔ ႏွစ္ခုက ေရွ႔မွာ ေနာက္ဆုံးတစ္ခုက ေနာက္မွာ ။ ဟုတ္ျပီဗ်ာ ။ ကူးျပီးေတာ႔ ထည္႔ေပးလုိက္ပါ ။
<div id='techtasksTabber'>
<ul class='tabs'>
<li><a href='#tab1'>Recent</a></li>
<li><a href='#tab2'>PageViews</a></li>
<li><a href='#tab3'>Subscribe</a></li>
</ul>

<div class='tab_container'>
<div class='tab_content' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
</div>

ကဲခုဆုိေတာ႔ ျပီးသြားပါျပီ ။ စိတ္မေအးပါနဲ႔ဦး Save မလုပ္ေသးနဲ႔ Preview ၾကည္႔လုိက္ပါ ။ သင္႔ဘေလာ႔က ဘာမွမျဖစ္ဘူးဆုိရင္ေတာ႔ Save ေပါ႔ ။ ေတာ္ၾကာေန အျပစ္ေျပာသံ ။ အကူညီေတာင္းသံေတြ ၾကားေနရမွာစုိးလုိ႔ :)
ျပီးရင္ေတာ႔ Design ကို တစ္ခ်က္ျပန္နိပ္လုိက္ပါ ။ ေနာက္ဆုံးဆင္႔ေရာက္ပါျပီ ။  အဲဒီမွာ အစက္သုံးစက္ေတြ႔ရမယ္ဗ်ာ ။

 ျပီးေတာ႔ Add Gadget ကို သုံးခု ေတြ႔ရမယ္ ပုံပါအတုိင္း မိမိသုံးလုိသည္႔အတုိင္း သုံးလုိက္ပါ ။ Recent Post လား Recent Comment လား ။ ဟာကြာ အကုန္လုံးရတယ္လုိ႔ ။ ျပီးေတာ႔ menu နာမည္ကိုေတာ႔ ကိုယ္႔ဖာသာကုိယ္ HTML မွာ မိမိ အပ္လုိက္သည္႔ Gadget အားေလွ်ာ္စြာ ေျပာင္းႏုိင္ေၾကာင္းေရးသားရင္းနဲ႔ ကြ်န္ေတာ္ေတာ႔ရဲ႔ ပုိစ္႔ကို ရပ္နားပါရေစ ။ ေတာင္းဆုိတဲ႔ ညီေလးေရ ညီေလးတြက္နဲ႔ ပင္ပန္းသြားျပီ ။ ၾကံဳရင္ လဘက္ရည္ဖုိး ရွင္းပါမယ္လုိ႔ ေအာက္မွာ ဝန္ခံကတိေရးထုိးသြာပါေလ ....... :))))) ခြန္ေမာင္ပန္

3 comments:

Anonymous said...

အကိုေရေက်းဇူးအရမ္းတင္ပါတယ္ေနာ္ လဘက္ရည္ဖိုးေတာ႔မရွိဘူးဗ် လမ္းၾကံဳရင္ အိမ္ထမင္း၀င္စားဖို႔ဖတ္ပါတယ္ ဧည္ခံမယ္မမေတြရွိတယ္ လာျဖစ္ေအာင္လာေနာ္ဟဲဟဲ :P

ေရႊျပား minkoaung2030@gmail.com said...

This comment has been removed by the author.

December Mgmg said...

လိပ္စာလည္း မပါပဲနဲ႔ ။ ဒီတုိင္းဆုိ ဟိုပုိစ္႔ေအာက္က မန္႔သြားတဲ႔ အကို႔အိမ္လား ဆုိျပီးေတာ႔ တစ္အိမ္တက္တစ္အိမ္ဆင္း လုိက္ေမးရဖုိ႔ရွိတယ္ :)

Post a Comment

သင္႔ရဲ႔ အၾကံေပးမႈဟာ ေနာက္စာတစ္ပုဒ္အတြက္ တြန္းအားပဲဗ်ာ။