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]

[Versi Bahasa Melayu]

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.