Blogger လူသစ္မ်ားအတြက္ Animated စာလံုးမ်ားႏွင့္ HTML ကုဒ္ေဘာက္စ္ကို Blog မွာထည့္နည္း

  

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

  

7 May 13, 09:41 PM
ကုိနုိင္လင္း: ကုိလြင္မင္းဗိုလ္ ခင္ဗ်ာ ကုိယ္ရဲ့ဆုိဒ္ကုိ ညႊန္းခ်င္ရင္ ကုဒ္လို့ ပုံေလးနဲ့တင္ထားတာကုိ ေအာက္မွာ BOX ကေလး နဲ့ အေပၚမွာ ကုိယ္ညႊန္းတဲ့ပုံေလးျဖစ္ေအာင္ ဘယ္လိုမ်ား လုပ္ထားပါသလဲခင္ဗ်ာ

ဒီေမးခြန္းေလးကေတာ့ နည္းနည္းၾကာသြားပါျပီ..။ ဒီလိုလုပ္နည္းေလးေတြကို အရင္တုန္းကလည္း ေမးထားခဲ့တဲ့ Blogger ေတြ ေတာ္ေတာ္မ်ားမ်ားရွိခဲ့ပါတယ္..။ အေၾကာင္းအမ်ိဳးမ်ိဳးေၾကာင့္ ဒီေန႔မွ တင္ေပးျဖစ္ပါတယ္..။ လုပ္နည္းက သိိပ္ေတာ့ မခက္ပါ..။ ေအာက္မွာပံုေလးေတြနဲ႔ တဆင့္ခ်င္းစီ လုပ္တတ္ေအာင္ ျပေပးထားပါတယ္..။
မိမိတို႔ Blog အတြက္ Animated စာလံုးေတြကို မိမိတို႔ကိုယ္တိုင္ ၾကိဳက္သလို ဖန္တီးလိုက္ပါ..။ က်ေနာ့္ Blog မွာလည္း Animated စာလံုးေတြ ဖန္တီးတတ္ေအာင္ ပိုစ့္ေတြ အမ်ားၾကီးတင္ေပးခဲ့ဖူးပါတယ္..။ မိိမိတို႔ ကြ်မ္းက်င္ရာ ၊ အဆင္ေျပရာနဲ႔ Animated စာလံုးေတြကို ဖန္တီးျပီးသြားရင္ေတာ့ Blog ရဲ႕ ပိုစ့္အသစ္ဖန္တီးတဲ့ေနရာမွာ အဲ့ဒီ Animated စာလံုးေတြကို Upload တင္လိုက္ပါ..။ ျပီးရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ HTML ကုဒ္ေတြကို ယူပါ..။ အဲ့ထဲမွာမွ Animated စာလံုးအတြက္ လင့္၂ေနရာနဲ႔ နာမည္ကို လိုက္ေျပာင္းထည့္ေပးလိုက္ရင္ က်ေနာ့္ Blog ညာဘက္မွာ ျပထားသလို မိမိတို႔ Blog မွာလည္း ေပၚေနပါလိမ့္မယ္..။
ဒီလို HTML ကုဒ္ေဘာက္စ္လုပ္နည္းေတြနဲ႔ ပါတ္သက္လို႔ HTML ကုဒ္ေတြ အမ်ိဳးမ်ိဳးရွိပါတယ္..။ ဘယ္ဆိုဒ္ကပဲယူယူ.. ဒီလို ကုဒ္ေဘာက္စ္လုပ္နည္းကေတာ့ အတူတူပါပဲ..။ အခုက်ေနာ္ ေပးလိုက္တဲ့ HTML ကုဒ္ေတြကေတာ့ က်ေနာ့္ Blog မွာ လက္ရွိအသံုးျပဳထားတဲ့ ကုဒ္ေတြပဲ ျဖစ္ပါတယ္..။ အဆင္သင့္ copy ယူျပီး Animated စာလံုးလင့္နဲ႔ နာမည္ေျပာင္းထည့္လိုက္ရင္ မိမိတို႔ အတြက္ အသံုးဝင္ျဖစ္ပါျပီ..။ ဒီေအာက္မွာ ေဖၚျပေပးထားတဲ့ HTML ကုဒ္ေတြကေတာ့ က်ေနာ့္ Blog စလုပ္ခါစက English ဆိုဒ္ေတြက လိုက္ရွာထားတဲ့ ကုဒ္ေတြပဲ ျဖစ္ပါတယ္..။ HTML ကုဒ္ေဘာက္စ္အတြက္ လုပ္နည္းနဲ႔ ကုဒ္ေတြကို လိုအပ္တဲ့ သူမ်ားကေတာ့ ေအာက္မွာ ယူႏိုင္ပါတယ္..။

ေအာက္က ေဘာက္စ္ထဲမွာ ေပးထားတဲ့ HTML ကုဒ္ေတြ အားလံုးကို ေအာစလက္ေပးျပီး copy ယူလိုက္ပါ..။ ျပီးရင္ မိမိတို႔ ဝင္းဒိုးရဲ႕ Notepad မွာ paste ထည့္ျပီး မွတ္ထားလိုက္ပါ..။

