Kumpulan Cara Memasang Widget Google Translate

Pasang Widget Google Translate (1)

Tidak di sangkal bahwa menguasai banyak bahasa merupakan suatu aset yang tidak ternilai harganya. Banyak orang mencari rezeki untuk menghidupi keluarga hanya bergantung pada kemampuannya menguasai banyak bahasa yang di pergunakan di dunia. Memang, dengan bahasa tersebut kita bisa berkomunikasi dengan orang lain, ataupun dengan bangsa lain dengan baik .

Begitupun dengan blog kita, bahasa sangatlah penting. Apapun yang ingin kita sampaikan ke pembaca tidak akan di terima akibat ke tidak mengertian bahasa. Bagi anda yang mempunyai blog dengan pembaca dari berbagai belahan dunia, ada solusi tentang permasalahan bahasa ini. Ada suatu widget yang di buat oleh google yang bisa menterjemahkan isi blog kita ke dalam bahasa yang di pilih dengan sangat mudah, namanya Google Translate. Dengan widget Google translate anda tidak perlu lagi pusing dengan persoalan bahasa, silahkan anda berkreasi dalam blog anda dengan bahasa anda sendiri dan biarkan google translate menterjemahkan ke dalam bahasa lain.

Widget Google Translate bisa anda dapatkan di http://translate.google.com. Bentuk widget nya seperti ini :

Berikut cara memasang widget google translate di blogger

Silahkan login ke blogger dengan ID anda
Klik Tata Letak
Klik tab Elemen Halaman
Klik Tambah Gadget
Klik tanda plus (+) untuk HTML/Javascript
Copy paste kode google translate ke dalam kolom yang tersedia

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
Klik tombol Simpan
Selesai

Langkah – langkah di atas adalah untuk memasang widget asli google translate, pada kesempatan yang akan dating akan saya terangkan memasang widget google translate dalam bentuk bendera hasil karya saya sendiri, di jamin bentuknya sangat menarik. Jangan lewatkan.

Pasang Widget Google Translate (2)

bagaimana memasang widget google translate dalam bentuk bendera. Widget ini sedikit berbeda dengan widget Google Translate yang mungkin pernah anda jumpai di internet, karena ini merupakan hasil kreasi kang Rohman selama setengah hari agar widget google translate tampak lebih menarik.

Widget yang akan terpasang adalah seperti gambar berikut, silahkan sorotkan mouse anda ke gambar-gambar bendera yang ada sehingga terlihat sedikit efek blur sebagai pemanis :

Bagi anda yang tertarik untuk memasang widget ini, berikut adalah langkah-langkahnya :

Silahkan login ke blogger dengan ID anda
Klik Tata Letak
Klik tab Elemen Halaman
Klik Tambah Gadget
Klik tanda plus (+) untuk HTML/Javascript
Copy paste kode google translate ke dalam kolom yang tersedia

<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5rPUQc2D3nMSdels_irLRNwmu0Y_QrZcxT2NFVv7ycDK3CLE6weMrlSrW4Jaghn5fLWbU4yt-95pzaxXMrShcsEc2SRZZ9u5xWihZLIGwOrW5DYybrAiGMObDqyn0V5LF9p6iamLdE72Y/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmVI9NSOaX2NMIHJoc895hDOf1AA0Hx-R0FCYa8qHWAMdM9FAPIYVaiMZOnEy2LCI-ez4pZhf996H6ze6x1Rh7pb25aH9YCfxag1Z8MmDnR9H1ChcrBJvyyvahfMZV7xRKiJjGTyYVOGF3/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br /><br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1zXlq-al8ZpiVt2GokDGYW_TqNd-ePEehMJkVDABjuhGFDNRZ6fqSxMfuplG45uTBqUuOg-FnHQL8h3DRzbZqECp07rb1IU3XgHymlIaIcAzdMkHDKZT196GIQtr1Nca8x1dIF0AuH2mu/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style=”font-size:10px;margin:8px 0px 3px 0px”>
by : <a href=http://www.blogspottutorial.com/>BTF</a>
</div>
Klik tombol Simpan
Selesai

Sangat mudah sekali bukan? Selamat menikmati widget google translate baru anda.

Tambahan Info

Sebenarnya Google telah menyediakan widget yang bisa kita pasang diblog kita. Tapi karena tidak bisa customize jadinya saya coba bikin sendiri. Dan punya saya ini dipasang ditiap postingan, bukan di sidebar. Seperti gambar berikut :

Tertarik mencoba ? yuk belajar cara pasangnya.

Pertama, tentu saja silahkan login ke akun blogger masing-masing. Pilih blog dan masuk ke halaman Edit HTML. Jangan lupa beri tanda centang pada Expand Widget Template.

Kedua, klik DISINI untuk melihat kode javascriptnya, block dan COPY semua scriptnya.

Ketiga, Setelah itu cari kode </head> kemudian PASTE script tadi persis diatas kode </head> dan jangan lupa disimpan.

Keempat, cari text ini sl=id. Nah kalau blog anda berbahasa Indonesia ya biarkan saja dan lanjut ke step berikutnya, tapi kalau blog anda berbahasa Inggris ganti text tersebut dengan sl=en dan simpan.

Kelima, cari kode ]]></b:skin> kemudian letakkan kode CSS dibawah ini persis diatasnya.

 
.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.

Keenam, temukan kode ini <data:post.body/>. Kalau sudah ketemu, silahkan di REPLACE dengan script dibawah ini :

 
<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. Dan jangan lupa disimpan.

Sudah selesai, silahkan direfresh blognya. Kalau berhasil ya tampilannya kira-kira seperti screenshot diatas, kalau gagal biasanya tidak tampil apa-apa atau ada pesan errornya. Buat yang mau nyobain makasih ya. Kalau berhasil ditunggu laporannya di form komentar. Apalagi buat yang gagal wajib hukumnya melaporkan kegagalannya hehe. Semoga langkah-langkah diatas bisa mudah dipahami.

Selamat mencoba semoga bermanfaat.

UPDATE :

Sebenarnya waktu bikin postingan ini sudah kepikiran kalau teman-teman pasti sudah mengedit script <data:post.body/> untuk pasang READMORE. Soalnya blogku juga ada READMORE nya . Tapi jangan kuatir, masih bisa kok di edit lagi. Setahu saya, ini setahu saya lo ya. Cara pasang READMORE itu ada dua cara.

Cara pertama, scriptnya kan gini :

<div class=’post-header-line-1′/>

<div class=’post-body’>

<b:if cond=’data:blog.pageType == “item”‘>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href=’data:post.url’>Readmore »»</a>

</b:if>

<div style=’clear: both;’/>

Nah, silahkan ganti yang warna merah itu dengan script di poin keenam diatas.

Cara kedua, scriptnya kan gini :

<b:if cond=’data:blog.pageType != “item”‘>

<div expr:id=’”summary” + data:post.id’><data:post.body/></div>

<script type=’text/javascript’>createSummaryAndThumb(”summary<data:post.id/>”);</script>

<span class=’rmlink’ style=’float:left’><a expr:href=’data:post.url’>READ MORE - <data:post.title/></a></span>

</b:if>

<b:if cond=’data:blog.pageType == “item”‘><data:post.body/></b:if>

Nah, silahkan ganti yang warna merah itu dengan script dipoin keenam diatas.

craftygarden

Kumpulan Cara Memasang Widget Google Translate

Arsip Blog