Настройка-blogger : все сообщения из Рубрики
Привет, я автор блога По Секрету Всему Свету, занимаюсь созданием и настройкой блогов на Blogger.com .
iklan banner
Показаны сообщения с ярлыком Настройка-blogger. Показать все сообщения
Показаны сообщения с ярлыком Настройка-blogger. Показать все сообщения
среда, 9 июля 2025 г.

Как встроить переводчик Google в меню Blogger: Как добавить ссылку перевода на Google Translate на Blogger

Blogger инструкция по добавлению ссылки на Google Translate


Если у вас есть собственный блог на платформе Blogger,  то вы можете встроить в меню ссылку на Google Translate, чтобы перевести его на другие языки. Таким образом вы сможете предоставить возможность читателям получить доступ к контенту на предпочитаемом ими языке. Сегодняшняя статья как раз об этом.




Подробная инструкция по добавлению ссылки на переводчик в Blogger


  1. Добавление гаджета Google Translate 
  2. (Это способ подробно описан на моем сайте в статье Дизайн гаджета Translate для Blogger от 08.24)
  3. Ручное добавление ссылки в HTML-шаблон (Пример см. в меню Шапки сайта "Транслейт")
  1. Нажимаем  Тема > Настроить >  Изменить HTML 
  2. В коде HTML-шаблона нужно найти раздел, где создано ваше меню. Обычно это будет <ul> или <nav>. Пример c уже вставленным новым пунктом:
  3. <nav>
    <ul class="nav">
    <li><a href="#">Главная</a></li>
          ......................................
    <li><a href="#" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cen&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="English">Транслейт</a></li>
    </ul>
    </nav>

    💡 Вместо ("#") вставляем URL своих страниц и свое название страниц, кроме последнего пункта.
    💡 Вставь новый элемент списка <li> с ссылкой на Google Translate  (выделено в примере желтым цветом. Это и есть ссылка на Транслейт! Вставляем, ее  как есть, ничего больше не меняя).

  4. Добавление через гадждет HTML/JavaScript

    Добавь новый гаджет HTML/JavaScript:
    • В макете, в нужной области (например, Header или Sidebar), нажми на "Добавить гаджет". 
    • В появившемся списке выбери "HTML/JavaScript".
    • В поле Содержимое вставь код, используй пример приведенный выше.

Aviator
понедельник, 9 сентября 2024 г.

Форма контактов для Blogger на отдельной странице : Обратная связь для Blogger на отдельной странице

Как создать форму на отдельной странице


В инструментах Blogger появился виджет "Форма для связи". Однако, есть один нюанс. По умолчанию эта форма устанавливается на боковую панель блога. В этой статье пошагово разберемся как создать отдельную страницу с формой  для связи с читателями!

Aviator
понедельник, 2 сентября 2024 г.

Стильная кнопка Читать далее : Как изменить стиль Read More в Blogger

Как стильно оформить на blogspot кнопку "Читать далее"


Кнопки являются очень важным элементом дизайна сайта. В этой статье я покажу, как настроить внешний вид "Читать далее. Кнопка должна привлечь внимание читателя и в то же время гармонично вписываться в общее оформление блога.
Aviator
понедельник, 26 августа 2024 г.

Как настроить собственную страницу ошибок в Blogger: Как добавить стиль для страницы 404 в Blogspot

Как изменить вид собственной страницы 404 в Blogger


В платформе Blogspot (Blogger) можно добавить стиль для страницы с ошибкой 404 («Страница не найдена») с помощью кода HTML и CSS. По умолчанию на странице 404 отобра-
жается стандартное сообщение об ошибке, но можно переоп- ределить его с помощью добавления стилей.
Aviator
суббота, 24 августа 2024 г.

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

Как сделать карту блог на blogspot по ярлыкам


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



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


Для блога на платформе Blogspot (Blogger) существуют пользовательские карты (виджеты) по ярлыкам. Они выводят на отдельную страницу все сообщения блога, разделённые по ярлыкам.

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

📌Примечание. Некоторые варианты таких карт: в виде списка ссылок ярлыков и в виде таблицы.

HTML- карта в виде простого списка ссылок на статьи блога.


  1. Вариант. Код можно скачать ниже по ссылке


📌Примечание. Чтобы создать пользовательскую карту по ярлыкам, нужно

  • Создать новую страницу в блоге, дать заголовок, например, «Карта блога» или «Карта сайта».
  • Вставить специальный код в HTML-редактор страницы. В коде нужно заменить адрес блога на свой.
  • Опубликовать страницу.



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


Как сделать карту сайта для Blogspot в виде таблицы


  1. Вариант. В этом нам поможет скрипт который нужно добавить на страницу Сообщения блога в редакторе HTML