<!--grab button header -->
<div class="grab-button" style="center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHfeCTiM_Fo7knev5z5_7Lf1cFOXIgZD-4vm5kziwhz-Te6d83d0rAa8I3GgO-m7UIAvAoAVJS-1Klvdr4DdAkTRoc79YmDu2pN-JuMUAACHPEgHNQEdu8aJyzp39wtPGxx33PD_D-WNA/s1600/lwinminnbo998.gif" alt="Lwinminbo" width="200" height="50" />
<!--end grab button header -->
<!-- button code box -->
<textarea class="button-markup" rows="2" cols="28">
<div class="Lwinminbo" style="center">
<a href="http://lwinminbo.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHfeCTiM_Fo7knev5z5_7Lf1cFOXIgZD-4vm5kziwhz-Te6d83d0rAa8I3GgO-m7UIAvAoAVJS-1Klvdr4DdAkTRoc79YmDu2pN-JuMUAACHPEgHNQEdu8aJyzp39wtPGxx33PD_D-WNA/s1600/lwinminnbo998.gif" alt="Lwinminbo" width="200" height="50" />
</a>
</div><!--end button code box-->
</textarea>
</div> <!--end grab-button -->

က်ေနာ္တို႔ Blog ကို Log in ဝင္ျပီးတဲ့ အခါ ေအာက္ကပံုအတိုင္း Layout ကို သြားပါမယ္..။

အေပၚက ပံုေတြအတိုင္း အဆင့္ဆင့္ Layout >> Add a Gadget >> HTML/javaScript ေနရာကို ဖြင့္ထားလိုက္ပါ..။ 

ေနာက္တဆင့္ကေတာ့ က်ေနာ္တို႔ Blog ရဲ႕ ပိုစ့္အသစ္ ဖန္တီးတဲ့ေနရာကို ဝင္လိုက္ပါ..။ ျပီးရင္ ေအာက္ကပံုမွာ ျပထားတဲ့ အတိုင္း က်ေနာ္ ဖန္တီးထားတဲ့ Animated စာလံုးေတြကို Upload တင္ပါတယ္..။ တင္ျပီးတာနဲ႔ Save ကို တခ်က္ကလစ္ေပးလိုက္ပါ..။ Auto Save ျဖစ္ေပမယ့္ ပိုေသခ်ာေအာင္ Save ကို တခ်က္ႏွိပ္ေပးလိုက္ပါတယ္..။ Publish စာသားကို လံုးဝ မႏွိပ္ပါနဲ႔..။ Save ျပီးရင္ ဒီအတိုင္းပဲ ထားေပးရမွာပါ..။ Save ထားတဲ့ ပိုစ့္ကို ဖ်က္ပစ္လို႔လည္း မရပါ..။ Blog မွာ သိမ္းထားရမွာ ျဖစ္တဲ့အတြက္ Save ႏွိပ္ျပီးရင္ လံုေလာက္ပါျပီ..။ ျပီးရင္ေတာ့ ေအာက္က ပံုေတြအတိုင္း အဆင့္ဆင့္ လုပ္ေပးရအုန္းမွာပါ..။

အေပၚပံုမွာ ျပထာတဲ့အတိုင္း မိမိအသံုးျပဳလိုတဲ့ Animated ပံုေပၚမွာ ေမာက္စ္မွ်ားတင္ Right Click >> Copy Link Location ( တျခား Browser ေတြမွာ Copy Link Address လို႔ေပၚပါတယ္..။) စာသားကို တခ်က္ကလစ္လိုက္ပါ..။

 ျပီးရင္ မိမိတို႔ ဝင္းဒိုးရဲ႕ Notepad မွာ ေအာက္ကပံုအတိုင္း paste နဲ႔ ထည့္ျပီး အရင္မွတ္ထားလိုက္ပါ..။

ေနာက္တဆင့္ကေတာ့ က်ေနာ္ အေပၚမွာ ေဘာက္စ္ေလးနဲ႔ ေပးထားတဲ့ HTML ကုဒ္ေတြကို copy ယူျပီး ေအာက္မွာ ျပထားတဲ့ အတိုင္း Animated စာလံုးရဲ႕ လင့္နဲ႔ မိမိရဲ႕ နာမည္၊ မိမိ Blog ရဲ႕ လိပ္စာေတြကို ေျပာင္းထည့္ေပးလိုုက္ပါ..။ 

