Притурка Translate с нов дизайн

Притурка Translate
Добър ден, приятели. Платформата Blogger ни предоставя приспособление за превод (Translate), с което е много удобно да се преведе съдържанието на блога на други езици. Но тази притурка изглежда доста скромно.


    Днес ще ви покажа как можете да я стилизирате, за да е малко по-интересна и "не като всички останали". Ще имаме красиво проектиран бутон, при кликване върху който ще се отварят всички езици на Google, предлагани за превод на съдържанието на блога ни.

    Притурка Translate


    Нямате нужда от абсолютно нищо, просто копирайте кода по-долу и го инсталирайте в притурката HTML / JavaScript на желаното място в темата си.

    Код


    <center>
    <style type="text/css">
    #translator-wrapper {
      display:block;
      width:90%;
      max-width:300px;
      border:none;
      background-color:#336633;
      color:#fff;
      overflow:hidden;
      position:relative;
      height:40px;
      line-height:40px;
      border-radius:4px;
    }

    #translator-wrapper:hover {color:#fff;}

    #translator-wrapper select:hover {color:#fff;}
    #translator-wrapper select {
      border:none;
      background:transparent;
      font-family:'Verdana',Arial,Sans-Serif;
      font-size:12px;
      width:100%;
      color:#fff;
      -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 {
      display:block;
      background-color:#666666;
      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 />English
            <option value="id" />Indonesian
            <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 mylang = "ru", // 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>
    </center>


    Уточнения

    ➤Цветът на бутона  background-color:#336633 може да се промени на подходящ за дизайна на блога ви. Ако ще го правите, използвайте тази таблица;

    ➤С цвета на стрелката background-color:#666666 може да направите същото;

    ➤За да разположите бутона централно, трябва да затворите целия код между таговете така:

    <center>тук е целия код</ center>;

    ➤В кода няма хипервръзки от трети страни. Това е същата притурка-преводач от Google, но в други багри, да речем.

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:

    BGtop

    Здраве за всички вас! Не забравяйте да правите добро на други хора!


    OpenCloseComments
    Cancel