Сменить иконку favicon на uCoz

kouf — Fri, 20 Mar 2015 15:27:25 GMT

Сменить иконку favicon для Вашего сайта uCoz
У сайта на Ucoz уже есть "фавайкон” (favicon - иконка размером 32х32 в строке браузера, где указан адрес открытого сайта. Однако у большинства сайтов, созданных на сервисе Ucoz, эта иконка одинаковая! А ведь Ваш персональный сайт должен быть уникальным! Поэтому я хочу предложить Вашему вниманию три сервиса для создания иконок favicons, которые помогут персонализировать сайт на Ucoz.
Откуда взялся этот самый Favicon (изображение значок - этот термин происходит от слова Favorites, обозначающего меню избранных ссылок) — название тоже возникло благодаря Internet Explorer и связано с особой ролью файла favicon.ico

Зачем Вам нужен favicons:

- В результатах выдачи поисковой системы увеличивается кликабельнось сайта
- Повышается узнаваемость как картинка бренда
- В закладках / вкладках броузера
- В социальных закладках
- Проще говоря выделяет Ваш сайт из миллиона других

С помощью "Файлового менеджера" нужно закачать созданный файл favicon.ico в корневую директорию Вашего сайта. (Не обращайте внимание на то, что стандартная иконка системы останется в этой папке). Для вызова иконки в шаблоне страниц сайта перед закрывающим тэгом (начало страницы) вставьте следующий код:

Подробное Пояснение:

Просто загрузить через файловый менеджер иконку с именем favicon.ico и всё ! Чтобы она заместила стандартную !!!!!

Для проверки можете ввести в адресную строку браузера http://имя сайта/favicon.ico - должна появиться картинка вашей иконки.

Далее, для того чтобы наверняка, в панели управления сайтом:

Главная -> управление дизайном -> страницы сайта

перед закрывающим тегом прописываем теги

Код

По аналогии можно прописать и для страниц форума

После всего этого нужно очистить кеш-память браузера и перезагрузить его (или просто подождать некоторое время) либо воспользоваться другим браузером.

Для отображения иконки в результатах поиска подождать с недельку или две - до переиндексации сайта поисковыми системами

Повторяю что достаточно просто сменить иконку, чтобы при загрузке страницы - http://имя сайта/favicon.ico выходила Ваша новая картинка, теги это для подстраховки.

Стилизация вида меню категорий

kouf — Fri, 20 Feb 2015 15:55:25 GMT

Перед тем как оформить нужный вид меню категорий, нам следует включить нужные функции, для этого заходим в Панель управления » Нужный модуль » Настройки модуля и устанавливаем:

Количество колонок в меню категорий → 1.
Выводить количество сообщений в категории возле названия категории: → устанавливаем галочку.

Теперь для отображение меню категорий модуля сайта, нам необходимо установить на страницу сайта специальный системный код → $CATEGORIES$

После того, как Вы добавили и сохранили в шаблон системный код $CATEGORIES$ давайте посмотрим, что нам выдала система:

Код

    Категория 1
    [0]

    Категория 2
    [0]

    Категория 3
    [0]

    Категория 4
    [0]

    Категория 5
    [0]

    Категория 6
    [4]

    Категория 7
    [5]

Описание

Как мы видим, перед нами обычная таблица с классом catsTable и ячейками catsTd в которой представлены:

Ссылки на нужные категории → class="catName";
Тег span — количество материалов в категории → class="catNumData";
Тег div — описание категории → class="catDescr".

Теперь давайте пропишем значения нашим классам:

Код

.catsTable {width:200px;overflow:hidden;border-collapse:0px;overflow: hidden;}

.catsTd {width:200px;height:20px;color:#000;}

a.catName:link,a.catName:visited,a.catName:active {font:10px Arial,sans-serif;color:#eee;margin:0;float:left;width:200px;height:18px;display:block;position:absolute;padding:4px 0 0 11px;border-top: 1px solid #ccc!important;}

.catsTd a:hover{background:#eee;}

.catNumData {float:right;margin: 5px 5px 0 0;position: relative;font:9px Arial,sans-serif;font-weight: bold;}

.catDescr{color:#484848;font-weight: bold;text-align:right;padding: 9px 6px 0 0;margin: 21px 0 4px 0!important;border-top: 1px solid #ccc!important;}

Рассмотрим использованные CSS классы:
catsTable:
width:200px; → отвечает за ширину таблицы;
border-collapse:0px; → расстояние линий между ячейками таблицы;
overflow: hidden; → отображение области внутри элемента.

catsTd:
width:200px; → отвечает за ширину ячейки td;
height:20px; → высота ячейки td;
color:#000; → цвет текста.

a.catName:link,a.catName:visited,a.catName:active:
font:10px Arial,sans-serif; → размер и его шрифт;
color:#eee; → отвечает цвет текста;
float:left; → элемент по левому краю (left - слева, center - центр, right - справа);
width:200px; → длина ячейки с учётом внутренних отступов — padding:4px 0 0 11px;;
height:18px; → высота;
display:block; → элемент показывается как блок;
position:absolute; → указывает, что элемент абсолютно позиционирован;
margin:0; → запрещаем внешние отступы;
padding:4px 0 0 11px; → внутренние отступы;
border-top: 1px solid #ccc!important; → верхняя линия рамки.

catsTd a:hover:
background:#eee; → отвечает за фон ссылки при нажатии.

catNumData:
float:right; → элемент по правому краю (left - слева, center - центр, right - справа);
margin: 5px 5px 0 0; → отвечает за внешние отступы;
position: relative; → устанавливается относительно его исходного места;
font:9px Arial,sans-serif; → размер и его шрифт;
font-weight: bold; → шрифт жирный.

catDescr:
padding: 9px 6px 0 0; → внутренние отступы;
margin: 21px 0 4px 0!important; → внешние отступы;
border-top: 1px solid #ccc!important; → верхняя линия рамки;
color:#484848; → цвет текста;
font-weight: bold; → жирный шрифт;
text-align:right; → отвечает за выравнивание текста по правому краю (left - слева, center - центр, right - справа).

Настраиваем на свой вкус

Многие интересуются вопросом → "как установить иконки перед категориями?". Это делается скриптом, но работает скрипт в модулях: каталог статей/файлов/сайтов и онлайн игры..

Устанавливаем код на нужных страницах (главная страница каталога, страница добавления, страница материала и комментариев к нему и др.) после

Код

В массиве img пропишите пути к картинкам для категорий (в одинарных кавычках через запятую, не забываем про подсчет категорий).
Также к скрипту можно добавить CSS стили в свойство style, для упрощенной настройки отображения картинок.

PRO SEO

Сменить иконку favicon на uCoz

Стилизация вида меню категорий