Blog Label ​ေတြ​ကို scrollBar ​နဲ႔ ​ဘယ္​လို​ထား​မ​လဲ

​ဒီ​ေန႔​ေတာ့ ​အ​ဖ်ား​ေပ်ာက္​သြား​တာ​နဲ႔ Blog ​ေတြ​နဲ႔ ​ပါတ္​သက္​ၿပီး​ေတာ့ html code ​ျပင္​တဲ့ ​အ​ပိုင္း​ေတြ​ကို ​ေျပာ​ျပ​ခ်င္​ပါ​တယ္။ ​ခု​ဆို​ရင္ ​ဘယ္​သူ​ပဲ​ျဖစ္​ျဖစ္ ​အ​နည္း​ဆံုး​ေတာ့ blogspot ​နဲ႔ Blog ​ေလး​တစ္​ခု​ေတာ့ ​ပိုင္​ဆိုင္​ေန​ၾက​ပါ​ၿပီ။ Blog ​တစ္​ခု​ကို ​ျပဳ​လုပ္​ဖို႔​အ​တြက္​က​ေတာ့ ​က်​ေနာ့္​အ​ေန​နဲ႔ ​တင္​ေပး​ထား​တာ​ေကာ ​ၿပီး​ေတာ့ Blog ​စာ​အုပ္​ေလး​ေတြ​လည္း ​တင္​ေပး​ထား​တဲ့​အ​တြက္ Blog ​တစ္​ခု ​တည္​ေဆာက္​ဖို႔​ေတာ့ ​မ​ခက္​ခဲ​ဘူး​ဆို​ေပ​မယ့္ ​လုပ္​ထား​ၿပီး​သား Blog ​ကို ​ျမန္​ဆန္​ေစ​ဖို႔​နဲ႔ ​လွ​လွ​ပ​ပ ​ျပည့္​ျပည့္​စံု​စံု​ျဖစ္​ဖို႔​လည္း ​အ​ထူး​လို​အပ္​လွ​ပါ​တယ္။ ​ကဲ ​ဒီ​ေန႔​ေတာ့ facebook ​နဲ႔ Blog ​ပတ္​သက္​တာ​ေလး​ေတြ​ကို ​ေျပာ​ျပ​ခ်င္​ပါ​တယ္။ ​က်​ေနာ့ Blog ​လည္း​ျပင္​ရင္း​နဲ႔ ၁၀၀% ​အ​ဆင္​အ​ေျပ​ဆံုး ​နည္း​လမ္း​ေတြ​ကို​ပဲ ​ေျပာ​ျပ​ေပး​သြား​မွာ​ပါ။

Blog Label ​ေတြ​ကို ​ဘာ​လို႔ scroll Bar ​နဲ႔​ထား​တာ​လဲ​ဆို​ရင္​ေတာ့ ​ဝဘ္​ဆိုက္​အ​တြက္ ​ေန​ရာ​မ​ယူ​ေအာင္ ​ဝဘ္​ဆိုက္​ကို ​ဝင္​လာ​တဲ့​သူ ​မ်က္​စိ​ပ​သာ​ဒ​ျဖစ္​ေအာင္​လို႔​ပဲ ​ဆို​ၾက​ပါ​စို႔​ဗ်ာ .

​ကဲ​စ​ၾကည့္​ရ​ေအာင္ .

1. Blogger.com ​ကို Sign In ​ဝင္​လိုက္​ပါ။
2. Template ​ကို​ႏွိပ္​ပါ။ (​ပံု-၁)
3. ​ညာ​ဖက္​ထိပ္​က Backup/Restore ​ကို ​ႏွိပ္​ပါ။ (​ပံု-၂)
4. ​ၿပီး Download Full template ​ကို ​ႏွိပ္​ၿပီး​ေတာ့ Save ​လုပ္​ၿပီး​သိမ္း​ထား​ပါ။ (​ပံု-၂)

​ပံု​ေသး​ေန​လ်ွင္ ​က​လစ္​ႏွိပ္​ၿပီး​ၾကည့္​ပါ

​ပံု​ေသး​ေန​လ်ွင္ ​က​လစ္​ႏွိပ္​ၿပီး​ၾကည့္​ပါ

