Меняем дизайн Google Translate : Как изменить стили переводчика Blogger

Дизайн гаджета Translate для Blogger

Виджет Google переводчик способен перевести блог на платформе blogger на большинство языков мира.
Если вам нужно, чтоб ваш блог переводился на другие языки, то для вас подойдет виджет на базе Google переводчик...

Изменим стили в Google translate на Blogger

• Создадим стильную кнопки Перевести для автоматического перевода
• Удалим ссылку на Технологии Google Переводчик
  
• Добавим CSS стили

Как добавить код виджета ?

Ваш блог →Дизайн→ Добавить гаджет→ HTML/Javascript. Скопируйте и вставьте в него весь приведенный ниже фрагмент кода.

💡Пример кода отыскался на "буржуйских" сайтах, если хотите, можете поискать другие варианты переводчика на просторах интернета. Я только внес свои небольшие изменения для того, чтоб код работал❕ Сайт с кодом Cybup Translator Widget 

Скопировать код:

<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:#f79d42;
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:#4f2323;
color:#fff;
}
</style>
<div id="cybup-trans-warp">
<select id="translate-language">

<option value="en" selected />Выбрать язык...
<option value="af" />африкаанский
<option value="sq" />албанский
<option value="ar" />арабский
<option value="hy" />армянский
<option value="az" />азербайджанский
<option value="eu" />баскский
<option value="be" />белорусский
<option value="bn" />бенгальский
<option value="bg" />болгарский
<option value="ca" />каталанский
<option value="zh-TW" />китайский (традиционный)
<option value="zh-CN" />китайский (упрощенный)
<option value="hr" />хорватский
<option value="cs" / />чешский
<option value="da" />датский
<option value="nl" />голландский
<option value="en" />английский
<option value="eo" />эсперанто
<option value="et" / />эстонский
<option value="tl" />филиппинский
<option value="fi" />Финский
<option value="fr"/>французский
<option value="gl" />галисийский
<option value="ka" / />грузинский
<option value="de" />немецкий
<option value="el" />греческий
<option value="gu" />гуджарати
<option value="ht" />гаитянский
<option value="iw" />иврит
<option value="hi" />хинди
<option value="hu" />венгерский
<option value="is" />исландский
<option value="id" />индонезийский
<option value="ga" />ирландский
<option value="it" />итальянский
<option value="ja" />японский
<option value="kn" />каннадский
<option value="ko" />корейский
<option value="la" />латинский
<option value="lv" />латышский
<option value="lt" />литовский
<option value="mk" />македонский
<option value="ms" />малайский
<option value="mt" />мальтийский
<option value="no" />норвежский
<option value="fa" />персидский
<option value="pl" />польский
<option value="pt" />португальский
<option value="ro" />румынский
<option value="ru" />русский
<option value="sr" />сербский
<option value="sk" />словацкий
<option value="sl" />словенский
<option value="es" />испанский
<option value="sw"/>суахили
<option value="sv" />шведский
<option value="ta" />тамильский
<option value="te" />телугу
<option value="th" />тайский
<option value="tr" />турецкий
<option value="uk" />украинский
<option value="ur" />урду
<option value="vi" />вьетнамский
<option value="cy" />валлийский
<option value="yi" />идиш
</select><a id="translate-me" href="#" title="Перевести"></a>
</div>
<script type="text/javascript">
(function () {
var mylang = "ru"; // Язык вашего сайта
var anchor = document.getElementById('translate-me');
anchor.onclick = function () {
var selectedLang = document.getElementById('translate-language').value;
window.open('https://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + selectedLang + '&hl=' + selectedLang);
return false;
};
})();
</script></center>

Читать полностью →

Как сделать карту сайта для Blogspot: Как создать страницу Sitemap в Blogger

Что такое HTML Sitemap и ее преимущества

HTML Sitemap — это страница на вашем сайте, которая описывает полную структуру вашего сайта. Она включает ссылки на все ваши страницы и записи, что упрощает навигацию для пользователей. Она полезна для ваших посетителей, помогая им легко перемещаться по вашему сайту...

1. Сканирование поисковыми системами: карты сайта помогают поисковым роботам понять структуру вашего веб-сайта и более эффективно индексировать страницы.
2. Индексация: роботы поисковых систем систематизируют собранные в процессе сканирования данные о страницах сайта.
3. Часто обновляемый контент: когда вы обновляете или добавляете новый контент, карта сайта помогает поисковым системам быстро его находить, повышая скорость индексации.

Самый простой вариант Sitemap

Карта выглядит в виде простого списка ссылок на статьи блога. Скриншот:

Как добавить карту на отдельную страницу?

• Создайте новую страницу блога, дайте название
• В режиме HTML новой страницы вставьте код карты:

  Перейти по Ссылке

Замените адрес в коде, выделенный желтым на url вашего блога 📌

👉❓ Если хотите такую карту, как у меня на странице Карта блога (три раздела: оглавление; дата публикации и ярлыки к записям), то задавайте вопросы✏️в комментариях или через форму обратной связи❕

Читать полностью →

Как отредактировать дату в Blogger : Как изменить формат заголовка даты

Как изменить стили заголовка даты публикации в Blogger

В этой статье я расскажу вам, как изменить стили заголовка даты в вашем блоге на Blogger/Blogspot. Для этого нужно добавить код  в стили заголовка даты в Blogger с помощью  свойств CSS...

Настройка стилей для заголовка даты Blogge/Blogspot

Добавляем фон к заголовку

• Перейдите в раздел «Тема»> «Настроить»> «Изменить HTML» на панели инструментов Blogger и создайте резервную копию существующего шаблона, прежде чем вносить какие-либо изменения!
• Нажмите клавиши «Ctrl+F» для поиска кода < h2.date-header {font: $(date.font); color: $(date.text.color);} > или < .date-header span > 
  (Темы Watermark и Picture Window соответственно💡)
• УДАЛИТЕ ЭТОТ КОД (в зависимости от темы💡) и добавьте другой фрагмент  (Перейти по ссылке)

Добавляем иконку Awesome к заголовку

1. Для добавления иконки  необходимо добавить ссылку в раздел заголовка сайта для того, чтобы подгружались иконки Font Awesome. 
2. Правим код, для этого нажимаем клавиши «Ctrl+F» для поиска  <data:post.dateHeader/>. Он подсветится желтым цветом. 

💡Таких кодов может быть несколько! Поэкперементируйте с каждым по очереди! 

💡На  примере  ниже  уже добавлены и иконка и правки  кода! Вставляем код вместо старого!💡

<h2 class='date-header'><span><i class='fa fa-clock' style='font-size:18px;color:red'/><data:post.dateHeader/><data:post.times/></span></h2

Читать полностью →