Myanmar Blogger Helpdesk

Learning, Sharing and Growing Together at Blogging Community!

Blogger Comment ႏွင့္ Post Section တို႔တြင္ Smile ရုပ္ပံုမ်ား ထည့္သြင္းျခင္း  

Contributor: ေမွာ္ဆရာ

ႏႈတ္တစ္ရာ၊ စာတစ္လံုး။ စာလံုးတစ္ေထာင္ထက္ ရုပ္ပံုတစ္ခုက အဓိပၸာယ္ေပါင္း ေျမာက္မ်ားစြာကို ေဖာ္ျပနိဳင္စြမ္းရွိပါတယ္။ အဲဒီေတာ့ ကၽြန္ေတာ္တို႔ ေရးသားေနတဲ့ ပို႔စ္ေတြ၊ မွတ္ခ်က္ေတြထဲမွာလည္း သူ႔ေနရာေလးနဲ႔သူ အဓိပၸာယ္ရွိတဲ့ ပံုေလးေတြနဲ႔ ကိုယ္စားျပဳေဖာ္ျပေပးလိုက္ မယ္ဆိုရင္ အတိုင္းထက္ အလြန္၊ တံခြန္နဲ႔ ကုကၠား ဆိုသလိုပဲ အစစ၊ အရာရာ သာလြန္ျပည့္စံု ေကာင္းမြန္တဲ့ ပို႔စ္ ေတြ၊ မွတ္ခ်က္ေတြ၊ ေဆြးေႏြးခ်က္ ေတြျဖစ္လာမွာအမွန္ပါပဲ။

မိမိဘေလာ့ဂ္ရဲ့ Comment မွာေရာ၊ ပို႔စ္ေတြထဲမွာပါ အၿပံဳးေလးေတြကို လူမ်ိဳးဘာသာမေရြး အားလံုးအသံုးျပဳနိဳင္ဖို႔ အလြယ္ကူဆံုး နည္းလမ္းမ်ားကို ရွာေဖြ တင္ဆက္ထားပါတယ္။

နည္းလမ္း။ ။ Blogger Comment & Post Section တို႔တြင္ Smiles ရုပ္ပံုမ်ားထည့္သြင္းျခင္း

ေအာက္ပါအတိုင္းလုပ္ေဆာင္ပါ။

(၁) မိမိရဲ့ စက္ထဲမွာ မီးေျမေခြး (FireFox) ဘေရာက္ဇာ ရွိရပါမယ္။ မရွိခဲ့လ်င္ [ဒီေနရာ] မွာေဒါင္းလုဒ္ခ်၍ Install လုပ္ပါ။

(၂) ေနာက္တစ္ခုကေတာ့ Greasemonkey ဆိုတဲ့ FireFox Addon ရွိရပါမယ္။ မရွိခဲ့လ်င္ [ဒီေနရာ] မွာ ေဒါင္းလုဒ္လုပ္၍ Install လုပ္ပါ။ ၎ Addon အား မိမိ FireFox Browser တြင္ Install လုပ္ၿပီးပါက ဘေရာက္ဇာ၏ ညာဘက္ေအာက္ေျခေထာင့္တြင္ နီညိဳေရာင္ ေမ်ာက္ေခါင္းပံုတစ္ခု ေပၚလာမည္ျဖစ္သည္။

(၃) အထက္ပါအဆင့္မ်ား ေအာင္ျမင္စြာျပဳလုပ္ၿပီးစီးပါက Comment Section တြင္ Smiles မ်ားထည့္သြင္းရန္အတြက္ -

[ဤေနရာ] တြင္ ”ကလစ္” လုပ္ပါ။ Greasemonkey မွ ၎ Script ကို Install လုပ္ေပးမည္ျဖစ္၍ ေအာက္ပါအတုိင္း Pop up ၀င္းဒိုး တစ္ခုတက္လာလ်င္ ”Install” ကိုသာ ဆက္၍ ကလစ္လိုက္ပါ။



ၿပီးလ်င္ မိမိ၏ Comment ေရးသားေသာ ေနရာတြင္ ေအာက္ပါအတိုင္း Smile မ်ားႏွင့္တကြ HTML Code အခ်ိဳ႔ကိုပါ အလြယ္သံုးႏိုင္ေအာင္ လုပ္ေပးထားေသာ Tab ေလးမ်ားကို ေတြ႔ရမွာျဖစ္ပါတယ္။



