W w W. N y I n @ y M i N. o R g

16 February 2014

Multi-Tabbed Widget ​ေလး​နဲ႔ ​အ​သံုး​ျပဳ​ၾက​မယ္


​မ​ဂၤ​လာ​ပါ​ဗ်ာ.. ​က်ြန္​ေတာ္ ​ခု​တင္​ျပ​မဲ့ ​ပို႔စ္​ေလး​ေက​တာ့  Multi-Tabbed Widget  ​လို႔​ေခၚ​တဲ့
​မိ​မိ​တို႔ ​ေဖၚ​ျပ​ျခင္​ေသာ ​က​႑​ေလး​ေတြ​ကို ​အ​က်ဥ္း​ခ်ဳန္း ​သ​လို​လဲ ​ျဖစ္​တဲ့  ​ဇ​ယား​ေလး​နဲ႔ ​တင္​ျပ​နည္း​ေလး​ဘဲ ​ျဖစ္​ပါ​တယ္. ​က်ြန္​ေတာ္ ​ဥ​ပ​မာ ​အ​ေန​နဲ႔  ​ေဘာ​လံုး​ပြဲ ​စဥ္​ဇ​ယား​ေလး​ကို ​တင္​ျပ​ထား​ပါ​တယ္.. ​မိ​မိ​တို႔ ​တင္​လို​ေသာ ​စာ​သား​မ်ား ​ကို​ႀကိဳက္​သ​လို ​ထည့္​သြင္း​တင္​ႏိုင္​ပါ​တယ္..
​စိတ္​တိုင္း​က် ​ဖန္​တီး​ယူ​ႏိုင္​ပါ​တယ္.. ​သူ​က ​ဇ​ယား​တစ္​ခု​ထဲ​ကို ​ေခါင္း​စဥ္​ေလး ​သံုး​ခု​နဲ႔ ​ဆို​ေတာ့
​တ​ေန​ရာ​ထဲ​နဲ႔ ​အ​ဆင္​ေျပ​ေစ​ပါ​တယ္... ​ကဲ ​စ​ၾကည့္​မယ္​ေနာ္...​ေအာက္​မွာ ​ၾကည့္​လိုက္​ပါ။

 ​ထည့္​နည္း​ေလး​နဲ႔ ​ကုဒ္​ေတြ​ကို ​ေပး​လိုက္​ပါ​တယ္...​ေနာ္..

►1-  Blogger Singin ​ဝင္​လိုက္​ပါ။
►2-  DASHBOARD ​ကို​သြား​လိုက္​ပါ။
►3-  LAYOUT    ​ကို​က​လစ္​ပါ..။
►4-  EDIT HTML  ​ကို​ဝင္​ပါ..
►5-  Ctrl+F ​အ​ကူ​ညီ​ျဖင့္ ​ေပး​ထား​တဲ့ ​ကုဒ္​ကို ​ရွာ​လိုက္​ပါ။

</head> ​ရွာ​လိုက္​ပါ​ေတြ႕​ၿပီး​ဆို​ရင္ </head> ​ရဲ့ ​ေအာက္​မွာ ​ေအာက္​က​ေပး​ထား​တဲ့ ​ကုဒ္ ​ေတြ​ကို​ထည့္​ေပ​လိုက္​ပါ။

<script src="http://www.webaholic.co.in/other/blogger-tabbed-widget-javascript.js" type="text/javascript"></script>
<link href="http://www.webaholic.co.in/other/blogger-tabbed-widget-css.css" rel="stylesheet" type="text/css" />
 ​ၿပီး​တာ​နဲ႔ save template ​လု္​ပ​ေပး​ႏိုင္​ပါ​ၿပီ။

​ေနာက္​တ​ဆင့္​အ​ေန​နဲ႔..​က​ေတာ့..​လြယ္​ကူ​ပါ​တယ္..
   ►1.  Login ​လုပ္​လိုက္​ပါ ​ဘ​ေလာ့​ကာ​ကို
   ►2.  Layout ​ကို​က​လစ္​ရ​ပါ့​မယ္ ​မိ​မိ​တို႔  Dashboard ​က​ေန​ေပါ့
   ►3.  Add a Gadget ​ကို​က​လစ္​ေပး​လိုက္​ပါ
   ►4.  HTML/Javascript. ​ကို​က​လစ္​ၿပီး ​က်​လာ​တဲ့ ​ေဘာက္​ေလး​ထဲ​မွာ​ဘဲ
   ►5.  ​ေအာက္​က​ေပး​ထား​တဲ့ ​ကုဒ္​ေတြ​ကို ​ေကာ္​ပီ​ယူ ​ထည့္​လိုက္​ပါ

<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 250px;" class="TTs">
 <a>Tab ၁</a> <a>Tab ၂</a> <a>Tab ၃</a></div>
<div style="width: 250px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab (၁)  ​အ​တြက္ ​မိ​မိ​ႏွစ္​သက္​ရာ ​ကုဒ္-​စာ​သား ​ထည့္​ႏိုင္​သည္။
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab (၂)  ​အ​တြက္ ​မိ​မိ​ႏွစ္​သက္​ရာ ​ကုဒ္-​စာ​သား ​ထည့္​ႏိုင္​သည္။
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab (၃)  ​အ​တြက္ ​မိ​မိ​ႏွစ္​သက္​ရာ ​ကုဒ္-​စာ​သား ​ထည့္​ႏိုင္​သည္။
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://www.blogger.webaholic.co.in/2011/10/multi-tabbed-widget-for-blogger.html' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.webaholic.co.in/' target='_blank'>Webaholic</a></small>
</div>
</div>
</form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>



​မွတ္​ခ်က္   ။       ။ width: 250px; height: 300px;  ​ေတြ​မွာ ​မိ​မိ​ဘ​ေလာ့​နဲ႔ ​ကိုက္​ညီ​ေစ​မယ့္
                        ​နံ​ပါတ္​ေတြ​ကို ​ခ်ိန္း​ေပး​လိုက္​ပါ။

 Tab ၁------Tab ၂-----Tab ၃  ​ေန​ရာ​ေတြ​မွာ ​မိ​မိ​ထည့္​လို​တဲ့ ​အ​မည္​ေပါ့​ဗ်ာ....

​လက္​ေဆာင္ ။     ။   ​ကို​ကို-​မ​မ- ​အ​ပ်င္း​အိုး​မ်ား​အ​တြက္...​ေိ​ေိ​ေိ..​စ​တာ​ေနာ္...​တိ​နား
                           ​အ​ေနာ္ ​လုပ္​ထား​တဲ့ ​ေဘာ​လံုး​ပြဲ​စဥ္ ​ကုဒ္​ေတြ ​ယူ​သံုး​ဖို႔ ​လက္​ေဆာင္​ပါ...
 ​ႏွစ္​သက္​ပါ​က ​ယူ​လိုက္​ပါ...​အ​ေပၚ​က​လို ​ဘာ​မွ ​ဝင္​စ​ရာ​မ​လို​တဲ့ ​ရယ္​ရီ​မိတ္​ေလး​ပါ... ​ခင္​လို႔​လက္​ေဆာင္​ေပး​တာ​ေနာ္... ​စ​ကား​ေလး​ေတာ့ ​ေၾကာ​ခဲ့​အံုး  ​လုပ္​ရ​တာ ​အား​မ​ခ်ိ​လိုက္​တာ
​မန္​ဘာ​က​နည္း  ​ကြန္​မက္​က ​မ​ခ်ိ​နဲ႔...​တား​တား ​ညစ္​တာ​ဘဲ..​ဂယ္​ဘဲ..​ဂယ္​ဘဲ


<style>
/* Modified By Roxx */
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #D8D8D8; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Tahoma", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
/* Modified By Roxx */
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
color: #fff;
background-image:url('http://lh3.ggpht.com/_TWC8zfBIdik/S_mtk3GmCTI/AAAAAAAAA0Y/Icb5zF59LTw/h2.gif'); /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #D8D8D8; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #fff; /* Warna background Kotak Utama */
}
/* Modified By Roxx */
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/* Modified By Roxx */
</style>

<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs"> <!-- 450 adalah lebar boks tab -->
<a>Spain</a> <!-- Tab 1 adalah judul menu tab 1 -->
<a>England</a> <!-- Tab 2 adalah judul menu tab 2 -->
<a>​ျမန္​မာ</a> <!-- Tab 3 adalah judul menu tab 3 -->
</div>
<div style="width: auto; height: 350px;" class="Pages"> <!-- 250 adalah tinggi boks tab -->

<div class="Page">
<div class="Pad">
<!-- BEGIN of Soccerway widget HTML fragment -->
<!-- Personal code for this widget: 2fgHxqZyonoj5g0y -->
<iframe src="http://widgets.soccerway.com/widget/free/classic/competition/7/#d=280x340&f=table,table_colmp,table_colmw,table_colmd,table_colml,table_colgf,table_colga,results,fixtures,scroll&cbackground=110f0f&ctext=61c1aa&ctitle=F85F00&cshadow=644cbf&cbutton=f30b6c&cbuttontext=000000&chighlight=FF0000&tbody_family=Tahoma,sans-serif&tbody_size=9&tbody_weight=normal&tbody_style=normal&tbody_decoration=none&tbody_transform=none&ttitle_family=Impact,sans-serif&ttitle_size=13&ttitle_weight=normal&ttitle_style=normal&ttitle_decoration=none&ttitle_transform=none&ttab_family=Tahoma,sans-serif&ttab_size=9&ttab_weight=normal&ttab_style=normal&ttab_decoration=none&ttab_transform=none" width="280" height="300" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
<!-- END of Soccerway widget HTML fragment -->
</div>
</div>

