Widget Google Translator Dành Cho Blogspot – Blogger

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


Bạn đang xem: Widget Google Translator Dành Cho Blogspot – Blogger

  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="https://www.nguyenlamblog.xyz/2020/09/htpp://cypup.blogspot.com" rel="dofollow">Cybup
    </a>
  </font>
</center>

Xem thêm: Cài Đặt Tính Năng Fancybox Trên Blogger/Blogspot

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

———————————–


Xem thêm: Cách đưa khung Comments lên trên các bình luận mới

Nguồn: https://www.bloghong.com
Danh mục: Thủ Thuật Blogspot