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 ေလးနဲ႔ ေပၚေနတာကုိ ေတြ႔ရပါလိမ့္မယ္။
Posted by ညီေနမင္း