(၄) Post Section တြင္ Smiles မ်ားထည့္သြင္းရန္အတြက္ ကိုမူ -

[ဤေနရာ] တြင္ကလစ္လုပ္ပါ။ အထက္ကအတိုင္း Popup တစ္ခုတက္လာလ်င္ Install ကိုကလစ္ပါ။ၿပီးလ်င္ ေအာက္ပါအတိုင္း ျမင္ေတြ႔နိဳင္ပါၿပီ။



(၅) ဤေနာက္ဆံုးအဆင့္တြင္ ေအာက္ပါကုဒ္ မ်ားကိုရွာ၍ အနီျပထားေသာ ကုဒ္မ်ားကို Delete လုပ္ပါ။

.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
font-family: "ZawGyi-One", ZawgyiOne, Zawgyi1;
}


အဆံုးသတ္အေနျဖင့္ ေအာက္ပါကုဒ္ မ်ားကို မိမိ၏ Template ထဲရွိ </head> ဆိုေသာကုဒ္ မတိုင္မွီ Template ၏ CSS အပိုင္းတြင္ထည့္ေပးပါ။

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}


ၿပီးလ်င္ အားလံုး အဆင္သင့္ျဖစ္ပါၿပီ။ ပို႔စ္ေရးေသာအခါ၊ သို႔၊ မွတ္ခ်က္ေရးေသာအခါ တြင္ Smile မ်ားကိုအသံုးျပဳလိုပါက၊ မိမိေပၚေစခ်င္ေသာ ေနရာတြင္ Cursor ခ်ၿပီး၊ အသံုးျပဳမည့္ Smile ေလးမ်ားေပၚတြင္ ကလစ္ေပးလိုက္ရံုသာျဖစ္သည္။



မွတ္ခ်က္။ ။အထက္ပါ Smiles Hack တြင္ Comment Section အတြက္ Hack သည္ ၎ Hack ကို Install လုပ္ထားေသာ ဘေလာ့ဂ္ ႏွင့္ အဆိုပါ စက္တြင္သာျမင္ရမည္ျဖစ္သည္။ အျခားသူမ်ား၏ ဘေလာ့ဂ္ႏွင့္ စက္မ်ားမွ ျမင္ေတြ႔ရမည္မဟုတ္။ထို႔ျပင္ ဘေလာ့ဂ္၏ ပို႔စ္ Section တြင္ Comment မွ Smile မ်ားေပၚမည္မဟုတ္ပဲ သေကၤတမ်ားျဖင့္သာ ကိုယ္စားျပဳမည္ျဖစ္သည္။ ဘေလာ့ဂ္၏ Comment Section တြင္သာ Smiles မ်ားကိုျမင္ေတြ႔ရမည္ျဖစ္သည္။



Sources: BloggerHacked | Notes4PC

Technorati Tags: | | | | |

Read More...
AddThis Social Bookmark Button

ဘေလာ့ဂ္ ထိပ္ဆံုးက navbar ေဖ်ာက္ျခင္းသည္ တရား၀င္၊မ၀င္ ?  

Contributor: ေမွာ္ဆရာ

Blogspot အသံုးျပဳသူတိုင္း မိမိဘေလာ့ဂ္ရဲ့ ထိပ္ဆံုးမွာ ဘေလာ့ဂ္ေတြကို ရွာေဖြလို႔ရတဲ့ Search Box တစ္ခုနဲ႔ အတူ မိမိရဲ့ Gmail Address ကိုပါအၿမဲေဖာ္ျပေနတဲ့ Navigation Bar တစ္ခုကို သတိျပဳမိၾကမွာပါ။ တစ္ခ်ိဳ႔ ကအဲဒီဘားကို ႀကိဳက္တာရွိသလို တစ္ခ်ိဳ႔ကလည္း မႀကိဳက္တာေတြရွိၾကပါတယ္။ အဲဒီ navbar ကလည္း တစ္ခ်ိဳ႔ေသာ Blogger Template ေတြမွာ ပါသလို တစ္ခ်ိဳ႔ေသာ Template ေတြမွာ မပါပါဘူး။ ေသခ်ာတာက ေတာ့ Blogger.com ရဲ့ မူရင္း Template အားလံုးလိုလိုမွာ ပါပါတယ္။ေနာက္ မ်ားေသာအားျဖင့္ ဘေလာ့ဂၢါေတြ ေတာ္ေတာ္မ်ားမ်ားကလည္း အဲဒီ Navigation Bar ကို မိမိနည္း ၊ မိမိဟန္နဲ႔ ေဖ်ာက္ၿပီးအသံုးျပဳေနၾကတာ အစဥ္ အလာတစ္ခုလိုျဖစ္ေနပါၿပီ။

