Widget Google Translator Dành Cho Blogspot - Blogger


Xin chào các bạn, hôm nay mình sẽ chia sẽ cho các bạn Widget rất thú vị.

Nó hỗ trợ 65 ngôn ngữ và có thể thêm hơn nữa...


Các bước thêm tiện ích này vào blogger của bạn


  1. Đăng nhập vào blogger của bạn
  2. Vào bố cục -> thêm tiện ích -> HTML/JavaScript
  3. Sao chép toàn bộ mã bên dưới và dán vào phần nội dung của HTML/JavaScript 
  4. Tùy biến các tiện ích theo phong cách của bạn
Các đặc trưng 
  • Xử lí nhanh
  • Responsive
  • Hỗ trợ đa ngôn ngữ (65+)
Code:

<center>
  <style type="text/css">/*Cybup Translator Widget */
    #cybup-trans-warp {
      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;
    }
    #cybup-trans-warp 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;
    }
    #cybup-trans-warp a,
    #cybup-trans-warp a:hover {
      display:block;
      background-color:#0AC4FC;
      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;
    }
    #cybup-trans-warp 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;
    }
    #cybup-trans-warp a:hover {
      opacity:0.9;
    }
    #cybup-trans-warp a:active {
      opacity:0.9;
    }
    #cybup-trans-warp select:focus,
    #cybup-trans-warp a:focus,
    #cybup-trans-warp select:active,
    #cybup-trans-warp a:active {
      border:none;
      outline:none;
      cursor:pointer;
    }
    option {
      background:#82B638;
      color:#fff;
    }
  </style>
  <div id="cybup-trans-warp">
    <select id="translate-language">
      <option value="" selected />Select Your Language..
      <option value="ml"/>Malayalam
      <option value="af" />Afrikaans
      <option value="sq" />Albanian
      <option value="ar" />Arabic
      <option value="hy" />Armenian
      <option value="az" />Azerbaijani
      <option value="eu" />Basque
      <option value="be" />Belarusian
      <option value="bn" />Bengali
      <option value="bg" />Bulgarian
      <option value="ca" />Catalan
      <option value="zh-CN" />Chinese
      <option value="hr" />Croatian
      <option value="cs" />Czech
      <option value="da" />Danish
      <option value="nl" />Dutch
      <option value="en" />English
      <option value="eo" />Esperanto
      <option value="et" />Estonian
      <option value="tl" />Filipino
      <option value="fi" />Finnish
      <option value="fr" />French
      <option value="gl" />Galician
      <option value="ka" />Georgian
      <option value="de" />German
      <option value="el" />Greek
      <option value="gu" />Gujarati
      <option value="ht" />Haitian Creole
      <option value="iw" />Hebrew
      <option value="hi" />Hindi
      <option value="hu" />Hungarian
      <option value="is" />Icelandic
      <option value="id" />Indonesian
      <option value="ga" />Irish
      <option value="it" />Italian
      <option value="ja" />Japanese
      <option value="kn" />Kannada
      <option value="ko" />Korean
      <option value="la" />Latin
      <option value="lv" />Latvian
      <option value="lt" />Lithuanian
      <option value="mk" />Macedonian
      <option value="ms" />Malay
      <option value="mt" />Maltese
      <option value="no" />Norwegian
      <option value="fa" />Persian
      <option value="pl" />Polish
      <option value="pt" />Portuguese
      <option value="ro" />Romanian
      <option value="ru" />Russian
      <option value="sr" />Serbian
      <option value="sk" />Slovak
      <option value="sl" />Slovenian
      <option value="es" />Spanish
      <option value="sw" />Swahili
      <option value="sv" />Swedish
      <option value="ta" />Tamil
      <option value="te" />Telugu
      <option value="th" />Thai
      <option value="tr" />Turkish
      <option value="uk" />Ukrainian
      <option value="ur" />Urdu
      <option value="vi" />Vietnamese
      <option value="cy" />Welsh
      <option value="yi" />Yiddish
    </select>
    <a id="translate-me" href="#" title="Translate">
    </a>
  </div>
  <script type="text/javascript">
    (function() {
      var lang = "en", /* Your website language */
          anchor = document.getElementById('translate-me');
      anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + lang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
      };
    }
    )();
  </script>
  <font size="1">Widget powered by
    <a href="htpp://cypup.blogspot.com" rel="dofollow">Cybup
    </a>
  </font>
</center>

Tùy biến:
  • #0AC4FC Màu Nền
  • en thay bằng ngôn ngữ website của bạn