Isnin, 28 September 2020

TUTORIAL: MULTILINGUAL POST ENTRY FOR BLOG

Assalamualaikum dan salam sejahtera.

Sebagai kesinambungan dalam entri Cik TK yang sebelum ini mengenai Blog Multibahasa/Multilingual, kali ini Cik TK akan buat tutorial mengenai cara bagaimana caranya untuk membuat entri post multibahasa.

Cik TK akan terangkan dengan cara yang paling mudah supaya senang untuk difahami. Dalam contoh di bawah ini adalah cara untuk membuatnya dalam dua bahasa iaitu Bahasa Melayu dan Bahasa Inggeris/English.



LANGKAH-LANGKAH MEMBUAT POST MULTIBAHASA DI BLOG


Langkah 1:
Buka dashboard Blogger dan buka New Post. Taip siap-siap entri terlebih dahulu dalam dua bahasa ini. Contoh seperti di bawah:

Pada suatu hari, ada seekor gajah berjalan-jalan di dalam hutan. Gajah itu berasa sungguh lapar. Perut dia sudah berbunyi-bunyi.

Kemudian gajah terjumpa pokok betik. Menggunakan belalai, dia mengambil buah betik dan memakannya. Gajah pun kenyang dan gembira.

One day, there is an elephant walking in the jungle. The elephant feel so hungry and his stomach starts grumbling already.

Then the elephant found a papaya tree. Using it's trunk, the papaya fruit is grabbed and eaten. The elephant is then full and happy.
  

Langkah 2: 
Kemudian klik gambar pensil seperti dalam gambar di bawah dan pilih HTML view. Dari sini kita akan bermain dengan coding sikit.



Langkah 3:
Copy coding di bawah untuk menu penukaran bahasa, letakkan di atas sekali.
Remark: Warna merah adalah warna tulisan menu dan warna biru adalah ayat untuk menu tersebut.

<h3 id="tMS" onclick=" document.getElementById('tMS').style.display='none'; document.getElementById('tEN').style.display='block';  document.getElementById('MS1').style.display='none'; document.getElementById('EN1').style.display='block'; "><span style="color: #990000;">[English version]</span></h3>

<h3 id="tEN" onclick=" document.getElementById('tEN').style.display='none'; document.getElementById('tMS').style.display='block';  document.getElementById('EN1').style.display='none';  document.getElementById('MS1').style.display='block'; " style="display: none;"><span style="color: #990000;">[Versi Bahasa Melayu]</span></h3><br />  


Langkah 4:
Perhatikan betul-betul entri kalian dan asingkan ikut bahasa (tekan enter saja supaya nampak) seperti dibawah ini untuk mengurangkan kekeliruan. Kemudian tambahkan kod yang berwarna oren seperti di bawah.

<span id="MS1"><div style="text-align: justify;"><span style="font-family: verdana;"><br /></span></div><span style="font-family: verdana;"></span><span style="font-family: verdana;">Pada suatu hari, ada seekor gajah berjalan-jalan di dalam hutan. Gajah itu berasa sungguh lapar. Perut dia sudah berbunyi-bunyi.</span><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">Kemudian gajah terjumpa pokok betik. Menggunakan belalai, dia mengambil buah betik dan memakannya. Gajah pun kenyang dan gembira.</span></div></span>

<span id="EN1" style="display: none;"><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">One day, there is an elephant walking in the jungle. The elephant feel so hungry and his stomach starts grumbling already.</span></div><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">Then the elephant found a papaya tree. Using it's trunk, the papaya fruit is grabbed and eaten. The elephant is then full and happy.</span></div></span>


Selesai!


HASILNYA BAGAIMANA?
Pada compose view hanya akan kelihatan satu bahasa sahaja. Setelah dipos entri itu baru akan kelihatan efek tukar-tukar bahasa. Contoh hasil penuh yang Cik TK buat akan kelihatan seperti ini:

Coding di HTML view kelihatan seperti ini:

<h3 id="tMS" onclick=" document.getElementById('tMS').style.display='none'; document.getElementById('tEN').style.display='block';  document.getElementById('MS1').style.display='none'; document.getElementById('EN1').style.display='block'; "><span style="color: #990000;">[English version]</span></h3>

<h3 id="tEN" onclick=" document.getElementById('tEN').style.display='none'; document.getElementById('tMS').style.display='block';  document.getElementById('EN1').style.display='none';  document.getElementById('MS1').style.display='block'; " style="display: none;"><span style="color: #990000;">[Versi Bahasa Melayu]</span></h3><br /> 

<span id="MS1"><div style="text-align: justify;"><span style="font-family: verdana;"><br /></span></div><span style="font-family: verdana;"></span><span style="font-family: verdana;">Pada suatu hari, ada seekor gajah berjalan-jalan di dalam hutan. Gajah itu berasa sungguh lapar. Perut dia sudah berbunyi-bunyi.</span><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">Kemudian gajah terjumpa pokok betik. Menggunakan belalai, dia mengambil buah betik dan memakannya. Gajah pun kenyang dan gembira.</span></div></span>

<span id="EN1" style="display: none;"><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">One day, there is an elephant walking in the jungle. The elephant feel so hungry and his stomach starts grumbling already.</span></div><div><span style="font-family: verdana;"><br /></span></div><div><span style="font-family: verdana;">Then the elephant found a papaya tree. Using it's trunk, the papaya fruit is grabbed and eaten. The elephant is then full and happy.</span></div></span> 

Manakala rupanya apabila di-post nanti adalah seperti di bawah. Klik [English version] untuk tukar bahasa Inggeris dan klik [Versi Bahasa Melayu] untuk tukar ke bahasa Melayu kembali. Boleh lihat contoh di entri Cik TK sebelum ini juga: Blog Multibahasa/Multilingual



[English version]



Pada suatu hari, ada seekor gajah berjalan-jalan di dalam hutan. Gajah itu berasa sungguh lapar. Perut dia sudah berbunyi-bunyi.

Kemudian gajah terjumpa pokok betik. Menggunakan belalai, dia mengambil buah betik dan memakannya. Gajah pun kenyang dan gembira.




22 ulasan:

  1. oo..ok juga kalau buat camni. thanks for sharing ye

    BalasPadam
  2. lahh baru ku tahu, tq share cik tk..

    BalasPadam
    Balasan
    1. Hehe sama2 OM.. menarik gak kan kalau sesekali buat macam ni

      Padam
  3. Balasan
    1. You are welcome.. hehe mana tau nanti ada yang nak buat translation bahasa Jepun ke.. mesti menarik kan...

      Padam
  4. first time baru tahu boleh buat macam ni. thank you for sharing

    BalasPadam
    Balasan
    1. Sama2 Kai.. nanti ada kesempatan bolehlah cuba

      Padam
  5. dah lama tak main edit coding, memang fening nengoknya dik oi hahahha... tapi ada masa boleh cuba nanti hehehe ,tq share

    BalasPadam
    Balasan
    1. Cik TK mula2 actually dah lama main coding... Mula2 tu pening gak

      Padam
  6. Ilmu yang bagus.. nice sharing sis..

    BalasPadam
  7. Waaah gunakan coding ya Cik, nice sharing

    BalasPadam
  8. Wow Belajar coding arini mama.. tq for sharing

    BalasPadam
  9. Thanks sharing cik TK.. Inshaa Allah akan dicuba nnt..
    bab coding sgt2 lemah hahaha ^_^

    BalasPadam

Dipersilakan kepada semua untuk tinggalkan komen dan pendapat kalian di sini. Nak tinggalkan jejak di sini pun boleh! Nanti Cik TK blogwalking ke sana ya!

TAG / KATEGORI / LABEL

aneka mi dan pasta (5) Anime (6) asmr (1) ayam (4) bahasa Jepun (2) belajar (10) blogger (10) canva (1) cendawan (4) cinta (19) cover (3) eksperimentasi makanan (33) facebook (1) fakta menarik (44) flora/fauna (25) fotografi (6) GA (18) gitar (2) grafik (2) hadiah (2) hobi (12) ibubapa (2) ikan (2) ilmiah (11) info IT/tutorial (25) insomnia (3) instagram (1) Islamik (4) jalan-jalan (13) Jepun/Korea (42) jimat (1) kalimba (2) kesihatan (2) kraf (4) kreatif (7) Kucing (4) kudapan (8) kuih muih (3) lauk pauk (11) Lirik (15) Luahan (3) makan-makan (43) media sosial (2) melancong (5) membaca (4) mengait (4) merapu (30) mercu tanda / landmark (3) muzik (19) perayaan (5) peringatan (1) personal (149) resepi (20) Segmen (41) Shopee (1) shopping (3) snapseed (1) sotong (1) Takeru Sato (3) telur (4) template (5) throwback (4) tidur (3) tips dan panduan (2) travel (6) udang (2) ukulele (3) vokal (10) watermark (1) wayang (1) western (3) wishlist (3) youtube (15)