Saturday, March 19, 2016

Blog နှင့် Website ဖန်တီးခြင်း (၇)

         သင်ခန်းစာ(၇)       

            Post တင်ခြင်း

            Post တွင် ဓာတ်ပုံ နှင့် ဗွီဒီယို ထည့်သွင်းခြင်း


Post တွင် ဓာတ်ပုံနှင့်ဗွီဒီယို ထည့်သွင်းရန် နည်းလမ်း ၂ သွယ်ရှိသည်။

(1) Upload တင် ခြင်း နှင့် (2) Html code ဖြင့် ထည့်သွင်းခြင်းတို့ဖြစ်သည်။

(1)Upload တင် ခြင်း

 Post တွင် စာသားများတင်နည်း၊ဓာတ်ပုံနှင့်ဗွီဒီယိုတို့ကို Upload တင် ခြင်း နှင့် ပတ်သက်၍

သင်ခန်းစာ(၁)တွင်အသေးစိတ်ရှင်းပြပြီးဖြစ်ပါသည်။


သင်ခန်းစာ(၁) ကိုဤနေရာတွင်ပြန်ကြည့်ပါ။>>https://ayemindawei.blogspot.com/2016/03/blog-website.html


(2) Html code ဖြင့် ထည့်သွင်းခြင်း

 - တခါခါ အင်တာနက်လိုင်းအလွန်နှေးသောအခါ ဓာတ်ပုံ နှင့် ဗွီဒီယို ကို Upload တင်၍မဖြစ်နိုင်ပါ။ မိမိအနေဖြင့်အရေးတကြီးဖော်ပြဖို့လိုအပ်လျှင် တိုက်ရိုက်ကော်ပီယူ၍

ခရက်ဒစ်ပေးကာ ဖော်ပြလိုက်ရသည့်အခြေအနေများရှိတတ်သည်။

ဓာတ်ပုံများကို Copy ယူ၍ မိမိထည့်လိုသည့်နေရာတွင် Paste လုပ်လိုက်ယုံသာဖြစ်သည်။

ဤနည်းသည် မိမိBlogပေါ်တွင်ပြန်ကြည့်သည့်အခါ ဓာတ်ပုံအရွယ်အစားမှာ အလွန်သေးငယ်နေခြင်း သို့မဟုတ် အလွန်ကြီးလွန်းနေခြင်းစသော  အဆင်မပြေမှုများနှင်ကြုံရတတ်သည်။

 Video များကိုမူ Copy>>Paste လုပ်၍မရပါ ။ သို့အတွက် ဓာတ်ပုံ နှင့် ဗွီဒီယို ကို Html code ဖြင့် ထည့်သွင်းခြင်း နည်းဖြင့်သာသင်ကြားပြသပေးပါမည်။

ကဲ..စကြရအောင်..


(i)ဓာတ်ပုံကို Html code ဖြင့် ထည့်သွင်းခြင်း

တခြား blog သို့မဟုတ် Website မှ မိမိထည့်သွင်းလိုသည့် ဓာတ်ပုံ၏ Direct Link ကို ယူပါ ။
ဥပမာအနေဖြင့် Facebook စာမျက်နှာမှ ဓာတ်ပုံ ၏ Direct Link ယူပုံကိုပြပါမည်။
- မိမိလိုအပ်သည့် ဓာတ်ပုံကို ကလစ်ပါ ။


  ဓာတ်ပုံပေါ်တွင် “ဘယ်ကလစ်”ကို နှိပ်၍ Copy Image Location
   ကို နှိပ်မည်။

ပြီးလျှင် Notepad ပေါ်တွင် ကော်ပီလုပ်(Ctrl+V) ။ ပြီးလျှင်အောက်ပါပုံစံအတိုင်း Html codeကိုရေးပါမည်။

<img src="Link of image" width="No" border="0" ><br>

မှတ်ချက် - အပြာရောင်စာလုံးနေရာတွင်သာပြောင်းလဲမှုရှိသည်။ကျန်စာလုံးနှင့်သင်္ကေတ တို့မှာပုံသေဖြစ်သည်။ 

ဓာတ်ပုံမှကူးယူလာသော Link မှာ “https://scontent-sit4-1.xx.fbcdn.net/hphotos-ash2/v/t1.0-9/1794816_903886283008461_8577648375865115028_n.jpg?oh=
e0169b8691ea6afa4b8133f3789fc771&oe=5790935F” ဖြစ်ပါသည်။
  ၎င်းLink ကို အထက်က Code ပုံစံမှ  Link of image နေရာတွင်အစားထိုးမည်။ No နေရာတွင် 550 ကိုအစားထိုးမည်။ ဒီလိုပါ။
 <img src="https://scontent-sit4-1.xx.fbcdn.net/hphotos-ash2/v/t1.0-9/1794816_903886283008461_8577648375865115028_n.jpg?oh=
e0169b8691ea6afa4b8133f3789fc771&oe=5790935F"width="550"><br>

 Notepad ပေါ်တွင်ရေးထားသောပုံစံကိုကြည့်ပါ။
 