(ဥပမာ.. မိမိတို႔ Blog Post မွာ Upload တင္ထားတဲ့ Animated စာလံုးရဲ႕ လင့္က ဒီအတိုင္း ျဖစ္ေနပါလိမ့္မယ္.. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7BxmXWKi2D3mlKssKesM1rDeoL5J1S4DJhAXt8xUmdCXV1dA_-lMURbsLX3TbVxLUec816mM6S4RClYQqP3I2yUwnE2pWWQW772EjCmeGxfujgSrWOMufNMuH2GZ7Hhn_U4dh75cJHrw/s1600/lwinminbo.icon..gif အဲ့ဒီလင့္ကို ေအာက္ကပံုမွာ အနီေရာင္နဲ႔ ျပေပးထားတဲ့ လင့္ေနရာမွာ အစားထိုး၊ ေျပာင္းထည့္ေပးရမွာပါ..။ ) အျပာေရာင္နဲ႔ အစိမ္းေရာင္ ေနရာေတြမွာေတာ့ မိမိနာမည္နဲ႔ မိမိရဲ႕ Blog လိပ္စာကို ေျပာင္းထည့္ေပးလိုက္ပါ..။ ၾကည့္ရရွင္းေအာင္ စာေၾကာင္းေတြ ခ်ဲျပေပးထားတာပါ..။ Blog မွာ ထည့္ရင္ေတာ့ စာေၾကာင္းမခ်ဲပဲ ထည့္ေပးပါ..။ 

<!--grab button header -->
<div class="grab-button" style="center">

<img src="http://i1250.photobucket.com/albums/hh524/lwinminbo/fcf52fc2.gif" alt="Lwinminbo" width="200" height="50" />

<!--end grab button header -->
<!-- button code box -->
<textarea class="button-markup" rows="2" cols="28">

<div class="Lwinminbo" style="center">

<a href="http://lwinminbo.blogspot.com/">

<img src="http://i1250.photobucket.com/albums/hh524/lwinminbo/fcf52fc2.gif" alt="Lwinminbo" width="200" height="50" />

</a>
</div><!--end button code box-->
</textarea>
</div> <!--end grab-button -->

ျပီးရင္ေတာ့ အေပၚပိုင္း အဆင့္မွာ ျပေပးထားတဲ့အတိုင္း  Layout >> Add a Gadget >> HTML/javaScript ေနရာကို ျပန္ဝင္ျပီး ၊ ျပန္သြားျပီး ေအာက္ကပံုေလးေတြ အတိုင္း မိမိေျပာင္းလဲထားတဲ့ HTML ကုဒ္ေတြကို copy-paste နဲ႔ ထည့္ျပီး Save ႏွိပ္ေပးလိုက္ပါ..။

အေပၚပံု Title ေနရာမွာေတာ့ မိမိတို႔ ေရးခ်င္တာကို ေရးထည့္လိုက္ပါ..။ ျပီးရင္ Save ကို ႏွိပ္ေပးလိုက္ပါ..။ ေအာက္ကပံုအတိုင္း အခုဖန္တီးလိုက္တဲ့ Button Gadget ေလးကို မိမိ Blog ရဲ႕ ထားလိုတဲ့ ေနရာကို ေမာက္စ္နဲ႔ ဖိဆြဲျပီး ေရႊ႕ထားလိုက္ရင္ ရပါျပီ..။ ျပီးရင္ေတာ့ Save arrangement စာသားကို တခ်က္ႏွိပ္ေပးလိုက္ပါ..။ မိမိတို႔ Blog ကို Refresh (or) View Blog နဲ႔ ျပန္ၾကည့္လိုက္ရင္.. အခုက်ေနာ့္ Blog ညာဘက္မွာ ေပၚေနသလိုမ်ိဳး Animated စာလံုးေလးနဲ႔ ကုဒ္ေဘာက္စ္ေလး ေပၚေနပါျပီ..။

မိမိတို႔ Blog ရဲ႕ Posts ေနရာကို ကလစ္ျပီး ၾကည့္လိုက္ရင္ေတာ့ ေအာက္ကပံုမွာ ျပထားတဲ့ က်ေနာ့္ Blog မွာ ျမင္ရတဲ့ အတိုင္း Draft စာသားနဲ႔ အတူ ရွိေနပါလိမ့္မယ္..။ ဒီအတိုင္းပဲ ထားေပးရမွာပါ..။ ေနာက္ထပ္ Animated စာလံုးအသစ္ေတြ ထပ္ဖန္တီးျပီးတဲ့ အခါမွာလည္း ဒီ Draft ပိုစ့္ထဲမွာ ထပ္ထည့္သိမ္းထားလို႔ ရပါေသးတယ္..။ ပံုေတြ တင္ျပီးတဲ့ အခါတိုင္း Save ႏွိပ္ျပီး Draft ထဲမွာ သိမ္းထားျခင္းျဖင့္ မိမိတို႔ရဲ႕ Animated ပံုေလးေတြကို သက္ဝင္လႈပ္ရွားေနေစပါတယ္..။ ဒီေန႔ပိုစ့္ကေတာ့ ဒီမွာတင္ ျပီးသြားပါျပီ..။ Blogger လူသစ္မ်ားအားလံုး အဆင္ေျပစြာ လုပ္တတ္ကိုင္တတ္၍ နည္းပညာမ်ား တိုးတက္ ေအာင္ျမင္ပါေစ..။