ဒီေနရာမွာ အေရးႀကီးတဲ့ ေမးခြန္းတစ္ခုကေတာ့ အဲဒီလို Navigation Bar ေဖ်ာက္သံုးျခင္းဟာ Google ရဲ့ Terms of Service ေတြ ၊ Privacy Polcy ေတြနဲ႔ညီ မညီဆိုတာပါပဲ။ဒါနဲ႔ပတ္သက္ၿပီး ေလ့လာၾကည့္မိတဲ့ အခ်ိန္မွာ Blogger ရဲ့ TOS စာမ်က္ႏွာ မွာမည္သည့္ ရည္ညႊန္းခ်က္မွ မေတြ႔မိသလို Blogger Support Group ရဲ့ ေဆြးေႏြးခန္း မွာ ဆိုရင္လည္း Navigation Bar နဲ႔ ပတ္သက္တဲ့ ေမးခြန္းတိုင္းကို အၿမဲတေစ ျငင္းပယ္ေလ့ ရွိတာကိုေတြ႔ရပါတယ္။

ဒီျပႆနာကို ရွင္းရွင္းလင္းလင္း သိဖို႔အတြက္ အိႏၵိယ ႏိုင္ငံ ဘန္ဂလိုၿမိဳ႔မွာ ျပဳလုပ္ခဲ့တဲ့ Google ရဲ့ Road Show ျပပြဲအတြင္း Blogger မ်ားမွ navbar Polcy နဲ႔ပတ္သက္တဲ့ အေၾကာင္းအရာမ်ားကို ရွင္းလင္းေျပာၾကားေပးဖို႔ Google ရဲ့တာ၀န္ ရွိသူမ်ားကို ေမးျမန္းခဲ့ၾကပါတယ္။ အဲဒီျပပြဲအတြင္းမွာပဲ Google အမႈေဆာင္အဖြဲ႔( Google's Bangalore office) မွ အေရးေပၚအစည္း အေ၀းေခၚခဲ့ၿပီး navbar ေဖ်ာက္ျခင္းဟာ တရား၀င္(Legal) ျဖစ္ပါေၾကာင္း ေသခ်ာတဲ့ ဆံုးျဖတ္ခ်က္ႏွင့္ ရွင္းရွင္းလင္းလင္းေၾကညာခဲ့ပါတယ္။

ေကာင္းပါၿပီ။ အဲဒီေတာ့ ကၽြန္ေတာ္တို႔ဒီ nvabar ေလးကိုေဖ်ာက္သံုးျခင္းဟာ တရား၀င္ျဖစ္ေၾကာင္း ေသခ်ာသြားပါၿပီ။ ဘယ္လိုေဖ်ာက္မလဲ။ နည္းလမ္းေတြကေတာ့ အမ်ိဳးမ်ိဳးရွိၿပီး၊ အမ်ိဳးမ်ိဳးသံုးၾကပါတယ္။ ဘေလာဂၢါအမ်ားစု သံုးေလ့သံုးထရွိတဲ့ နည္းလမ္းကေတာ့ မိမိရဲ့ Blog Template အတြင္း </head> ဆိုတဲ့ကုဒ္ မတိုင္ခင္မွာ ေအာက္ပါကုဒ္ ေလးထည့္သြင္း လိုက္ၾကျခင္းပါပဲ။

#navbar-iframe {display:block}
ဒါေပမယ့္ အဲဒီ နည္းလမ္းအရ သံုးတဲ့ navbar ကို ေဖ်ာက္ရာမွာ တိက်ေသခ်ာမႈ သိပ္မရွိလွပါဘူး။ တစ္ခါတစ္ေလ လုပ္တဲ့ ေန႔ကေတာ့ အေကာင္းျဖစ္ေပမယ့္ ေနာက္(၂) ရက္ေလာက္အၾကာမွာ navbar ကျပန္ေပၚလာတတ္ တာမ်ိဳးေတြရွိပါတယ္။

ေနာက္ .. ဒီနည္းနဲ႔လည္း navbar ကိုေဖ်ာက္ႏိုင္ပါေသးတယ္။ မိမိဘေလ့ာဂ္ရဲ့ Edit Html စာမ်က္ႏွာကိုသြား ပါ။ body { ဆိုတဲ့ ကုဒ္ ကိုေတြ႔ေအာင္ရွာပါ။ ၿပီးတဲ့ေနာက္ ၎ကုဒ္မတိုင္ခင္ ေအာက္ပါကုဒ္ မ်ားကို ျပထားသည့္ အတိုင္း ထည့္ပါ။
.Navbar {
display:none;
visibility:hidden
}
body {


အထက္ပါနည္းေလးကေတာ့ မဆိုးလွပါဘူး။အသံုးျပဳသူေတြကို လံုေလာက္တဲ့ ေက်နပ္မႈရေစမွာပါ။

အေကာင္းဆံုးနဲ႔ လက္ရွိကၽြန္ေတာ္သံုးေနတဲ့ နည္းကေတာ့ ေအာက္ပါ နည္းလမ္း ပါပဲ။

၁) သင့္ ဘေလာ့ဂၢါ အေကာင့္ထ္ ကို၀င္ပါ။ Setting ကိုဆက္၀င္ၿပီး ၊ Template tab မွတဆင့္ Edit HTML ကိုဆက္သြားပါ။ အဲဒီကိုေရာက္ၿပီဆိုတာနဲ႔ ေအာက္ပါ ကုဒ္ ကိုေတြ႔ေအာင္ရွာပါ။
<body>
၂)ကုဒ္ကိုေတြ႔ၿပီဆိုပါက ၎၏ေနာက္မွ ကုဒ္မ်ားကို ေအာက္ပါအတိုင္း ဆက္ထည့္ေပးပါ။

<body>
<style type="'text/css'">
#navbar-iframe {display:none;}
</style>

ဒါဆိုရင္ မေပၚေစခ်င္တဲ့ navbar လံုး၀ ကိုေပၚလာေတာ့မွာ မဟုတ္ပါဘူး။ navbar မေပၚေစခ်င္သူမ်ား မိမိဘေလာ့ဂ္မွာ လက္ေတြ႔စမ္းသပ္ၾကည့္ႏိုင္ပါတယ္။

Read More...
AddThis Social Bookmark Button

FavIcon လုပ္ၾကမလား?  

Contributor: ေမွာ္ဆရာ

FavIcon ဆိုတာရဲ့ ဆိုလိုရင္းကေတာ့ Favourite Icon ပါ။ သူ႔ကို အသံုးျပဳတဲ့ ေနရာကေတာ့ ၀ဘ္ဘေရာက္ဇာေတြရဲ့ Website Address ေတြရဲ့ေရွ႔မွာ ၎၀ဘ္ဆိုဒ္ရဲ့ အမွတ္တံဆိပ္အေသးစားအျဖစ္၊ လႈပ္ရွားေနတဲ့ ပံုေတြအျဖစ္လည္းေကာင္း၊ ပံုေသေတြ အျဖစ္လည္းေကာင္း အသံုးျပဳၾကပါတယ္။ ေအာက္ကပံုကိုၾကည့္လိုက္ရင္ FavIcon ဆိုတာ ဘာလဲဆိုတာပိုရွင္းသြားပါလိမ့္မယ္။



အထက္က ပံုကေတာ့ ကၽြန္ေတာ္တို႔ ေရာင္းရင္းႀကီး Blogger.com ရဲ့ Favicon ပဲျဖစ္ပါတယ္။ မ်ားေသာအားျဖင့္ေတာ့ ကိုယ္ပိုင္ Web Hosting ၀ယ္ၿပီး၊ ကိုယ္ပိုင္၀ဘ္ဆိုဒ္ ေရးသားလြတ္တင္ ထားတဲ့သူေတြ အတြက္ Favicon ကိုမိမိကိုယ္တိုင္ ထည့္သြင္းေပးရပါတယ္။ ဒါေပမယ့္ ကၽြန္ေတာ္တို႔ Blogger.com မွာေတာ့ အလိုအေလ်ာက္ပဲ ပါရွိၿပီးသားျဖစ္တဲ့အတြက္ အဲဒီ မူရင္းပါရွိတဲ့ Blogger ရဲ့ Favicon ကို မိမိစိတ္ႀကိဳက္၊ မိမိရဲ့ အမွတ္တံဆိပ္တစ္ခုနဲ႔ အစားထိုးေဆာင္ရြက္ႀကည္႔ၾကပါမယ္။ ဘယ္လိုအစားထိုးၾကမလဲ။ လုပ္နည္းက သိပ္ကိုလြယ္ပါတယ္။ ေအာက္ပါအတိုင္း ေဆာင္ရြက္ပါ။


နည္းလမ္း(၁)

၁)Favicon အျဖစ္အသံုးျပဳရန္ မိမိ စိတ္ႀကိဳက္ ေဆာ့ဖ္၀ဲလ္တစ္ခုကို အသံုးျပဳကာ စိတ္ႀကိဳက္ဒီဇိုင္းတစ္ခုဖန္တီးပါ။ ၿပီးလ်င္ပံုကို .png အမ်ိဳးအစားဖိုင္ အျဖစ္သိမ္းဆည္းပါ။ ဖိုင္ရဲ့ အရြယ္အစားကေတာ့ ၁၆*၁၆ Pixels မွ ၃၂*၃၂ Pixels အတြင္းႀကိဳက္သလို ဖန္တီးလို႔ရပါတယ္။

