kp3နည္းပညာ၊၂၂၂၊ဘေလာ့မွာThree Column Footer အသစ္ထည့္နည္း

ဒါေလးကေတာ့ဘေလာ့မွာ Three Column Footer အသစ္ထည့္နည္းေလးပါ။အခုေနာက္ပိုင္း Tamplateေတြက ေတာ့ Three Column Footer က Auto ပါလာတာမ်ားပါတယ္။ ဒါေပမယ့္မပါတာကပိုမ်ားပါတယ္။ အခုဟာေလးက Css Code နဲ႕ဆိုေတာ့ပိုျပီးလွသလိုၾကိဳက္သလိုလည္းျပန္ေျပာင္းလို႕ရပါတယ္။ေအာက္မွာ
Three Column Footer ထည့္နည္းအေဟာင္းကို kp3နည္းပညာ၊၅ဝ၊မွာရွိပါတယ္။ 4-Columns ထည့္နည္းက kp3နည္းပညာ၊၁၂၅၊ရိွပါတယ္။ၾကိဳက္တာယူသံုးၾကေပါ့ေနာ္-ေအာက္မွာထည့္နည္းနဲ႕တကြပံု

၁။Layout

၂။Edit HTML ( Template ကို Back Up )လုပ္ေပးပါ။

၃။ေအာက္က Code ကိုရွာပါ။

]]></b:skin>

ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
} 
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; 
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

၄။ေအာက္က Code ကိုထပ္ရွာပါ။

</body> 

ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

၆။Save Tamplate ကိုႏိုပ္လုိက္ပါ။ ျပီးပါျပီ။။မိမိရဲ့ Tamplate Footer ျပန္ၾကည့္လိုက္ပါလွလွေလးေတြ႕ရပါလိမ့္မည္။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္

Related Post

BLOGGER TIPS

• Kp3နည္းပညာ၊၄၉ဝ၊ဘေလာ့ Tamplate ေျပာင္းနည္း
• Kp3နည္းပညာ၊၄၈၈၊ဘေလာ့မွာPopularPostsကိုSlideပံုစံေျပာင္းနည္း
• Kp3နည္းပညာ၊၄၈၄၊ဘေလာ့ေျခရင္းကPowered by Bloggerဆိုတာေလးအစားထိုးနည္း
• Kp3နည္းပညာ၊၄၈၁၊ဘေလာ့ဆိုက္ဘားနဲ႕ပိုစ္Bodyကိုဘယ္ညာေျပာင္းနည္း
• Kp3နည္းပညာ၊၄၇၈၊ဘေလာ့CommentsFormကိုအလယ္မွာထားနည္း
• Kp3နည္းပညာ၊၄၇၇၊ဘေလာ့ပိုစ္မွာDemoလင့္ခ္ေတြကိုလင့္ခ္ထည့္နည္း
• Kp3နည္းပညာ၊၄၇၄၊ဘေလာ့ပိုစ္ေတြကိုသူမ်ားဖတ္မရေအာင္ေသာ့ခတ္နည္း
• Kp3နည္းပညာ၊၄၆၈၊ဘေလာ့လင့္ခ္ေတြေထာက္ရင္ၾကယ္ပံုေလးေတြေပၚေအာင္လုပ္နည္း
• Kp3နည္းပညာ၊၄၆၆၊HTML Code မလိုဘဲဘေလာ့မွာ Favicon ထည့္နည္း
• Kp3နည္းပညာ၊၄၆၅။ဘေလာ့ဂါသမားေတြအတြက္အသံုးဝင္တဲ့အခမဲ့ Tools မ်ား
• Kp3နည္းပညာ၊၄၆၄။ဘေလာ့ထဲမွာYoutube သီခ်င္းေတြကို AutoPlay လုပ္နည္း
• Kp3နည္းပညာ၊၄၆၃။ဘေလာ့ထဲမွာYoutube သီခ်င္းေတြကိုလြယ္ကူစြာထည့္နည္း
• Kp3နည္းပညာ၊၄၅၈။ဘေလာ့ Comment Box ကေန၇ာလြတ္ၾကီးကိုျဖဳတ္နည္း
• Kp3နည္းပညာ၊၄၅၆။ပိုစ္ေခါင္းစဥ္ေအာက္မွာAuthor,အခ်ိန္,LabelsIconထားနည္း
• Kp3နည္းပညာ၊၄၄၈။ဘေလာ့မွာ Labels ေတြကို Animated Effect လုပ္နည္း
• Kp3နည္းပညာ၊၄၄၇။ဘေလာ့မွာSimple Print Friendly နဲ႕ PDF Buttons ေလးထားခ်င္ရင္
• Kp3နည္းပညာ၊၄၄၄၊။ဘေလာ့ဂါ Officer ရဲ႕ဝန္ေဆာင္မူနည္းပညာသစ္Dynamic Views ၅ခု
• Kp3နည္းပညာ၊၄၄၁၊Kp3နည္းပညာသစ္မိမိရဲ႕ဘေလာ့ပိုစ္ေတြကိုCopyမရေအာင္ကာကြယ္နည္း
• Kp3နည္းပညာ၊၄၄ဝ၊Kp-3နည္းပညာသစ္မိမိရဲ႕ဘေလာ့ Tamplate ကိုေဘာင္ခတ္နည္း
• Kp3နည္းပညာ၊၄၃၈၊ဘေလာ့အတြက္Email Feedburner Subscription Widget အသစ္
• Kp3နည္းပညာ၊၄၃၇၊ဘေလာ့ Comment Form အေပၚမွာမွတ္ခ်က္ေလးထည့္ခ်င္ရင္
• Kp3နည္းပညာ၊၄၂၉၊ဘေလာ့ေဖာင့္ေတြကို Zawgyi-One နဲ႕ Unicode အျဖင့္လြယ္ကူစြာေျပာင္းခ်င္ရင္
• Kp3နည္းပညာ၊၄၁၇၊ဘေလာ့မွာလံုးဝမေမ်ာ္လင့္တဲ့ Site Feed ျပႆနာ
• Kp3နည္းပညာ၊၄၁၅၊ဘေလာ့မွာ Labels လို႕ေခၚတဲ့ပိုစ္အမ်ိဳးအစားထည့္နည္း
• Kp3နည္းပညာ၊၄၁၄၊ဘေလာ့ Home Page မွာ Widget ေတြကိုမေပၚေစခ်င္ရင္

FOOSTER

Posted in: BLOGGER TIPS, FOOSTER