Notepad ပေါ်တွင် code ရေးပြီးသောအခါ  Select (Ctrl+A) လုပ်ပြီး Copy(Ctrl+C) ယူပါမည်။
ပြီးလျှင် Post တင်မည့် New post သို့ပြန်သွားမည်။ ဦး စွာ HTML Tag ကို
   HTML    ကလစ်(နှိပ်ပါ) ။ ပြီးမှ Notepad ပေါ်မှ Copy ယူလာသော code ကို Paste (Ctrl+V) လုပ်ပါမည်။


          ပြီးလျှင်    Compose      ကို နှိပ်ပြီး မိမိထည့်သွင်းထားသောပုံကိုပြန်ကြည့်မည်။
ဒီလိုလေးပေါ်လာပါမည်။
ဓာတ်ပုံ အရွယ်အစားကိုမကြိုက်သေးလျှင် ၎င်းမိမိထည့်လိုက်သော ဓာတ်ပုံပေါ်တွင် ကလစ် တစ်ချက်နှိပ်လိုက်ပါ ။အပြာရောင်စာတန်းလေး ဒီလိုပေါ်လာပါမယ်။
မိမိလိုချင်တဲ့အရွယ်အစား Small - Medium - Large -  X-Large - Original size တစ်ခုကို ရွေးချယ်ပါ။
အားလုံးပြီးပြိဆိုမှ    Publish   ကိုနှိပ်မည်။
ဤတွင် Html code ဖြင့် ဓာတ်ပုံထည့်သွင်းနည်းပြီးပါပြီ။

(ii)  Video ကို Html code ဖြင့် ထည့်သွင်းခြင်း
     
   Video ကို Copy>>Paste လုပ်၍မရပါ။ Embed code ဖြင့်သာ ထည့် သွင်းရပါသည်။
 You Tube  မှ video file တစ်ခုကို ထည့်သွင့်ပြပါမည်။
  Video ယူရန် https://www.youtube.com/  သို့ဝင်ပါမည်။
မိမိထည့်သွင်းလိုသည့် ဗွီဒီယိုကိုဖွင့်ပါ ။

Share ကိုနှိပ်ပါ ။
Embed ကို နှိပ်လိုက်သောအခါ အောက်ပါအတိုင်း Embed code ပေါ်လာပါမည်။

၎င်း code ကို Copy(Ctrl+C) ယူပါမည်။
ပြီးလျှင် Post တင်မည့် New post သို့ပြန်သွားမည်။ ဦး စွာ HTML Tag ကို
   HTML    ကလစ်(နှိပ်ပါ) ။ ပြီးမှ Copy ယူလာသော code ကို Paste (Ctrl+V) လုပ်ပါမည်။

ပြီးလျှင်    Compose      ကို နှိပ်ပြီး မိမိထည့်သွင်းထားသောvideo ကိုပြန်ကြည့်မည်။
ဒီလိုလေးပေါ်လာပါမည်။
 အရွယ်အစားကို မူ width နှင့် height တို့တွင်ပြင်ယူနိုင်သည်။ မူရင်း Embed code မှ
<iframe width="640" height="360" src="https://www.youtube.com/embed/xgsfvC3iuik" frameborder="0" allowfullscreen></iframe>
အကျယ်  width ကို width="400" width="450" width="500" width="600" စသည်ဖြင့်ပြင်ဆင်နိုင်သလို ့ height ကိုလည်းပြင်နိုင်ပါသည်။

အားလုံးပြီးပြိဆိုမှ    Publish   ကိုနှိပ်မည်။
ဤတွင် Html code ဖြင့် Video ထည့်သွင်းနည်းပြီးပါပြီ။

*မိမိကိုယ်တိုင် Html code များကို ရေးတတ်အောင် လေ့လာမည်ဆိုပါက
ဒီနေရာမှာ ဝင်ဖတ်ပါ >>https://ayemindawei.blogspot.com/search/label/HTML%20%26%20CSS>>

***ဤတွင် အခြေခံ Blog တည်ဆောက် ရေးသားခြင်းပြီးဆုံးပါပြီ ။
အားလုံးအဆင်ပြေကြပါစေ။ကျန်းမာ ချမ်းသာ လန်းဖြာ ကြပါစေ။****

                            လွင့်မောင်မောင်(ထားဝယ်)
                            20- 3- 2016  2:50 PM

Friday, March 18, 2016

Blog နှင့် Website ဖန်တီးခြင်း (၆)

         သင်ခန်းစာ(၆)       


Blog ကိုတန်ဆာဆင်ခြင်း (သို့မဟုတ်) Sidebar တွင် widgets နှင့် Gadget များထည့်သွင်းခြင်း

==================================================

Blog တစ်ခုကိုတည်ဆောက်ပြီး လျှင် မိမိBlog တွင် ပြက္ခဒိန်၊နာရီ၊နိုင်ငံတကာငွေဈေး၊ရွှေဈေးမိုးလေဝသ