၂)၎ Icon ကို (Photobucket သို႔မဟုတ္ Googlepage) စသျဖင့္ တစ္ေနရာရာတြင္ Upload လုပ္ပါ။ရလာေသာ လင့္ခ္ကို တစ္ေနရာတြင္ ေကာ္ပီကူးၿပီးမွတ္ထားပါ။

၃)Blogger Dashboard ကို၀င္ေရာက္ၿပီး၊ Template ေအာက္ရွိ Edit HTML တြင္ေအာက္ပါ ကုဒ္မ်ားကို Ctrl+F အကူအညီျဖင့္ ေတြ႔ေအာင္ရွာေဖြပါ။

<title><data:blog.pagetitle/></title>

၄)ေတြ႔ရွိပါက ၎ကုဒ္မ်ား၏ ေအာက္တြင္ ေအာက္ပါကုဒ္မ်ားကို Copy->Paste လုပ္ပါ။

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

၅)"URL of your icon file" ဆိုေသာေနရာတြင္ မိမိ Favicon ၏လင့္ခ္ကို အစားထိုး ရပါမယ္။

၆)Template ကို Save လုပ္ပါ။ ၿပီးလ်င္ ဘေရာက္ဇာ အသစ္တစ္ခုဖြင့္ၿပီး မိမိ ဘေလာ့ဂ္လိပ္စာကိုရိုက္ထည့္၍ Favicon ေပၚမေပၚၾကည့္ ၾကည့္ပါ။

အကယ္၍ Favicon မေပၚဘူးဆိုလ်င္ မိမိဘေရာက္ဇာရွိ Temporary Internet ဖိုင္မ်ားကို Delete လုပ္ေပးရပါမယ္။


နည္းလမ္း(၂)

အထက္ပါနည္းမွာ ကိုယ္ပိုင္ Favicon တစ္ခုဖန္တီးဖို႔ဆိုတဲ့ အဆင့္အတြက္ အခက္အခဲ ရွိေကာင္းရွိႏိုင္ပါတယ္။ အကယ္၍ ဖန္တီးဖို႔ အခက္အခဲ မရွိခဲ့ဘူး ဆိုရင္လည္း အခ်ိန္ေပးဖို႔အတြက္ စကားေျပာစရာရွိလာပါမယ္။ အဲဒီအတြက္ အခ်ိန္လည္းေပးစရာမလို၊ ကိုယ္တိုင္လည္း ဘာမွဖန္တီးစရာမလိုပဲ အမိုက္စား Animation FavIcon ေတြကို မိမိစိတ္ႀကိဳက္၊ မိမိစက္ထဲမွာရွိတဲ့ ပံုတစ္ပံုေပးလိုက္ရံု နဲ႔ မိမိဘေလာ့ဂ္ (သို႔) ဆိုဒ္ အတြက္ Favicon တစ္ခုကို အျမန္ဆံုးနဲ႔၊ အလကားဖန္တီးေပးတဲ့ ဒီေနရာ ကိုသြားတာ အေကာင္းဆံုးပါပဲ။
(ကၽြန္ေတာ့္ဆိုဒ္မွာ အဲဒီနည္းကိုသံုးထားပါတယ္။)



