Membuat English Translator Untuk Blog

Membuat English Translator Untuk Blog

Bola Hero Gawai

Membuat English Translator Untuk Blog

Membuat English Translator Untuk Blog
Sebenarnya ini adalah penyederhanaan dari translator bendera yang sebelumnya sudah saya share yang hanya saya ambil untuk English translatornya dan mengganti gambar bendera dengan kata.


Translator ini tidak membebani blog karena seperti yang dikatakan oleh mas Taufik Nurrohman bahwa translator seperti ini tidak akan bereaksi ketika pertama kunjungan blog, namun akan bekerja ketika ada perintah (ketika di klik). Cara kerja translator ini juga sama dengan Google Translator ringan pada postingan yang lalu.


Hanya bedanya pada cara membuat Google Translator ringan di blog sebelumnya lebih komplite, sedangkan yang ini saya hanya mengambil satu bahasa saja yaitu bahasa Inggris. Secara bahasa Inggris adalah bahasa internasional.

Sehingga dengan ini akan lebih mudah jika kita satukan pada menu header misalnya karena ini hanya berupa link dengan penambahan kode css :before untuk tanda panahnya. Jika ada yang belum mengetahuinya dan tertarik untuk mencoba pada blognya, silahkan copy kode kode di bawah ini.

Tambahkan kode di bawah ini pada kode CSS untuk link di menu header.

.google-translator:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:transparent transparent transparent #333;float:right;border-width:5px 0 5px 8px;margin:3px 0 0 5px;}

Jadi jika disatukan dengan kode CSS menu akan tampak seperti contoh di bawah ini.

#menu a.google-translator:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:transparent transparent transparent #333;float:right;border-width:5px 0 5px 8px;margin:3px 0 0 5px;}

Dan untuk mengaplikasikan pada menunya, silahkan tambahkan kode di bawah ini pada kode html menu yang telah ada.

<a class='google-translator' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a>

Sehingga pada html menunya akan tampak seperti contoh di bawah ini.

<div id='top-menu'>
<div id='menubar'>
<ul id='menu'>
<li><a href='/' target='_blank' title='Menu1'>Menu1</a></li>
<li><a href='/' target='_blank' title='Menu2'>Menu2</a></li>
<li><a class='trigger' href='/' title='More Menu3'>More Menu3</a>
<ul>
<li><a href='/' target='_blank' title='Sub1 More Menu3'>Sub1 More Menu3</a></li>
<li><a href='/' target='_blank' title='Sub2 More Menu3'>Sub2 More Menu3</a></li>
</ul></li>
<li><a class='google-translator' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</div>
</div>

Nah jangan khawatir untuk validasi HTML5 karena translator ini sudah valid HTML5. Untuk contoh demonya silahkan lihat pada menu header blog ini. Selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

34 Comments Add Comment

ijin baca tutorialnya mas...

Balas

T O P dah buat kang Andhy. Langsung ditest dah yang ini.
Tapi sebelumnya kami ijin dulu ya Kang. Salam

Balas

Saya coba kapan2 aja deh mas ^_^

Balas

Keren mas, soalnya saya tertarik sama traslator punya DTE.

Balas

Silahkan mas Cahyo :)

Balas

Iya mas Arul silahkan hehehe :D

Balas

Iya ini memang sama dengan yang mas Taufik gunakan... :D

Balas

Demo na mana kang,,,
Nu dipasang diblog ieu sanes?? gning teu aya ketang ayena mah he,,,

Balas

Heheehe itu nu di luhur kang... "Translate" :D

Balas

weei.. ini bagus mas, bisa dipasang pada tempat menu down. malam aja coba hehehe. lagi sibuk cari artikel

Balas

meuni ngoper ngan hiji :))

Balas

Hehehe silahkan sis...

Balas

Hahahaha hiji ge lieur cari idenya kang, ditambah ngopet jadi weh bau wkwkwkwk....

Balas

oalah te katengali he...pidah tempat ya :)

Balas

Saya rasa widget ini sangat berguna kang, soalnya bisa jadi pengunjung blog kita dari bberbagai negara jadi memudahkan untuk memahami isinya, oke kang saya bungkus scriptnya...

Balas

sudah saya terapkan mas kompi, dan ternyata sudah valid hTML5 ya

Balas

Iya sis sudah saya rubah dikit biar valid HTML5 :D

Balas

Iya seperti itu kang, setidaknya jika ada pengunjung dari luar negeri bisa ngerti apa yang kita tulis. :D

Balas

wew keren kang :D
infonnya bermanfaat buat pamula kayak ane :D

#salam blogger!

Balas

Salam blogger juga :D

Balas

Wah keren sekali mas...sebenarnya secara garis besar untuk bahasa inggris aja sudah cukup mewakili para pengujung dari berbagai negara

Balas

Iya mas seperti itulah, secara bahasa Inggris itu bahasa internasional :D

Balas

wah mantap nih., pengalaman baru buat nubie.., hehehe., izin comot ah code-code diatas., mau ditempatkan diblog nubie yang masih dikit postingannya. terimakasih, semoga yang punya blog ditambahkan ilmunya., dan tambah sering berbagi. aamiin

Balas

Amiin...makasih atas do'anya :)

Balas

saran yang bermanfaat sob http://www.kisikisibola.com

Balas

Maaf mas sebenarnya saya sering berkunjung di blog sampean tapi yang saya rasa dari semua tutorial yang anda buat itu bikin saya bingngung pertama anda menyuruh taruh kode berikut css xxx di bawah ini ??? di mana di tauhnya tidak di jelaskan apakah di bawah head apa di atas body di situ tida di jelaskan atau di mana karena tidak semua pemilik blog paham apa lagi saya seorang yang suka dengan blogger tapi masih awam masih baru jadi ga paham sama seali maaf seebelumnya kalau komentar saya kurang berkenan saya mohon kalau bisa di jelaskan seperti maskolis ketika menulis tutorial, terima kasih

Balas

Saya rasa penjelasan di atas cukup jelas apalagi saya kasih contoh penampakannya, hanya perlu kejelian dalam membacanya. Disarankan jangan langsung melihat kodenya tapi baca keseluruhan isi artikelnya. Saya contohkan penerapannya di atas karena setiap kode di setiap blog berbeda-beda. Untuk mengedit template blog diperlukan keberanian untuk mencoba dan "DIPAKSA" harus mengerti kode-kode html.

Balas

ok makasih mas adhy atas penjelasannya meskipun saya sebenarnya sama sekali ga paham dengan tutorial di atas mungkin karena saya memang tidak bisa hehe....
dan saya mau tanya apa di kompi ajaib ada tutorial membuat menu seperti template kompiana di bagian atas fotter yang ada tulisan About Contact Chat Author Sitemap Exchange dan scroll top kalau ada di mana saya bisa membuat cara tersebut kalau belum ada saya berharap di buatkan tutorialnya, saya memakai template johny wuss tadinya mau pake template kompiana tapi saya sudah bolak balik mau download tapi ga bisa, muncul gatwey 2 gitu...terima kasih

Balas

alhamdulilah setelah saya coba download lagi bisa mas tapi kalau bisa di buatkan tutorialnya ya mas adhy untuk menu yang saya maksud terima kasih

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×