Cara Memasang Translate dengan Gambar Bendera di Blog by zulfansy

8:55 AM zulfansyah 0 Comments

Key Translate
Cara Memasang Translate dengan Gambar Bendera di Blog - Sebenarnya cara memasang translate gambar bendera di blog pernah dibahas di blognya maskolis, tetapi belum valid CSS3, jadinya saya akan membagikan versi translate yang bergambar dan Valid CSS3.

Google translate memudahkan pengunjung yang bukan berasal dari negara kita menerjemahkan tulisan-tulisan yang kita publish di blog, bisa juga translate gambar bendera di blog ini membuat blog kita tambah wow.

Translate gambar bendera ini juga tidak kebanyakan code css, dengan tidak kebanyakan kode css, maka translate gambar bendera ini tidak akan terlalu berpengaruh terhadap loading blog anda.

Contoh penggunaan translate gambar bendera di blog seperti gambar berikut.


Contoh translate bendera

Bagaimana sobat tertarik ?, langsung saja kita ke tahap cara memasang Translate dengan Gambar Bendera ini.

Cara Memasang Translate dengan Gambar Bendera di Blog

Taruh code css dibawah ini sebelum kode ]></b:skin>

.fajriandaviar_translate img{opacity:1.0;;border:0;margin-right:10px} .fajriandaviar_translate:hover img{opacity:0.30;border:0} .fajriandaviar_translatextra:hover img{opacity:0.30;border:0}

Setelah sobat memasang CSS diatas tadi pada template sobat, tinggal sobat pergi ke Tata Letak � Add Gadget � HTML/JavaScript � Lalu masukkan script dibawah ini

<a class="fajriandaviar_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;"><img alt="English" height="32" src="http://3.bp.blogspot.com/-Ycv9oood74k/Und4ufO-KlI/AAAAAAAABjM/y6I5QWJoRHk/s1600/english.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="fajriandaviar_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img alt="French" height="32" src="http://4.bp.blogspot.com/-dOzC_yApR7E/Und4viHrUZI/AAAAAAAABjo/lkToY2JGTZM/s1600/french.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="fajriandaviar_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;"><img alt="German" height="32" src=http://1.bp.blogspot.com/-JDygcXPlQL4/Und4vcBv4rI/AAAAAAAABjY/nICYffgMUtI/s1600/german.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="fajriandaviar_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;"><img alt="Spain" height="32" src="http://4.bp.blogspot.com/-QGtd9-zY18g/Und4w3RpfbI/AAAAAAAABj4/uVSUV9OShmQ/s1600/spain.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="fajriandaviar_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;"><img alt="Russian" height="32" src="http://4.bp.blogspot.com/-ItXKbqAUmwc/Und4wUGNynI/AAAAAAAABjw/Fmoc-3g0O38/s1600/russian.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="fajriandaviar_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;"><img alt="Japanese" height="32" src="http://3.bp.blogspot.com/-nQt-KZy6wCQ/Und5-dBOatI/AAAAAAAABkE/YTLRsdtM6zw/s1600/japanese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="fajriandaviar_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;"><img alt="Arabic" height="32" src="http://4.bp.blogspot.com/-zYGQpXUnrIY/Und4umb-fGI/AAAAAAAABjI/x0ZS_TUDnuw/s1600/arabic.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="fajriandaviar_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;"><img alt="Chinese Simplified" height="32" src="http://4.bp.blogspot.com/-Z4ZOVjaZUdE/Und5-wrYusI/AAAAAAAABkI/d-ZYd0Gsp-A/s1600/chinese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

Lalu simpan Gadget.

Mudah bukan sobat, usai sudah artikel saya ini, maaf apabila ada salah kata, Wassalam.

0 comments:

Cara Membuat Widget Label Cloud Flat UI Hijau Keren by zulfansy

8:55 AM zulfansyah 0 Comments

Cara Membuat Widget Label Cloud Flat UI Hijau Keren - Helo Sobat, Kali ini saya akan membagikan artikel tentang bagaimana cara membuat Widget Label Cloud Flat UI Hijau keren ala Saya sendiri Fajri Andaviar, untuk membuat Widget Label ini hanya perlu menambahkan atau mengedit ulang css label cloud yang sebelumnya sudah ada, berikut screenshot nya :

(Screenshot) Cara Membuat Widget Label Cloud Flat UI Hijau Keren
(Screenshot) Cara Membuat Widget Label Cloud Flat UI Hijau Keren


Berikut Tutorial nya :

1. Sebelum membuat Widget Label ini sobat masuk ke Tata Letak > Klik "Edit" pada Widget Label atau Buat Widget Label baru apabila sobat belum membuat Widget nya, setelah itu buat seperti ini :

(Penampakan) Konfigurasi Widget Sebelum membuat Widget Label Cloud Flat UI
(Penampakan) Konfigurasi Widget Sebelum membuat Widget Label Cloud Flat UI

2. Apabila sudah langsung saja menuju Template > Edit HTML , Cari kode CSS Label Cloud blog sobat, lalu hapus saja css yang lama dan ganti dengan kode css dibawah ini, namun apabila di template blog sobat belum terdapat kode CSS Label Cloud langsung saja sobat tambahkan kode CSS berikut :

/*CSS Label*/
.Label a{
padding-left: 5px;
padding-right: 31.5px;
color: #fff!important;
height: 32px;
background: #1abc9c;
margin-right: 2px;
line-height: 32px;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
float: left;
margin-top: 2px;
font-size: 13px;
text-align: left; }
.Label a:hover{
color:#fff !important;
background:#16a085; }
.Label a:after{
content: &quot;&quot;;
position: absolute;
width: 0px;
height: 0px;
border-width: 16.5px;
border-style: solid;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;
}

3. Selesai.

Sekian artikel saya hari ini, maaf atas segala kekurangan atau kelebihannya, Wassalam.

0 comments: