cara membuat widget translate valid html5

Widget translate-language ini terdiri dari berbagai bahasa negara negara yang paling populer didunia, sangat cocok untuk membuatnya dihalaman blog kesayangan anda, sehingga para pengunjung blog yang datang dari berbagai belahan dunia yang mempunyai bahasa atau hanya mengetahui bahasa negaranya sendiri akan dapat mengetahui isi dari artikel yang anda posting pada halaman anda. Hal ini dapat menguntungkan anda sehingga pengunjung anda semakin bertambah hari demi hari. Masalah bahasa pada waktu sekarang ini bukanlah merupakan suatu masalah yang sulit sebab google telah menyediakan untuk kita dengan geratis. Script pada widget translate-language ini adalah bawaan standart google yang telah saya modifikasi agar lebih indah dilihat para pengunjung halaman blog kita. Script ini adalah script yang ringan karena telah dimodifikasi sehingga tidak mempengaruhi loading halaman blog anda. Widget translate-language ini juga sudah valid HTML 5 dan CSS3 bila anda memasangnya sesuai dengan yang telah tertulis pada artikel ini. Bila anda ingin widget ini utuh valid HTML 5 anda tidak boleh memasangnya pada gadget blog anda sebab gadget bawaan blogspot masih belum dirombak habis untuk valid HTML 5.Oke saya harap anda sudah memahami widget ini dan fungsinya pada halaman blog saatnya kita menuju TKP untuk memasang widget ini pada halaman blog kesayangan anda, silahkan simak penjelasan dibawah ini, bagi yang sudah memiliki widget yang seperti ini silahkan hanya membaca saya sekalian buat ngantuk kan berguna untuk kesehatan kita heheheh ...
Lihat DEMO, kunjungi halaman ini : http://templatefullseo.blogspot.com/
( Lihat bagian sisikanan halaman )

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#translator-BD {
display:block;
width:auto;
border:1px solid #0A340A;
background-color:#F3F3F3;
overflow:hidden;
position:relative;
margin:3px 0 0;
text-align: center;
text-transform: uppercase;
color: #000000;letter-spacing: 0.2em;
}
#translator-BD:hover {

border:1px solid #0A340A;
background-color:#FFFFFF;}
#translator-BD select {border:none;background:transparent;font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif;width:100%;color:black;cursor:text;padding:5px 10px;}
#translator-BD a,#translator-BD a:hover {
display:block;
background-color:#FFFFFF;
border: solid #333333 1px;
color:#000000;
margin:3px 0;
text-decoration:none;
position:absolute;
top:0;
right:0;
bottom:0;
cursor:pointer;
width:80px;
box-shadow:0 0 2px #333 inset;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: 500;
font-size: 10px;
text-align: center;
text-transform: uppercase;
padding-top: 3px;letter-spacing: normal;
}
#translator-BD a:before {display:block;width:0;height:0;border:8px solid transparent;border-left-color:#000000;position:absolute;top:50%;left:5px;margin-top:-8px;}
#translator-BD a:hover {
background-color:#000000;
box-shadow:0 0 2px #333 ;
color: #FFFFFF;letter-spacing: none;
}
#translator-BD a:active {
background-color:#990000;
color: #FFFFFF;letter-spacing: none;
}
#translator-BD select:focus {
color: #990000;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 0.2em;
}
#translator-BD a:focus,
#translator-BD select:active,
#translator-BD a:active {border:none;outline:none;cursor:pointer;}

Install Program Tag HTML

• Setelah anda berhasil memasang CSSnya saatnya anda masuk ke template blog
• Masuk ke "Template"
• lalu klik "Edit HTML"
• Cari code <div id='sidebar-wrapper'> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste kode tersebut tepat dibawah code
  <div id='sidebar-wrapper'>,
  Dalam tutorial kali ini saya memasangnya di sidebar halaman blog anda bisa saja memasang widget ini pada footer, header dan main blog anda.



<span id='translator-BD'><select id='translate-language'><option value='en'>English</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='eo'>Esper<anto</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='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 href='#' id='translate-me' title='Translate!'>Translate</a></span>
<script type='text/javascript'>
(function() {
var mylang = &quot;id&quot;, // bahasa halaman anda bahasa indonesia dengan code id
anchor = document.getElementById(&#39;translate-me&#39;);
anchor.onclick = function() {
window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=&#39;+mylang+&#39;%7C&#39;+document.getElementById(&#39;translate-language&#39;).value+&#39;&amp;hl=en&#39;);
return false;
}
})();
</script>
<div style='clear: both;'/>



• Setelah terpasang simpan perubahan yang anda buat dan silahkan lihat hasilnya

Kesimpulan

Widget translate-language ini adalah widget translate-language bawaan google yang telah dimodifikasi dan memakai script yang lebih ringan agar tidak mempengaruhi loading blog halaman anda. Widget translate-language ini sangat anda butuhkan agar halaman ataupun artikel yang telah anda posting pada halaman blog anda akan mudah dibaca dan dipahami oleh para pengunjung halaman blog anda yang memiliki bahasa yang berbeda dengan anda.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 7:07 PM