2013-05-28

Оформление ярлыков blogger

ярлыки blogger
Сегодня вы узнаете как оформить ярлыки blogger в симпатичное облако, которое бы состояло из отдельных анимированных “кирпичиков”.
Только однажды в моем блоге я касалась темы оформления ярлыков в записи анимированные ссылки. В ней речь шла об анимации перемещения ярлыков. В этой статье вы узнаете еще об одном способе оформления этого виджета блога. Однако я не призываю вас применять все подряд фишки оформления, о которых я рассказываю на страницах своего блога. Именно чувство меры поможет вам создать хороший сайт

Ярлыки участвуют в структуре сайта, делая ее более понятной. К сожалению, в Blogger отсутствуют категории, и поэтому эту функцию на себя отчасти берут ярлыки.
Сначала создайте облако тегов, если оно у вас отсутствует. Для этого во вкладке Дизайн, создайте новый элемент с одноименным названием “Ярлыки”. Следите за тем, чтобы ваши метки отображались в виде облака. Вы можете выбрать для отображения желаемые теги.
.. ярлыки_настройка
Внимание!!! Если после добавления гаджета “Ярлыки”, они не появились у вас в блоге, значит вы не прописывали таковые в сообщениях блога. Отредактируйте сообщения, впишите ярлыки (метки), и у вас появится облако тегов.
ярлыки_в_сообщениях
У каждого сообщения может быть от одного до нескольких ярлыков. Ярлыки (метки, теги) разных сообщений одной тематики могут и должны повторяться. Так, например, в блоге домохозяйки могут быть ярлыки “рецепты”, “дети”, “личная жизнь” и другие.
Теперь перейдем к оформлению виджета в виде анимации. Для этого перейдем во вкладку “Шаблон” админки блога. В редакторе кода найдите отрезок кода  ]]></b:skin>. Перед этим кодом добавьте:

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}
Просмотрите блог. Если все сделано правильно, сохраните изменения.
Это было простое облако тегов. Если вы хотите яркое облако, которое меняет цвет при наведении, то могу предложить вам сиреневое.
сиреневые метки

Для того, чтобы раскрасить метки, вам нужно добавить перед отрезком кода ]]></b:skin> добавить код:
#Label1 a{
border: 1px rgba(0,0,0,0.2) solid;padding: 6px 8px 6px 14px;text-decoration:none;
color:black;white-space: nowrap;
font-family: arial,serif;text-transform:capitalize;
font-size: 12px;font-weight: bold;
position: relative !important;background: #aa00ff; -moz-opacity:0.75;
-khtml-opacity:0.75;opacity:0.75;
filter:alpha(opacity:75%);
float:left;padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:8px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover {
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
background:#A55A27;color:white;
-webkit-transition:all ease-in-out .5s;
-moz-transition:all ease-in-out .5s;
-o-transition:all ease-in-out .5s;
transition:all ease-in-out .5s;
}
#Label1 a:active {
background:#B24700;color:#80FFFE;
-webkit-transition:all linear .5s;
-moz-transition:all linear .5s;
-o-transition:all linear .5s;transition:all linear .5s;
}
В данном коде сиреневым цветом выделено цвет фона кнопок, коричневым – фон кнопок при наведении, светло-коричневым – цвет кнопок при активации, белым – цвет ссылок при наведении и голубым – цвет ссылок активных.

11 комментариев :

Лариса комментирует...

Спасибо - очень интересно - обязательно попробую.

dashuska комментирует...

А я попробовала и у меня получилось! :)
Спасибо большое!!! В таком варианте ярлыки смотрятся интереснее!

Antonina Romanova комментирует...

Интересный вариант оформления, надо попробовать) Спасибо.

Ольга Малышева комментирует...

Здравствуйте, такой отрзок кода не нашла....Можно поподробнее..Ярлыки как гаджет есть, а облако не получается ...

Mycrib комментирует...

]]></b:skin> не нашли, значит плохо искали. Он есть в каждом шаблоне блога.
Как искать код в шаблоне:
1. Шаблон блога -> изменить html,
2. Ставьте курсор в любое место кода шаблона (он же редактор кода), в верхнюю его часть,
3. Нажмите Ctrl + F (одновременно на клавиатуре),
4. в окно поиска введите ]]></b:skin>
5. Enter

Как найдете код, поставьте коды из статьи, просмотрите изменения. Если все устраивает - сохраните шаблон.

marihka комментирует...

Здравствуйте, скажите пожалуйста а можно изменить цвет кнопок с сиреневого на синий (например), если можно - то как, подскажите пожалуйста. Спасибо))).

Иванова Наталья комментирует...

marihka, в строке
position: relative !important;background: #aa00ff;
Измените цвет кнопок на свой. Синий цвет - #0000FF
т.е. должно получиться:
position: relative !important;background: #0000FF;
Если вы выбрали другой оттенок синего, то вставьте свой цвет кнопок ярлыков.
Если не получиться, то напишите в комментарии какой цвет вам нужен, и я пришлю вам готовый код кнопок.

Виолетта Холодарь комментирует...

спасибо, очень интересные статьи. Подскажите пожалуйста, а где посмотреть коды цветов ?

Иванова Наталья комментирует...

Виолетта, коды цветов можно посмотреть здесь
Вам может пригодиться также программа для определения цвета с экрана монитора colorpic.

Светлана комментирует...

Здравствуйте!Большое спасибо за предоставленный материал!очень всё нужно и полезно!)))
В первом варианте кода,"кирпичики" при наведении курсора немного поворачиваются...подскажите,пожалуйста,можно ли убрать этот эффект?если да - то как?
Спасибо!

Иванова Наталья комментирует...

Светлана, уберите из кода эти строки:
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности