Интересный эффект для оформления картинок

Код оформления найден на 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://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'>&#9740;</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 &gt; li &gt; ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu &gt; ul &gt; 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 &gt; a { background: #25a186; color: #fff; } .menu ul li &gt; a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover &gt; ul { display: block; } .menu ul ul &gt; li { position: relative; } .menu ul ul &gt; li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul &gt; 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 &gt; .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .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: &quot;\2630&quot;; font-weight: normal; } a.menu-link.active:after { content: &quot;\2715&quot;; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu &gt; ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu &gt; li &gt; ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu &gt; ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu &gt; ul &gt; li { display: block; } .menu &gt; ul &gt; li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu &gt; a:after { content: &#39;+&#39;; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu &gt; a.active:after { content: &quot;-&quot;; } .menu ul ul &gt; li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover &gt; 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'> $(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);$(&quot;ul.dropdown li&quot;).hover(function(){$(this).addClass(&quot;hover&quot;)},function(){$(this).removeClass(&quot;hover&quot;)});var $menu=$(&quot;#menu&quot;),$menulink=$(&quot;#spinner-form&quot;),$search=$(&quot;#search&quot;),$search_box=$(&quot;.search_box&quot;),$menuTrigger=$(&quot;.has-submenu &gt; a&quot;);$menulink.click(function(e){$menulink.toggleClass(&quot;active&quot;);$menu.toggleClass(&quot;active&quot;);if($search.hasClass(&quot;active&quot;)){$(&quot;.menu.active&quot;).css(&quot;padding-top&quot;,&quot;50px&quot;)}});$search.click(function(e){e.preventDefault();$search_box.toggleClass(&quot;active&quot;)});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)});$(&quot;ul li:has(ul)&quot;);$(function(){var e=$(document).scrollTop();var t=$(&quot;.nav_wrapper&quot;).outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()&gt;=50){$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}else{$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}if(n&gt;t){$(&quot;.nav_wrapper&quot;).addClass(&quot;scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).removeClass(&quot;scroll&quot;)}if(n&gt;e){$(&quot;.nav_wrapper&quot;).removeClass(&quot;no-scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).addClass(&quot;no-scroll&quot;)}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>

Второе меню

Простое плавающее меню с анимацией. Увидела на сайте https://techno-blogger.ru.
Адаптивное-плавающее-меню-для-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 &gt; ul:after { content: &quot;.&quot;; 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 &gt; ul { background: #D5803A; } #cssmenu &gt; ul &gt; li { float: left; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } #cssmenu.align-center &gt; ul { font-size: 0; text-align: center; } #cssmenu.align-center &gt; ul &gt; li { display: inline-block; float: none; } #cssmenu.align-right &gt; ul &gt; li { float: right; } #cssmenu &gt; ul &gt; li &gt; 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 &gt; ul &gt; li.active &gt; a { color: #FEE5D0; } #cssmenu &gt; ul &gt; li:hover &gt; a, #cssmenu &gt; ul &gt; li &gt; 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 &gt; ul &gt; li &gt; 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 &gt; ul &gt; li:hover &gt; a::before, #cssmenu &gt; ul &gt; li &gt; a:hover::before { background: #D5803A; } #cssmenu.small-screen { width: 100%; } #cssmenu.small-screen &gt; ul, #cssmenu.small-screen.align-center &gt; ul { width: 100%; text-align: left; } #cssmenu.small-screen &gt; ul &gt; li, #cssmenu.small-screen.align-center { float: none; display: block; border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen &gt; ul &gt; li:hover &gt; a, #cssmenu.small-screen &gt; ul &gt; li &gt; a:hover { color: #FEE5D0; -webkit-transform: none; -moz-transform: none; transform: none; -ms-transform: none; } #cssmenu.small-screen &gt; ul &gt; li &gt; 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: &quot;&quot;; 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: &quot;&quot;; 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
Далее ⇒

Как зарабатывать на маникюре и наращивании ногтей

Маникюрный бизнес – это довольно прибыльное и интересное занятие, которое позволяет женщинам не только проявить свои творческие способности, но и заработать деньги. В данной статье мы рассмотрим основные аспекты заработка на маникюре и наращивании ногтей.
Как зарабатывать на маникюре и наращивании ногтей

Обучение и сертификация

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

Оборудование и материалы

Вам потребуется приобрести все необходимые инструменты и материалы для работы. В их число входят: маникюрные наборы, аппараты для наращивания ногтей, гель-лаки, акриловые пудры и многое другое.

Место работы

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

Реклама и привлечение клиентов

Чтобы привлечь клиентов, необходимо провести рекламную кампанию. Это может быть реклама в социальных сетях, на местных сайтах объявлений, а также рекомендации от ваших знакомых.

Услуги и цены

Определите перечень услуг, которые вы будете предоставлять клиентам.
Это может включать в себя классический маникюр, наращивание ногтей, покрытие гель-лаком и т.д. Установите оптимальные цены на свои услуги, учитывая стоимость материалов и время, затраченное на работу.

Постоянное развитие и совершенствование

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

Обратная связь с клиентами

Важно прислушиваться к пожеланиям и отзывам своих клиентов. Это поможет вам улучшить качество предоставляемых услуг и завоевать доверие новых посетителей.

Расширение бизнеса

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

В заключение, заработок на маникюре и наращивании ногтей – это интересное и прибыльное занятие, которое требует определенных усилий и времени.   
Однако, если вы любите свою работу и готовы развиваться в этой сфере, то успех вам гарантирован.
Далее ⇒

Как зарабатывать на продаже рассады

Зарабатывать на продаже рассады – это привлекательный способ получения дополнительного дохода для садоводов и любителей растений. Ведь рассада является неотъемлемой частью садовых культур, и спрос на нее всегда высок. Если вы хотите узнать, как превратить свое увлечение садоводством в прибыльный бизнес, то этот текст для вас. Ниже мы рассмотрим важные аспекты успешной торговли рассадой и поделимся с вами полезными советами.
Как зарабатывать на продаже рассады
 

Подработка на рассаде

Раздел 1: Выбор растений для разведения рассады
Первым шагом на пути к успешному бизнесу по продаже рассады является выбор подходящих растений. Большинство овощей, цветов и трав хорошо размножаются через рассаду. При выборе растений учитывайте популярность и востребованность на рынке, а также климатические условия вашего региона.

Раздел 2: Подготовка почвы и уход за рассадой
Одним из ключевых моментов при разведении рассады является правильная подготовка почвы. Она должна быть плодородной, богатой питательными веществами и хорошо дренированной. Также не забывайте о регулярном поливе и уходе за рассадой, включая сбор семян, пересадку в отдельные горшки или ящики, их удобрение и устранение вредителей.

Раздел 3: Продвижение и маркетинг
Чтобы ваш бизнес по продаже рассады стал прибыльным, важно не только правильно вырастить и ухаживать за растениями, но и эффективно их продвинуть. Создайте красивые фотографии и описания растений для онлайн-сайтов или социальных медиа, участвуйте в местных ярмарках или выставках, раздавайте информационные брошюры с вашими контактными данными. Не забывайте также об удобстве обслуживания и хорошем сервисе, чтобы ваши клиенты стали постоянными покупателями.
Как зарабатывать на продаже рассады
Раздел 4: Организация производства
С ростом спроса на вашу рассаду вам может потребоваться организация производства на более крупных площадях. Рассмотрите возможность аренды дополнительных участков земли или постройки теплиц для оптимального выращивания рассады. Не забывайте также об автоматизации процессов, например, использовании системы полива или грунтовых смесей.

Заключение:
Заработок на продаже рассады – увлекательное и перспективное дело для садоводов. За выбором популярных растений, правильной подготовкой почвы, тщательным уходом и эффективным маркетингом стоят возможности создания успешного и стабильного бизнеса. Надеемся, что наши советы помогут вам на пути к финансовой независимости и достижению успеха в этой области. Удачи на вашем предпринимательском пути!
Далее ⇒