မိမိနှစ်သက်သော တခြားသောwebsite , blog တို့ကို Link ပေးခြင်း ၊ ကြော်ငြာများထည့်သွင်းပြုလုပ်နိုင်ရန်သင်ခန်ဤးစာကိုတင်ဆက်ပါသည်။ သင်ခန်းစာ(၅) နှင့်လုပ်ဆောင်ပုံခြင်းတူပြီးထည့်သွင်းမည့်နေရာသာ ခြားနားသဖြင့်  သင်ခန်းစာ(၅)ကို လေ့ကျင့်ပြီးသူများအတွက်အခက်ခဲရှိမည်မဟုတ်ပါ။ ကဲစကြရအောင်။


(၁) Sidebar တွင် Gadget များထည့်သွင်းခြင်း

      ပထမဦးစွာအရင်သင်ခန်းစာများကကဲ့သို့ Blogger Deshboard >> Layout သို့ဝင်ပါ။

ပုံ(၁)


မိမိယူထားသော Template နှင့် sidebar အရေအတွက်အတိုင်း ပေါ်ပါမည်။ ပုံတွင် ယူထားသော
Template က ကော်လံ ၃ခု နှင့် sidebar ကို ဘယ်/ညာချထားခြင်းကြောင့်  sidebar၂ခုကိုတွေ့ရမည်ဖြစ်သည်။
ယခု ညာဖက် sidebar သို့ Gadget ထည့်သွင်းခြင်းကိုပြပါမည်။
ပုံ(၂)Layout ၏ ညာဖက်မှာကြည့်ပါAdd a Gadget ကို ကလစ်ပါ။ အောက်ပုံအတိုင်းပေါ်လာမည်။                       

ပံု(၃)
မိမိထည့်သွင်းမည် Gadget ၏ ညာဘက်  ကို နှိပ်ပါ။

HTML/Java Script မှလွဲ၍ ကျန်Gadget များသည် Blogger မှပေးသော Ready made များဖြစ်သဖြင့်
မိမိဖာသာတစ်ခုပြီးတစ်ခုထည့်သွင်းကြည့်ပြီး မလိုလျှင်ပြန်ဖြုတ်ပါ။
ပြန်ဖြုတ်မည်ဆိုလျှင် Edit >> Remove လုပ်ပါ။

 (၂) HTML/Java Script မှ widgets များထည့်သွင်းခြင်း

 - Layout ရှိ Sidebar မှ Add a Gadget ကို ကလစ်လျှင် ပုံ(၃)အတိုင်းပေါ်လာမည်။
 - ပုံ(၃)တွင်HTML/Java Script ပေါင်းထည့်ရန်   +  ကို နှိပ်ပါ။အောက်ပါအတိုင်းပေါ်လာမည်။
  ၎င်း box ၏ Title နေရာတွင် မိမိထည့်သွင်းမည့် Code နှင့်ပတ်သက်သည့် ခေါင်းစဉ်တပ်မည်။
  မည်သည့်အရာမှမရေးဘဲ ဒီအတိုင်းblank ထားလျှင်လည်းရ၏။
 - Contant အကွက်ထဲတွင်  Code များကိုထည့်သွင်းပါမည်။ ပြီးလျှင်     Save     မည် ။
   View Blog ကိုကလစ်ပြီးမိမိထည့်သွင်းထားသော widget ကိုပြန်ကြည့်မည်။

ပံု (၄)
 ဥပမာ -အနေဖြင့် နာရီ (Clock widget) ကိုထည့်သွင်းပြပါမည်။
  Clock widget ၏ Html code ကိုယူရ် http://100widgets.com/best_widget_en.html  သို့ဝင်မည်။ မိမိနှစ်သက်ရာ နာရီ ၊ ပြက္ခဒိန်ပုံစံကို ရွေးချယ်ပါ။ ကျနော်ကတော့ နာရီ + ပြက္ခဒိန်
 တွဲနေတဲ့ပုံစံကိုယူလိုက်ပါတယ်။
မိမိရွေးချယ်ထားတဲ့ ပုံစံမှ   Get code    ကို နှိပ်ပြီး Embed code ကိုယူပါမယ်။

  Embed code ကို Copy ယူပြီး ပုံ (၄) မှ Contant အကွက်ထဲသို့ ကူးယူ(Paste)ပါမယ်။အောက်တွင်ကြည့်ပါ။ Title ကွက်တွင် “ မြန်မာစံတော်ချိန်” ဟုရေးသွင်းလိုက်ပါသည်။


ပြီးလျှင်     Save     မည်။
   View Blog ကိုကလစ်ပြီးမိမိထည့်သွင်းထားသော widget ကိုပြန်ကြည့်မည်။ဤသို့ပေါ်လာပါမည်။

 Widget များကို အောက်ပါနေရာများတွင်ရနိုင်ပါသည်။

http://100widgets.com
http://localtimes.info/
http://widgetscode.com/
http://widgetscode.com/calendar-clock-widgets
https://www.theedublogger.com/2015/04/01/widgets/

ဆက်လက်ဖော်ပြပါမည်။