ပံုအႀကီးၾကည့္ရႈရန္ ပံုေပၚတြင္ကလစ္ေပးပါ။

အဲဒီေနရာကိုေရာက္ရင္ ညီအစ္ကိုေမာင္ႏွမမ်ား ေတြ႔ၾကတဲ့ အတိုင္းပါပဲ။

၁)Browse ထဲမွေန၍ မိမိစိတ္ႀကိဳက္ပံုတစ္ပံု (အရြယ္အစား၊ဖိုင္အမ်ိဳးအစား ကန္႔သတ္ ခ်က္မရွိ) ကိုေရြးပါ။

၂) ၿပီးလ်င္ Scrolling Text ၏ေဘးမွ အကြက္တြင္ မိမိဘေလာ့ဂ္နာမည္၊ သို႔ မိမိစိတ္ႀကိဳက္ မိမိ ေပၚေစခ်င္ေသာ စာသားကိုရိုက္ထည့္ပါ။

၃)ၿပီးလ်င္ Animate Favicon ၏ေဘးရွိ Check Box တြင္ Enable ေပးၿပီး Generate FavIcon.ico ကိုကလစ္လုပ္ပါ။

၄)ေနာက္တစ္မ်က္ႏွာတြင္ Download ႏွင့္ Preview ဆိုၿပီးျပလာမွာျဖစ္ပါတယ္။ မိမိ၏ FavIcon အထုပ္ကို Download လုပ္ပါ။

၅)ေဒါင္းလုဒ္လုပ္လို႔ရလာတဲ့ အထုပ္ဟာ zip file နဲ႔ထုပ္ထားတာျဖစ္တဲ့ အတြက္ အဲဒီအထုပ္ေပၚမွာ Right Click ေပးၿပီး Extract Here လုပ္ပါ။

၆)Extra File ထုပ္ထဲမွ animated_favicon1 ကိုေရြးခ်ယ္ၿပီး အထက္မွာ ေျပာခဲ့တဲ့အတိုင္း မိမိစိတ္ႀကိဳက္ေနရာတစ္ခုမွာ Upload လုပ္ပါ။ရလာတဲ့ လင့္ခ္ကို ေကာ္ပီကူးၿပီးမွတ္သားထားပါ။

၇)ၿပီးလ်င္ အထက္တြင္ရွင္းၿပခဲ့သည့္အတိုင္း "URL of your icon file" ေနရာတြင္မိမိ FavIcon ရဲ့ လင့္ခ္ကိုအစားထိုးထည့္ပါ။
ထိုစာေၾကာင္းရွိ ' type='image/vnd.microsoft.icon' ဆိုေသာေနရာတြင္ ေအာက္ပါကုဒ္ျဖင့္ အစားထိုးပါ။

type='image/gif'

၈)Template ကို Save လုပ္ၿပီးလ်င္ အားလံုး Ready ျဖစ္ပါၿပီ။ မိမိဘေလာ့ဂ္အား ဘေရာက္ဇာ အသစ္တြင္ဖြင့္ၿပီး ေက်နပ္မႈရယူပါ။

(Blogging ကိုအခုမွ စတင္ထိေတြ႔သူမ်ားအတြက္ ရည္ရြယ္ၿပီး အေသးစိတ္ ေရးသားေပးထားတာ ျဖစ္ပါတယ္။ တစ္ကယ္လုပ္လ်င္(၂)မိနစ္ ေလာက္အတြင္း ၿပီးစီးသြားႏိုင္ပါတယ္ခင္ဗ်ား။)

Read More...
AddThis Social Bookmark Button

Blog Footer ကို (၃) ေကာ္လံ ခြဲျခင္း  

Contributor: ေမွာ္ဆရာ

