Как в Blogger сделать категории
Blogger позволяет разбивать все публикации (сообщения) на отдельные категории, как это сделать читайте в описании ниже, или перейдите к просмотру видео:
1) В панели управления откройте Сообщения.
2) Напротив сообщений из которых нужно создать определенную группу категорий проставьте галочки.
3) Вверху кликните по "этикетке - ярлыку"
4) Кликните по "Создать ярлык..."
5) В появившемся окошке введите название для категории - ярлыка.
6) Перейдите в раздел Дизайн, добавьте новый гаджет под названием Ярлыки.
Как сделать индексируемые разделы или открыть главные страницы ярлыков для индексации в поиске? смотри по ссылке.
Для чего в Blogger нужны ярлыки
Друзья сегодня постараемся разобрать очередную функцию, вернее один из гаджетов платформы blogger, который называется Ярлыки. И по пути зацепим идентичную функцию WordPress рубрики. Это одинаковые виджеты, которые выполняют одну и ту же роль. По-этому для того, чтобы объяснить вам, принцип их роботы не обязательно упоминать ярлыки и рубрики одновременно так что я буду раскрывать их суть на основе блоггеровских Ярлыков.В принципе особо разбирать здесь нечего, ведь все очень просто. Но постараюсь отобразить все нюансы этого виджета, как можно точнее, ведь он играют очень важную роль в ведении сайта.
Что такое Ярлыки и Рубрики?
Итак Ярлыки в Blogger это, как уже было сказано выше гаджет или виджет, кому как удобней направленный на то, чтобы разделить контент сайта на определенные категории. Например, если сайт о кулинарии, тогда нужно разбить контент на следующие категории: первые блюда, вторые блюда и т.д. у кого на сколько фантазии хватит. Вообще желательно создавать минимальное число категорий, чтобы не путать, как себя так и читателей. Но тут все зависит от размеров сайта и его тематики.Ярлыки помимо того, что создают категории, при этом они еще создают и структуру сайта, с помощью которой, как посетители так и поисковые роботы ориентируется при его просмотре. По-этому нужно постараться сделать эту структуру максимально удобной, как для первых так и для других. В этом может помочь виджет хлебные крошки. Ко всему, для большего удобства категории можно вывести в главное меню или в боковые панели в виде:
1) Облако.
2) Список.
Индексация Ярлыков и Рубрик
Теперь, что касается индексации страниц категорий. Они, как и другие страницы сайта должны индексироваться в поисковых системах и тем самым приводить на сайт больше посетителей. По-этому в название категории нужно прописать, те ключевые слова по которым вы собираетесь ее продвигать. Кроме этого можно задать сопровождающее текстовое и графическое оформление это несомненно улучшит ее продвижение. Правда на обеих платформах это не так просто сделать, ведь редактора для таких страниц попросту нет.Для пользователей платформы Blogger не все так хорошо, поскольку их страницы с категориями в отличии от страниц WordPress не индексируются поисковыми системами, вернее они могут это делать, но при этом возникают дубли постов и рейтинг сайта стремительно падает или просто не набирает его. По-этому на блоггере категории скрыты от поисковиков. Но эту проблему можно решить и вскоре мы дойдем к этой теме для которой будет написана отдельная статья: "Индексируемые разделы". К тому же Ярлыки при этом так же будут играть свою определенную роль так что не стоит от них отказываться.
Что получается в итоге
Итого, что мы выяснили по поводу Ярлыков и Рубрик:- Создают категории контента
- Создают структуру сайта
- Индексируются поисковыми системами (в Blogger не индексируются)
- Повышают трафик
Выпадающие ярлыки для blogger - blogspot
Выпадающий список ярлыков для blogger - blogspot
Здравствуйте друзья. Вот и добралась к нам зима, до Нового Года и других замечательных праздников уже можно рукой подать, даже я б сказал можно их нащупать. Многие уже думают какую елку покупать, какие гирлянды на нее вешать, ну а мы пока что думаем, как помочь вам улучшить ваши блоги и сайты.Как все мы знаем ярлыки на blogger можно отобразить, либо списком, либо же облаком. Не так давно у нас была тема о том, как улучшить вид ярлыков при помощи CSS3. Сегодня же мы будем преобразовывать ярлыки из обычного списка в выпадающий список. Выглядит это куда более красиво и аккуратно да и к тому же позволяет блогеру и вебмастеру сэкономить больше места в сайдбаре. Посмотреть, как это выглядит и работает можно на созданном конструкторе.
Итак, для установки выпадающих ярлыков нужно перейти в раздел Шаблон - Изменить HTML в редакторе ищем код:
Их может быть несколько вам нужно изменить все те которые имеют в себе символы
...
Затем находим код
]]> и перед ним выкладываем:/* Dropdown Label */
.dropmedown select{outline:none;cursor:pointer}
.dropmedown{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444}
.dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropmedown:before{border-bottom-style:solid;border-top:none}
.dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}Теперь сохраняете шаблон, если нужно добавляете виджет ярлыки и проверяете, какой вид они приобрели.
Blogger - улучшаем вид ярлыков при помощи CSS3
Здравствуйте уважаемые блогеры и вебмастера. Сегодня мы подготовили очередной урок по улучшению сайта - блога на платформе blogger. Многие из нас знают, что собой являют ярлыки, если же нет, в таком случае вы можете ознакомиться с ними более подробней на моем канале youtube, где я рассказываю, об улучшениях для блоггеров. Итак посмотрели узнали, что же такое ярлыки и для чего они нужны? Отлично движемся дальше, как вы знаете работу сайта - блога обеспечивает шаблон написанный при помощи кодов HTML/Javascript так вот в стандартном шаблоне наши ярлыки выглядят сыровато, это с виду обычная ссылка, тогда, как в веб-дизайнерских работах они отображаются по разному, какой стиль им зададут так они и будут отображаться. Большинство старается задать им кнопочный вид где цвет меняется при наведении курсора мыши. В общем вы можете подобрать себе шаблон для blogger по своему вкусу, где уже все готово и настроено, или же понемногу самим доводит его до идеального состояния. Итак мы знаем, что ярлыки делят посты на категории и знаем, как их добавлять, теперь осталось узнать, как сделать их более стильными так, чтоб радовали глаз. Для этого нужно перейти в раздел Тема - Изменить HTML находим код
]]> и перед ним вставляем следующий код:
.Label a { padding-left: 20px; background: #000; padding: 0 20px; color: #fff!important; border-radius: 100px; -moz-border-radius: 100px; height: 32px; line-height: 32px; text-transform: uppercase; text-decoration: none; border: none !important; -webkit-transition: all .3s ease-in-out !important; t: 30pxt: 30px; float: left; margin-left: 5px; margin-top: 5px; font-size: 14px; } .Label a:hover { color: #000 !important; background: #ff0; }
Сохраняем шаблон и радуемся своим новым стильным ярлыкам. Ну, а мы продолжаем, сейчас мы узнаем насколько хорошо вы выучили раздел ярлыки. Итак ярлыки могут отображаться списком и? ... правильно облаком. Как вы уже поняли первый вариант был для отображения ярлыков списком, если выбрать вариант облако они приобретут свой стандартный вид по-этому сейчас мы зададим несколько стильных вариантов для облака. Для этого все перед тем же кодом
]]> вставляем следующий код:.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 } .cloud-label-widget-content{ text-align:left } .label-size { background:#0dd7b4; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; } .label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; } .label-size:hover { background:#333333; } .label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; } .label-size { line-height:1.2 }
Сохраняем шаблон смотрим, что получилось.
И для второго варианта (прежде чем его добавить уберите первый вариант) добавляем:
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 } .cloud-label-widget-content{ text-align:left } .label-size { border-radius:30px; background:#FA0830; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; } .label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; } .label-size:hover { border-radius:30px; background:#333333; } .label-count { white-space:nowrap; border-radius:30px; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; } .label-size { line-height:1.2 }
Первый вариант добавляет зеленые кнопки, второй вариант красные кнопки. И в настройках ярлыка можете поставить галочку напротив предложения "Показывать количество сообщений для каждого ярлыка".Новые стили для Ярлыков 2023
Друзья, пришло время обновить публикацию добавив сюда еще один вариант стилей для ярлыков отображающихся в виде облака. Надеюсь вам понравится. Для установки вам нужно:
В панели управления откройте раздел Тема - Изменить/HTML и перед закрывающим тегом ]]> вставьте код:
Для серии Тем Notable, Contempo, Emporio, Soho (сейчас уже доступно не мало тем созданных на их базе отличить их от тех, которые были созданы на стандартных можно с помощью формы комментариев, если она конечно не заменtна на Disqus.)
.widget-content.cloud-label-widget-content{display:inline-block;width:100%}.widget-content.cloud-label-widget-content{display:inline-block}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left;padding:10px}.label-count{white-space:nowrap;display:inline-block}
.sidebar-container .label-count { backface-visibility: hidden; font-weight: normal!Important; display: inline-block!important; position: absolute; top: -5px; right: -15px; background: #fff!important; color: #0ba139 !important; white-space: nowrap!important; padding: 5px!Important; width: 25px; height: 22px; line-height: 22px; border-radius: 4px!important; text-align: center; z-index: 1; transform: scale(0.0); box-shadow: 0 0 5px rgba(0,0,0,0.15); transition: all .3s;}
.sidebar-container .label-size:hover .label-count{transform:scale(1.0)}
.list-label-widget-content li{display:block;padding:4px 0;position:relative;margin:0}.list-label-widget-content li:first-child{padding:0 0 4px}.list-label-widget-content li:last-child{padding-bottom:0;border-bottom:0}.list-label-widget-content li a:before{content:'\f111';position:absolute;left:0;top:10px;font-size:8px;font-family:fontawesome;color:#ccc;transition:all .3s}.list-label-widget-content li a:hover:before{color:#e3145f}.list-label-widget-content li:first-child a:before{top:7px}.list-label-widget-content li a{padding-left:20px;font-size:14px;color:#222}.list-label-widget-content li a:hover{color:#e3145f}.list-label-widget-content li span:last-child{color:#999;font-size:12px;font-weight:400;position:absolute;top:8px;right:0}.list-label-widget-content li:first-child span:last-child{top:2px}
.cloud-label-widget-content{text-align:left;overflow:hidden}
.cloud-label-widget-content .label-count{background:#e3145f;color:#fff;margin-left:-3px;white-space:nowrap;border-radius:0;padding:1px 4px;font-size:12px;margin-right:5px}.cloud-label-widget-content .label-size{position:relative;background:#586662;display:inline-block;float:left;font-size:12px;margin:0 4px 4px 0;border-radius:3px}.cloud-label-widget-content .label-size:hover{background:#367a5b}.cloud-label-widget-content .label-size a,.cloud-label-widget-content .label-size span{color:#fff;display:inline-block;font-size:14px;font-weight:600;padding:4px 12px}.cloud-label-widget-content .label-size a:hover{color:#fff}.cloud-label-widget-content .label-size:hover a{color:#fff}.cloud-label-widget-content .label-size:hover span{background:#2f2f2f;color:#fff;cursor:pointer}.cloud-label-widget-content .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%}.label-size-1,.label-size-2{opacity:100}Для стандартных тем используем следующий CSS код:
.widget-content.cloud-label-widget-content{display:inline-block;width:100%}.widget-content.cloud-label-widget-content{display:inline-block}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left;padding:10px}.label-count{white-space:nowrap;display:inline-block}
#sidebar-wrapper.label-count { backface-visibility: hidden; font-weight: normal!Important; display: inline-block!important; position: absolute; top: -5px; right: -15px; background: #fff!important; color: #0ba139 !important; white-space: nowrap!important; padding: 5px!Important; width: 25px; height: 22px; line-height: 22px; border-radius: 4px!important; text-align: center; z-index: 1; transform: scale(0.0); box-shadow: 0 0 5px rgba(0,0,0,0.15); transition: all .3s;}
#sidebar-wrapper.label-size:hover .label-count{transform:scale(1.0)}
.list-label-widget-content li{display:block;padding:4px 0;position:relative;margin:0}.list-label-widget-content li:first-child{padding:0 0 4px}.list-label-widget-content li:last-child{padding-bottom:0;border-bottom:0}.list-label-widget-content li a:before{content:'\f111';position:absolute;left:0;top:10px;font-size:8px;font-family:fontawesome;color:#ccc;transition:all .3s}.list-label-widget-content li a:hover:before{color:#e3145f}.list-label-widget-content li:first-child a:before{top:7px}.list-label-widget-content li a{padding-left:20px;font-size:14px;color:#222}.list-label-widget-content li a:hover{color:#e3145f}.list-label-widget-content li span:last-child{color:#999;font-size:12px;font-weight:400;position:absolute;top:8px;right:0}.list-label-widget-content li:first-child span:last-child{top:2px}
.cloud-label-widget-content{text-align:left;overflow:hidden}
.cloud-label-widget-content .label-count{background:#e3145f;color:#fff;margin-left:-3px;white-space:nowrap;border-radius:0;padding:1px 4px;font-size:12px;margin-right:5px}.cloud-label-widget-content .label-size{position:relative;background:#586662;display:inline-block;float:left;font-size:12px;margin:0 4px 4px 0;border-radius:3px}.cloud-label-widget-content .label-size:hover{background:#367a5b}.cloud-label-widget-content .label-size a,.cloud-label-widget-content .label-size span{color:#fff;display:inline-block;font-size:14px;font-weight:600;padding:4px 12px}.cloud-label-widget-content .label-size a:hover{color:#fff}.cloud-label-widget-content .label-size:hover a{color:#fff}.cloud-label-widget-content .label-size:hover span{background:#2f2f2f;color:#fff;cursor:pointer}.cloud-label-widget-content .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%}.label-size-1,.label-size-2{opacity:100}Сохраняем Тему.
После этого проверяем, как выглядит виджет в блоге (чтобы при навидении курсора начало отображать количество сообщений по кажому из ярлыков в разделе Дизайн откройте виджет ярлыки и поставьте галочку напротив - Показывать количество сообщений для каждого ярлыка), Если ярлыки выглядят так же, как на демо, тогда ок, но если не так, как на демо, тогда делаем следующее, ищем в Теме виджет Ярлыки или Label1, если его нет, тогда создаем новый в разделе Дизайн. После возвращаемся в редактор HTML\JS вверху кликаем по кнопке Список виджетов, в списке выбираем Label1. Меняем весь код виджета начиная от открывающего тега
ALPHA
CLOUD
ALL
false
Сохраняем Тему.
Как сделать ярлыки разноцветными
Во многих шаблонах ярлыки отображаются в сокращенной форме сообщений на главной странице и в самих Сообщениях. Они могут отображаться в виде ссылки, или кнопки. Сейчас я покажу вам, как сделать кнопочный вариант ярлыка и задать каждому из них свой собственный цвет.Для настройки используйте HTML кода и видео инструкцию:
1. HTML
2. CSS
a.Интересно {
padding: 7px;
background: #333;
color: #fff;
border-radius: 4px;
}Видео инструкция:
Как присваивать ярлыкам иконки
Если вам нужно присвоить ярлыку определенную иконку, тогда задайте настройки из предыдущего урока "Как сделать ярлыки цветными" затем используйте следующий CSS код:a.НОВЫЙ:before {
font-family: fontawesome;
content: "\f03e";
margin-right: 10px;
font-size: 15px;
}Смотрим видео инструкцию по применению кода:
Blogger Soho Contempo Notable Emporio сделать ярлыки развернутыми
Soho Contempo Notable Emporio сделать ярлыки открытыми
Чтобы сделать ярлыки раскрытыми, перейдите в раздел Тема - Изменить HTML, найдите в шаблоне код виджета "Ярлыки" (жмите клавиши CTRL+F в поисковом окне впишите Ярлыки, или название, которое вы ему задали при создании, нажмите энтер) чуть ниже, левее увидите черные треугольники, первый после строки Ярлыки пропустите кликните по второму, раскроется новый код, в нем удалите строку:data:view.isLabelSearch сохраните тему.
После этого ярлыки будут раскрытыми, вернее их часть, если у вас больше 10 ярлыков, тогда первые 10 будут отображаться. Для остальных будет видна кнопка Показать больше.
Есть вопросы, пишите в комментариях.
Коммент.