​ကဲ Template ​ကို ​သိမ္း​ၿပီး​ၿပီ​ဆို​ရင္​ေတာ့ ​ျပင္​တဲ့​အ​ပိုင္း​ကို ​စ​ပါ့​မယ္။
Edit Html ​ကို​ႏွိပ္​ပါ
html code ​ေတြ​ရွိ​ေန​တဲ့ ​အ​ကြက္​ထဲ​ကို mouse ​နဲ႔ ​တစ္​ခ်က္​ႏွိပ္​ပါ။
ctrl + f ​ကို ​ႏွိပ္​ပါ search box ​ေပၚ​လာ​ပါ​မယ္။

​ပံု​ေသး​ေန​လ်ွင္ ​က​လစ္​ႏွိပ္​ၿပီး​ၾကည့္​ပါ

​ပံု​ေသး​ေန​လ်ွင္ ​က​လစ္​ႏွိပ္​ၿပီး​ၾကည့္​ပါ

​ဒီ​ေန​ရာ​မွာ ​အ​ထူး​သ​တိ​ထား​သင့္​တဲ့ ​အ​ခ်က္​က​ေလး​တစ္​ခ်က္ ​ရွိ​ပါ​တယ္။ Label ​ေတြ​ကို ​ျမန္​မာ​လို ​မ​ေပး​မိ​ပါ​ေစ​နဲ႔။ ​ျမန္​မာ​လို​ေပး​ထား​တယ္​ဆို​လဲ ​အ​ဂၤ​လိပ္​လို ​ျပန္​ေပး​လိုက္​ပါ။
Label ​မ​ရွိ​ေသး​သူ Blog ​ပိုင္​ရွင္​မ်ား​က Layout ​ကို​သြား
Add a Gadget ​ကို​ႏွိပ္​ၿပီး Labels ​ကို ​ေရြး​ေပး​ပါ။
Labels ​နာ​မည္​ကို by group ​လို႔ ​နာ​မည္​ေပး​ထား​လိုက္​ပါ။
​ၿပီး​ၿပီ​ဆို​ရင္​ေတာ့ html ​ထဲ​က search box ​မွာ by group ​လို႔ ​႐ိုက္​ထည့္​လိုက္​ပါ။

<b:widget id='Label3' locked='false' title='by group' type='Label'>

​အဲ့​လို ​ေတြ႕​ရ​ပါ​လိမ့္​မယ္။ ​အဲ့ code ​ရဲ့ ​ေအာင္​မွာ ​ေအာက္​က ​ကုတ္​ကို ​အ​စား​ထိုး​ထည့္​လိုက္​ရ​မွာ​ပါ။ ​ေအာက္​က code ​ကို copy ​ကူး​ၿပီး​ေတာ့ ​အ​ေပၚ​က code ​ရဲ့ ​ေအာက္​မွာ ​အ​စား​ထိုး​ထည့္​လိုက္​ပါ။

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:250px;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>

</div>
</b:includable>
</b:widget>

​အဲ့​လို ​အ​စား​ထိုး​ထည့္​လိုက္​ရင္ ​အ​ခု​လို​မ်ိဳး ​ျဖစ္​သြား​ပါ​လိမ့္​မယ္။ ​အဲ့​ေန​ရာ​မွာ ​ခ​ရမ္း​ေရာင္ 250 ​မွာ ​ကို​ႀကိဳက္​သ​လို ​ထား​ႏိုင္​ပါ​တယ္။ ​မ်ား​လာ​ရင္ scroll bar ​က ​ရွည္​လာ​မွာ​ျဖစ္​ပါ​တယ္။ 250 ​က ​အ​ေန​ေတာ္​ေလာက္​ပါ​ပဲ။

<b:widget id='Label3' locked='false' title='by group' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:250px;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>

</div>
</b:includable>
</b:widget>

​ကဲ ​ဒါ​ၿပီး​ရင္​ေတာ့ ​ဝဘ္​ဆိုက္​မွာ ​ျပန္​ၾကည့္​လိုက္​ပါ scrollbar ​ေလး​နဲ႔ ​ေပၚ​ေန​တာ​ကို ​ေတြ႕​ရ​ပါ​လိမ့္​မယ္။