<div class="Page">
<div class="Pad">
<!-- BEGIN of Soccerway widget HTML fragment -->
<!-- Personal code for this widget: 2fgHxqZyonoj5g0y -->
<iframe src="http://widgets.soccerway.com/widget/free/classic/competition/8/#d=280x340&f=table,table_colmp,table_colmw,table_colmd,table_colml,table_colgf,table_colga,results,fixtures,scroll&cbackground=110f0f&ctext=29dcb2&ctitle=F85F00&cshadow=3d239c&cbutton=f30b6c&cbuttontext=000000&chighlight=FF0000&tbody_family=Tahoma,sans-serif&tbody_size=9&tbody_weight=normal&tbody_style=normal&tbody_decoration=none&tbody_transform=none&ttitle_family=Impact,sans-serif&ttitle_size=13&ttitle_weight=normal&ttitle_style=normal&ttitle_decoration=none&ttitle_transform=none&ttab_family=Tahoma,sans-serif&ttab_size=9&ttab_weight=normal&ttab_style=normal&ttab_decoration=none&ttab_transform=none" width="280" height="300" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
<!-- END of Soccerway widget HTML fragment -->
</div>
</div>

<div class="Page"> <!-- Buat bikin tab baru -->
<div class="Pad"> <!-- CONTENT -->
<!-- BEGIN of Soccerway widget HTML fragment -->
<!-- Personal code for this widget: 2fgHxqZyonoj5g0y -->
<iframe src="http://widgets.soccerway.com/widget/free/classic/competition/791/#d=280x340&f=table,table_colmp,table_colmw,table_colmd,table_colml,table_colgf,table_colga,results,fixtures,scroll&cbackground=1d1f31&ctext=14eca4&ctitle=28f7a4&cshadow=6a2626&cbutton=C0C0C0&cbuttontext=ee1313&chighlight=FF0000&tbody_family=Tahoma,sans-serif&tbody_size=9&tbody_weight=normal&tbody_style=normal&tbody_decoration=none&tbody_transform=none&ttitle_family=Impact,sans-serif&ttitle_size=13&ttitle_weight=normal&ttitle_style=normal&ttitle_decoration=none&ttitle_transform=none&ttab_family=Tahoma,sans-serif&ttab_size=9&ttab_weight=normal&ttab_style=normal&ttab_decoration=none&ttab_transform=none" width="280" height="340" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
<!-- END of Soccerway widget HTML fragment --><!-- ISI CONTENT -->
</div> <!-- jangan lupa ditutup -->
</div> <!-- jangan lupa ditutup -->

</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style="background-color: black; color: magenta; text-align: center;">
&nbsp;Powered by<a href="http://aungsanmks.blogspot.com/" style="color: cyan;"> ​ေအာင္​ေအာင္(​မ​က​စ)</a></div>

 ​အ​နီ​ေရာင္​ေန​ရာ​ေတြ ​ေျပာင္း​ေပး​ႏိုင္​ပါ​တယ္..

​ေအာင္​ေအာင္(​မ​က​စ) ​ရဲ့ ​ဘ​ေလာ့​ခ​ရီး​သည္​ေလး​အား ​အား​ေပး​ေန​ၾက​တဲ့​အ​တြက္ ​ေက်း​ဇူး​အ​ထူး​တင္​ပါ​တယ္.. ​တုန္႔​ျပန္​မႈ​အ​ေန​နဲ႔ fb like ​ေလး​ေတာ့ ​လုပ္​ေပး​ခဲ့​ၾက​ပါ​ေနာ္.. ​တတ္​စြမ္း​သ​မ်ွ ​ေတြ႕ ​ရွိ​သ​ေမ်ွ​လး​ေတြ​ကို ​ျပန္​လည္ ​ေမ်ွ​ဝ​ေန​ပါ့​မယ္...။ ​အ​ဆင္​မ​ေျပ​တာ​မ်ား​ရွိ​ခဲ့​ပါ​က...cbox ​မွာ ​ေျပာ​ခဲ့​ၾက​ပါ​ေနာ္..

0 comments:

Post a Comment