Sabtu, 15 Januari 2011

Add with Custome Translate Ajax API to Your Website

Dapet lagi artikel tutorial mengenai translator. Jika mau ngacak-ngacak postingan trik/tutorial di Blog Beben si bloglang anu ganteng kalem tea yang serupa, silahkan ketikan keyword berkaitan pada kotak search yg tersedia :D Datang dari web Ampercent langganan mencari ide² dapet deh "Add Language Translation To Your Website Using Google Translate AJAX API" Kelebihan dari trik ini kita bisa mengcustome tampilan translator dari embah google ini sob. Jadi kelihatan full stylish, dinamis, praktis dan melankolis :P Kalau cara lama untuk mengambil kode translate dari mbah google ini silahkan pregi ke halaman Tools Google Translate dan lakukan edit seperlunya. Cuman kalau menggunakan kode default cara lama tersebut maka akan tampak tulisan widget by google!!! seperti ini

Sekarang bisa kita hilangkan, malah dirubah sesuai dengan kemauan dengan sedikit kode CSS :D Karena kode dan script diambil langsung dari Google Analytics yg kita miliki, memberi warna tersendiri pada karya ini ;)) Mari ikuti langkah-langkahnya, awas jangan lupa kopi ama cemilannya [..]
  1. Login terlebih dahulu ke account Google Analytics sobat dan klik tulisan View Report, pada blog/web yg akan dipasangkan nanti. Lalu perhatikan panel sebelah kiri cari tulisan Visitors, lalu diklik cari kembali tulisan Languages, klik kembali. Maka akan terlihat berapa macam bahasa yg ternyata sering digunakan oleh pelancong ke blog kita :)
  2. Kopi pastekan script berikut sebelum tag </body>
  3. <script type='text/javascript'>
    //<![CDATA{
    function googleTranslateElementInit() {
    new google.translate.TranslateElement({
    pageLanguage: 'id',
    includedLanguages: 'en,de,fr,it,es,pt,ru,', //enter the language codes obtained from step 1 and delete this comment
    gaTrack: true,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
    }
    //]]>
    </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    Gantikan script berwarna merah sesuaikan dgn web/blog sobat menggunakan jenis bahasa apa, dan script berwarna biru itu dg kode bahasa yg sering dipakai dari google analytics tadi ;;) Kalau mau memilih kode bahasanya sesuai kalian-kalian, nih sikat deh ah

    Daftar kode bahasa terjemahan.

    Daftar berikut ini menyediakan semua bahasa terjemahan dan kode bahasa yang didukung oleh API.

    LanguageCode LanguageCode
    AFRIKAANSaf ITALIANit
    ALBANIANsq JAPANESEja
    ARABICar KOREANko
    BELARUSIANbe LATVIANlv
    BULGARIANbg LITHUANIANlt
    CATALANca MACEDONIANmk
    CHINESEzh MALAYms
    CHINESE_SIMPLIFIEDzh-CN MALTESEmt
    CHINESE_TRADITIONALzh-TW NORWEGIANno
    CROATIANhr PERSIANfa
    CZECHcs POLISHpl
    DANISHda PORTUGUESEpt
    DUTCHnl PORTUGUESE_PORTUGALpt-PT
    ENGLISHen ROMANIANro
    ESTONIANet RUSSIANru
    FILIPINOtl SERBIANsr
    FINNISHfi SLOVAKsk
    FRENCHfr SLOVENIANsl
    GALICIANgl SPANISHes
    GERMANde SWAHILIsw
    GREEKel SWEDISHsv
    HAITIAN_CREOLEht TAGALOGtl
    HEBREWiw THAIth
    HINDIhi TURKISHtr
    HUNGARIANhu UKRAINIANuk
    ICELANDICis VIETNAMESEvi
    INDONESIANid WELSHcy
    IRISHga YIDDISHyi
  4. Sisipkan kode HTML ini sebagai pemanggil script diatas kedalam tag <body> template sobat. Jika sobat bisa berkreasi sendiri dimana mau diletakannya bisa juga kok. Tinggal sebisa-bisanya sobat saja.
  5. <div id="google_translate_element"></div>
  6. Untuk merubah dan menghilangkan Powered/Widget by Google, sobat masukin CSS berikut diatas tag ]]></b:skin>
  7. .goog-te-gadget-simple {
    background-color:#F5F5F5;
    border:none;
    font-size:13px;
    }
    //hides the image in the widget
    .goog-te-gadget-simple img {
    display:none;
    }
  8. Save dan lihat hasilnya \m/
Kalau membingungkan apa-apa yg Beben paparkan diatas, sobat dapat melakukan cara instant via Add a Gadget ► HTML/Javascript masukin deh ini semua...Click Here for Get All Coded

<style>
.goog-te-gadget-simple {
background-color:#F5F5F5;
border:none;
font-size:13px;
}
//hides the image in the widget
.goog-te-gadget-simple img {
display:none;
}
</style>

<script type='text/javascript'>
//<![CDATA{
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
includedLanguages: 'KODE BAHASA ISIKAN DIPISAH DENGAN KOMA,', //enter the language codes obtained from step 1 and delete this comment
gaTrack: true,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
//]]>
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<div id="google_translate_element"></div>


Bye :-h

Tidak ada komentar:

Posting Komentar