Menu

воскресенье 23 2024

Иконочный шрифт в Blogger : Установка и настройка Font Awesome

                 Добавить комментарии   

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

Использование иконок Font Awesome позволяет улучшить визуальное восприятие вашего контента, делая его более привлекательным и информативным…






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


Как подключить иконки Font Awesome к сайту, блогу

Есть два варианта подключения (См. на скриншоте ниже)
  1. Через официальный сайт:
    2. Перейдите на страницу начала работы с Font Awesome и введите свой адрес электронной почты. Они отправят вам электронное письмо с кодом для вставки, который выглядит примерно так:  
    <scriptsrc='https://kit.fontawesome.com/a076d05399.js'crossorigin='anonymous’>
    Теперь вам нужно скопировать и вставить его в заголовок вашей темы   «Тема»> «Настроить»> «Изменить HTML». Вставлять скрипт Font Awesome нужно между тегами заголовка  </head>…</head>

  2. Вставить ссылку, которая подключит ваш сайт к базе font awesome между  тегами <head> ... </head> вашей темы: 
 <link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' integrity='sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay' rel='stylesheet'/>


Как добавить к нужному элементу иконки 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>).

Как изменить стили конкретной иконки и шрифт любого текста

  • *Для более тонкой настройки шрифта вам потребуется загрузить файлы Font Awesome в папку своего проекта, а затем создать ссылку на его CSS-файл на своих веб-страницах, чтобы импортировать Font Awesome.
  • *Перейдя на стартовую страницу fontawesome.com/, прокрутите вниз до раздела «Другие способы использования» (Other Ways to Use). Далее  жмем кнопку «Загрузить» и выбираем, в нашем случае, «FRE FOR WEB»

суббота 22 2024

Похожие сообщений под статьёй : Виджет сообщений в виде списка

                 Добавить комментарии   

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


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






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

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


вторник 11 2024

RSS-ленты новостей: Как создать и настроить?

                 Добавить комментарии   

Что такое RSS-канал и как им пользоваться


RSS-лента — это инструмент, который позволяет пользователю подписываться на любой обновляемый контент…


 

RSS-канал, также известный как Really Simple Syndicate, представляет собой формат ваших сообщений  на основе XML файла. XML-файл вашей ленты каждый раз автоматически обновляется при публикации нового контента.

Как найти канал RSS-фида?

Найти URL-адрес RSS-канала просто:
  • Добавьте к адресной строке вашего блога строку feeds/posts/default и нажмите ENTER, чтобы открыть содержимое RSS-канала.
  • Веб-браузер отобразит формат XML, поскольку не установлена программа для чтения или расширение браузера.
  RSS-агрегатор — клиентская программа или веб-приложение для автоматического сбора сообщений из источников, экспортирующих в форматы RSS или Atom, например, заголовки новостей, блогов.
Согласитесь, что читать новостной канал в формате *XML неудобно и поэтому вам понадобиться специальная программа (их называют RSS-читалками, ридерами) или расширение для браузера.
Чтобы читать новые статьи через фид RSS:
  1. Добавить новостную ленту на блог через гаджет, который называется  Фид  (для контента RSS или Atom.) Или  вставить  уже  готовый код через гаджет HTML/JavaScript.👇

    2. <p style="text-align: :left;">Читать новостную ленту</p>
<a class="rds_hl_nofollow" href="https://url ссылка на блог/feeds/posts/default" rel="nofollow noopener" target="_blamk" title="Читайте новости по RSS">
<img align=":left" alt="Читайте новости по RSS" class="rds_hl_nofollow" src="url ссылка на иконку RSS" style="margin-right: 26px; margin: 2px 26px 3px 10px; outline: rgb(247, 157, 66) solid 3px;" /></a>
         
  2. Установить программу для чтения RSS, которая сможет прочитать XML-файл* и преобразовать его в читабельный текст.
Я же решил воспользоваться расширением из интернет-магазин Chrome — RSS Feed Reader. 
Выполните 3 шага для  чтения статей на примере моего блога в браузере Гугл Хром: (см. скриншот ниже)👇
  1. Нажать на иконку RSS канала
  2. Нажать иконку ленты для чтения (В моем примере это PSWS),
     либо на "+", чтобы добавить любую другую ленту
  3. Читать ленту новостей

*Если с английского расшифровать аббревиатуру XML, то получится «eXtensible Markup Language» — расширяемый язык разметки для чтения "машиной". Язык разметки — это набор символов, который используют, чтобы обозначить, какую структуру должен иметь текст и как именно он должен отображаться на странице сайта. (Чтобы посмотреть, как выглядит код отображаемой страницы сайта, необходимо на ней нажать ПКМ "Просмотр кода страницы"). Пример созданной ленты новостей смотрите  в боковой колонке моего блога, нажав на ссылку  ЧИТАТЬ
iklan banner
Приветствую Вас на сайте PSVS!
! Сегодня

Транслейт


Переводчик сайта на другие языки

Статистика
  • …
    Сообщений
  • …
    Комментариев
  • …
    Просмотров
Технологии Blogger.

Random Posts

Архив-Календарь

Food

3/Food/feat-list

Fashion

3/Fashion/grid-small

Design

Shooting

Racing

Bottom

Sponsor Advertisement

Установка ‼️и настройка блогов на Blogspot❕❕

Text Widget

Text Widget

Копирование материала — с разрешения автора сайта © Copyright, 2020 г.

Форма для связи

Имя

Электронная почта *

Сообщение *

Постоянные читатели

Sports

3/Sports/col-left

Video of Day

Музыка для настроения

Наведи курсор

Popular Posts

Меню

🔔Подписаться по email🔻

PSWS

Popular Jobs

Popular Posts

Advertisement With Us

Advertisement

About Me

Copyright ©2024 | Копирование — С разрешения автора сайта PSVS По секрету всему свету | У вас — вопросы, у нас — ответы!