» » Cara Membuat dan Memasang Widget Google Translate diatas Postingan

Cara Membuat dan Memasang Widget Google Translate diatas Postingan

0 Viewers
Google Translate merupakan widget untuk blogger yang menyediakan menerjemahkan konten blog kedalam berbagai bahasa. Anda pasti sudah tau dong fungsinya buat apa? Widget ini berfungsi untuk memudahkan pengunjung agar mengerti artikel kita/bahasa kita. Misalnya ada pengunjung asing yang mengunjung blog kita dan mereka tidak mengerti bahasa kita, otomasi mereka secara manual menerjemahkan bahasa kita ke Google Translate. Dengan cara yang saya bagi berikut ini, anda tidak perlu pergi ke situs resmi Google Translate, karena tutorial ini secara otomatis menerjemahankan artikel kita di dalam blog langsung. Jadi keuntungan memasang widget ini selain memudahkan pengunjung agar mengerti artikel/bahasa kita, widget ini menerjemahkan tanpa pergi kesitus Google Translate, karena artikel sudah diterjemahkan di dalam blog langsung.
Widget Translate ini akan tampil di setiap postingan anda, sebenarnya widget ini sudah disediakan oleh Blogger dengan cara Dashboard - Tata letak - Add a Gadget - Google Translate. Namun, cara itu peletakan nya kurang efektif karena biasanya para Blogger meletakan nya di sidebar, footer berbeda dengan postingan kali ini, Tekhnik pelatakan Translator nya diatas postingan dengan bantuan kode Tag Condisional. Jika anda ingin membuatnya, silakan ikuti langkah-langkah berikut ini.

Cara Membuat dan Memasang Widget Google Translate diatas Postingan

Cara Pertama : 

1. Buka Blogger - Kemudian login
2. Dashboard - Template
3. Edit HTML.

Proses Pembuatan :

1. Temukan kode <data:post.body/> atau <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'> Biasanya kedua kode diatas lebih dari satu, silakan anda pilih yang kedua/ketiga.
2. Copy&paste kode berikut ini, dan letakkan dibawah kode yang disebutkan diatas.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left;'><div id='google_translate_element'/><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: &#39;id&#39;
}, &#39;google_translate_element&#39;);
}
</script><script src='http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/></div>
</b:if>
3. Simpan Template.

Modifikasi Widget Google Translate dengan kode CSS

Screenshoot :
 
Cara Pemasangan :
 
1. Buka Blogger - Kemudian login
2. Dashboard - Tata Letak
3. Edit - Add a Gadget
4. Pilih HTML/Java Script
5. Copy&paste kode berikut ini, dan paste di kolom HTML/Java Script
<style type="text/css">
#translate-wrapper {
  display:block;
  width:90%;
  max-width:300px;
  border:none;
  background-color:#fff;
  color:#444;
  overflow:hidden;
  position:relative;
  height:40px;
  line-height:40px;
  border:1px solid #e0e0e0;
}
#translate-wrapper select {
  border:none;
  background:transparent;
  font-family:'Verdana',Arial,Sans-Serif;
  font-size:12px;
  width:100%;
  color:#444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translate-wrapper a,
#translate-wrapper a:hover {
  display:block;
  background-color:#4791d2;
  border:none;
  color:#fff;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:14%;
  transition:all 0.3s ease;
}
#translate-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:6px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:45%;
  margin-top:-5px;
}
#translate-wrapper a:hover {opacity:0.9;}
#translate-wrapper a:active {opacity:0.9;}
#translate-wrapper select:focus,
#translate-wrapper a:focus,
#translate-wrapper select:active,
#translate-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
option {
  background:#444;
  color:#e0e0e0;
}
</style>
<div id="translate-wrapper">
    <select id="translate-language">
        <option value="en" selected="selected">English</option>
        <option value="id">Indonesian</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="mk">Macedonian</option>
        <option value="ms">Malay</option>
        <option value="mt">Maltese</option>
        <option value="no">Norwegian</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sr">Serbian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="yi">Yiddish</option>
    </select><a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>
6. Simpan Template.

Demikianlah Tutorial Blogger kali ini, bila terjadi kesalahan jangan sungkan untuk berkomentar dibawah ini. Terakhir silakan anda lihat postingan/home page anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat dan Memasang Widget Google Translate diatas Postingan

Related Post

2 Responses to "Cara Membuat dan Memasang Widget Google Translate diatas Postingan"

  1. M. Rizki Riswandi, S.Kom11 January 2017 at 21:28

    Sipp... tutornya singkat dan jelas... btw bagiin script dong kak cara buat kotak script yang kaya begitu... :D hehehhe

    ReplyDelete
    Replies
    1. Hilmi Ammar11 January 2017 at 21:40

      kesini mas kotak script seperti saya : https://goo.gl/CcZ1nh

      Delete

Subscribe to: Post Comments (Atom)