မိမိဘေလာ့ဂ္ မွာ Footer ကို (၃) ေကာ္လံခြဲလိုက္ျခင္းအားျဖင့္ ထပ္ေဆာင္း Widget ေတြထည့္ဖို႔ အပိုေနရာေတြ ရရွိလာေစရံုမွ်မက၊ Blog ရဲ့ ဒီဇိုင္းကိုလည္း ယခုေနာက္ဆံုး Modern Web Design ေရးျခင္းမွာ အသံုးျပဳမႈအမ်ားဆံုးျဖစ္ေနတဲ့ Web 2.0 ပံုစံအျဖစ္ Upgrade လုပ္ၿပီးသားျဖစ္ေနပါလိမ့္မယ္။ ၎အျပင္ မိမိဘေလာ့ဂ္ ကို Page Loading လုပ္တဲ့ေနရာမွာ ျမန္ဆန္သြက္လက္လာေစျခင္း၊ စတဲ့ ထပ္ေဆာင္း အက်ိဳးေက်းဇူး ေတြကိုပါ ခံစားရဦးမွာပါ။

Blog Footer ကို (၃) ေကာ္လံခြဲဖို႔အတြက္ ေအာက္ပါအဆင့္မ်ားအတိုင္း လုပ္ေဆာင္နိဳင္ပါတယ္။


(၁) မိမိ Template ကို Backup ျပဳလုပ္ျခင္း

ဒါဟာ ဘေလာ့ဂၢါေကာင္း တစ္ေယာက္မွာ ရွိေနသင့္တဲ့ အေရးႀကီး အမူအက်င့္တစ္ခုပါပဲ။ ဘာျဖစ္လို႔လဲဆိုေတာ့ အကယ္၍ Backup လုပ္မထားခဲ့ရင္ မိမိ Template ကို ျပဳျပင္မႈလုပ္ရင္း မွားယြင္းမႈတစ္စံုတစ္ရာ ျဖစ္ပြားခဲ့ပါက အႀကီးအက်ယ္ မဟုတ္သည့္တိုင္၊ အနည္းအက်ဥ္းေတာ့ ဒုကၡေရာက္တတ္လို႔ပါပဲ။မိမိမွာ Backup လုပ္ထားတဲ့ Template ရွိခဲ့ရင္ေတာ့ မွားယြင္းသြားလ်င္ပင္ သက္ေတာင့္ သက္သာေျဖရွင္းနိဳင္ပါလိမ့္မယ္။ Edit HTML စာမ်က္ႏွာမွာ Download Full Template ကို ကလစ္ၿပီး Template XML ဖိုင္ကို ေဒါင္းလုဒ္ ျပဳလုပ္ထားလိုက္လ်င္ Template Backup လုပ္ျခင္းကိစၥၿပီးပါၿပီ။

(၂)Footer Section ရွိ ယခင္ Widget Contents မ်ားကို Backup ျပဳလုပ္ျခင္း

Blogger Dashboard မွတဆင့္ Layout ကိုသြားၿပီး၊ မိမိ Footer Section မွာယခင္ထည့္ထားတဲ့ Widget Content မ်ားအားလံုးကို Edit ကိုကလစ္၍ Copy လုပ္ကာ Notepad တစ္ခုခ်င္းစီႏွင့္ သိမ္းဆည္းထားပါ။ ၿပီးလ်င္ ၎ Footer Content မ်ားအားလံုးကို Remove လုပ္ပါ။ ဤသို႔မလုပ္လ်င္ Template အား Footer Section 3 -Columns ခြဲ၍ ရမည္မဟုတ္။ New Footer Section ေတြခြဲၿပီးသြားတဲ့ အခ်ိန္က်ေတာ့ အလြယ္တကူ အားလံုးကိုျပန္ထည့္နိဳင္ပါလိမ့္မယ္။ (ယခင္ကတည္းက Footer Section မွာ ဘာမွထည့္မထားတဲ့ သူမ်ားအေနနဲ႔ကေတာ့ ဒီအဆင့္ကို လုပ္ေဆာင္ရန္လိုမည္ မဟုတ္ပါ။)

(၃)Footer Section အတြက္ CSS(Cascading Style Sheets) တြင္ ျဖည့္စြက္ေၾကညာျခင္း

Blogger Dashboard မွ တဆင့္ Layout ကိုသြားၿပီး Edit HTML Box ထဲတြင္ "</b:skin>" ဆိုေသာ Tag ကိုေတြ႔ေအာင္ရွာပါ။ ၎ကို ေတြ႔သည္ႏွင့္ ထို Tag မတိုင္မွီ ေအာက္ပါကုဒ္မ်ားကို အေပၚမွ ေပါင္းထည့္ေပးပါ။

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}