<div id="bp_toc"> </div>  

<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script>  

<script src="https://ВАШ-БЛОГ.com//feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>  

<style scoped="" type="text/css">  

#comments {display:none;}  

</style>  

📌Примечание.Замените https://ВАШ-БЛОГ.com/ на настоящий адрес вашего блога.


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


Aviator
среда, 21 августа 2024 г.

Как редактировать код макета темы Blogger : Редактирование HTML-кода Blogger

Правка кода шаблона вашего блога


В этой статье мы обсудим, как редактировать  код Темы  Blogger в формате XML, чтобы каждый новичок умел делать эти несложные операции, что позволяет легко и быстро настраивать внешний вид блога. Благодаря широкому выбору шаблонов, изображений, цветов и вариантов дизайна столбцов вы сможете сделать свой "идеальный шаблон".
Aviator
пятница, 2 августа 2024 г.

Нумерованная постраничная навигация для Blogger: Как добавить пагинацию страниц в Blogger

Навигация с номерами страниц для Blogger


Пагинация (pagination) — это разбиение содержимого сайта на отдельные страницы для удобства отображения и навигации.
Aviator
понедельник, 15 июля 2024 г.

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

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

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

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

  1. Создадим стильную кнопки Перевести для автоматического перевода
  2. Удалим ссылку на Технологии Google Переводчик
  3. Добавим 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>


Aviator
воскресенье, 7 июля 2024 г.

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

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

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

Как подключить в Blogger шрифт Font Awesome: Как подключить иконки Font Awesome

Как правильно добавлять значки Font Awesome в Blogger

Font Awesome предоставляет собой масштабируемые векторные значки, которые можно мгновенно настроить — размер, цвет, тень и все, что можно изменить через  CSS. Если вы хотите разнообразить внешний вид своего Blogspot блога, то использование в нем нестандартных шрифтов – достаточно неплохая идея.

Как установить шрифт Awesome

Есть два варианта того, как можно его получить: 
  1. Способ 1. Через официальный сайт
  2. Перейдите на официальный сайт Font Awesome, где вы можете скачать архив с библиотекой Font Awesome. Выбираем версию «FRE FOR WEB», как правило, бесплатной версии  достаточно. Затем выполните распаковку архива и скопируйте содержимое папок «/css» и «/webfonts» в свою веб-директорию (например, в папку /css/awesome).
 После этого добавьте следующую строку в тег <head> вашего сайта, чтобы подключить стили Awesome:
<link rel="stylesheet" href="/css/awesome/css/all.css" />
  •  Способ 2. CDN Font Awesome
Подключите Font Awesome с помощью CDN (Content Delivery Network). Это самый простой способ, и он не требует загрузки и установки файлов на вашем сервере. Для этого просто вставьте следующий код в ваш HTML-файл:
Важно! URL может меняться в зависимости от выбранной вами версии Font Awesome. Наш код подходит для  версии 6.4.4.
<link rel="stylesheet" href=" https://use.fontawesome.com/releases/v6.4.4/css/all.css">

Как добавить к нужному элементу иконки Font Awesome

Вам нужно выбрать нужную иконку на сайте Font Awesome  и скопировать ее HTML код:
<i class="fa fa-car" </i> и вставить его перед тем элементом, который хотите выделить
Добавление стилей CSS к иконке
< i class="fa fa-car"style="color: red; font-size: 28px;"</i>
Машины
   Пример использование иконок для меню сайта:
  <button style='font-size:14px'><a href="#">Главная
  <i class='fa fa-home'style='font-size:18px;color:#0ac4fc'></i></a>
   </button> 


Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строчных элементах  (тег  <i> ... </i>).

    Aviator
    суббота, 22 июня 2024 г.

    Похожие сообщения Blogger без картинок : Виджет сообщений Blogger в виде списка

    Виджет связанных сообщений Blogger

    Зачем это нужно? ― спросите вы. Для продвижения страниц сайта в топ-10 поисковой выдачи нужна дополнительная внутренняя перелинковка, что влияет на ранжирование в поисковой выдаче.





    Как добавить виджет без вывода миниатюр в свой блог:

    •  Перейдите в раздел «Тема»>«Настроить»>«изменить HTML» на панели инструментов Blogger и создайте резервную копию существующего шаблона, прежде чем вносить какие-либо изменения!
    •   Нажмите клавиши «Ctrl+F» для поиска тега  <data:post.body/> (См. на скриншоте ниже)
    •  Добавьте код непосредственно после этого тега (Скачать по ссылке )
        Так будет выглядеть виджет в виде списка после вставки кода!


    Aviator