Sidebar Text Scroll Box

Sidebar ေပၚတြင္ Text အေနနဲ႔ စာေတြေရးမယ္၊ တင္ျပျခင္းတာေလးေတြ တင္ျပၾကမယ္ ဆုိရင္ေပါ့၊ Scroll box ေလး အျဖစ္ ဖန္တီးၾကမယ္ ဆုိရင္ေပါ့၊ ကဲမနီေရ စလုပ္ၾကရေအာင္

(၁) အရင္ဆံုး မိမိရဲ႕ Dashbord ကုိသြားပါ၊ Layout==> Edit HTML ကုိသြားပါ။
/* Sidebar Content */ ကုိရွာပါ၊ ေတြ႕ရင္ ၄င္းေအာက္မွာ ေအာက္ပါ code ကုိထည့္သြင္းေပးလုိက္ပါ-

.scrollingtext{
height:400px;
width:190px;
border:၀;
overflow:auto;
}

အနီေရာင္ျဖင့္ျပထားေသာ height:400px; value ကုိ မိမိအဆင္ေျပသလုိ အတုိး-အေလွ်ာ့ ျပဳလုပ္အသံုးျပဳ ႏုိင္ပါ တယ္။ အျပာေရာင္ ျဖင့္ ျပထားေသာ width:190px; value ကုိ မိမိ Sidebar Width ႏွင့္ အဆင္ေျပ ေအာင္ခ်ိန္ညွိေပးရပါမယ္။ အခုေဖာ္ျပထားတဲ့ တန္ဖုိးမ်ားသည္ က်ေနာ္၏ Site တြင္အသံုးျပဳထားေသာ တန္ဖုိး မ်ားျဖစ္ပါသည္။

(၂)Layout==>Page Elements ကုိသြားပါ။ Add a Gadget ကုိ၀င္လုိက္ပါ။ Text ကုိရွာပါ။ ေတြ႕ရင္ ၄င္း Text ကုိႏွိပ္ၿပီး၀င္လုိက္ပါ၊ ေအာက္ပါပံုကိုၾကည့္ႏုိင္ပါတယ္-
ပံု(၁)

ပံု(၂)


(၃) ေဖာ္ျပခ်င္တဲ့အေၾကာင္းအရာ post text တုိ႔ ေရးၿပီးၿပီဆုိရင္ Edit Html ကုိႏွိပ္လုိက္ပါ။ ေရးထားတဲ့ text ေတြရဲ႕အေရွ႕ဆံုးမွာ ဒီ code ကုိထည့္ေပးလုိက္ပါ။ <div class="scrollingtext"> ၿပီးရင္ text ေတြရဲ႕ ေအာက္ဆံုးေနရာမွာ </div> ကုိထည့္သြင္းေပးလုိက္ပါ။
(၄) Main Wrapper မွာ Posts မ်ား ေရးသလုိ Edit Html တုိ႔ကုိ အသံုးျပဳႏုိင္မည္ ျဖစ္ပါတယ္။
~~~ဒီေနရာမွာ တစ္ခုေျပာခ်င္တာကေတာ့ မိမိေရးသားလုိက္တဲ့ Text စာသားမ်ားဟာ မိမိ သတ္မွတ္ ေပးခဲ့တဲ့ height:400px; value ကုိ ေက်ာ္လြန္တဲ့အခါမွသာ Scrollbar ေလးေပၚလာမွာျဖစ္ပါတယ္။

ျဖည့္စြက္ခ်က္
Template ေတြဟာ အသံုးျပဳသူအေပၚမူတည္တဲ့အတြက္ Template Style မတူညီႏုိင္ပါဘူး။
တကယ္လုိ႔ /* Sidebar Content */ ဆုိတဲ့ CSS comment ကုိမေတြ႕ဘူးဆုိရင္ေတာ့ ေအာက္ပါအတုိင္း ေဆာင္ရြက္ၾကည့္ပါ-
(၁) အရင္ဆံုး အထက္ေဖာ္ျပၿပီး အပုိဒ္(၂)ပါအတုိင္း Text တြင္ စာရုိက္ပါ။
(၂) Dashbord ==> Layout==> Edit HTML ကုိသြားပါ။
ctrl+f ကုိႏွိပ္ၿပီး Find: box တြင္ <div id='sidebar-wrap'> သုိ႔မဟုတ္ <div id='sidebar-wrapper'> tag တစ္ခုခုကုိ ထည့္သြင္းၿပီး ရွာလုိက္ပါ။ Template Designer အေပၚမူတည္ၿပီးကြဲျပား ေနတတ္တာေၾကာင္း အဆင္ေျပတာနဲ႔ ထည့္သြင္းရွာၾကည့္ပါ။ ေအာက္ပါ code တုိ႔ကုိေတြ႕ရမွာျဖစ္ပါတယ္-

<div id='sidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Text1' locked='false' title='test' type='Text'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>

-အနီေရာင္ျဖင့္ျပထားေသာ Text1 သည္ မိမိ Sidebar တြင္ေရးခဲ့ထားျခင္းေၾကာင့္ ေဖာ္ျပေပးေနျခင္း ကုိေတြ႕ရမည္ ျဖစ္ပါသည္။ ( Text1 မွမဟုတ္ပါဘူး Profile1 , Label1 , BlogArchive1 တုိ႔ကုိလည္း Scroll box ဖန္တီးေပး ႏုိင္ပါတယ္)
(၃) မိမိရဲ႕ CSS code အတြင္း ေအာက္ပါ code ကုိ ရွာၾကည့္ပါ-

.sidebar .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}

သုိ႔မဟုတ္

#sidebar .widget {
margin-bottom: 20px;
}

-ေတြ႕ၿပီးဆုိရင္ ၄င္းရဲ႕အေပၚကပ္လ်က္မွာ ေအာက္ပါ အနီေရာင္ျဖင့္ ျပထားေသာ code ကုိ ထည့္သြင္း ေပးလုိက္ပါ၊

#Text1{
height:400px;
width:265px;
overflow:auto;
}
.sidebar .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}

(၄) width က မိမိ Sidebar width ထက္ပုိႀကီးလုိ႔မရပါဘူး။ height ကေတာ့ မိမိေရးတဲ့ Text အေပၚ မူတည္ၿပီး အလုိရွိသလုိ ထည့္သြင္းဖန္တီးႏိုင္ပါတယ္။

အဆင္ေျပပါေစ