Memasang Google Translate di Blogspot

Untuk memasang Google Translate ini cukup membingungkan saya, awalnya saya membaca tutorial ini diblognya  TIPIS.Web.Id dengan bahasa yang benar - benar bagus dan kalau dipraktekkan pastinya akan sangat mudah sekali karena dijelaskan step by stepnya.

Akan tetapi, entah saya yang kebilang o'on atau memang struktur HTML saya yang berbeda sehingga pada prakteknya membikin saya pusing 10 keliling hehehe, walaupun pada akhirnya berhasil juga walau dengan beberapa kali reset/upload kode HTML hasil backup sebelum proyek ini dimulai.

Sebenarnya sharing trik ini ke sahabat semua juga bikin saya takut...
Ya.. takut kalau - kalau perbedaan struktur susunan HTML yang sudah termodifikasi ini yang membuat proyek ini bisa berhasil atau tidak, tapi semuanya sih tergantung ketekunan masing - masing.

Google sebenarnya menyediakan widget yang bisa dipasang diblog, tapi karena tampilan yang dibuat oleh TIPIS.web.id ini berbeda dari biasanya yakni dipasang pada setiap postingan, bukan dipasang di sidebar. Contohnya seperti ini :

Oke.... daripada berlama - lama baiknya kita sama - sama belajar nikin yuk ...!!!

Satu, Login ke blogger dan lakukan terlebih dahulu Backup template anda untuk menghindari hal - hal yang tidak diinginkan.

Dua, Pilih Edit HTML dan jangan lupa bei tanda centang pada Expand Widget Template.

Tiga, COPY kode javascript dibawah ini

<script type='text/javascript'>
//<![CDATA[
function PopWin (obj) {
                    if (obj.value!="") window.open(obj.value,"_blank"); }

function GoogleTranslate(url) {
                        var CountryID = new Array('af','sq','ar','be','bg','ca','zh-CN','zh-TW','hr','cs','da','nl','en','et','tl','fi','fr','gl','de','el','iw','hi','hu','is','id','ga','it','ja','ko','lv','lt','mk','ms','mt','no','fa','pl','pt','ro','ru','sr','sk','sl','es','sw','sv','th','tr','uk','vi','cy','yi');
   var CountryNAME = new Array('Afrikaans','Albanian','Arabic','Belarusian','Bulgarian','Catalan','Chinese (Simplified)','Chinese (Traditional)','Croatian','Czech','Danish','Dutch','English','Estonian','Filipino','Finnish','French','Galician','German','Greek','Hebrew','Hindi','Hungarian','Icelandic','Indonesian','Irish','Italian','Japanese','Korean','Latvian','Lithuanian','Macedonian','Malay','Maltese','Norwegian','Persian','Polish','Portuguese','Romanian','Russian','Serbian','Slovak','Slovenian','Spanish','Swahili','Swedish','Thai','Turkish','Ukrainian','Vietnamese','Welsh','Yiddish'); document.write('<select onchange="PopWin(this);" class="GoogleStyle">');
             document.write('<option value="">-= Choose =-</option>'); for (i = 0; i < 51; i++) { document.write('<option value="http://translate.google.com/translate?u='+url+'&hl=en&ie=UTF-8&sl=id&tl='+CountryID[i]+'">'+CountryNAME[i]+'</option>'); }
              document.write('</select>');
} //]]>
</script>

Empat, Setelah itu cari kode </head>, kemudian PASTE kode javascript tadi diatas kode </head> tersebut lalu simpan sementara.

Lima, Cari text sl=id. Apabila blog kamu berbahasa Indonesia biarkan saja, akan tetapi apabila blog kamu berbahasa Inggris, maka gantilah sl=id menjadi sl=en dan simpan kembali kerjaan sahabat.

Enam, Cari kode ]]></b:skin> kemudian letakkan kode CSS dibawah ini persis diatas kode ]]></b:skin> tadi.

.GoogleStyle{
                FONT-WEIGHT: bold;
                FONT-SIZE: 8pt;
                COLOR: #758D38;
                FONT-FAMILY: 'trebuchet ms';
                BACKGROUND-COLOR: #FFFFCC;
}

Desain warna, ukuran huruf, jenis huruf dan background sesuaikan dengan desain blog masing-masing, bisa kan ? bisa donk hehe. Jangan lupa di simpan lagi ya.

Tujuh, cari kode <data:post.body/>, lalu hapus kode tersebut kemudian COPY-PASTE kode dibawah ini sebagai ganti kode <data:post.body/> tersebut.

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<div style='padding:5px'>
               <hr/>
               <div style='padding:5px'>
                           Translate to :
                            <script type='text/javascript'>
                            GoogleTranslate('<data:post.url/>');
                            </script>
                            by
                            <a href='http://translate.google.com'>
                   <img height='18' src='http://www.google.com/intl/en/images/logos/translate_logo.gif' style='vertical-align:middle;border:0px!important' width='93'/>
                            </a>
                </div>
                <hr/>
</div>
<b:else/>
<p><data:post.body/></p>
</b:if>

Tulisan "Translate to" bisa diganti dengan kata apapun terserah sahabat dan jangan lupa pekerjaannya disimpan.

Done, semua langkah - langkah pembuatan Google Translate sudah selesai. Kalau sahabat berhasil membuatnya maka tampilan akan seperti pada gambar diatas, tapi kalau gagal maka tidak akan tampil apa - apa dan silahkan coba dicek lagi.

Selamat mencoba dan semoga ada manfaatnya...!!!