Saturday, January 3, 2015

ဘလော့ကာ ဆိုဒ်ဘား အတွက် အလှတင်ရန် ( လန်းတယ် )

အားလုံးမင်္ဂလာပါနော်  သည်နေ့တင်မဲ့ နည်းလမ်းလေးကတော့  ဘလော့ကာများအတွက် ဆိုဒ်ဘားမှာ

ဒီဇိုင်းလန်းလန်းလေးနဲ့  အလှဆင်ဖို့ နည်းလမ်းသစ်လေးတစ်ခုပါ...သည်နည်းလမ်းလေးကို  မိမိတို့ စိတ်ကူးရှိ သလိုသုံးဆွဲနိုင်ပါတယ်... ကျွန်တော် ခု နမူနာအနေနဲ့ တင်ပြပေးမှာကတော့  ဆိုဒ်ဘားမှာ ကျွန်တော် ပိုင်ဆိုင်တဲ့ ဘလော့လေးတွေကို ညွှန်ပြတဲ့  ပုံစံလေးနဲ့  ရှင်းပြပေးသွားပါမယ်......
အောက်မှာ လိုအပ်တဲ့ ကုဒ်တွေနဲ့အတူ နည်းလမ်းကိုပါ သေခြာ ပုံလေးနဲ့ ရှင်းပြသွားပါမယ်...နော်

အဆင့်   (၁)   

►1-  Blogger Singin ဝင်လိုက်ပါ။
►2-  Dashboard  ကိုသွားလိုက်ပါ။

►3-  Template    ကိုကလစ်ပါ..။
►4-  Edit  Html   ကိုဝင်ပါ..
►5- Ctrl+F  (သို့မဟုတ်) F3  အကူညီဖြင့် ပေးထားတဲ့ ကုဒ်ကို ရှာလိုက်ပါ။

</head>   သည်ကုဒ်လေးကို ထည့်ရှာလိုက်ပါ... တွေ့ပြီဆိုတာနဲ့ အောက်ကဇယားနဲကပေးထားတဲ့
                ကုဒ်တွေကို  သူ့ရဲ့အပေါ်ကနေ ကပ်ထည့်ပေးလိုက်ပါနော်....


                       <style>.module h2 {   background-color: #D5D5D5;   border-radius: 20px 0 0 20px;   color: #FFFFFF;   font-family: Verdana;   font-size: 14px;   line-height: 32px;   margin: 0;   padding: 0 0 0 20px;   text-shadow: 2px 1px 1px #222; }  .module h2 a {     border-left: 5px solid #ffffff;     color: #101921;     float: right;     font-size: 14px;     text-decoration: none;     text-shadow: none;     padding: 0 10px;     position: relative;    -moz-transition: padding 0.1s linear;    -webkit-transition: padding 0.1s linear;    -ms-transition: padding 0.1s linear;    -o-transition: padding 0.1s linear; } .module h2 a:hover {   padding: 0 32px; }  .module h2 a:before, .module h2 a:after {     content: "";     height: 0;     position: absolute;     top: 50%;     width: 0; } .module h2 a:before {     border-bottom: 8px solid transparent;     border-right: 8px solid #ffffff;     border-top: 8px solid transparent;     left: -12px;     margin-top: -8px; } .module h2 a:after {     border-bottom: 6px solid transparent;     border-top: 6px solid transparent;     left: -6px;     margin-top: -6px; }  .module.blue h2 a {background-color: #A2D5EC;} .module.blue h2 a:hover {background-color: #C5F0FF;} .module.blue h2 a:after {border-right: 6px solid #A2D5EC;} .module.blue h2 a:hover:after {border-right-color: #C5F0FF;}  .module.yellow h2 a {background-color: #FCE98D;} .module.yellow h2 a:hover {background-color: #FFD700;} .module.yellow h2 a:after {border-right: 6px solid #FCE98D;} .module.yellow h2 a:hover:after {border-right-color: #FFD700;}  .module.green h2 a {background-color: #bada55;} .module.green h2 a:hover {background: #C7E176;} .module.green h2 a:after {border-right: 6px solid #bada55;} .module.green h2 a:hover:after {border-right-color: #C7E176;}  .module.red h2 a {background-color: #F0A5B5;} .module.red h2 a:hover {background-color: #FFC7D2;} .module.red h2 a:after {border-right: 6px solid #F0A5B5;} .module.red h2 a:hover:after {border-right-color: #FFC7D2;} </style>

အိုကေ...ကုဒ်တွေ ထည့်ပြီးတာနဲ့  save template ကိုရဲရဲဆေ့လိုက်ပါ... လက်တွေ့စမ်းသတ်ထားလို့
အာမခံပါတယ်နော်.... ကုဒ်ထည့်တာတော့ မှန်ဖို့လိုပါတယ်.... အိုခေ...

အဆင့်  (၂)

   ►1.  Login လုပ်လိုက်ပါ ဘလော့ကာကို
   ►2.  Layout ကိုကလစ်ရပါ့မယ် မိမိတို့  Dashboard ကနေပေါ့
   ►3.  Add a Gadget ကိုကလစ်ပေးလိုက်ပါ
   ►4.  HTML/Javascript. ကိုကလစ်ပြီး ကျလာတဲ့ ဘောက်လေးထဲမှာဘဲ
   ►5.  အောက်ကပေးထားတဲ့ ကုဒ်တွေကို ကော်ပီယူ ထည့်လိုက်ပါ


 

 အောက်ကကုဒ်တွေကို ပြင်ဆင်တဲံအခါ အပေါ်က နမူနာ ပုံလေးနဲ့ စာကြည့်လိုက်ပါနော်.....
<div class="module blue">
<h2>ခေါင်းစဉ် <a href="Link URL">ကလစ်ပါ</a></h2>
</div>

<div class="module yellow">
<h2>ခေါင်းစဉ် <a href="Link URL">ကလစ်ပါ</a></h2>
</div>

<div class="module green">
<h2>ခေါင်းစဉ် <a href="Link URL">ကလစ်ပါ</a></h2>
</div>
အိုကေ..အပေါ်ကကုဒ်တွေကို  ထည့်ပြီဆိုတာနဲ့ လိုအပ်တဲ့ ပြင်ဆင်ချက်တွေ လုပ်ပါမယ်......
 (၁) ခေါင်းစဉ်ဆိုတဲ့ နေရာမှာ  ကျနော် နမူနာပြထားတာက  ဘလော့အမည်တွေပေါ့..
 (၂) link URL ကတော့ မိမိညွှန်ပြလိုတဲ့  ဘလော့(သို့)အခြား   စသဖြင့်  လိပ်စာ ထည့်ပေးရပါမယ်
 (၃) ကလစ်ပါ   ဆိုတဲ့နေရာမှာလဲ နှစ်သက်တာ ထည့်ပေးပါ  သူကတော့ ကိုယ်ညွှန်တဲ့နေရာ သွားဖို့
      မောက်ထောက်ကလစ်ရမဲ့နေရာပါ...
                 ............ကုဒ်များကို လိုသလောက်  ပွါးနိုင်ပါတယ်နော်..... ....

မှတ်ချက်.... ဘလော့ကိုမှ မဟုတ်ပါ  တခြားဆော့ဝဲလ် ဒေါင်းဖို့  မိတ်တွေဘလော့တွေ  စသဖြင့် လိုအပ်သလို  မိမိတို့ အသုံးပြုနိုင်ပါကြောင်းးးးးးးးးးးးး

No comments:

Post a Comment