(၄)ထပ္ေဆာင္းကုဒ္မ်ား Footer Section တြင္ထည့္သြင္းျခင္း

Blogger Dashboard မွတဆင့္ Layout->Template->Edit HTML ကိုသြားပါ။ ေအာက္ပါကုဒ္မ်ားကို ေတြ႔ေအာင္ရွာပါ။

<div id='footer-wrapper'>
<b:section class='footer-wrapper' id='footer'/>
</div>


အထက္ပါကုဒ္မ်ားကို ရွာေဖြရာမွာ မိမိရဲ့ Template ေပၚမူတည္ၿပီးေတာ့ အနည္းငယ္ကြဲလြဲမႈ ရွိေကာင္းရွိနိဳင္ပါတယ္။ ဥပမာ- 'footer-wrapper' အစား 'footer' ပဲျဖစ္ေနတာမ်ိဳးေတြရွိတတ္ပါတယ္။အားလံုးဟာ အတိအက် ေနရာတိုင္းမွာ မတူပဲကြဲျပားမႈ ရွိနိဳင္တယ္ဆို တာေလးကို မွတ္ထားဖို႔အတြက္ပါ။

၎ Footer Section ကိုေတြ႔ၿပီဆိုလ်င္ ကၽြန္ေတာ္တို႔လုပ္ဖို႔လိုတာကေတာ့ အနီႏွင့္ျပထားတဲ့ ကုဒ္မ်ားအားလံုးကို ေအာက္ပါကုဒ္မ်ားျဖင့္ အစားထိုးရန္ပါပဲ။

<div id='footer-column-container'>

<p>
<center><b>{ <i>YOUR TEXT</i> }</b></center>
<hr align='center' color='#cccccc' width='90%'/>
</p>


<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>


အထက္ပါကုဒ္မ်ားထဲမွာ အနီႏွင့္ေရးထားတဲ့ Your Text Here ဆိုတာကေတာ့ The Whole Footer Section ႀကီးတစ္ခုလံုးအတြက္ ေခါင္းစဥ္တပ္ထားေပးျခင္းျဖစ္၍ မိမိႀကိဳက္ႏွစ္သက္ရာ နာမည္တစ္ခုခုေပးနိဳင္ပါတယ္။
အားလံုးၿပီးတာနဲ႔ မိမိ Template ကို Save လုပ္နိဳင္ပါၿပီ။ Blog View တြင္ Footer Section ကို (၃) ေကာ္လံျဖင့္ေပၚေနတာကို ေတြ႔ရပါလိမ့္မယ္။ Layout ထဲကို သြားၿပီး ႀကိဳက္နွစ္သက္ရာ Widget Contents မ်ားထပ္ေဆာင္းေပါင္းထည့္နိဳင္ပါၿပီ။



အကယ္၍ Footer Section ကိုပိုင္းျခားထားေသာ ေရျပင္ညီမ်ဥ္းအေရာင္ကို မိမိဘေလာ့ႏွင့္လိုက္ဖက္ညီေအာင္ေျပာင္းလဲလိုပါက ေအာက္ပါကုဒ္ကို ေတြ႔ေအာင္ရွာၿပီး အနီျပထားေသာ ကာလာကုဒ္ ကိုစိတ္ႀကိဳက္ေျပာင္းလဲသတ္မွတ္နိဳင္ပါတယ္။

<hr align='center' color='#5d5d54' width='90%'/></p>

ကာလာကုဒ္ေတြကို အတိအက်နဲ႔ အလြယ္တကူ သိခ်င္တယ္ဆိုရင္ေတာ့ ဒီေဆာ့ဖ္၀ဲလ္ ေလးက ကူညီနိဳင္ပါလိမ့္မယ္ခင္ဗ်ား။ ၎မ်ဥ္း ပါရွိတာကုိပင္ မလိုလားဘူးဆိုပါကလည္း အထက္ပါ စာေၾကာင္းတစ္ေၾကာင္းလံုးကို Delete လုပ္လိုက္ရံုသာျဖစ္ပါတယ္။

Sources: BLogU | BloggerBuster

Technorati Tags: | | | | |

Read More...
AddThis Social Bookmark Button