Widget Google Translate dengan Animasi CSS

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Junior Iqfar - Membuat Widget Google Translate dengan Animasi CSS. Alhamdulillah. Maaf sebelumnya untuk sobat blogger yang menunggu artikel terbaru dari saya karena saya baru sekarang menulis artikelnya. Ada keterlambatan dalam menulis artikel karena kemarin ada tugas dari seorang dosen yang sangat sulih untuk dikerjakan sehingga saya tidak bisa menulis artikel di blog saya ini.

Pada hari ini saya akan menulis artikel tentang Membuat Widget Google Translate dengan Animasi CSS yang saya buat sendiri karena widget ini pada dasarnya sama dengan artikel Membuat Widget Social. Jika sobat penasaran dengan artikel Membuat Widget Social, silahkan saja sobat membaca artikel tentang Membuat Widget Social. Bila sobat sudah mengetahui bagaimana widget tersebut, maka tampilannyapun hampir sama dengan widget google translate ini.

Untuk lebih jelasnya silahkan sobat melihat demo dari artikel tentang Cara Membuat Widget Google Translate dengan Animasi CSS di bawah ini. Jika sobat tertarik menggunakan widget google translate ini, silahkan ikuti tutorial yang saya berikan berikut ini.

Demo Widget Google Translate dengan Animasi CSSKlik disini untuk melihat demo Widget Google Translate dengan Animasi CSS

Langkah-langkahnya

1. Seperti biasa, sobat masuk ke akun blogger sobat
2. Kemudian klik menu dropdown dan pilih Tata Letak

3. Pilih Tambahkan Widget

4. Kemudian sobat cari HTML/Javascript

5. Kemudian sobat salin kode di bawah ini

<style>
  ul.social{
    list-style: none;
    margin: 10px;
    overflow: hidden;
  }
  .social li {
    float: left;
    background: none !important;
    padding: 0 !important;
    margin: 5px;
  }
  .social li a {
    display: block;
    width: 40px;
   height: 40px;
    background: url("http://junioriqfar.gweb.io/WidgetGoogleTranslatedenganAnimasiCSS/image.png") no-repeat transparent;
    text-indent: -99999em !important;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    transition: all 0.25s ease;
  }
  .social li a:hover {
    padding: 0 !important;
  }
  .social li.inggris a {
    background-position: 0 0;
  }
  .social li.prancis a {
    background-position: -40px 0;
  }
  .social li.jerman a {
    background-position: -80px 0;
  }
  .social li.spanyol a {
    background-position: -120px 0;
  }
  .social li.italia a {
    background-position: -160px 0;
  }
  .social li.belanda a {
    background-position: -200px 0;
  }
  .social li.rusia a {
    background-position: -240px 0;
  }
  .social li.brasil a {
    background-position: -280px 0;
  }
  .social li.jepang a {
    background-position: -320px 0;
  }
  .social li.korsel a {
    background-position: -360px 0;
  }
  .social li.arab a {
    background-position: -400px 0;
  }
  .social li.cina a {
    background-position: -440px 0;
  }
  .social li.inggris a:hover {
    background-position: 0 -60px;
  }
  .social li.prancis a:hover {
    background-position: -40px -60px;
  }
  .social li.jerman a:hover {
    background-position: -80px -60px;
  }
  .social li.spanyol a:hover {
    background-position: -120px -60px;
  }
  .social li.italia a:hover {
    background-position: -160px -60px;
  }
  .social li.belanda a:hover {
    background-position: -200px -60px;
  }
  .social li.rusia a:hover {
    background-position: -240px -60px;
  }
  .social li.brasil a:hover {
    background-position: -280px -60px;
  }
  .social li.jepang a:hover {
    background-position: -320px -60px;
  }
  .social li.korsel a:hover {
    background-position: -360px -60px;
  }
  .social li.arab a:hover {
    background-position: -400px -60px;
  }
  .social li.cina a:hover {
    background-position: -440px -60px;
  }
</style>

<ul class="social">
  <li class="inggris">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;</li>
  <li class="prancis"><a 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;"></a></li>
  <li class="jerman"><a 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;"></a></li>
  <li class="spanyol"><a 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;"></a></li>
  <li class="italia"><a 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;"></a></li>
  <li class="belanda"><a 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;"></a></li>
  <li class="rusia"><a 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;"></a></li>
  <li class="brasil"><a href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"></a></li>
  <li class="jepang"><a 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;"></a></li>
  <li class="korsel"><a 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;"></a></li>
  <li class="arab"><a 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;"></a></li>
  <li class="cina"><a 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;"></a></li>
</ul>

6. Kemudian sobat letakkan pada kotak kontent

7. Klik Simpan

Selesai sudah tutorial tentang Membuat Widget Google Translate dengan Animasi CSS. Jika sobat ada keluhan atau masalah dalam memasang widget ini, silahkan saja menuliskan komentar pada akhir artikel ini.

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait