နိုင္ငံတကာနွင့္ ျပည္တြင္းသတင္း၊ နည္းပညာ၊ ေဆာ့ဝဲလ္ႏွင့္ ဗဟုသုတမ်ား

အားေပးၾကတဲ့မိတ္ေဆြမ်ား

Showing posts with label Header. Show all posts
Showing posts with label Header. Show all posts

Monday, January 28, 2013

Blogger Header In Two Parts or Sections




ဒီတခါေတာ့ အေပၚမွာျပထားတဲ့ ပုံေလးထဲကအတိုင္း မိမိရဲ႕ဘေလာ့ဂ္ Header ကို ႏွစ္ပိုင္းခဲြထားခ်င္ၾကတဲ့ ဘေလာ့ဂ္ပိုင္႐ွင္မ်ားအတြက္ လုပ္နည္းေလးႏွင့္ ကုဒ္မ်ားထည့္နည္းေလးပါ။

ဒီေအာက္ကပံုေလးကေတာ့ မျပဳလုပ္ခင္ ျမင္ရတဲ့ မူလပုံကေလးပါ။


Blogger home Page ကိုသြားပါ။
Termplate ကို ကလစ္ပါ။
သင့္ Template ကို Backup အရင္လုပ္ပါ။
Expand widget Templates စာေ႐့ႇကအကြက္တြင္ အမွန္ျခစ္ေလးထည့္ေပးပါ။
ၿပီးရင္ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္အုပ္စုကို႐ွာပါ။

/* Header
----------- */

#header-wrapper { 
  width:960px; 
  margin:0 auto 10px; 
  border:1px solid $bordercolor; 
  }
#header-inner { 
  background-position: center; 
  margin-left: auto; 
  margin-right: auto; 
}
#header { 
  margin: 5px; 
  border: 1px solid $bordercolor; 
  text-align: center; 
  color:$pagetitlecolor; 
}
#header h1 { 
  margin:5px 5px 0; 
  padding:15px 20px .25em; 
  line-height:1.2em; 
  text-transform:uppercase; 
  letter-spacing:.2em; 
  font: $pagetitlefont; 
}
#header a { 
  color:$pagetitlecolor; 
  text-decoration:none; 
  }
#header a:hover { 
  color:$pagetitlecolor; 
  }
#header .description { 
  margin:0 5px 5px; 
  padding:0 20px 15px; 
  max-width:700px; 
  text-transform:uppercase; 
  letter-spacing:.2em; 
  line-height: 1.4em; 
  font: $descriptionfont; 
  color: $descriptioncolor; 
}
#header img { 
  margin-$startSide: auto; 
  margin-$endSide: auto; 
}


ေတြ႔ရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္အုပ္စုနဲ႔ လဲေပးလိုက္ပါ။

/*------Header-----*/ 
#header-wrapper{ 
    width: 960px; 
    color: #000; 
    margin: 30px auto 0; 
    padding: 0px; 
    overflow: hidden; 
} 
#header-inner { 
    background-position: left; 
    background-repeat: no; 
} 
.headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited { 
    color: #BF0100; 
    font-size: 36px; 
    font-family: 'Ultra', serif, Arial; 
    font-weight: bold; 
    margin: 0; 
    padding: 0px 0 5px 0; 
    text-decoration: none; 
    text-shadow: 6px 6px 4px #ccc; 
    line-height:1.2em; 
}
.headerleft h3 { 
    font-family: arial, tahoma,  Sans-Serif; 
    font-weight: normal; 
    margin: 0; 
    padding: 0; 
}
.headerleft .description { 
    color: #3B3B3B; 
    font:bold 12px Helvetica, arial,  sans-serif; 
    margin: 0px; 
    padding: 0 0 20px 0; 
    text-shadow: 4px 4px 6px #ccc; 
}

.headerleft { 
    width: 450px; 
    float: left; 
    margin: 0; 
    padding: 0; 
    height:80px; 
} 
.headerright { 
    width: 468px; 
    height:80px; 
    float: right; 
    margin: 0px; 
    padding:1px 0 0 0; 
         
}



ေသျခာၿပီဆိုရင္ အရင္ Save ထားႏိုင္ပါတယ္။

ၿပီးရင္ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို ထပ္႐ွာပါ။


<div id='header-wrapper'> 
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 


တခ်ဳိ႕ Template ေတြမွာေတာ့ ေအာက္ကကုဒ္ ပုံစံမ်ဳိးပါ။

<div class='region-inner header-inner'>
      <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>


မွတ္ခ်က္။။ အတိအက် တူရမယ္လို႔မဆိုလိုပါဘူး၊ ဆင္တူ႐ိုးမွားေလးေတြမို႔ သတိထားေစခ်င္ပါတယ္။

ေတြ႔ၿပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြနဲ႔ လဲထည့္ေပးလိုက္ပါ။

ဒီေနရာမွာ အထူးသတိထားရမွာကေတာ့ မူလ Template ထဲမွာ႐ွိေနတဲ့ <b:section> အစမွ </b:section> အဆုံးထိ ကုဒ္ေတြဟာ အခုထည့္မည့္ ကုဒ္ေတြထက္မ်ားေနတတ္ပါတယ္။

အဲဒီ မူလ Template ထဲမွာ႐ွိေနတဲ့ <b:section> အစမွ </b:section> အဆုံးထိ
ကို ဖယ္ပစ္ၿပီး ေအာက္မွာေပးထားတဲ့ ကုဒ္ကိုထည့္ပါ။

အတိအက်လဲေပးရမွာပါ။

<div id='header-wrapper'> 
<div class='headerleft'> 
      <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='The MBT Lab (Header)' type='Header'/> 
</b:section> 
</div>
</div>
<div class='headerright'> 
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'> 
</b:section> 
</div>


Customization ေအာက္မွာျပဳျပင္ႏိုင္တာေလးေတြျပထားပါတယ္။

To adjust header width edit: 960px Header ႏွစ္ခုေပါင္းရဲ႕ အက်ဥ္းအက်ယ္
To change Header Title colour change:#BF0100 Blog ေခါင္းစဥ္နဖူးစီးစာအေရာင္
To change Header description colour then change:#3B3B3B ေခါင္းစဥ္ေအာက္ကစာ

အားလုံးၿပီးရင္ Save လိုက္ၿပီး မိမိ Blog ရဲ႕ Layout page ကိုဖြင့္ဲၾကည့္လိုက္ရင္ ေအာက္ကပုံအတိုင္း
ျမင္ၾကရမွာပါ။


ေပ်ာ္႐ႊင္ၾကပါေစဗ်ာ...။
Read More »