Оформление кнопок
Красивые кнопки на сайте выполняют ряд важных функций. Во-первых, они делают интерфейс более привлекательным и современным, что помогает удерживать внимание посетителей и повышает вероятность того, что они выполнят нужное действие. Кроме того, красивые кнопки улучшают пользовательский опыт, делая навигацию более интуитивной и удобной. Также они могут быть использованы для привлечения внимания к важным элементам сайта или для подчеркивания ключевых действий, которые хочет сделать посетитель. В целом, красивые кнопки помогают улучшить конверсию и повысить уровень вовлеченности пользователей на сайте.
Кнопка 1
<div class="grid">
<div class="button-container">
<button class="stretch-up">Название</button>
</div></div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;
}
button:hover {
cursor: pointer;
}
.button-container:hover .stretch-up {
animation: stretchUp 0.6s forwards;
}
@keyframes stretchUp {
70% {
transform: translateY(-20px) scale(1, 1.6);
}
73% {
transform: translateY(-40px) scale(1, 1);
}
76% {
transform: translateY(-5px) scale(1, 1);
}
85% {
transform: translateY(-10px) scale(1, 1);
}
90% {
transform: translateY(0) scale(1, 1);
}
}</style>
Кнопка 2
<div class="grid">
<div class="button-container">
<button class="stretch-out">Название</button>
</div></div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;}
button:hover {
cursor: pointer;
}
.button-container:hover .stretch-out {
animation: stretchOut 0.6s forwards;
}
@keyframes stretchOut {
45% {
transform: scale(1.5, 0.7);
border-radius: 15px;
}
50% {
transform: scale(0.5, 1.3);
}
55% {
transform: scale(1.3, 0.8);
}
60% {
transform: scale(1, 1.2);
}
65% {
transform: scale(1.1, 0.9);
}
70% {
transform: scale(1, 1);
}
75% {
transform: scale(1.1, 1);
}
100% {
transform: scale(1, 1);
}
}
</style>
Читайте на блоге:
Кнопка 3
<div class="grid">
<div class="button-container">
<button class="squish-in">Название </button>
</div></div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;}
button:hover {
cursor: pointer;
}
.button-container:hover .squish-in {
animation: squish-in 0.5s forwards;
}
@keyframes squish-in {
60% {
transform: scale(0.5, 1.6);
border-radius: 45% 45% 45% 45% / 40% 40% 40% 40%;
}
70% {
transform: scale(1.5, 0.7);
border-radius: 15px;
}
80% {
transform: scale(0.9, 1.3);
border-radius: 25% 25% 25% 25% / 20% 20% 20% 20%;
}
85% {
transform: scale(1.2, 0.9);
border-radius: 15px;
}
90% {
transform: scale(1, 1.1);
border-radius: 15px;
}
}
</style>
Кнопка 4
<div class="grid">
<div class="button-container">
<button class="squish-down">Название</button>
</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;}
button:hover {
cursor: pointer;
}.button-container:hover .squish-down {
animation: squish-down 0.5s forwards;
}
@keyframes squish-down {
70% {
transform: scale(1, 0.3) translateY(70px);
}
75% {
transform: scale(1, 1.5) translateY(-15px);
}
80%,
90% {
transform: scale(1, 1.2) translateY(-10px);
}
85% {
transform: scale(1, 0.9) translateY(0);
}
}
</style>
Текст на кнопке — выделила в коде жирным, меняйте на свой.
Градиент кнопок — выделила красным.
Окантовку — выделила синим.
Скругление углов — меняйте значение на большее или меньшее. В коде отметила зелёным цветом.
Размер шрифта — оранжевым.
Цвет шрифта — голубым
Интересный эффект для оформления картинок
Код оформления найден на https://codepen.io. Автор Chris Smith. 
Далее ⇒
Слайдер на CSS, без скриптов. Оформить можно 3 картинки. Добавляется код в статью или на страницу Блогспота, в редактор, в режиме HTML.
Выглядит слайдер так: в спокойном состоянии видны две картинки, а при наведении курсора они открываются по типу штор и исчезают. Видна только большая центральная картинка, которая слегка увеличивается(приближается). Эффект подходит для оформления разнообразных фото загадок, когда за шторками прячут отгадку. Например: "сколько лет этому человеку" или "где прячется предмет". А так же для показа картинок "до и после". Например: "как выглядит девушка до стрижки и после".
Код
<center><div id="grid">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<style>* {
padding: 0;
margin: 0;
box-sizing: border-box;
transition: 0.75s ease;
}
#grid {
width: calc(100% - 20vmin);
aspect-ratio: 16 / 7;
background: linen;
display: grid;
grid-template-columns: 1fr 0fr 1fr;
place-items: center;
outline: 2px solid #804a00;
border-radius: 5vmin;
box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);
overflow: hidden;
}
.left,
.right,
.middle {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transform-origin: center;
}
.left {
background-image: url("ваше фото");
border-right: 1px solid #804a00;
}
.middle {
font-size: 0rem;
background-image: url("ваше фото");
}
.right {
background-image: url("ваше фото");
border-left: 1px solid #804a00;
}
#grid:hover {
grid-template-columns: 0fr 1fr 0fr;
}
</style> </center>
Изменения
Красным в коде выделила цвет рамки — меняете на свой цвет.
Синим выделила место, куда добавляется адрес картинок. Вставляет урл своих изображений.
Слайдер довольно объёмный, почти на всю страницу статьи. Маленькие фото в слайдере будут растягиваться и терять качество изображения, поэтому добавляйте картинки среднего размера. А чтобы они не были большими по весу и не нагружали страницу, поработайте над уменьшением их веса. На блоге есть об этом статья.
Трудности с установкой картинок на Блоггере
Сегодня статья будет небольшая и связана она с проблемами на Блогспот. Последнее время на Блоггере через раз или совсем не срабатывает функция вставки фото в статью в меню редактора. Возможно проблема проявляется не у всех. С чем это связано — не понятно. Удаляла историю браузера, меняла браузер — проблема остаётся. Видимо это не из-за браузера.
Так же не срабатывает установка через окно добавления картинки с рабочего стола.
Так же выскакивает ошибка.
Если вариант не срабатывает, то сохраните написанное, нажав на облачко в редакторе, и обновите страницу.
Далее ⇒
Решение
Если у вас такие же проблемы при установке изображений в статью, совет один. Перебрасывайте картинки вручную прямо с рабочего стола в поле редактора.
Установка срабатывает не каждый раз, но по крайней мере изображения устанавливаются.
P. S.
Если у вас есть другое решение проблемы или вы знаете почему это происходит — напишите в комментариях или в контакты.
Адаптивное меню для Блогспот
Потребовалось для сайта адаптивное горизонтальное меню, которое будет меняться в зависимости от размера экрана. Очень долго искала в интернете подходящий гаджет. И вроде бы предложено много видов, но не каждый встаёт на Блогспот. А если и устанавливается, то не работает. После недельных поисков на российских и иностранных сайтах нашла подходящее, которое и устанавливается легко, и работает хорошо. Если вам так же нужно адаптивное меню, предлагаю сегодня рассмотреть два, которые без проблем встали в шаблон "Корпорация чудеса".
Простое плавающее меню с анимацией. Увидела на сайте https://techno-blogger.ru.
Далее ⇒
Первое меню
Меню довольно легко встало на Блогспоте, но к сожалению, не подходит для блогов у которых шапка (хедер) с картинкой. Гаджет будет располагаться сверху и частично перекрывать изображение.
Меню раскрывающееся (выпадающее), со встроенным поиском. В тёмных тонах, но цвет можно поменять под дизайн своего сайта.
Нашла меню на сайте https://danteizm.blogspot.com
Вот так выглядит гаджет в десктопной и мобильной версии:
Заходим в Тема — Изменить HTML. Открывается шаблон, находим тег </body>, и выше него вставляем код:
<div class='nav_wrapper'>
<!--<a class="menu-link" href="#menu"></a>-->
<div class='spinner-master'>
<input id='spinner-form' type='checkbox'/>
<label class='spinner-spin' for='spinner-form'>
<div class='spinner diagonal part-1'/>
<div class='spinner horizontal'/>
<div class='spinner diagonal part-2'/>
</label>
</div>
<a class='btn' href='#search_box' id='search'>☌</a>
<nav class='menu' id='menu'>
<ul class='dropdown'>
<li><a href='#' title='Link'>Home</a></li>
<li><a href='#' title='Link'>Category</a>
<ul>
<li><a href='#' title='Link '>Подзаголовок</a></li>
<li><a href='#' title='Link'>Подзаголовок</a></li>
</ul>
</li>
<li><a href='#' title='Link'>Portfolio</a>
<ul>
<li><a href='#' title='Link'>Подзаголовок</a></li>
<li><a href='#' title='Link'>Подзаголовок</a></li>
<li><a href='#' title='Link'>Подзаголовок</a></li>
</ul>
</li>
<li><a href='#' title='Link'>Work</a>
<ul>
<li><a href='#' title='Link'>Подзаголовок</a></li>
<li><a href='#' title='Link'>Подзаголовок</a></li>
<li><a href='#' title='Link'>Подзаголовок</a></li>
<li><a href='#' title=' Link'> Подзаголовок</a></li>
</ul>
</li>
<li><a href='#' title='Link'>Playground</a>
<ul>
<li><a href='#' title='Link'>Подзаголовок </a></li>
<li><a href='#' title='Link'>Подзаголовок</a></li>
<li><a href='#' title='Link'>Подзаголовок</a></li>
</ul>
</li>
<li><a href='#' title='Link'>Sitemap</a></li>
</ul>
</nav>
<form action='/search/' class='search_box' id='search_box'>
<input name='search_criteria' placeholder='Search' type='text' value=''/>
<input class='search_icon' type='submit' value='Search'/>
</form>
</div>
<style>
.centered-top-container.sticky {position: absolute;}
.centered-top-container {top: 20px;
position: relative;}
nav { width: 100%; } .nav_wrapper { position: fixed; left: 0; top: 0; width: 100%; transition: top .5s ease-out; background: #2f3b3f;z-index:9999999 } .scroll { top: -90px; } .no-scroll { top: 0; z-index: 9999; } .btn { padding: 10px 1%; margin: 5px; color: #fff; text-decoration: none; font-family: sans-serif; transition: all 0.1s ease; } .btn:hover { transition: all 0.1s ease; } #search { float: right; font-size: 30px; padding: 2px 15px; line-height: 40px; color: #fff; margin: 0; font-weight: 700; -webkit-transform: rotate(181deg); -moz-transform: rotate(181deg); -ms-transform: rotate(181deg); -o-transform: rotate(181deg); transform: rotate(181deg); } #search:hover { color: #25a186; } .search_box { clear: both; width: 100%; background: #e8ebf0; padding: 0; margin: 0; height: 0; overflow: hidden; transition: all 0.1s ease-in-out; } .search_box.active { height: auto; padding: 15px 0; } .search_box input { width: 80%; font-size: 13px; margin: 0 0 0 15px; padding: 10px; border: none; background: #fff; } .search_box input:focus { outline: none; } .search_box input.search_icon { clear: both; width: 10%; height: auto; padding: 10px; margin: 0; margin-left: -5px; border: none; color: #fff; cursor: pointer; background: #8c949d; opacity: 1; transition: all 0.1s ease; } .search_box input.search_icon:hover { background: #25a186; } .menu-link { display: none; } .spinner-master input[type=checkbox] { display: none; } .menu { width: 100%; height: auto; background: #2f3b3f; transition: all 0.3s ease; } .menu ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-block; } .menu > li > ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu > ul > li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: #fff; font-size: 14px; } .menu ul li a:hover { background: #25a186; color: #fff; } .menu ul li.hover > a { background: #25a186; color: #fff; } .menu ul li > a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover > ul { display: block; } .menu ul ul > li { position: relative; } .menu ul ul > li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul > li a:hover { background: #25a186; color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top: 0; } @media all and (max-width: 768px) { .example-header .container { width: 100%; } #search { padding: 10px; } .spinner-master * { transition: all 0.3s; box-sizing: border-box; } .spinner-master { position: relative; margin: 15px; height: 30px; width: 30px; float: left; } .spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; left: 0; } .spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #fff; } .spinner-master .diagonal.part-1 { position: relative; float: left; } .spinner-master .horizontal { position: relative; float: left; margin-top: 4px; } .spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 4px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px; } a.menu-link { display: block; color: #fff; float: left; text-decoration: none; padding: 10px 16px; font-size: 1.5em; } a.menu-link:hover { color: #25a186; } a.menu-link:after { content: "\2630"; font-weight: normal; } a.menu-link.active:after { content: "\2715"; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu > li > ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu > ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu > ul > li { display: block; } .menu > ul > li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu > a:after { content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu > a.active:after { content: "-"; } .menu ul ul > li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover > a { background: #4b5f65; color: #fff; } .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top: auto; border: none; } .search_box { position: absolute; top: 60px; left: 0; z-index: 10; } .search_box input { width: 70%; } .search_box input.search_icon { width: 17%; }; }
</style>
<script type='text/javascript'>
$("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("ul.dropdown li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});var $menu=$("#menu"),$menulink=$("#spinner-form"),$search=$("#search"),$search_box=$(".search_box"),$menuTrigger=$(".has-submenu > a");$menulink.click(function(e){$menulink.toggleClass("active");$menu.toggleClass("active");if($search.hasClass("active")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
</script>
Чтобы меню заработало, добавляем в шаблон код выше тега </head>.<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>Отмечу сразу: если такой же код или похожий уже есть в шаблоне — устанавливать второй раз не нужно! Сохраняем шаблон.
В коде можно поменять стили — шрифт, размер, цвета.
Меняем внешний вид от <style> до </style>, в коде выделила красным.
В коде сверху меняем названия категорий на свои - выделила жирным и вставляем адреса ссылок в вот такой значок # — выделила в коде синим цветом.
В меню можно удалять пункты и подпункты:
Если нужно добавить или удалить пункт с подпунктами добавляем или убираем код такого вида:
<li><a href='#' title='Link'>Category</a> <ul> <li><a href='#' title='Link '>Подзаголовок</a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> </ul> </li>
Если удаляем или добавляем только подпункт, то убираем или вставляем:
<li><a href='#' title='Link'>Подзаголовок</a></li>Если нужно добавить или удалить только пункт, без подпунктов - то:
<li><a href='#' title='Link'>Sitemap</a></li>
Второе меню
Адаптивное-плавающее-меню-для-blogger-Технологии-blogger.htmlМеню при прокрутке страницы будет оставаться
видимым вверху.
В мобильной версии меню выглядит как обычная полоса с кнопкой гамбургер, при нажатии на которую меню открывается. В настольной версии блоки пунктов при наведении курсора переворачиваются. 
Заходим в Тема - Изменить HTML и находим строку: <header> или </header>.
Если установить код над <header>, то меню появится над заголовком, а чтобы отобразить меню под заголовком блога, то устанавливаем сразу после </header>.
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu{
width:100%;
z-index: 9999;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu > ul {
background: #D5803A;
}
#cssmenu > ul > li {
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 20px;
font-size: 14px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
background: #D5803A;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
color: #FEE5D0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #FEE5D0;
-webkit-transform: rotateX(90deg) translateY(-23px);
-moz-transform: rotateX(90deg) translateY(-23px);
transform: rotateX(90deg) translateY(-23px);
-ms-transform: none;
}
#cssmenu > ul > li > a::before {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #FEE5D0;
background: #955928;
content: attr(data-title);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
background: #D5803A;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
color: #FEE5D0;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 16px 20px;
cursor: pointer;
font-size: 14px;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #D5803A;
}
#cssmenu.small-screen #menu-button:after {
content: "";
position: absolute;
right: 20px;
top: 17px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 22px;
height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #FEE5D0;
border-bottom: 2px solid #FEE5D0;
}
#cssmenu.small-screen #menu-button:before {
content: "";
position: absolute;
right: 20px;
top: 27px;
display: block;
width: 22px;
height: 2px;
background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #FEE5D0;
}
</style>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/><script>
//<![CDATA[
$(function() {
var $flotarMenu = $("#cssmenu"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
breakpoint: 768,
sticky: false
}, options);
return this.each(function() {
cssmenu.find('li ul').parent().addClass('has-sub');
if (settings.format != 'select') {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
}
else if (settings.format === 'select')
{
cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
var selectList = cssmenu.find('select');
selectList.append('<option>' + settings.title + '</option>', {
"selected": "selected",
"value": ""});
cssmenu.find('a').each(function() {
var element = $(this), indentation = "";
for (i = 1; i < element.parents('ul').length; i++)
{
indentation += '-';
}
selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
});
selectList.on('change', function() {
window.location = $(this).find("option:selected").val();
});
}
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($(window).width() > settings.breakpoint) {
cssmenu.find('ul').show();
cssmenu.removeClass('small-screen');
if (settings.format === 'select') {
cssmenu.find('select').hide();
}
else {
cssmenu.find("#menu-button").removeClass("menu-opened");
}
}
if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
cssmenu.find('ul').hide().removeClass('open');
cssmenu.addClass('small-screen');
if (settings.format === 'select') {
cssmenu.find('select').show();
}
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
$("#cssmenu").menumaker({
title: "Menu",
format: "dropdown"
});
$("#cssmenu a").each(function() {
var linkTitle = $(this).text();
$(this).attr('data-title', linkTitle);
});
});
});
})(jQuery);
//]]>
</script>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Главная</a></li>
<li><a href='#'>Disclaimer</a></li>
<li><a href='#'>Privacy</a></li>
<li><a href='#'>Etichette</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contatti</a></li>
</ul>
</div>
Сохраняем шаблон. Менять в шаблоне можно только внешний вид. Эта часть кода находится между тегами <style> и </style>. Меняйте три цвета # FEE5D0, # D5803A и # 955928. Так же можно менять белый цвет шрифта на свой (#ffffff). Я перепробовала несколько вариантов, но наиболее хорошо смотрится меню одного цвета, только разных оттенков: светлый, обычный цвет и тёмный.
Можно поменять шрифт - выделила в коде синим. Либо совсем удалить эту строку.
Меняйте названия пунктов - выделила жирным. И добавляйте URL страниц, вместо знака (#) - выделила красным.
Так же можно удалять, либо добавлять пункты меню:
<li><a href='#'>Privacy</a></li>
Выделенная оранжевым полоса в коде - это библиотека JQuery. Если у вас она есть, то удалите эту строку.
Генераторы
Предлагаю посмотреть несколько онлайн-конструкторов адаптивного меню:
https://www.generateit.net/menu-generator/
https://www.htmlcodegenerator-tools.com/2019/10/html-css-navigator-menu-bar-generator.html
https://www.generateit.net/menu-generator/
Другие адаптивные меню
Сайты с другими адаптивными меню, которые у меня на блог не встали, но возможно, на другой шаблон они подойдут:
https://aryona.ru/adaptivnoe-gorizontalnoe-menyu-dlya-blogger/
https://techno-blogger.ru/2020/03/4-adaptivnyh-menyu-blogger.html
https://www.mybloggertricks.com/2015/07/how-to-create-responsive-menu-in-blogger.html
https://blogwox.blogspot.com/2016/10/responsive-navigation-menu-blogger.html
https://www.mybloggerlab.com/2014/08/how-to-easily-add-mobile-responsive-menu-in-blogger.html
https://makeonblog.blogspot.com/2016/06/creating-responsive-drop-down-menu.html
https://www.dropdownmenugenerator.com/blog/responsive-menu-blogger.aspx
https://www.ogbongeblog.com/make-blogger-mobile-pagelist-drop-down-menu-display-like-webview.html
Как зарабатывать на маникюре и наращивании ногтей
Маникюрный бизнес – это довольно прибыльное и интересное занятие, которое позволяет женщинам не только проявить свои творческие способности, но и заработать деньги. В данной статье мы рассмотрим основные аспекты заработка на маникюре и наращивании ногтей.
Далее ⇒
Обучение и сертификация
Для начала вам потребуется пройти обучение маникюру и наращиванию ногтей. Это можно сделать в специализированных школах или у опытных мастеров. После обучения вам необходимо получить сертификат, который подтвердит вашу квалификацию.
Оборудование и материалы
Вам потребуется приобрести все необходимые инструменты и материалы для работы. В их число входят: маникюрные наборы, аппараты для наращивания ногтей, гель-лаки, акриловые пудры и многое другое.
Место работы
Выберите удобное место для работы, где вы сможете принимать клиентов. Это может быть ваш дом, офис или специализированный салон красоты. Важно, чтобы помещение было чистым, светлым и уютным.
Реклама и привлечение клиентов
Чтобы привлечь клиентов, необходимо провести рекламную кампанию. Это может быть реклама в социальных сетях, на местных сайтах объявлений, а также рекомендации от ваших знакомых.
Услуги и цены
Определите перечень услуг, которые вы будете предоставлять клиентам.
Это может включать в себя классический маникюр, наращивание ногтей, покрытие гель-лаком и т.д. Установите оптимальные цены на свои услуги, учитывая стоимость материалов и время, затраченное на работу.
Постоянное развитие и совершенствование
Не останавливайтесь на достигнутом и постоянно совершенствуйте свои навыки. Посещайте мастер-классы, участвуйте в конкурсах и выставках, чтобы узнавать о новых техниках и методиках работы.
Обратная связь с клиентами
Важно прислушиваться к пожеланиям и отзывам своих клиентов. Это поможет вам улучшить качество предоставляемых услуг и завоевать доверие новых посетителей.
Расширение бизнеса
Если ваш бизнес будет успешным, вы можете задуматься о расширении своей деятельности. Это может быть открытие дополнительных рабочих мест, сотрудничество с другими мастерами или запуск своего интернет-магазина.
В заключение, заработок на маникюре и наращивании ногтей – это интересное и прибыльное занятие, которое требует определенных усилий и времени.
Однако, если вы любите свою работу и готовы развиваться в этой сфере, то успех вам гарантирован.
