Cara Memasang Widget Terjemahan Dengan Css

Cara Memasang Widget Terjemahan Dengan CSS - Mempunyai visitor dari luar dan berbeda bahasa mungkin sangatlah menguntungkan, namun sebab berbeda bahasa tersebut maka menciptakan mereka tidak dapat membaca artikel atau postingan dari blog kita. Terkecuali bila mereka dapat memakai bahasa dalam bahasa artikel tersebut. Mungkin anda mempunyai banyak pengunjung dari luar negeri, niscaya mereka resah dengan bahasa yang anda gunakan dalam Artikel/Postingan.

Namun bila mereka ingin menyalin Isi Artikel anda dan membawanya ke Google Translate untuk mengetahui isi dari artikel tersebut. Tapi tentunya pengunjung suka dengan hal yang simple dan tidak ribet. Maka dari itu Anda dapat membantu mereka untuk tanpa harus menciptakan mereka menyalisan Isi Artikel ke Google Translate. Hal yang harus kita atasi yakni dengan memasang Widget Terjemahan pada blog.

Tapi kita masih membutuhkan Google Translate supaya Widget Terjemahan Kita berfungsi. Ada banyak bahasa yang dapat dipilih. Dan tentu saja ada Bahasa Inggris sebagai bahasa pokok yang penting. Dengan dipasangnya Widget Terjemahan ini  maka pengunjung anda bisa Menerjemahkan Artikel dengan mudah. Walaupun hasil terjemahan kurang baik.

Nah selanjutnya aku akan sajikan tutorial Cara Memasang Widget Terjemahan Dengan CSS sebagai berikut ini.

Cara Memasang Widget Terjemahan  CSS

Widget Terjemahan ini dapat anda letakkan dibilah kanan/kiri atau yang disebut sidebar. Mengapa harus di sidebar? Agar pengunjung gampang melihat, Bagaimana tertarik untuk memasang Widget Terjamahan? Dalam langkah pertama Anda hanya perlu menciptakan Widget/Gadget Baru dan memasukkan aba-aba koding dibawah ini ke dalam Widget tersebut. Berikut langkah-langkah Memasang Widget Terjemahan Dengan CSS .

1. Masuk Ke Akun Blogger Masing-Masing > Klik Menu Tata Letak -> Tambah Gadget Baru > Pilih Opsi HTML/Javascript.

2. Salin aba-aba dibawah ini dan letakan kedalam Widget/Gadget Baru anda .

Kode Widget Terjemahan

 <style type="text/css"> #translator-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; } #translator-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; } #translator-wrapper a, #translator-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;   } #translator-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; } #translator-wrapper a:hover {opacity:0.9;} #translator-wrapper a:active {opacity:0.9;} #translator-wrapper select:focus, #translator-wrapper a:focus, #translator-wrapper select:active, #translator-wrapper a:active {   border:none;   outline:none;   cursor:pointer; } option {   background:#444;   color:#e0e0e0; } </style> <div id="translator-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="Cara Memasang Widget Terjemahan Dengan CSS"></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> 

3. Terakhir Simpan Widget dan lihat hasilnya

Kesimpulan

Kesimpulan Makara cara memasang Widget Terjemahan dengan CSS ini cukup gampang untuk dipraktekan, hanya dengan mencopy-paste aba-aba diatas ke dalam Widget/Gadget . Dan karenanya akan memuaskan.

Mungkin cukup disini artikel perihal Cara Memasang Widget Terjemahan Dengan CSS Semoga apa yang aku sampaikan ini bermanfaat tentunya bagi anda khususnya bagi para blogger, Apabila anda masih kurang paham dengan tutorial diatas silahkan berkomentar dibawah postingan ini.

Bagikan Artikel ini