tag:blogger.com,1999:blog-81425858375756248312022-05-03T01:14:13.487+03:00Блог для блогов: создание блога на BlogspotВсё для Bloggers: настройка, дизайн, виджеты и другие полезности... Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.comBlogger394125tag:blogger.com,1999:blog-8142585837575624831.post-60033579186926845952022-04-10T15:48:00.000+03:002022-04-10T15:48:40.511+03:00Как изменить и быстро переключаться по ярлыкам в новом дизайне blogger<p style="text-align: justify;">Здравствуйте друзья и читатели. Просматривая вопросы участников форума blogger по работе в обновленной админке блога, решила написать несколько актуальных по теме постов. </p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Сегодня научимся быстро просматривать опубликованные сообщения, переключаться по ярлыкам, присвоим новый или изменим ярлык выбранным сообщениям.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">В старом дизайне мы просматривали свои посты, перелистывая страницы. Нужный ярлык открывался в выпадающем меню справа вверху.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">В новом дизайне, чтобы просмотреть все свои опубликованные сообщения, нужно скролить (прокручивать колесико мыши) страницу с постами, а дополнительные сообщения будут открываться автоматически. </p><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-T6ZEx2F9MgY/X-OC1ifoWgI/AAAAAAAAToQ/2N0yzhUM_scowVun6tpuDTvKv21tgTpvgCLcBGAsYHQ/s1152/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Автоматическая загрузка сообщений" border="0" data-original-height="716" data-original-width="1152" height="199" src="https://1.bp.blogspot.com/-T6ZEx2F9MgY/X-OC1ifoWgI/AAAAAAAAToQ/2N0yzhUM_scowVun6tpuDTvKv21tgTpvgCLcBGAsYHQ/w320-h199/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3.jpg" title="Скролить страницу с постами для загрузки всех сообщений." width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">На скриншоте слева всплывающее окно: Загрузка дополнительных сообщений.</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">Чтобы просмотреть сообщения по ярлыкам, нажмите вверху справа на значок ярлыка</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-7XCztEBwoMQ/X-OEed7mWII/AAAAAAAAToc/IkZlXZs5tPUWcUFlMQ3HOSu6_VCwGGVsgCLcBGAsYHQ/s93/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B3.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Значок ярлыка" border="0" data-original-height="84" data-original-width="93" src="https://1.bp.blogspot.com/-7XCztEBwoMQ/X-OEed7mWII/AAAAAAAAToc/IkZlXZs5tPUWcUFlMQ3HOSu6_VCwGGVsgCLcBGAsYHQ/s16000/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B3.jpg" title="Нажать на значок ярлыка" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div><div class="separator" style="clear: both; text-align: center;">Далее в открытой вкладке выбираем нужный ярлык</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-853R73iCN04/X-OFiMLuHDI/AAAAAAAAToo/xRql0BhIJJQCqvf9NTBD314SvpKoJdg7ACLcBGAsYHQ/s803/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B1.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Выбрать ярлык" border="0" data-original-height="495" data-original-width="803" height="197" src="https://1.bp.blogspot.com/-853R73iCN04/X-OFiMLuHDI/AAAAAAAAToo/xRql0BhIJJQCqvf9NTBD314SvpKoJdg7ACLcBGAsYHQ/w320-h197/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B1.jpg" title="В открытой вкладке выбираем нужный ярлык." width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">Нажали название ярлыка, затем применить. Просматриваете все сообщения с выбранным ярлыком.</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Второй вариант еще легче. В меню слева нажмите сообщения. На странице сообщений напротив каждого поста указан ярлык. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-BiHYES3zdm4/X-OG94XrV_I/AAAAAAAATo0/57Aqx8c8U1Ufmg2wdt78cWe8gQcQZDUxACLcBGAsYHQ/s1149/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B2.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Кликнуть по названию ярлыка напротив поста." border="0" data-original-height="526" data-original-width="1149" height="146" src="https://1.bp.blogspot.com/-BiHYES3zdm4/X-OG94XrV_I/AAAAAAAATo0/57Aqx8c8U1Ufmg2wdt78cWe8gQcQZDUxACLcBGAsYHQ/w320-h146/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B2.jpg" title="Откроются все сообщения с выбранным ярлыком." width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Если нажать по любому из выбранных: блоггер, компьютер, рамки, откроются все сообщения с нужным ярлыком.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Чтобы присвоить новый ярлык одному или нескольким постам, выделите одно сообщение или справа вверху нажмите на квадратик - выбрать все сообщения.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-GTJpjMkQ4M4/X-OK0_DhDPI/AAAAAAAATpA/OYHgwWJ3RTsy8JQv9xcPTGSLKKuI0obhwCLcBGAsYHQ/s1152/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B5.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Выбрать все сообщения." border="0" data-original-height="705" data-original-width="1152" height="196" src="https://1.bp.blogspot.com/-GTJpjMkQ4M4/X-OK0_DhDPI/AAAAAAAATpA/OYHgwWJ3RTsy8JQv9xcPTGSLKKuI0obhwCLcBGAsYHQ/w320-h196/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B5.jpg" title="Нажать на квадратик справа вверху." width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Этот способ применяется, если захотите изменить ярлыки многих постов. Чтобы выделить 1-2-3...10 сообщений, снимите галки слева. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Или сразу, не нажимая на квадратик сверху, подведите курсор к левому верхнему углу сообщения, появится кружок, нажмите и выделите сообщение (на скриншоте зеленый квадрат).</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;">Далее на красной полосе нажмите на значок ярлыка:</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-6Azv_FAqbgs/X-ONcVYMXvI/AAAAAAAATpM/Dawwy2Wj8KE8snHTJYW-Voq-MxM1wS4HQCLcBGAsYHQ/s1111/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B6.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Применить ярлыки для выбранных сообщений." border="0" data-original-height="388" data-original-width="1111" height="112" src="https://1.bp.blogspot.com/-6Azv_FAqbgs/X-ONcVYMXvI/AAAAAAAATpM/Dawwy2Wj8KE8snHTJYW-Voq-MxM1wS4HQCLcBGAsYHQ/w320-h112/%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%2B6.jpg" title="присвоить новый или изменить ярлык выбранных постов." width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><u>Применить ярлыки для выбранных сообщений.</u> </div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-XqhvtYdqcwA/X_tc7mD-hOI/AAAAAAAATqM/KFNWmpJV__cz5bTjDHd8KvWYSMrDDqMAQCLcBGAsYHQ/s908/%25D1%258F%25D1%2580%25D0%25BB%25D1%258B%25D0%25BA.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="В поле вписать название нового ярлыка, удалить заголовок старого ярлыка и нажать применить." border="0" data-original-height="557" data-original-width="908" height="196" src="https://1.bp.blogspot.com/-XqhvtYdqcwA/X_tc7mD-hOI/AAAAAAAATqM/KFNWmpJV__cz5bTjDHd8KvWYSMrDDqMAQCLcBGAsYHQ/w320-h196/%25D1%258F%25D1%2580%25D0%25BB%25D1%258B%25D0%25BA.jpg" title="Создать новый ярлык" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">В открытой вкладке со списком ярлыков создайте новый ярлык, в моем случае гаджеты. Снимите галку с ярлыка со старым названием (виджеты) и нажмите применить. У выбранных постов изменится название ярлыка. Рекомендую почитать пост:</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><ul><li><a href="https://www.bdblogov.ru/2020/11/udalit-aktivnuyu-ssylku-izobrazheniya-v-novom-redaktore-blogger-knopkoj-delete.html" target="_blank">Удалить активную ссылку изображения в новом редакторе блоггер кнопкой Delete</a>;</li></ul>На сегодня пока все. Комментируйте, пишите отзывы, делитесь с друзьями. Всего доброго.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><i><u>Другие интересные статьи:</u></i></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><ul><li><a href="https://www.bdblogov.ru/2018/05/skryt-ili-izmenit-fon-soobshcheniya-yarlykov.html" target="_blank">Скрыть или изменить фон сообщения ярлыков</a>;</li><li><a href="https://www.bdblogov.ru/2018/03/https-kak-ispravit-oshibki-smeshannogo-kontenta.html" target="_blank">HTTPS Как исправить ошибки смешанного контента</a>;</li><li><a href="https://www.bdblogov.ru/2016/04/put-stress-in-word-in-editormessages-blogger.html" target="_blank">Поставить ударение в слове в редакторе сообщений blogger</a>;</li><li><a href="https://www.bdblogov.ru/2019/10/bystroe-kopirovanie-teksta-ili-koda-nazhatiem-odnoj-knopki.html" target="_blank">Быстрое копирование текста или кода нажатием одной кнопки</a>;</li></ul></div></div><a href="https://text.ru/antiplagiat/5fe39a522308f" target="_blank"><img alt="Text.ru - 100.00%" border="0" height="15" src="https://text.ru/image/get/5fe39a522308f/101" title="Уникальность данного текста проверена через Text.ru" width="80" /></a><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com0tag:blogger.com,1999:blog-8142585837575624831.post-45470444416512549842022-03-16T21:08:00.000+02:002022-03-16T21:08:32.536+02:00Горизонтальное меню с выпадающими вкладками для blogger<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><i><u><span style="color: #0b5394;">Обновлено: 16.03.2022 г</span></u></i> Здравствуйте друзья, читатели и гости. Нашла время поработать с кодом, и сегодня предлагаю для блогов blogger горизонтальное меню с выпадающими вкладками. Такое меню идеально подходит для блогов учителей, у них всегда много информации. Можно сколько угодно запихать в меню ссылок. Пример на скриншоте:</div><div style="text-align: justify;"><br /><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img border="0" height="111" src="https://2.bp.blogspot.com/-XfgofuU1cFo/VoIQdxGMwZI/AAAAAAAALvw/DZf4tT0WWQE/s400/%25D0%25BC%25D0%25B5%25D0%25BD%25D1%258E%2B1.JPG" width="400" /></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">Живой пример в <a href="https://experiment-u.blogspot.com/" target="_blank">демо</a> блоге, такое меню при прокрутке страницы будет всегда на виду.</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">Копируем код и вставляем дизайн добавить гаджет куда-нибудь в футер макета блога.</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div style="font-size: 14px; height: 300px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><style>#sbfixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}#sbfixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}* html, * html body{overflow-y:hidden;height:100%;}* html #sbfixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }* html #sbfixedinner{margin-right:17px;}* html #sbfixed {position:absolute;}#sbtop-wrapper{</span><span style="color: blue;"><b>background:#f8f8ff</b></span><span style="color: #0c343d;">;width:100%;float:left;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);</span><span style="color: #783f04;"><b>border-bottom:2px solid #03b4cc;border-top:2px solid #03b4cc</b>;</span><span style="color: #0c343d;">}#sbtopbar{width:1140px;</span><b><span style="color: magenta;">height:40px</span></b><span style="color: #0c343d;">;margin:0 auto}#sbtop a{display:block;text-decoration:none;font:normal 12px Georgia;text-transform:none;color: #</span><b><span style="color: red;">03b4cc</span></b><span style="color: #0c343d;">; padding:7px 10px 7px}#sbtop a.arrow{);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}#sbtop li{float:left;position:static;width:auto}#sbtop li ul,#sbtop ul li{</span><b><span style="color: #351c75;">width:350px</span></b><span style="color: #0c343d;">;}#sbtop ul li a{text-align:left;color:#fff;</span><b><span style="color: red;">font-size:14px</span></b><span style="color: #0c343d;"><span style="color: #0c343d;">;font-weight:400;text-transform:none;font-family:Georgia;border:none;padding:5px 10px}#sbtop li ul{z-index:100;position:absolute;display:none;</span><b style="color: #0c343d;"><span style="color: purple;">background: #eee</span></b><span style="color: #0c343d;">;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{</span><b style="color: #0c343d;"><span style="color: #f6b26b;">background-color: #</span></b></span><b><span style="color: #f6b26b;">ccc</span></b><span style="color: #0c343d;">;color:#8b008b}#sbtop li:hover ul,#sbtop li.hvr ul{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#</span><b><span style="color: #e69138;">404040</span></b><span style="color: #0c343d;"><span style="color: #0c343d;">;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:1px solid #000;border-top:1px solid #fff;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!important;color:#fff!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 14px Georgia;</span><b><span style="color: #a64d79;">color:#000</span></b><span style="color: #0c343d;">;display:block;line-height:16px;text-transform:uppercase;}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color: #1c8fce}</style></span></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><div id="sbfixed"><div id="sbfixedinner"><div id="sbtop-wrapper"><div id="sbtopbar"><ul id="sbtop"></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Главная</b></span></a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Название</b></span></a><ul></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">Название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">Название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адресl"rel="nofollow" target="_blank">Название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">Название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">Название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">Название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">Название</a></li></ul></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Название</b></span></a><ul></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank" >название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></ul></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Название</b></span></a><ul></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></ul></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Название</b></span></a><ul></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></ul></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Название</b></span></a><ul></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></ul></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Название</b></span></a><ul></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес"rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></ul></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Название</b></span></a><ul></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></ul></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Название</b></span></a><ul></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><b><span style="color: #38761d;"><li><a href="адрес" rel="nofollow" target="_blank">название</a></li></span></b></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="#" rel="nofollow" target="_blank">название</a></li></ul></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><li><a href="<b>###</b>"><span><b>Форум</b></span></a></li></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"></ul></div><div style="clear:both;"></div></div></div></div></span></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div><br /><br />Я оформила светлый фон, а Вы можете оформлять под дизайн своих блогов: выделенное <span style="color: blue;">синим</span> фон меню; <span style="color: #783f04;">коричневым</span> цвет границы сверху и снизу; <span style="color: magenta;">лиловым</span> высота; <span style="color: red;">красным</span> размер шрифта и цвет названия вкладки; <span style="color: #e69138;">оранжевым</span> цвет фона выпадающей вкладки и цвет названия ссылок;<span style="color: #351c75;"> сиреневым</span> ширина выпадающей вкладки.<br /><br /><div style="text-align: center;"><u>Для оформления вкладок одинаковым цветом, меняйте значения:</u></div><div style="text-align: center;"><br /></div><span style="color: blue; font-size: 14px; text-align: center;"><b>background:#f8f8ff</b></span><span style="color: #0c343d; font-size: 14px; text-align: center;">; </span><b style="font-size: 14px; text-align: center;"><span style="color: purple;">background: #eee;</span></b><b style="color: #0c343d; font-size: 14px; text-align: center;"> </b><span style="color: black; font-size: 14px; text-align: center;"><b><span style="color: #f6b26b;">background-color: #</span></b></span><b style="font-size: 14px; text-align: center;"><span style="color: #f6b26b;">ccc;</span></b><br /><br />Выделенные жирным шрифтом названия вкладок в меню, рядом решетки. Я оставила на всякий случай. Можно сделать активной само название вкладки. Но это по желанию, при наведении мыши сразу открывается выпадающая вкладка со ссылками.<br /><br />Ссылок вписала много, потому как запутаетесь закрывать тэги. Если столько не понадобится аккуратно удалите, выделено <span style="color: #274e13;">зеленым</span> цветом. А если нужно добавить эта же строка, вставьте между ссылками.<br /><br />У меня все, будут вопросы по оформлению пишите в комментариях. Буду благодарна, если поделитесь со своими друзьми в соц сетях. Всего доброго.<br /><br /><span style="color: #274e13;"><i>Похожие по теме статьи:</i></span><br /><br /><ul><li><a href="https://www.bdblogov.ru/2013/09/animirovannoemenyu.html" target="_blank">Анимированное меню</a>;</li><li><a href="https://www.bdblogov.ru/2013/08/blog-post_26.html" target="_blank">Вертикальное меню с прокруткой для блога</a>;</li><li><a href="https://www.bdblogov.ru/2013/08/blog-post_26.html" target="_blank">Выпадающее меню</a>;</li><li><a href="https://www.bdblogov.ru/2015/12/button-social-networks-in-the-hat-blog-blogger.html" target="_blank">Кнопки соц сетей в шапке блога blogger</a>;</li><li><a href="https://www.bdblogov.ru/2016/01/delete-or-subscribe-read-blog-in-panel-tools-blogger.html" target="_blank">Удалить или подписаться читать блог в панели инструментов blogger</a>;</li><li><a href="https://www.bdblogov.ru/2016/01/simple-horizontal-drop-down-menu-for-blogs-blogspot.html" target="_blank">Простое горизонтальное выпадающее меню для блогов blogspot</a>;</li></ul></div></div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com17tag:blogger.com,1999:blog-8142585837575624831.post-52406118972402704652022-02-28T12:34:00.000+02:002022-02-28T12:34:58.756+02:00Сортировка закладок по папкам в браузере Google Ghrome<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span style="color: #274e13;"><i><u>Обновлено: 28.02.2022 г</u>.</i></span> Здравствуйте друзья и читатели. Не так давно я написала пост о <a href="https://www.bdblogov.ru/2017/03/nastroit-zakladki-v-paneli-instrumentov-brauzera.html" target="_blank">настройке панели закладок в браузере</a>. Данный способ сортировки закладок подходит, у кого их мало. У меня очень много сохраненных закладок, и прокручивать простыню каждый раз в поиске нужной, очень проблематично.<br /><br />Сегодня расскажу пошаговые действия и покажу на скриншотах, как создать папки и рассортировать закладки по папкам. Получится у нас типа раскрывающегося меню. Итак, давайте приступим:<br /><br /><div style="text-align: center;"><u>Шаг первый</u>: В настройках браузера, слева Внешний вид, включить "Показывать панель закладок".<br /><br /><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-COpeOAKvZDA/XkQKHR2NTVI/AAAAAAAATRA/mBPamT_Z8gMxEXpgEV8pZPTR_WxYt4zSQCLcBGAsYHQ/s1600/%25D0%25BE%25D0%25B1%25D0%25BD%25D0%25BE%25D0%25B0.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Настройки-Внешний вид-Включить Панель закладок" border="0" data-original-height="443" data-original-width="978" height="144" src="https://1.bp.blogspot.com/-COpeOAKvZDA/XkQKHR2NTVI/AAAAAAAATRA/mBPamT_Z8gMxEXpgEV8pZPTR_WxYt4zSQCLcBGAsYHQ/s320/%25D0%25BE%25D0%25B1%25D0%25BD%25D0%25BE%25D0%25B0.jpg" title="Включить Панель закладок" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: justify;"><u><br /></u></div><div class="separator" style="clear: both; text-align: justify;"><u>Шаг второй</u>: Кликнем правой кнопкой мыши на панели закладок сверху или сбоку "Добавить папку".</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/--WI1PFKa66A/WS1VEi4EWTI/AAAAAAAAPgs/zxVLfbx2110mjH1L2-CnFHlIJHmux2qOQCLcB/s1600/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B8%2B1.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Как добавить и сохранить новую папку" border="0" data-original-height="498" data-original-width="1124" height="140" src="https://3.bp.blogspot.com/--WI1PFKa66A/WS1VEi4EWTI/AAAAAAAAPgs/zxVLfbx2110mjH1L2-CnFHlIJHmux2qOQCLcB/s320/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B8%2B1.jpg" title="Добавить папку" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><u>Шаг третий</u>: Во всплывающем окне пишем "Название папки".</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-erCndQtg6Ic/WS1WFT1bVZI/AAAAAAAAPg4/gG7lCHzwaN0QoBgh6X3IHmBhxZ2iQEBvQCLcB/s1600/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B0%2B2.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Имя папки и нажать сохранить" border="0" data-original-height="570" data-original-width="602" height="300" src="https://2.bp.blogspot.com/-erCndQtg6Ic/WS1WFT1bVZI/AAAAAAAAPg4/gG7lCHzwaN0QoBgh6X3IHmBhxZ2iQEBvQCLcB/s320/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B0%2B2.jpg" title="Вписать название новой папки" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Сохраняем новую папку. Созданная папка появится в закладках сверху, или в панели сбоку (перетащите её в начало).</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><u>Шаг четвертый</u>: открываем нужную страницу в закладках, я открою платежную систему Perfect Money.</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-oejLfoS6elc/WS1ZfcVA7SI/AAAAAAAAPhE/qFZ9EbYqsssx4mMtGQXcfgb2q_Wvpk1IgCLcB/s1600/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B8%2B3.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Кликнуть правой кнопкой мыши Добавить страницу." border="0" data-original-height="443" data-original-width="1150" height="123" src="https://4.bp.blogspot.com/-oejLfoS6elc/WS1ZfcVA7SI/AAAAAAAAPhE/qFZ9EbYqsssx4mMtGQXcfgb2q_Wvpk1IgCLcB/s320/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B8%2B3.jpg" title="Добавить страницу в папку" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Мне надо в папку добавить сайты платежных систем. Находим в закладках папку "Платежные системы". Кликнем правой кнопкой мыши и жмем "Добавить страницу". </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-gXRxXQFCz6Q/WS1aTI2vN2I/AAAAAAAAPhM/ae4EP-o9FUUS2wGQZlu7Celievq9HDm3wCLcB/s1600/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B8%2B4.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Сохранить страницу в выбранной папке." border="0" data-original-height="500" data-original-width="786" height="203" src="https://3.bp.blogspot.com/-gXRxXQFCz6Q/WS1aTI2vN2I/AAAAAAAAPhM/ae4EP-o9FUUS2wGQZlu7Celievq9HDm3wCLcB/s320/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B8%2B4.jpg" title="Выбрать нужную папку" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Откроется всплывающее окно. Имя закладки и url адрес уже будут вписаны. Вам необходимо только нажать "сохранить". Добавили страницу из закладок сбоку в <u>папку</u>, и сразу удалите с панели.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Я создала папки: платежные системы, майнинг, разное, домены, блог, соц сети и др. В каждую из них добавила страницу из закладок, соответствующую названию папки. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Когда нужно открыть, например, сайт регистратора доменных имен 2domains.ru, кликаю по папке "домены", нахожу сайт и перехожу на страницу, очень удобно.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><u>Шаг пятый</u>: добавить новую папку в уже созданную. Кликнем правой кнопкой мыши папку "блоги", повторим те же действия (шаг второй и третий).</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-Dr8W-CfADbk/WS1ejessInI/AAAAAAAAPhY/iy-c17QT9-ISflsb7Blf6BSalIE1CXuUACLcB/s1600/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B8%2B5.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Как в новую папку добавить закладки страниц" border="0" data-original-height="487" data-original-width="907" height="171" src="https://3.bp.blogspot.com/-Dr8W-CfADbk/WS1ejessInI/AAAAAAAAPhY/iy-c17QT9-ISflsb7Blf6BSalIE1CXuUACLcB/s320/%25D0%25B7%25D0%25B0%25D0%25BA%25D0%25BB%25D0%25B0%25D0%25B4%25D0%25BA%25D0%25B8%2B5.png" title="Добавить в созданную папку новую" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Добавила папку "сайты", и уже в эту папку перенесла из закладок браузера (сбоку) все нужные страницы. Получилось как многоуровневое меню. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Если в панели закладок (сверху) уже добавлены просто закладки страниц, их тоже отсортируйте по папкам и удаляйте с панели сверху. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">В закладках (сбоку) созданные папки перетаскивайте в начало. По мере удаления закладок сверху, их место займут папки с вложенными страницами. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">На днях сидела, сортировала до полуночи, но сделала, как было задумано. Все не хватало времени заняться. Сегодня решила написать статью, вдруг кому-то пригодится информация.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">На все вопросы отвечу в комментариях или в меню форма для связи. Спасибо, что читаете мои записи. Всем всего доброго и до новых встреч.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Читайте также:</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"></div><ul><li style="text-align: justify;"><a href="https://www.bdblogov.ru/2017/03/cvetnoe-skanirovanie-dokumentov-v-windows7-i-s-mfu-ustrojstva.html" target="_blank">Цветное сканирование документов в Windows7 и с МФУ устройства</a>;</li><li style="text-align: justify;"><a href="https://www.bdblogov.ru/2016/06/recovery-forgotten-password-at-browsersettings.html" target="_blank">Восстановление забытого пароля в настройках браузера</a>;</li><li style="text-align: justify;"><a href="https://www.bdblogov.ru/2013/10/insert-as-a-fraction-degrec-to-text.html" target="_blank">Как вставить символ в текст сообщения</a>;</li><li style="text-align: justify;"><a href="https://www.bdblogov.ru/2017/04/ehkrannaya-klaviatura-brauzera-i-kompyutera.html" target="_blank">Экранная клавиатура браузера и компьютера</a>;</li><li style="text-align: justify;"><a href="https://www.bdblogov.ru/2017/10/izmenit-razmer-yarlykov-na-stranice-bystrogo-dostupa-v-google-chrome.html" target="_blank">Изменить размер ярлыков на странице быстрого доступа в Google Chrome</a></li></ul></div></div><a href="https://text.ru/antiplagiat/592e4c191dbed" target="_blank"><img alt="TEXT.RU - 100.00%" border="0" height="15" src="https://text.ru/image/get/592e4c191dbed/101" title="Уникальность данного текста проверена через TEXT.RU" width="80" /></a></div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com9tag:blogger.com,1999:blog-8142585837575624831.post-598042078347268162022-02-20T20:18:00.002+02:002022-02-25T16:58:05.326+02:00Анимированное меню<div dir="ltr" style="text-align: left;" trbidi="on"><h2><i><span style="color: #073763;">Установка анимированного меню для блога blogspot</span></i></h2><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><i><u><span style="color: #0b5394;">Обновление: 20.02.2022 г.</span></u></i> Сегодня поговорим ещё об одном меню для блога-анимированном. Установив такое меню, не надо никакой шапки, нет необходимости убирать Navbar, можно использовать не только как меню, а написать к примеру рекламный текст и дать ссылку на свою партнерскую программу.<br /><br />При прокрутке страницы вниз меню не исчезает, всегда на виду, что согласитесь очень удобно.<br /><br /><div class="bloknot7"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-qQs_CxsJKnY/Vd-X0qtUSWI/AAAAAAAAKC8/fOgBnxmRORY/s1600/%25D0%25BC%25D0%25B5%25D0%25BD%25D1%258E.JPG" style="margin-left: auto; margin-right: auto;"><img alt="Анимированное меню всегда сверху" border="0" height="80" src="https://2.bp.blogspot.com/-qQs_CxsJKnY/Vd-X0qtUSWI/AAAAAAAAKC8/fOgBnxmRORY/s400/%25D0%25BC%25D0%25B5%25D0%25BD%25D1%258E.JPG" title="" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small;">Анимированное меню всегда сверху</span></td></tr></tbody></table></div><div style="text-align: center;"><br /></div>Вставим код меню привычным нам способом, при помощи <span style="color: #0c343d;">HTML/JavaScript</span>, <span style="color: #666666;">добавить гаджет-вставить-сохранить</span>. Расположение в макете блога не имеет значения, меню все равно будет сверху.<br /><br />Надо сказать спасибо автору, код нашла на одном зарубежном блоге, за такой легкий способ решения. Да и ещё, я установила такое меню в своих блогах (уже убрала), и отображение отличается, по всей вероятности зависит от настроек в шаблоне. Поехали, копируем код ниже:</div><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><br /></div><div style="height: 300px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><div style="font-size: 14px; text-align: justify;"><br /></div><div style="text-align: justify;"><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;"><style></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#stickey_footer { /* This will make your footer stay where it is */</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;">background: none repeat scroll 0 0 </span><span style="background-color: #c27ba0; font-family: "verdana"; font-size: 15px; line-height: 21px;">#1D1D1D</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;">;</span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">border: 1px solid rgba(0, 0, 0, 0.3);</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">bottom: 0;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">font-family: Arial, Helvetica, sans-serif;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;"><span style="background-color: red;">height: 45px</span><span style="background-color: #b6d7a8;">;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="background-color: magenta; font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;"><span style="background-color: magenta;">left: 50%</span><span style="background-color: #b6d7a8;">;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">margin: 0 auto 0 -490px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">padding: 0 10px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">position: fixed; top: 0px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">text-shadow: 1px 1px 1px #000000;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">width: 960px; z-index:999;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">/* border curves */</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#stickey_footer {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">-moz-border-radius: 0px 0px 10px 10px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">-webkit-border-radius: 0px 0px 10px 10px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">border-radius: 0px 0px 10px 10px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">/* hover effect */</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#stickey_footer:hover {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;">background: none repeat scroll 0 0 </span><span style="background-color: #d5a6bd; font-family: "verdana"; font-size: 15px; line-height: 21px;">#2b2a2a</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;">;</span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">/* shadow for the footer*/</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#stickey_footer {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">-moz-box-shadow:0px 0px 11px #191919;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">-webkit-box-shadow:0px 0px 11px #191919;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">box-shadow:0px 0px 11px #191919;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#footer_menu {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">margin: 0;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">padding: 0;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">width:auto;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#footer_menu li {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">list-style: none;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">float: left;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: orange; color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">font-size:12px;</span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">padding: 12px 14px 14px 14px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">border-right:1px solid rgba(0, 0, 0, 0.4);</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">background: rgba(0, 0, 0, 0.1);</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#footer_menu li:hover {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">background:#202020; /* Fallback color for old browsers */</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">background: rgba(0, 0, 0, 0.3);</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#footer_menu .imgmenu:hover {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">background:url("images/home_hover.png") 23px 5px no-repeat;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#footer_menu li a {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">display: block;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">color: #cccccc;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">text-decoration: none;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#footer_menu li a:hover {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">color: #ffffff;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#footer_menu li span {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">display:none;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#stickey_footer #social_icons {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">float:right; /* social icons positions */</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">width:auto;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">margin:-45px 15px 0px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">padding:0px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">overflow:hidden;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">}</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;">#stickey_footer #social_icons li {</span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">margin-right:12px; /* 12px is the space between each one of them */</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">float:left;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">width:24px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">padding:0px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">height:32px;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">list-style:none;</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8;"><span style="color: #134f5c;"><span class="Apple-tab-span" style="font-family: "verdana"; font-size: 15px; line-height: 21px; white-space: pre;"> </span><span style="font-family: "verdana"; font-size: 15px; line-height: 21px;">_margin-right:0px; /* this is for IE6 only */</span></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;"></style></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;"><div id="stickey_footer"></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;"><div id="stickey_footer"></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;"><ul id="footer_menu"></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="color: #134f5c;"><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"><li><a href="</span><span style="background-color: #b4a7d6; font-family: "verdana"; font-size: 15px; line-height: 21px;">Ссылка на страницу</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;">"></span><span style="background-color: #d5a6bd; font-family: "verdana"; font-size: 15px; line-height: 21px;">Название</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"></a></li></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="color: #134f5c;"><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"><li><a href="</span><span style="background-color: #b4a7d6; font-family: "verdana"; font-size: 15px; line-height: 21px;">Ссылка на страницу</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;">"></span><span style="background-color: #d5a6bd; font-family: "verdana"; font-size: 15px; line-height: 21px;">Название</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"></a></li></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="color: #134f5c;"><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"><li><a href="</span><span style="background-color: #b4a7d6; font-family: "verdana"; font-size: 15px; line-height: 21px;">Ссылка на страницу</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;">"></span><span style="background-color: #d5a6bd; font-family: "verdana"; font-size: 15px; line-height: 21px;">Название</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"></a></li></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="color: #134f5c;"><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"><li><a href="</span><span style="background-color: #b4a7d6; font-family: "verdana"; font-size: 15px; line-height: 21px;">Ссылка на страницу</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;">"></span><span style="background-color: #d5a6bd; font-family: "verdana"; font-size: 15px; line-height: 21px;">Название</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"></a></li></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="color: #134f5c;"><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"><li><a href="</span><span style="background-color: #b4a7d6; font-family: "verdana"; font-size: 15px; line-height: 21px;">Ссылка на страницу</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;">"></span><span style="background-color: #d5a6bd; font-family: "verdana"; font-size: 15px; line-height: 21px;">Название</span><span style="background-color: #b6d7a8; font-family: "verdana"; font-size: 15px; line-height: 21px;"></a></li></span></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;"></ul></span></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; line-height: 21px;"></div></div></span></div><br /></div></div></div></div></div><div style="font-size: 14px; text-align: left;"><div style="text-align: center;"><span style="background-color: #b6d7a8; color: #134f5c; font-family: "verdana"; font-size: 15px; font-style: italic; line-height: 21px;"><br /></span></div></div><div style="font-size: 14px; text-align: left;"><span style="color: #134f5c;"><span face=""arial" , "helvetica" , sans-serif" style="background-color: white; font-size: 15px; line-height: 21px;"><i><br /></i></span></span><span style="color: #134f5c;"><span face=""arial" , "helvetica" , sans-serif" style="background-color: white; font-size: 15px; line-height: 21px;"><i>#1D1D1D - это цвет фона меню, #2b2a2a - цвет при наведении мыши;</i></span></span></div><div style="text-align: left;"><div style="font-size: 14px;"><span style="color: #134f5c;"><span face=""arial" , "helvetica" , sans-serif" style="background-color: white; font-size: 15px; line-height: 21px;"><i>Ссылка на страницу - URL адрес, Название - заголовок сообщения;</i></span></span></div><div style="font-size: 14px;"><span style="color: #134f5c;"><span face=""arial" , "helvetica" , sans-serif" style="background-color: white; font-size: 15px; line-height: 21px;"><i>heidgt:45px; - высота меню, left:50%; - отступ от левого края;</i></span></span><br /><span style="color: #134f5c;"><span face=""arial" , "helvetica" , sans-serif" style="background-color: white; font-size: 15px; line-height: 21px;"><i>Выделено оранжевым-размер шрифта;</i></span></span></div><div style="font-size: 14px;"><span style="color: #134f5c;"><span face=""arial" , "helvetica" , sans-serif" style="background-color: white; font-size: 15px; line-height: 21px;"><i>Вы можете добавлять сколько угодно ссылок, добавляя строку</i></span></span></div><span style="color: blue;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: 15px; line-height: 21px;"><li><a href="адрес">название</a></li></span></span><br /><span style="color: blue;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: 15px; line-height: 21px;"><br /></span></span></div><div style="text-align: left;"><div style="text-align: justify;"><span style="font-family: inherit; line-height: 21px;">В блоге есть другие статьи разных вариантов меню. Перейдите справа в меню<span style="color: #444444;">-содержание блога-ярлык-меню</span>. На этом все<a href="https://www.bdblogov.ru/2013/09/animirovannoemenyu.html" target="_blank">.</a> Пишите, комментируйте, спасибо, что поделились в социальных сетях. Всего доброго.</span></div></div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com2tag:blogger.com,1999:blog-8142585837575624831.post-48642881923500350052022-02-03T16:02:00.001+02:002022-02-03T16:06:54.012+02:00Быстрое копирование текста или кода нажатием одной кнопки<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><i><u><span style="color: #0b5394;">Обновление: 03.02.2022 г</span></u></i> Здравствуйте читатели и гости блога. Давно собиралась написать этот пост для тех, кто начинает или уже создали свои блоги. Веб мастерам часто приходится выделять и копировать тексты/коды, иногда уж очень огромные. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">В этом блоге у меня есть <a href="http://xn--%20%20%20%20-w9jd3a6bkd1cjwfbdkg3cuwblikovpq0c0c2vya/" target="_blank">статья</a> по этой теме, написана в далеком 2013 году, когда только начинала всему учиться. Но время идет и сейчас все по другому.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Выделять коды, используя кнопку клавиатуры, мне пришлось из-за такой вот ерунды: выделяю мышью текст/код, отпускаю мышь и выделение пропадает. Даже не доходит до нажатия правой кнопки мыши и копировать.<br /><br />И что самое главное, что беда эта случилась и в редакторе сообщений blogger. Не было возможности выделить и скопировать мышью и, соответственно корректировать коды.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Сейчас я так привыкла к такому способу выделения для копирования, что не понимаю, зачем так долго использовала одну мышку. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Объясню почему: очень длинный текст или код совсем неудобно выделять мышью. Начинаешь сначала, пока до конца этого текста/кода дойдешь, то выделение исчезнет, или еще какой-нибудь форс мажор, и начинай все заново.<br /><br />Так что давайте использовать кнопку клавиатуры <b><span style="color: #0b5394;">Shift</span></b>, но и без мышки тоже не обойтись. Кнопку можно удерживать при любой раскладке клавиатуры, англ/русский и.т.д, CapsLock вкл/выкл, не имеет значения, способ работает.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;">Посмотрим пример выделения HTML кода. Ставим курсор мыши в начало кода.</div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Кликнуть мышкой в начале кода для выделения" border="0" data-original-height="137" data-original-width="295" src="https://1.bp.blogspot.com/-aKL-n7uQiuo/Xa3ivVYqR3I/AAAAAAAASt8/6cwv9q22EUAWuKCbZHv5bfBfucCHDsdpQCLcBGAsYHQ/s1600/11.jpg" title="Ставим курсор мыши в начало кода" /></div></div><div style="text-align: center;">Нажимаем клавишу <b><span style="color: #0b5394;">Shift</span></b> и кликаем мышью в конце кода. Ура, код выделен!</div><div class="separator" style="clear: both; text-align: center;"></div><br /><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Нажимаем кнопку, кликнуть мышью в конце кода. Код выделен." border="0" data-original-height="142" data-original-width="270" src="https://1.bp.blogspot.com/-NKpcJiMrE88/Xa3jXtr1hQI/AAAAAAAASuI/i3tBpQdsNXQEGYKNYwkovkbylmDzD_7JgCLcBGAsYHQ/s1600/12.jpg" title="Нажать кнопку Shift и кликнуть в конце кода" /></div></div><br /><div style="text-align: justify;">А далее на выделенном коде правой кнопкой мыши нажать - копировать. Попробуйте потренироваться и поймете сами, как все просто.</div><br /><div style="text-align: justify;">Коды можно выделять и в прокрутке. Также в начале кода кликнули мышью, прокрутили до конца, затем нажали кнопку <b><span style="color: #0b5394;">Shift</span></b> и кликнули мышкой в конце кода, всё, код в прокрутке для копирования выделен.</div><br /><div style="text-align: justify;"><b><span style="color: #0c343d;">PS</span></b>: кто работает в буксах, таких как SeoSprint к примеру, проходит тесты или выполняет задания, такой вариант очень удобен. Часто приходится выделять ссылки для перехода или заголовки статей для поиска сайтов.</div><br /><i><span style="color: #0c343d;"><u>Другие полезные клавиши:</u></span></i><br /><br /><ul><li>Esc - отмена действия, выход из полнометражного экрана;</li><li>F1 - отображение справки браузера Google Chrome;</li><li>F3 - окно поиска файла или папки;</li><li>F5 - обновить/перезагрузить страницу;</li><li>CTRL + Esc - открывает меню «Пуск»;</li><li>CTRL + T - комбинация открывает новую вкладку в любом браузере;</li><li>ALT + F4 - комбинация помогает быстро закрыть окно или программу;</li><li>Alt + D - сохранить url адрес страницы;</li></ul><div style="text-align: justify;">Надеюсь, что информация будет для Вас полезна. Особенно новичкам. Всем Удачи и до новых встреч.<br /><br /><i><u><span style="color: #0c343d;">Посмотрите другие статьи:</span></u></i><br /><br /><ul><li><a href="https://www.bdblogov.ru/2016/08/keyboard-combination-insert-in-text-arrows-and-other-symbols.html" target="_blank">Клавиатурные комбинации Вставить в текст стрелки и другие символы</a>; </li><li><a href="https://www.bdblogov.ru/2017/09/bystryj-poisk-fajlov-i-papok-na-diskah-kompyutera.html" target="_blank">Быстрый поиск файлов и папок на дисках компьютера</a>;</li><li><a href="https://www.bdblogov.ru/2017/05/Google-contacts-save-address-friends-and-businesspartners.html" target="_blank">Google Контакты Сохранить адреса друзей и бизнес партнеров</a>;</li><li><a href="https://www.bdblogov.ru/2015/03/setting-and-function-computer-mouse.html" target="_blank">Настройка и функции компьютерной мыши</a>;</li><li><a href="https://www.bdblogov.ru/2017/11/sekretnye-fishki-v-brauzere-google-chrome.html" target="_blank">Секретные фишки в браузере Google Chrome</a>;</li></ul></div></div><a href="https://text.ru/antiplagiat/5dadfa44bc161" target="_blank"><img alt="Text.ru - 100.00%" border="0" height="15" src="https://text.ru/image/get/5dadfa44bc161/101" title="Уникальность данного текста проверена через Text.ru" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com2tag:blogger.com,1999:blog-8142585837575624831.post-88504880678596294282022-01-20T14:39:00.001+02:002022-01-20T14:39:56.979+02:00Фишки для дизайна с использованием CSS для блоггер<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><i><u><span style="color: #0b5394;">Обновлено: 20.01.2022 г</span></u></i>. Здравствуйте друзья, гости и читатели блога. Вернемся сегодня к дизайну. В этой статье предлагаю для оформления несколько полезных фишек на чистом CSS. Я уже писала статьи по этой теме, поэтому кому интересно, в содержании ярлык Дизайн. Итак, смотрим...<br /><br /></div><div style="border: 1px dotted rgb(204, 204, 204); padding: 10px;"><div style="text-align: justify;"><br /></div><div style="text-align: center;"><i><u>Изображение слева для заголовка сообщения</u></i></div><div style="text-align: center;"><i><br /></i></div><div class="separator" style="clear: both; text-align: center;"><img alt="Изображение для заголовка сообщения слева" border="0" height="40" src="https://2.bp.blogspot.com/-IiuGa4c1ysM/VvqQ2xipS3I/AAAAAAAAMt8/couEv_qbFSo-_AmEa54nXksdQ6emi1Kcw/s320/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B%25D1%2581%25D0%25BB%25D0%25B5%25D0%25B2%25D0%25B0.JPG" title="" width="320" /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">.post-title {</span></div><div style="text-align: center;"><span style="color: #0c343d;"> background: url(адрес картинки) no-repeat left transparent;</span></div><div style="text-align: center;"><span style="color: #0c343d;"> padding-left: <b>35</b>px;</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Изображения слева и справа для заголовка поста</u></i></div><div style="text-align: center;"><i><br /></i></div><div class="separator" style="clear: both; text-align: center;"><img alt="Изображения для заголовка постов справа и слева" border="0" height="51" src="https://4.bp.blogspot.com/-kF1UjecAWx4/VvqSOu9zg5I/AAAAAAAAMuI/yH3OYhDXP9IeXQNs4hMrVF6jln04KkgwQ/s320/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B2.JPG" title="" width="320" /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">.post-title:before,</span></div><div style="text-align: center;"><span style="color: #0c343d;">.post-title:after {</span></div><div style="text-align: center;"><span style="color: #0c343d;">content: url(адрес изображения);</span></div><div style="text-align: center;"><span style="color: #0c343d;">}</span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Иконка сверху слева для заголовка поста</u></i></div><div style="text-align: center;"><i><br /></i></div><div class="separator" style="clear: both; text-align: center;"><img alt="Картинка сверху слева для заголовка поста" border="0" height="59" src="https://2.bp.blogspot.com/-pll7Q6QXZ58/VvqTRj9eW3I/AAAAAAAAMuQ/zzKESsj0pfsr1mLsLFPrko_K3xJL9qf7A/s320/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B3.JPG" title="" width="320" /></div><div style="text-align: center;"><i><br /></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">.post-outer:before {</span><span style="color: #0c343d;">content: url(адрес изображения);</span><span style="color: #0c343d;">}</span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Иконка сверху по центру для заголовка сообщения</u></i></div><div style="text-align: center;"><i><br /></i></div><div class="separator" style="clear: both; text-align: center;"><img alt="Картинка сверху по центру для заголовка сообщения" border="0" height="78" src="https://4.bp.blogspot.com/-4UVZyvFBEdA/VvqUUt6DSFI/AAAAAAAAMuc/5B9yzTVVPOUhOxD9XzdAtt4TY2yoWOI0Q/s320/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B4.JPG" title="" width="320" /></div><div style="text-align: center;"><i><br /></i></div><div style="text-align: center;"><span style="color: #0c343d;">.post-outer:before {</span></div><div style="text-align: center;"><span style="color: #0c343d;">content: url(адрес картинки);</span></div><div style="text-align: center;"><span style="color: #0c343d;">display: block;</span></div><div style="text-align: center;"><span style="color: #0c343d;">width: auto;</span></div><div style="text-align: center;"><span style="color: #0c343d;">margin: 0 <b>150</b>px;</span></div><div style="text-align: center;"><span style="color: #0c343d;">}</span></div><div style="text-align: center;"><br /></div><div style="text-align: center;">Меняйте значение<span style="color: #134f5c;"> margin: 0 <b>150</b>px; </span>и настраивайте положение картинки по центру или справа</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Изображение слева для шапки блога</u></i></div><div style="text-align: center;"><i><br /></i></div><div class="separator" style="clear: both; text-align: center;"><img alt="Изображение слева для шапки блога" border="0" height="55" src="https://3.bp.blogspot.com/-GSvo4H7vGE4/VvqV1c4VqZI/AAAAAAAAMus/sCjdN92o8H8tb_Ua25uB55fx_OGL8mQkQ/s400/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B6.JPG" title="" width="400" /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">.header {</span></div><div style="text-align: center;"><span style="color: #0c343d;"> background: url(адрес картинки) no-repeat left transparent;</span></div><div style="text-align: center;"><span style="color: #0c343d;"> padding-left<b>:75</b>px;top:<b>3</b>px; //*отступ от названия заголовка;</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Изображение справа в шапке блога</u></i></div><div style="text-align: center;"><i><br /></i></div><div class="separator" style="clear: both; text-align: center;"><img alt="Изображение справа в шапке блога" border="0" height="53" src="https://2.bp.blogspot.com/-s1FiKFmkWNU/VvqVCQHmjYI/AAAAAAAAMuk/qv5LOlt-RJEBY0PRZOQ_YW_4TK54Cg4BA/s400/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B5.JPG" title="" width="400" /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">.header {</span></div><div style="text-align: center;"><span style="color: #0c343d;"> background: url(адрес картинки) no-repeat right transparent;</span></div><div style="text-align: center;"><span style="color: #0c343d;"> padding-right<b>:75</b>px;top:<b>3</b>px;</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Изменить расположение заголовка (названия) блога (по центру или правее)</u></i></div><div style="text-align: center;"><i><br /></i></div><div class="separator" style="clear: both; text-align: center;"><img alt="Изменить расположение заголовка (названия) блога" border="0" height="55" src="https://4.bp.blogspot.com/-FSnfzXDBdnc/VvqWyGyOSqI/AAAAAAAAMu0/EyCKODl5zXEiDj24RSNyrXXNgYMxo88Nw/s400/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B7.bmp" title="" width="400" /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">.header{ </span><span style="color: #0c343d;">padding-left:</span><b style="color: #0c343d;">275</b><span style="color: #0c343d;">px;top:</span><b style="color: #0c343d;">3</b><span style="color: #0c343d;">px;</span><span style="color: #0c343d;">}</span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><div style="text-align: center;"><i><u>Автоматическая подпись под всеми сообщениями в блоге</u></i></div></div><div style="text-align: center;"><i><br /></i></div><div class="separator" style="clear: both; text-align: center;"><img alt="Автоматическая подпись под всеми постами в блоггер" border="0" height="50" src="https://3.bp.blogspot.com/-Gf0YTaVFf8k/VvqZPiRLONI/AAAAAAAAMvE/bANG6zP4wOsQb6AnofeAr9M4FzkpY6YHA/s400/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B8.JPG" title="" width="400" /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">.entry-content:after {</span></div><div style="text-align: center;"><span style="color: #0c343d;">content: url(адрес подписи);</span></div><div style="text-align: center;"><span style="color: #0c343d;">margin-left: <b>50</b>px;</span></div><div style="text-align: center;"><span style="color: #0c343d;">}</span></div><div style="text-align: center;"><br />Почитайте пост <a href="https://www.bdblogov.ru/2014/01/as-create-a-beautiful-signature.html" target="_blank">Как создать красивую подпись для своих веб сайтов/блогов</a><br /><br /></div><div style="text-align: center;"><i><u>Убрать иконку карандаша в комментариях</u></i><br /><i><br /></i> <br /><div class="separator" style="clear: both; text-align: center;"><img alt="Иконка карандаша в комментариях" border="0" height="120" src="https://1.bp.blogspot.com/-hqrwXj1BJc4/VvqilzldybI/AAAAAAAAMvU/TGxODmIrKxYCBFOG47RgzTLl31B-puG0A/s320/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B9.JPG" title="" width="320" /></div><div class="separator" style="clear: both; text-align: center;"><img alt="Убираем иконку карандаша на чистом CSS" border="0" height="89" src="https://3.bp.blogspot.com/-cCmYvEy9vCA/Vvqi5ii0ziI/AAAAAAAAMvY/qaDSN7ewBVYk6Tk4g660bE8qu-Ze9wRWw/s320/%25D0%25B8%25D0%25BA%25D0%25BE%25D0%25BD%25D0%25BA%25D0%25B0%2B10.JPG" title="" width="320" /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /></div><div style="text-align: center;"><span style="color: #0c343d;">.comments .comments-content .icon.blog-author {</span><span style="color: #0c343d;">display:none;</span><span style="color: #0c343d;">}</span><br /><span style="color: #0c343d;"><br /></span><i><u>Гаджет Архив блога в прокрутке</u></i><br /><span style="color: #0c343d;"><br /></span><span style="color: #0c343d;">#BlogArchive1 .widget-content{height:<b>300</b>px; width:auto;overflow:auto;}</span></div><div style="text-align: center;"><div style="text-align: justify;"><br /></div><div style="text-align: center;"><i><u>Гаджет Ярлыки в прокрутке</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">#Label1 .widget-content{height:<b>100</b>px; width:auto;overflow:auto;}</span><br /><span style="color: #0c343d;"><br /></span><span style="color: black;"><i><u>Изменить на странице цвет выделяемого текста при копировании</u></i></span><br /><span style="color: black;"><i><u><br /></u></i></span><br /><div><span style="color: #134f5c;">::selection { </span><br /><span style="color: #134f5c;">background: #</span><span style="color: blue;">ff6200</span><span style="color: #134f5c;">; </span><br /><span style="color: #134f5c;">color: #</span><span style="color: magenta;">fff</span><span style="color: #134f5c;">;</span><br /><span style="color: #134f5c;"> }</span></div><div><span style="color: #134f5c;">::-moz-selection { </span><br /><span style="color: #134f5c;">background: #</span><span style="color: blue;">ff6200</span><span style="color: #134f5c;">; </span><br /><span style="color: #134f5c;">color: #</span><span style="color: magenta;">fff</span><span style="color: #134f5c;">; </span><br /><span style="color: #134f5c;">}</span></div><span style="color: #0c343d;"><br /></span></div></div><div style="text-align: justify;"><div style="text-align: center;"><i><u>Скрыть подчеркивание ссылок</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">a:link {text-decoration:none;}</span></div><br />Коды CSS вставляем в <span style="color: #444444;">шаблон</span> <span style="color: #444444;">изменить шаблон</span> выше строки <span style="color: #0c343d;">]]></b:skin></span>. Кто еще не знает, где искать эту строку, почитайте пост <a href="http://www.bdblogov.ru/2014/04/how-quickly-and-beautifully-make-text-blog.html" target="_blank">Как быстро и красиво оформить текст блога</a>.<br /><div style="text-align: center;"><br /></div><span style="text-align: left;"><span style="color: #38761d; font-size: large;">✓</span></span>Можно вставить дизайн добавить гаджет внизу макета блога: <style>код CSS</style>. Или в таком же варианте в редакторе сообщений по вкладке HTML оформить для отдельной страницы.<br /><br /><span style="text-align: left;"><span style="color: #38761d; font-size: large;">✓</span></span>У кого на главной больше одного поста, при вставке кода в один из них, картинки в заголовке появятся во всех сообщениях. Коды картинок для заголовка поста устанавливайте на страницы, не отображающиеся на главной. </div><div style="text-align: center;"><br /></div><div style="text-align: justify;">И в заключение два скрипта, для автоматического изменения основного фона при переходе на другие страницы. Скрипт вставить<span style="color: #444444;"> шаблон</span> <span style="color: #444444;">изменить шаблон</span> выше закрывающего тэга <span style="color: #0c343d;"></head></span>.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><i><u>Автоматически меняющийся основной фон блога при переходе</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><script type='text/javascript'>//<![CDATA[</span></div><div style="text-align: center;"><span style="color: #0c343d;">function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".content").each(function(){$(this).css("background-color",get_random_color())})})//]]></script></span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Меняющийся фон заголовка</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><script type='text/javascript'>//<![CDATA[</span></div><div style="text-align: center;"><span style="color: #0c343d;">function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".header").each(function(){$(this).css("background-color",get_random_color())})})//]]></script></span><br /><span style="color: #0c343d;"><br /></span></div></div><br /><div style="text-align: justify;">Пример сходите посмотреть в <a href="https://ovp23.blogspot.com/" target="_blank">тестовый</a> блог, сделайте переход по разным ссылкам справа в меню. У меня в шаблоне вставлены оба скрипта для основного фона и заголовка.<br /><br />Можно еще сделать для страниц сообщений, но придется подбирать цвет шрифта под каждый фон, поэтому посчитала такое оформление не нужным.</div><div style="text-align: justify;"><div style="text-align: justify;"><span style="color: #0c343d;"><br /></span>На этом закончу. На все вопросы отвечу в комментариях. Всего доброго. Почитайте новый пост<a href="https://www.bdblogov.ru/2016/04/put-stress-in-word-in-editormessages-blogger.html" target="_blank"> Поставить ударение в слове в редакторе сообщений blogger</a> и предыдущий пост <a href="https://www.bdblogov.ru/2016/03/change-URL-static-pages-blogger.html" target="_blank">Изменить URL адрес статических страниц в блоггер</a>. <br /><br /><i><u>Рекомендую:</u></i> <a href="https://www.bdblogov.ru/2016/10/underline-headings-using-CSS-for-blogger.html" target="_blank">Подчеркивание заголовков используя CSS для блоггер</a>;<br /><br /></div></div></div><a href="https://text.ru/antiplagiat/56fabb782ed5e" target="_blank"><img alt="TEXT.RU - 100.00%" border="0" height="15" src="https://text.ru/image/get/56fabb782ed5e/101" title="Уникальность данного текста проверена через TEXT.RU" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com26tag:blogger.com,1999:blog-8142585837575624831.post-48093574912771333692021-12-26T20:45:00.002+02:002021-12-28T18:46:38.396+02:00Новогодний внешний фон для блогов блоггер Оформление на CSS<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><i><u><span style="color: #073763;">Обновление: 26.12.2021 г.</span></u></i> Здравствуйте дорогие друзья, читатели и посетители. Скоро-скоро наступит самый любимый праздник Новый Год! Чувствуется уже суета, приготовления, радостное настроение. Не оставим мы с Вами и наши любимые блоги. Надо приукрасить их на праздники.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">В сайдбаре справа статья Украшения для блогов к Новому Году. Там в основном виджеты: гирлянды, елки, санты. А сегодня предлагаю изменить внешний фон, шапку и сайдбар блога новогодним фоновым изображением.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Справятся с таким оформлением и начинающие блоггеры, мы не будем ничего изменять в шаблоне, все стили CSS сохраняете <u>дизайн</u> <u>добавить</u> <u>гаджет</u>. В тестовом блоге для примера оформила внешний фон, боковую колонку и шапку. При желании перейдите для <a href="https://orabotevseti.blogspot.com/" target="_blank">просмотра</a>. А здесь скриншот, кликните мышью для увеличения.</div><div style="text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-HkZgEpTOw94/WFWhJGOVvzI/AAAAAAAAOqs/T8kJVX9mSjgbs1oYYsrOh6mv7VeTTiO6ACLcB/s1600/%25D0%2591%25D0%25B5%25D0%25B7%25D1%2584%25D0%25BE%25D0%25BD.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="оформить новогодним праздникам фон, шапку, название заголовков постов и гаджетов." border="0" height="261" src="https://3.bp.blogspot.com/-HkZgEpTOw94/WFWhJGOVvzI/AAAAAAAAOqs/T8kJVX9mSjgbs1oYYsrOh6mv7VeTTiO6ACLcB/s400/%25D0%2591%25D0%25B5%25D0%25B7%25D1%2584%25D0%25BE%25D0%25BD.jpg" title="Новогоднее оформление блога блоггер" width="400" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><i><u>А теперь подробно, как реализовать эту красоту.</u></i></div><div class="separator" style="clear: both; text-align: justify;"><i><u><br /></u></i></div><div class="separator" style="clear: both; text-align: justify;"></div><ul><li style="text-align: justify;">Наличие своей или находите в интернете новогоднюю картинку;</li><li style="text-align: justify;">Правой кнопкой мыши "Сохранить картинку как.." на компьютер;</li><li style="text-align: justify;">В черновике блоггер по вкладке дизайн открываете дизайнер шаблонов;</li><li style="text-align: justify;">Далее Фон;</li><li style="text-align: justify;">Как загрузить фон я уже писала, перейдите для <a href="https://www.bdblogov.ru/2014/10/How-download-personal-background-in-designer-templates-blogger.html" target="_blank">просмотра</a>;</li><li style="text-align: justify;">Фон внешний, поэтому никакого дискомфорта для чтения информации в блоге не будет.</li></ul><div style="text-align: center;"><i><u><br /></u></i><i><u>Без загрузки картинки в дизайнере шаблонов (кроме шаблона Венецианское окно)</u>.</i><br /><i><u>В шаблоне Корпорация чудеса изменится внешний и основной фон.</u></i><br /><i><u><br /></u></i><i><u>1. CSS для изменения фона</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><style></span><br /><span style="color: #0c343d;">.content{</span><br /><span style="color: #0c343d;">background: url(адрес новогодней картинки);</span><br /><span style="color: #0c343d;">}</span><br /><span style="color: #0c343d;"></style></span></div><ul></ul><div style="text-align: center;"><i><u>2. CSS для шапки</u></i><br /><div style="text-align: center;"><span style="color: #0c343d;"><br /></span><span style="color: #0c343d;"><style></span></div><div style="text-align: center;"><div><span style="color: #0c343d;">.Header{</span></div><div><span style="color: #0c343d;">background-image:url("адрес картинки");</span></div><div><span style="color: #0c343d;"> </span><span style="color: #0c343d;">}</span></div><div><span style="color: #0c343d;"></style></span></div></div><i><u><br /></u></i><i><u>3. Стиль CSS для основного заголовка (названия блога)</u></i></div><br /><div style="text-align: center;"><span style="color: #0c343d;"><style></span></div><div style="text-align: center;"><div><span style="color: #0c343d;">.Header H1 {</span></div><div><span style="color: #0c343d;">background-image:url("адрес картинки");</span></div><div><span style="color: #0c343d;"> padding: 70px; </span></div><div><span style="color: #0c343d;"> border-radius: 0px 16px 0px 80px;</span></div><div><span style="color: #0c343d;"> -webkit-border-radius: 0px 16px 0px 80px;</span></div><div><span style="color: #0c343d;">border-bottom: 5px groove #03b4cc;</span></div><div><span style="color: #0c343d;">padding-bottom: 5px; </span></div><div><span style="color: #0c343d;">}</span></div><div><span style="color: #0c343d;"></style></span></div><div><br /></div><div><i><u>4. CSS для новогоднего фона боковых колонок</u></i></div><div><br /></div><div><span style="color: #0c343d;"><style></span></div><div><span style="color: #0c343d;"> .sidebar {</span></div><div><span style="color: #0c343d;">background-image:url("адрес картинки");</span></div><div><span style="color: #0c343d;">border:2px dotted #03b4cc;}</span></div><div><span style="color: #0c343d;"></style></span><br /><br /><div style="text-align: justify;"><div style="text-align: center;"><i><u>Если хорошо постараться и включить фантазию, то оформить можно:</u></i></div><i><u><br /></u></i></div><div style="text-align: justify;"></div><ul><li style="text-align: justify;">Все заголовки: название блога, сообщений, гаджетов: подобрать подходящую картинку и установить справа/слева, вверху/внизу заголовка поста. </li><li style="text-align: justify;">Подчеркнуть главный заголовок, названия сообщений и гаджетов. </li><li style="text-align: justify;">Подробно в статьях <a href="https://www.bdblogov.ru/2016/03/chips-for-design-with-using-CSS-for-blogger.html" target="_blank">Фишки для дизайна с использованием CSS для блоггер</a>; и <a href="https://www.bdblogov.ru/2016/10/underline-headings-using-CSS-for-blogger.html" target="_blank">Подчеркивание заголовков используя CSS для блоггер</a>;</li></ul><div style="text-align: center;"><i><u>И последнее, можно внешний фон связать с основным</u></i><br /><br /><span style="color: #0c343d;"><style></span><br /><span style="color: #0c343d;">.content-inner{</span><br /><span style="color: #0c343d;">background: url(адрес картинки);</span><br /><span style="color: #0c343d;">}</span><br /><span style="color: #0c343d;"></style></span><br /><br /><i><u>Или (шаблоны разные)</u></i><br /><br /><span style="color: #0c343d;"><style></span><br /><span style="color: #0c343d;">.content-outer{</span><br /><span style="color: #0c343d;">background: url(адрес картинки);</span><br /><span style="color: #0c343d;">}</span><br /><span style="color: #0c343d;"></style></span><br /><br /><div style="text-align: justify;">Но здесь нужно подобрать изображения, чтобы не раздражали посетителей. Если анимация снега или сугробы, то в разумных пределах, а то читатели разбегутся. Следите, чтобы цвет шрифта текста оставался читаемым.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">В стилях три и четыре CSS добавила линию подчеркивания/скругления нижней границы основного заголовка и рамку для сайдбара. Если не понадобится, удалите. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Гаджеты сохраняйте внизу макета блога. Праздники закончатся, удалите. На сегодня у меня вся информация. Оформляйте свои блоги, делитесь с друзьями. На все вопросы отвечу в комментариях. Всего доброго.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><i><u>Читайте также:</u></i> <br /><br /><ul><li><a href="https://www.bdblogov.ru/2016/12/varianty-oformleniya-animacii-teksta-na-css-dlya-blogger.html" target="_blank">Варианты оформления анимации текста на CSS для блоггер</a>; </li><li><a href="https://www.bdblogov.ru/2017/12/vozmozhnosti-oformleniya-bloga-k-novomu-godu.html" target="_blank">Возможности оформления блога к Новому Году</a>;</li><li><a href="https://www.bdblogov.ru/2018/12/eshche-novogodnie-idei-dlya-blogger.html" target="_blank">Еще новогодние идеи для блоггер</a>;</li></ul></div></div></div></div></div><a href="https://text.ru/antiplagiat/5855be004885a" target="_blank"><img alt="TEXT.RU - 100.00%" border="0" height="15" src="https://text.ru/image/get/5855be004885a/101" title="Уникальность данного текста проверена через TEXT.RU" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com0tag:blogger.com,1999:blog-8142585837575624831.post-64538648050233372622021-12-13T17:01:00.000+02:002021-12-13T17:01:38.211+02:00Удалить активную ссылку изображения в новом редакторе блоггер кнопкой Delete<p style="text-align: justify;">Здравствуйте читатели и гости. Хочу всех поздравить с "супер" новым дизайном блоггер. Уверена, что не всем всё нравится в новом интерфейсе, много лишних движений. Все дрожит, мигает, с трудом находим привычные ранее действия в редакторе. Но не нам решать, что для нас лучше. </p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Остается только принять и продолжать пользоваться бесплатными услугами. И конечно, помогать друг другу использовать обновленный интерфейс. Думаю, что привыкнем. Не все так плохо, есть и положительные моменты. Например, предварительный просмотр для планшета, мобильного и компьютера, также мне нравится просмотр HTML кода в теме блога.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Больше всего меня умиляет, в админ панели в списке сообщений, значок <u>просмотреть сообщение</u> находится рядом со значком <u>удалить сообщение</u>.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Разработчикам чаще пишите отзывы, что Вас не устраивает в дизайне, может по мере возможностей исправят.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Сегодня у меня небольшой пост, как оптимизировать картинки в новом редакторе, а именно удалить ссылки на изображения. В помощь нам одна кнопка клавиатуры и мышка.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">В старом редакторе проблем удаления не было, в новом немного по другому, хитро спрятана эта ссылка. Итак, загрузили картинку в редакторе, скриншот:</p><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-zGbrlxmv30E/X8UyFsyAUTI/AAAAAAAATmo/z6AAEG9ESjgzzEMaQt36SviHKQe0JDxWACLcBGAsYHQ/s1150/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B0%2B1.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Загружаем картинку и кликаем мышью справа от изображения." border="0" data-original-height="639" data-original-width="1150" height="178" src="https://1.bp.blogspot.com/-zGbrlxmv30E/X8UyFsyAUTI/AAAAAAAATmo/z6AAEG9ESjgzzEMaQt36SviHKQe0JDxWACLcBGAsYHQ/w320-h178/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B0%2B1.jpg" title="Кликнуть мышкой справа от картинки" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><span style="text-align: justify;"><br /></span></div><div class="separator" style="clear: both; text-align: justify;"><span>Подведите мышку справа от картинки и кликните левой кнопкой (на скриншоте у меня красная стрелка). У Вас будет "мигать" сплошная синяя линия. Далее на клавиатуре нажмите клавишу </span><b style="text-align: justify;"><span style="color: #0b5394;">Delete</span></b><span style="text-align: justify;">. После нажатия появится всплывающее окно, смотрим скриншот:</span></div><div style="text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-BzzgJLM3T2s/X8UztBDFCUI/AAAAAAAATm0/xxSP5JzTTdojYvJNvx9UpdgpAZ6wkdwIgCLcBGAsYHQ/s1135/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B0%2B2.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Появится всплывающее окно, где для удаления нужно кликнуть на значок ссылки." border="0" data-original-height="629" data-original-width="1135" height="177" src="https://1.bp.blogspot.com/-BzzgJLM3T2s/X8UztBDFCUI/AAAAAAAATm0/xxSP5JzTTdojYvJNvx9UpdgpAZ6wkdwIgCLcBGAsYHQ/w320-h177/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B0%2B2.jpg" title="Нажать на значок ссылки и удалить адрес картинки." width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Карандашик-это изменить ссылку, для удаления нажмите на <u>значок</u> <u>ссылки</u> рядом. Вот и все действия. Посмотрите HTML код картинки:</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-OFHsfIutUqQ/X8U1VuOnuvI/AAAAAAAATnA/8nCFLPNaZRQVCE8AeXju-rfOYmivt8bMwCLcBGAsYHQ/s1115/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B0%2B3.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="После удаления активной ссылки в коде HTML остался только адрес изображения." border="0" data-original-height="301" data-original-width="1115" height="86" src="https://1.bp.blogspot.com/-OFHsfIutUqQ/X8U1VuOnuvI/AAAAAAAATnA/8nCFLPNaZRQVCE8AeXju-rfOYmivt8bMwCLcBGAsYHQ/w320-h86/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B0%2B3.jpg" title="В коде HTML виден только URL адрес картинки." width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">В коде HTML остался только URL адрес изображения. Оптимизируйте свои фото, картинки, зачем лишним загружать страницы блога.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Как добавить активную ссылку в тексте, наверное все разобрались, там без изменений. Выделить текст, в верхнем меню редактора нажать на <u>значок</u> <u>ссылки</u>, в окне вставить url адрес. Если кликните по активной ссылке левой кнопкой мыши, появится всплывающее окно, где можно удалить.</div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-UgaIv9DUmQ4/X8U3fv14duI/AAAAAAAATnM/-kHf64bCM_4e9YxIPrMf8RDaXJROGfIwwCLcBGAsYHQ/s536/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B0%2B4.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Кликнуть левой кнопкой мыши по активной ссылке и удалить." border="0" data-original-height="180" data-original-width="536" height="107" src="https://1.bp.blogspot.com/-UgaIv9DUmQ4/X8U3fv14duI/AAAAAAAATnM/-kHf64bCM_4e9YxIPrMf8RDaXJROGfIwwCLcBGAsYHQ/w320-h107/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B0%2B4.jpg" title="Удалить активную ссылку в тексте." width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div style="text-align: justify;">Сегодня у меня вся информация. Задавайте вопросы по теме, делитесь с друзьями. В одиночку трудно разбираться и работать. Всего доброго.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><i><u>Почитайте другие статьи по теме</u></i>:</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><ul><li><a href="https://www.bdblogov.ru/2013/06/blog-post.html" target="_blank">Как подтвердить права на блог в Яндексе, Webmoney</a>;</li><li><a href="https://www.bdblogov.ru/2018/03/perekhod-bloga-blogger-s-lichnym-domenom-po-protokolu-https.html" target="_blank">Переход блога блоггер с личным доменом по протоколу HTTPS</a>;</li><li><a href="https://www.bdblogov.ru/2019/11/ispravit-oshibki-kategorii-pokrytie-v-google-search-console.html" target="_blank">Исправить ошибки категории Покрытие в Google Search Console</a>;</li><li><a href="https://www.bdblogov.ru/2019/10/bystroe-kopirovanie-teksta-ili-koda-nazhatiem-odnoj-knopki.html" target="_blank">Быстрое копирование текста или кода нажатием одной кнопки</a>;</li></ul></div> <a target="_blank" href="https://text.ru/antiplagiat/5fc54440aeedd"><img src="https://text.ru/image/get/5fc54440aeedd/101" alt="Text.ru - 100.00%" title="Уникальность данного текста проверена через Text.ru" border="0" width="80" height="15"></a><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com0tag:blogger.com,1999:blog-8142585837575624831.post-6167008368258711902021-11-25T20:54:00.004+02:002021-12-13T17:05:46.928+02:00Узнать ID гаджета в шаблоне блоггер Обновление<p style="text-align: justify;">Здравствуйте друзья, читатели и гости. Последнее время редко пишу статьи, молча наблюдаю, как когда-то самая простая в использовании платформа по созданию личного блога, превращается в судоку. Приходится маневрировать, искать пути решения и тому подобное. А сколько нужно корректировать контента, после всех изменений разработчиками.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">В редакторе при написании постов очень много лишних движений, в админке блоггер не совсем удобно просматривать список сообщений, раздел статистики оставляет желать лучшего и, что окончательно добило, это как теперь узнать ID гаджета. Многие вебмастера вкладывают свое, индивидуальное в дизайне блога, к примеру изменить стиль определенного гаджета.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Начну с того, что разработчики автоматом удалили внешние ссылки всех гаджетов. С одной стороны хорошо, так как сокращается количество внешних ссылок, что существенно повлияет на индексацию ресурса в поисковых системах.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">А вот чтобы изменить стиль гаджета, нужно знать ID этого самого элемента. Ранее мы в дизайне нажимали изменить гаджет, и в адресной строке в конце url адреса была возможность увидеть идентификационный номер.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">В настоящее время такой возможности у нас уже нет. А если очень надо, то предлагаю два варианта решения проблемы.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Первый вариант подсказала коллега по ведению блога Вика Барад, списались с ней ради такого случая. Перейти в тему - настроить, открыть изменить HTML. На странице шаблона кнопкой клавиатуры F3 вызвать окно поиска. Вписать в поле поиска заголовок гаджета и нажать Enter, посмотреть ID виджета.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Только вот предложенный вариант у меня в блоге не сработал. У кого получится, тому повезло. Дальше расскажу, как еще можно узнать ID.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">В нужном нам гаджете пишем любой заголовок большими буквами, можно даже абру-кадабру какую-нибудь, сохраняем. Далее важно, гаджет сохраняем выше сообщения, под заголовком блога или гаджетом Страницы (PageList).</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">Идем в тему-настроить-открываем изменить HTML, то есть шаблон. Нажимаем вверху значок <u>перейти к виджету</u>, скриншот:</p><p style="text-align: justify;"><br /></p><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-P4niagvddas/YZ_ITOQ7eEI/AAAAAAAAUrY/qEXiqfxH4RcRDRFolfQ8sjUYPUTKCJ9TgCLcBGAsYHQ/s1118/1.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Нажать значок и открыть список гаджетов" border="0" data-original-height="411" data-original-width="1118" height="118" src="https://1.bp.blogspot.com/-P4niagvddas/YZ_ITOQ7eEI/AAAAAAAAUrY/qEXiqfxH4RcRDRFolfQ8sjUYPUTKCJ9TgCLcBGAsYHQ/w320-h118/1.png" title="Открываем список гаджетов" width="320" /></a></div></div><br /><p style="text-align: justify;">Я установила сразу под гаджетом страницы. В открывшемся меню в шаблоне блога гаджет страницы (PageList) обычно на первых позициях, после заголовка блога. </p><p style="text-align: justify;"><br /></p><p style="text-align: center;">Смотрите скриншот, как быстро мы узнаем ID нужного нам виджета:</p><p style="text-align: center;"><br /></p><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Xu8hRssSfPQ/YZ_Keqm7DFI/AAAAAAAAUrg/zHI9-weJuI43t-9T_RY8VRl5BKmLIu4GgCLcBGAsYHQ/s1015/2.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Под гаджетом страницы находим нужный виджет." border="0" data-original-height="330" data-original-width="1015" height="104" src="https://1.bp.blogspot.com/-Xu8hRssSfPQ/YZ_Keqm7DFI/AAAAAAAAUrg/zHI9-weJuI43t-9T_RY8VRl5BKmLIu4GgCLcBGAsYHQ/w320-h104/2.jpg" title="Смотрим ID нужного гаджета" width="320" /></a></div></div><br /><p style="text-align: justify;">Здесь уже видно, что ID - HTML37. Вместо заголовка у меня набор заглавных букв, так как заголовок не нужен. ID виджета я узнала и заголовок удалю. Зная идентификационный номер гаджета, можно менять стиль: фон, размер и цвет шрифта и все, что нужно.</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;"><u><i><span style="color: #0b5394;">Все стандартные гаджеты Google в шаблоне найти просто:</span></i></u></p><p style="text-align: justify;"><u><i><span style="color: #0b5394;"><br /></span></i></u></p><p style="text-align: justify;">- #Followers1(.Followers1) - Постоянные читатели;</p><p style="text-align: justify;">- #PopularPosts1(.PopularPosts1) - Популярные сообщения;</p><p style="text-align: justify;">- #PageList1(.PageList1) - гаджет Страницы;</p><p style="text-align: justify;">- #LinkList1(.LinkList1) - Список ссылок;</p><p style="text-align: justify;">- #BlogArchive1(.BlogArchive1) - Архив блога;</p><p style="text-align: justify;">- #CustomSearch1(.CustomSearch1) - Окно поиска;</p><p style="text-align: justify;">- #Profile1(.Profile1) - Профиль;</p><p style="text-align: justify;">- #FollowByEmail1 или (.FollowByEmail1) - Подписаться по email;</p><p style="text-align: justify;"><br /></p><p style="text-align: justify;">На сегодня у меня вся информация, надеюсь, что пригодится. Задавайте вопросы в комментариях, через форму контактов уже не предлагаю, часто глючит, сообщения не доходят. Всего доброго.</p><p style="text-align: justify;"><i><u><span style="color: #0b5394;">Почитайте пост:</span></u></i> <a href="https://www.bdblogov.ru/2020/11/udalit-aktivnuyu-ssylku-izobrazheniya-v-novom-redaktore-blogger-knopkoj-delete.html" target="_blank">Удалить активную ссылку изображения в новом редакторе блоггер кнопкой Delete</a>;</p><p style="text-align: justify;"><i><u><span style="color: #0b5394;">Почитайте на досуге:</span></u></i></p><p style="text-align: justify;"><br /></p><p style="text-align: justify;"></p><ul><li><a href="https://www.bdblogov.ru/2018/12/eshche-novogodnie-idei-dlya-blogger.html" target="_blank">Еще новогодние идеи для блоггер</a>;</li><li><a href="https://www.bdblogov.ru/2018/05/skryt-ili-izmenit-fon-soobshcheniya-yarlykov.html" target="_blank">Скрыть или изменить фон сообщения ярлыков</a>;</li><li><a href="https://www.bdblogov.ru/2014/05/as-change-mouse-cursor-in-blogspot.html" target="_blank">Как изменить курсор мыши в блоге blogspot</a>;</li><li><a href="https://www.bdblogov.ru/2018/04/samoproizvolno-pechatayushchijsya-tekst.html" target="_blank">Самопроизвольно печатающийся текст</a>; </li></ul><p></p> <div><a href="https://text.ru/antiplagiat/619fdcf23de2c" target="_blank"><img alt="Text.ru - 100.00%" border="0" height="15" src="https://text.ru/image/get/619fdcf23de2c/101" title="Уникальность данного текста проверена через Text.ru" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com2tag:blogger.com,1999:blog-8142585837575624831.post-69460064454302869022021-11-15T13:06:00.001+02:002021-11-25T21:15:53.229+02:00Еще новогодние идеи для блоггер<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><u><i><span style="color: #0b5394;">Обновлено: 15.11.2021 г</span></i></u> Всем гостям и друзьям здравствуйте. Сегодня продолжение новогодней темы. .Перейду сразу к идеям праздничного оформления. Чтобы было понятно, посмотрите в <a href="https://mydomcomputer.blogspot.com/" target="_blank">тестовом</a> блоге примеры оформления, над/под сообщением новогодние гаджеты..<br /><br /><div style="text-align: center;"><i><u>Виджет отсчета времени "До Нового осталось.."</u></i></div></div><div style="text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-WYS-z_ZwN5k/XA_iJqnK_GI/AAAAAAAAR8k/BoF6_c_NcII_JJzuwaMX8xw_WgMTfcruQCLcBGAs/s1600/xfcs.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML код гаджета" border="0" data-original-height="117" data-original-width="805" height="57" src="https://1.bp.blogspot.com/-WYS-z_ZwN5k/XA_iJqnK_GI/AAAAAAAAR8k/BoF6_c_NcII_JJzuwaMX8xw_WgMTfcruQCLcBGAs/s400/xfcs.jpg" title="Отсчет времени "До Нового Года осталось"" width="400" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Скопируйте HTML код</u></i></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div style="font-size: 14px; height: 200px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><div style="text-align: center;"><span style="color: #0c343d;"><script language="javascript"> </span></div><div style="text-align: center;"><span style="color: #0c343d;">function cdtime(container, targetdate){ </span></div><div style="text-align: center;"><span style="color: #0c343d;"> if (!document.getElementById || !document.getElementById(container)) return </span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.container=document.getElementById(container) </span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.currentTime=new Date() </span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.targetdate=new Date(targetdate) </span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.timesup=false </span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.updateTime()</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> cdtime.prototype.updateTime=function(){</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var thisobj=this</span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.currentTime.setSeconds(this.currentTime.getSeconds()+1) </span></div><div style="text-align: center;"><span style="color: #0c343d;"> setTimeout(function(){thisobj.updateTime()}, 1000) </span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> cdtime.prototype.displaycountdown=function(baseunit, functionref){ </span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.baseunit=baseunit</span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.formatresults=functionref</span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.showresults()</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> cdtime.prototype.showresults=function(){</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var thisobj=this</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var timediff=(this.targetdate-this.currentTime)/1000</span></div><div style="text-align: center;"><span style="color: #0c343d;"> if (timediff<0){</span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.timesup=true</span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.container.innerHTML=this.formatresults()</span></div><div style="text-align: center;"><span style="color: #0c343d;"> return</span></div><div style="text-align: center;"><span style="color: #0c343d;">}</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var oneMinute=60</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var oneHour=60*60 </span></div><div style="text-align: center;"><span style="color: #0c343d;"> var oneDay=60*60*24</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var dayfield=Math.floor(timediff/oneDay) </span></div><div style="text-align: center;"><span style="color: #0c343d;"> var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))</span></div><div style="text-align: center;"><span style="color: #0c343d;"> if (this.baseunit=="hours"){</span></div><div style="text-align: center;"><span style="color: #0c343d;"> hourfield=dayfield*24+hourfield</span></div><div style="text-align: center;"><span style="color: #0c343d;"> dayfield="n/a"</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> else if (this.baseunit=="minutes"){</span></div><div style="text-align: center;"><span style="color: #0c343d;"> minutefield=dayfield*24*60+hourfield*60+minutefield</span></div><div style="text-align: center;"><span style="color: #0c343d;"> dayfield=hourfield="n/a"</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> else if (this.baseunit=="seconds"){</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var secondfield=timediff</span></div><div style="text-align: center;"><span style="color: #0c343d;"> dayfield=hourfield=minutefield="n/a"</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield) </span></div><div style="text-align: center;"><span style="color: #0c343d;"> setTimeout(function(){thisobj.showresults()}, 1000)</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> function formatresults2(){</span></div><div style="text-align: center;"><span style="color: #0c343d;"> if (this.timesup==false){</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var displaystring="<span class='nonewyear'>До Нового года осталось "+arguments[0]+" Дней "+arguments[1]+" Часов<br>"+arguments[2]+" Минут "+arguments[3]+" Секунд</span>"</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> else{</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var displaystring="<span class='newyear1'>С Новым годом!!!</span>"</span></div><div style="text-align: center;"><span style="color: #0c343d;"> //alert("С Новым годом!!!")</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> return displaystring</span></div><div style="text-align: center;"><span style="color: #0c343d;"> }</span></div><div style="text-align: center;"><span style="color: #0c343d;"> </script></span></div><div style="text-align: center;"><span style="color: #0c343d;"> <div id="countdowncontainer2"></span></div><div style="text-align: center;"><span style="color: #0c343d;"></div></span></div><div style="text-align: center;"><span style="color: #0c343d;"><script type="text/javascript"></span></div><div style="text-align: center;"><span style="color: #0c343d;"> var currentyear=new Date().getFullYear()</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var thischristmasyear=(new Date().getMonth()==0 && new Date().getDate()==1)? currentyear : currentyear + 1</span></div><div style="text-align: center;"><span style="color: #0c343d;"> var christmas=new cdtime("countdowncontainer2", "january 1, "+thischristmasyear+" 0:0:00")</span></div><div style="text-align: center;"><span style="color: #0c343d;"> christmas.displaycountdown("days", formatresults2)</span></div><div style="text-align: center;"><span style="color: #0c343d;"></script></span></div><div style="text-align: center;"><br /></div></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Стиль CSS для гаджета, вставить дизайн-добавить гаджет</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><style></span></div><div style="text-align: center;"><span style="color: #0c343d;">#HTML34{</span></div><div style="text-align: center;"><span style="color: #0c343d;">font-size:18px; *// размер шрифта;</span></div><div style="text-align: center;"><span style="color: #0c343d;">color: #0e5198; *// цвет шрифта;</span></div><div style="text-align: center;"><span style="color: #0c343d;">}</span></div><div style="text-align: center;"><span style="color: #0c343d;"></style></span></div><div style="text-align: center;"><br /></div><div style="text-align: justify;"><span style="color: #0c343d;">HTML34</span> - ID виджета. нажмите в макете изменить гаджет, и в адресной строке посмотрите ID гаджета. В код CSS на свое усмотрение добавьте форму, размер и цвет рамки по желанию. Формы рамок посмотрите в меню <u>содержание,</u> ярлык "Рамки".</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">В предыдущей статье <a href="https://www.bdblogov.ru/2018/12/novogodnie-ukrasheniya-dlya-blogov-blogger.html" target="_blank">Новогодние украшения для блогов блоггер</a> я писала, что для оформления можно использовать коды бегущих строк с изображениями. Возьмем праздничную картинку и новогодний персонаж, анимация:</div><div style="text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-CC3sD_Dnzok/XA_m3RfwdAI/AAAAAAAAR8w/KfZatbWm3jEicZzhnQjwv7iug93iTE8igCLcBGAs/s1600/10.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML код гаджета" border="0" data-original-height="459" data-original-width="799" height="226" src="https://4.bp.blogspot.com/-CC3sD_Dnzok/XA_m3RfwdAI/AAAAAAAAR8w/KfZatbWm3jEicZzhnQjwv7iug93iTE8igCLcBGAs/s400/10.jpg" title="На фоне новогодней картинки идущий санта" width="400" /></a></div></div><div style="text-align: center;"><i><u>Скопируйте HTML код</u></i><br /><br /></div><div class="bloknot7"><div style="text-align: center;"><span style="color: #0c343d;"><br /></span></div><div style="text-align: center;"><span><div><span style="color: #0c343d;"><div style="background: url(</span><span style="color: #3d85c6;">https://3.bp.blogspot.com/-RodA5svAX3E/XA_oUjs_wTI/AAAAAAAAR88/GrQtASkLkvgl9Yui2NHKtCEPjmNW6X8QACLcBGAs/s640/unnamed%2B%25281%2529.gif</span><span style="color: #0c343d;">);<b>width: auto;height:350px</b>;</span><span style="color: #674ea7;">border:7px solid #03b4cc</span><span style="color: #0c343d;">;"></span></div><div style="color: #0c343d;"><br /></div><div style="color: #0c343d;"><br /></div><div style="color: #0c343d;"><br /></div><div><span style="color: #0c343d;"><marquee behavior="scroll" direction="right"><img src="</span><span style="color: #3d85c6;">https://2.bp.blogspot.com/-t3LODOGE0y4/XA2ZEacgn_I/AAAAAAAAR28/TD7GaCqzxNgw9N5_xXXmDpe9WfHIugynACLcBGAs/s1600/25.gif</span><span style="color: #0c343d;">"; width="100" height="100"style="<b>padding: 250px</b> 40px 40px 80px;" /></marquee></div></span></div></span></div><div style="text-align: center;"><span style="color: #0c343d;"><br /></span></div><div style="text-align: center;"><br /></div></div><div style="text-align: justify;">Голубым - url адрес новогодней картинки; выделено жирным - ширина и высота изображения; фиолетовым - форма, размер и цвет рамки;</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Во второй части HTML кода: url адрес и размеры санты; padding: 250 px; - настройка верх-низ персонажа; Пишите в комментариях, если возникнут проблемы с настройкой.</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Еще пример оформления с другими изображениями:</u></i></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-IxpS1FaSplE/XA_refn_MzI/AAAAAAAAR9I/iEERVyHYzs0gbndTiWANUecENGa8w_yKwCLcBGAs/s1600/%25D0%2591%25D0%25B5%25D0%25B7%25D1%258B%25D0%25BC%25D1%258F%25D0%25BD%25D0%25BD%25D1%258B%25D0%25B9.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML код гаджета" border="0" data-original-height="355" data-original-width="792" height="177" src="https://2.bp.blogspot.com/-IxpS1FaSplE/XA_refn_MzI/AAAAAAAAR9I/iEERVyHYzs0gbndTiWANUecENGa8w_yKwCLcBGAs/s400/%25D0%2591%25D0%25B5%25D0%25B7%25D1%258B%25D0%25BC%25D1%258F%25D0%25BD%25D0%25BD%25D1%258B%25D0%25B9.jpg" title="Другой вариант с идущим новогодним персонажем на фоне картинки" width="400" /></a></div></div><div style="text-align: center;"><i><u>Скопируйте HTML код</u></i><br /><br /></div><div class="bloknot7"><div style="text-align: center;"><span style="color: #0c343d;"><div><div style="background: url(http://img1.liveinternet.ru/images/attach/d/0/139/628/139628085_WinterLandscape640x480.jpg); border:7px solid #03b4cc;width:640px;height:480px;"></div><div><br /></div><div><marquee behavior="scroll" direction="right"><img src="http://img0.liveinternet.ru/images/attach/d/0/139/628/139628086_177159.gif"; width="200" height="200"style="padding: 220px 40px 40px 80px;" /></marquee></div></div></span></div><div style="text-align: center;"><br /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">УПС, на сегодня вся информация. По всем вопросам обращайтесь в комментариях или контактную форму. Поделитесь со своими друзьями в социальных сетях. Всем пока, пока.<br /><br /><i><u>Рекомендую почитать:</u></i><br /><br /><ul><li><a href="https://www.bdblogov.ru/2016/12/novogodnij-vneshnij-fon-dlya-blogov-blogger-oformlenie-na-css.html" target="_blank">Новогодний внешний фон для блогов блоггер Оформление на CSS</a>;</li><li><a href="https://www.bdblogov.ru/2016/12/varianty-oformleniya-animacii-teksta-na-css-dlya-blogger.html" target="_blank">Варианты оформления анимации текста на CSS для блоггер</a>;</li><li><a href="https://www.bdblogov.ru/2016/03/shadow-text-header-links-quotes-in-blogger-using-CSS.html" target="_blank">Тень текста заголовка ссылок цитат в blogger используя CSS</a>;</li><li><a href="https://www.bdblogov.ru/2018/12/oformlenie-gorizontalnoj-linii-hr-s-ispolzovaniem-css.html" target="_blank">Оформление горизонтальной линии HR с использованием CSS</a></li><li><a href="https://www.bdblogov.ru/2021/11/uznat-id-gadzheta-v-shablone-blogger-obnovlenie.html" target="_blank">Унать ID гаджета в шаблоне блоггер Обновление</a>;</li></ul></div></div><a href="https://text.ru/antiplagiat/5c0ffd2635ba2" target="_blank"><img alt="Text.ru - 100.00%" border="0" height="15" src="https://text.ru/image/get/5c0ffd2635ba2/101" title="Уникальность данного текста проверена через Text.ru" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com3tag:blogger.com,1999:blog-8142585837575624831.post-79700252067335276362021-11-01T20:44:00.000+02:002021-11-01T20:44:16.496+02:00Виджет времени с датой и днем недели для блоггер<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><i><u><span style="color: #0b5394;">Обновлено: 01.11.2021 г.</span></u></i> Здравствуйте друзья и читатели блога. В статье<a href="https://www.bdblogov.ru/2017/11/gadzhet-tekushchej-daty-i-vremeni-dlya-blogger.html" target="_blank"> Гаджет текущей даты и времени для блоггер</a>, я писала о часиках и дате для наших блогов блоггер. Многие читатели хотели бы видеть кроме времени и даты, еще и день недели. Примерно так</div><div style="text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-dRemje6iCgY/WkFG6xD6hLI/AAAAAAAAQ2w/kaEqQf0u9QkY57SqqLt2L3xSthdRe91IQCLcBGAs/s1600/%25D0%25B2%25D1%2580%25D0%25B5%25D0%25BC%25D1%258F.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Установка и настройка виджета в блог блоггер" border="0" data-original-height="52" data-original-width="378" height="55" src="https://1.bp.blogspot.com/-dRemje6iCgY/WkFG6xD6hLI/AAAAAAAAQ2w/kaEqQf0u9QkY57SqqLt2L3xSthdRe91IQCLcBGAs/s400/%25D0%25B2%25D1%2580%25D0%25B5%25D0%25BC%25D1%258F.jpg" title="Виджет даты, дня недели и времени" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><u>В макете блога (дизайн) добавляем два гаджета, скрипт ниже сохраняем внизу (footer)</u></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div style="font-size: 14px; height: 200px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><script type="text/javascript"></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">function clock() {</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">var d = new Date();</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">var day = d.getDate();</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">var hours = d.getHours();</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">var minutes = d.getMinutes();</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">var seconds = d.getSeconds();</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">month=new Array("01", "02", "03", "04", "05", "06",</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">"07", "08", "09", "10", "11", "12");</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">days=new Array("<b>Воскресенье</b>", "<b>Понедельник</b>", "<b>Вторник</b>", "<b>Среда</b>",</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">"<b>Четверг</b>", "<b>Пятниц</b>а", <b>"Суббота</b>");</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">if (day <= 9) day = "0" + day;</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">if (hours <= 9) hours = "0" + hours;</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">if (minutes <= 9) minutes = "0" + minutes;</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">if (seconds <= 9) seconds = "0" + seconds;</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">date_date = day + " " + month[d.getMonth()] + " " + d.getFullYear() + " г. (" +</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">days[d.getDay()] + ")";</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><span style="color: #0c343d;">date_time = hours + ":" + minutes</span><span style="color: blue;"> <b>+ ":" + seconds</b></span><span style="color: #0c343d;">;</span></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">if (document.layers) {</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"> document.layers.date.document.write(date_time);</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"> document.layers.date.document.close();</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"> document.layers.time.document.write(date_time);</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"> document.layers.time.document.close();</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">}</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">else {</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"> document.getElementById("date").innerHTML = date_date;</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"> document.getElementById("time").innerHTML = date_time;</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">}</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"> setTimeout("clock()", 1000);</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">}</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;">clock();</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #0c343d;"></script></span></div><div style="text-align: center;"><br /></div></div></div><br /><div style="text-align: justify;">Можно изменить полное слово дня недели на две первых буквы: воскресенье (Вс), понедельник (Пн), выделено жирным цветом. Только будьте внимательны, не удалите скобки и другие символы.</div><br /><div style="text-align: justify;">Выделено синим до точки с запятой, удалить секунды. Будет показывать дату, день недели и время без секунд.</div><br /><div style="text-align: center;"><u>Второй код установите в дизайне, где хотите видеть часики</u></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><font color="#<b>660000</b>;"><b>Сегодня</b></font>: <span id="date" style="color:#<b>008080</b>;"><b>Дата</b></span>&nbsp;</span></div><div style="text-align: center;"><span style="color: #0c343d;"><font color="#<b>660000</b>;"><b>Время</b></font>: <span id="time" style="color:#<b>008080</b>;"><b>Время</b></span></span></div><div style="text-align: center;"><span style="color: #0c343d;"><style></span><br /><br /><div style="text-align: justify;">Настройте цвет слов (сегодня и время) или удалите их, а также выберите отображаемый цвет даты, дня недели и времени.<br /><br />По настройке и установке задавайте вопросы в комментариях или работает форма для связи. Отдельное спасибо, если поделитесь в социальных сетях. Всего доброго.<br /><br /><u>Рекомендую другие статьи</u>:<br /><br /><ul><li><a href="https://www.bdblogov.ru/2015/12/hide-widgets-on-static-and-pages-posts-with-using-CSS.html" target="_blank">Скрыть виджеты на статических и страницах сообщений с помощью CSS</a>;</li><li><a href="https://www.bdblogov.ru/2016/09/clearance-home-gadget-Google-comments-with-icons.html" target="_blank">Оформление родного гаджета Google комментарии с иконками</a>;</li><li><a href="https://www.bdblogov.ru/2015/11/gadget-tab-with-pages-social-networking-for-blogger.html" target="_blank">Гаджет вкладка со страничками социальных сетей для blogger</a>;</li><li><a href="https://www.bdblogov.ru/2015/07/fix-latest-gadget-sidebar-blog-blogspot.html" target="_blank">Зафиксировать последний гаджет в сайдбаре блога blogspot</a>;</li><li><a href="https://www.bdblogov.ru/2015/07/floating-button-become-regular-reader-blog.html" target="_blank">Плавающая кнопка стать постоянным читателем блога</a>;</li></ul></div></div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com2tag:blogger.com,1999:blog-8142585837575624831.post-85914448700809984912021-10-25T17:06:00.001+03:002021-10-25T17:07:29.961+03:00Виджет вкладка для боковых панелей<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><i><u><span style="color: #0b5394;">Обновление: 25.10.2021 г.</span></u></i> Здравствуйте друзья, гости и читатели этого блога. В одном из своих постов <a href="https://www.bdblogov.ru/2014/02/drop-vertical-menu-for-blog-blogspot.html" target="_blank">Раскрывающее меню для блога blogspot</a> я писала о меню аккордеоне для блога. Этот предлагаемый виджет вкладка немного отличается от такого меню. Пример скриншота Вы видите. Во всяком случае, у Вас будет выбор, что использовать в сайдбаре блога.<br /><br />Рекомендую так же посмотреть вариант <a href="https://www.shpargalochki.ru/2015/03/akkordeon-dlja-bloga-s-prokrutkoj.html" rel="" target="_blank">виджета аккордеон с прокруткой</a> в блоге Вики Барад "Шпаргалки блогерши". По моему отличное решение экономии места в боковых колонках. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">А теперь вернемся к моему варианту. Виджет легко настраивается и устанавливается. Копируем код ниже, вставляем к примеру в черновик созданной страницы. Пишем нужные названия вкладок и адреса ссылок.<br /><br /><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-KSp0P81UKX8/VPcoFmtaO5I/AAAAAAAAHl4/GyA6FTDUPmg/s1600/%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt="Настройка и установка кода виджета вкладки" border="0" height="320" src="https://4.bp.blogspot.com/-KSp0P81UKX8/VPcoFmtaO5I/AAAAAAAAHl4/GyA6FTDUPmg/s1600/%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82.JPG" title="Виджет вкладка для боковых панелей блога blogspot" width="258" /></a></div></div><br />Оформляем под дизайн своего блога и устанавливаем в <span style="color: #444444;">дизайн-добавить гаджет</span> в нужное место макета блога.</div><div style="text-align: justify;"><br /></div><div style="font-size: 12px; height: 300px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><div class="bloknot7"><div style="text-align: center;"> <span style="color: #444444;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></span><br /><span style="color: #444444;"><script type="text/javascript" >$(document).ready(function(){</span><br /><span style="color: #444444;"> $('li.title a').click(function(e){</span><br /><span style="color: #444444;"> var dropDown = $(this).parent().next();</span><br /><span style="color: #444444;"> $('.downlistie').not(dropDown).slideUp('slow');</span><br /><span style="color: #444444;"> dropDown.slideToggle('slow');</span><br /><span style="color: #444444;"> e.preventDefault();</span><br /><span style="color: #444444;"> })</span><br /><span style="color: #444444;">});</script></span><br /><span style="color: #444444;"><style></span><br /><span style="color: #444444;">ul.container{</span><br /><span style="color: #444444;"> <b> width:275px;</b></span><br /><span style="color: #444444;"> padding:5px;</span><br /><span style="color: #444444;">}</span><br /><span style="color: #444444;">li.accoi-menu{</span><br /><span style="color: #444444;">list-style:none;</span><br /><span style="color: #444444;"> padding:1px;</span><br /><span style="color: #444444;"> width:100%;}</span><br /><span style="color: #444444;"><br /></span><span style="color: #444444;">li.title</span><br /><span style="color: #444444;">{</span><br /><span style="color: #444444;">border-radius:5px;</span><br /><span style="color: #444444;"><b>background:#333333;</b></span><br /><span style="color: #444444;">list-style:none;</span><br /><span style="color: #444444;">padding:5px;</span><br /><span style="color: #444444;">}</span><br /><span style="color: #444444;">li.title a{</span><br /><span style="color: #444444;"><b>color:#ffffff;</b></span><br /><span style="color: #444444;"> display:block;</span><br /><span style="color: #444444;"> padding:5px;</span><br /><span style="color: #444444;"><b> font:14px georgia, verdana;</b></span><br /><span style="color: #444444;"> overflow:hidden;</span><br /><span style="color: #444444;"> position:relative;</span><br /><span style="color: #444444;"> width:100%;</span><br /><span style="color: #444444;"> text-decoration:none;</span><br /><span style="color: #444444;">}</span><br /><span style="color: #444444;">.downlistie{</span><br /><span style="color: #444444;">list-style:none;</span><br /><span style="color: #444444;"> display:none;</span><br /><span style="color: #444444;"> padding-top:5px;</span><br /><span style="color: #444444;"> width:100%;</span><br /><span style="color: #444444;">}</span><br /><span style="color: #444444;">.downlistie li{</span><br /><span style="color: #444444;"> list-style:none;</span><br /><span style="color: #444444;"><b>border-left:1px solid #dcdcdc;</b></span><br /><span style="color: #444444;"><b>border-right:1px solid #dcdcdc;</b></span><br /><span style="color: #444444;"><b>border-bottom:1px solid #dcdcdc;</b></span><br /><span style="color: #444444;"><b>border-radius:5px;</b></span><br /><span style="color: #444444;"><b> margin:5px ;</b></span><br /><span style="color: #444444;"> padding:4px 10px; </span><br /><span style="color: #444444;">}</span><br /><span style="color: #444444;"><br /></span><span style="color: #444444;">.downlistie li:hover {</span><br /><span style="color: #444444;">background:orange;</span><br /><span style="color: #444444;">}</span><br /><span style="color: #444444;">.downlistie li a{</span><br /><span style="color: #444444;">{</span><br /><span style="color: #444444;"><b>font:14px georgia, verdana;</b></span><br /><span style="color: #444444;">text-decoration:none;</span><br /><span style="color: #444444;"><b>color:#333333;</b></span><br /><span style="color: #444444;">}</span><br /><span style="color: #444444;">.downlistie li a:hover {</span><br /><span style="color: #444444;">text-decoration:none;</span><br /><span style="color: #444444;"><b>color:#333333;</b></span><br /><span style="color: #444444;">}</span><br /><span style="color: #444444;"></style></span><br /><span style="color: #444444;"><ul class="container"></span><br /><span style="color: #444444;"> <li class="accoi-menu"></span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li class="title"><a href="#" ><b>Blogger</b></a></li> </span><br /><span style="color: #444444;"> <li class="downlistie"></span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li><a href="</span><b><span style="color: #444444;">#</span></b><span style="color: #444444;">" ></span><b><span style="color: #666666;">Название ссылки</span></b><span style="color: #444444;"></a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li></span><br /><span style="color: #444444;"> </ul></li></ul></li></span><br /><span style="color: #444444;"><br /></span><span style="color: #444444;"><br /></span><span style="color: #444444;"> <li class="accoi-menu"></span><br /><span style="color: #444444;"> </span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li class="title"><a href="#" >Гаджеты</a></li></span><br /><span style="color: #444444;"><br /></span><span style="color: #444444;"> <li class="downlistie"></span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li><a href="#" >Название ссылки</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li> </span><br /><span style="color: #444444;"> </ul></li></ul></li></span><br /><span style="color: #444444;"><br /></span><span style="color: #444444;"> <li class="accoi-menu"></span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li class="title"><a href="#" >Рамки</a></li></span><br /><span style="color: #444444;"> <li class="downlistie"></span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li><a href="#" >Название ссылки</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li></span><br /><span style="color: #444444;"> </ul></li></ul></li></span><br /><span style="color: #444444;"><br /></span><span style="color: #444444;"> <li class="accoi-menu"></span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li class="title"><a href="#" >Партнерские программы</a></li></span><br /><span style="color: #444444;"> <li class="downlistie"></span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li><a href="#" >Название ссылки</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Название ссылки</a></li> </span><br /><span style="color: #444444;"> </ul></li></ul></li></span><br /><span style="color: #444444;"><br /></span><span style="color: #444444;"><br /></span><span style="color: #444444;"> <li class="accoi-menu"></span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li class="title"><a href="#" >Я в соц сетях</a></li></span><br /><span style="color: #444444;"> <li class="downlistie"></span><br /><span style="color: #444444;"> <ul></span><br /><span style="color: #444444;"> <li><a href="#" >Google+</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Facebook</a></li></span><br /><span style="color: #444444;"> <li><a href="#">Twitter</a></li></span><br /><span style="color: #444444;"> <li><a href="#">ВКонтакте</a></li></span><br /><span style="color: #444444;"> </ul></li></ul></li></span><br /><span style="color: #444444;"> </ul></span></div></div></div><br /><div style="text-align: justify;">В настройках ничего сложного нет, измените цвет фона, ссылок, названий вкладок, радиус закругления углов. При необходимости добавьте больше ссылок. Только хочу обратить внимание на следующее: Вот часть кода: </div><div class="bloknot7"><div style="text-align: justify;"><br /></div><div style="text-align: center;"><span style="color: #444444;"> <li class="title"><a href="<b>#</b>" >Blogger</a></li> </span></div><div style="text-align: center;"><span style="color: #444444;"> </span><span style="color: #274e13;"> </span><span style="color: #999999;"><li class="downlistie"></span></div><div style="text-align: center;"><span style="color: #999999;"> <ul></span></div><div style="text-align: center;"><span style="color: #999999;"> <li><a href="#" >Название ссылки</a></li></span></div><div style="text-align: center;"><span style="color: #999999;"> <li><a href="#">Название ссылки</a></li></span></div><div style="text-align: center;"><span style="color: #999999;"> <li><a href="#">Название ссылки</a></li></span></div><div style="text-align: center;"><span style="color: #999999;"> </ul></li></ul></li></span></div></div><br /><div style="text-align: justify;">Если захотите использовать код виджета как простое меню, например вписать названия своих ярлыков, то удалите выделенное светло серым. Где решетка, вставьте адрес ссылки на ярлык (Blogger). Раскрываться виджет не будет, при нажатии переход по ссылке ярлыка. При использовании кода в первом варианте адрес ссылки не вставляйте.<br /><br />И на сегодня вся информация, пишите отзывы, поделитесь со своими друзьями. Всем пока и до новых встреч.<br /><br /><span face=""arial" , "helvetica" , sans-serif" style="color: #134f5c;"><b><i>Почитайте другие статьи: </i></b></span> </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><ul><li><a href="https://www.bdblogov.ru/2015/02/Restoration-blocked-blog-blogspot.html" target="_blank">Восстановление заблокированного блога blogspot</a>; </li><li><a href="https://www.bdblogov.ru/2015/02/Gadget-scrolling-message-blog-in-the-image.html" target="_blank">Гаджет прокрутки сообщений блога в виде изображений</a>; </li><li><a href="https://www.bdblogov.ru/2015/03/Slider-for-photo-video-images.html" target="_blank">Слайдер для фото видео изображений</a>; </li><li><a href="https://www.bdblogov.ru/2015/11/gadget-tab-with-pages-social-networking-for-blogger.html" target="_blank">Гаджет вкладка со страничками социальных сетей для blogger</a>;</li></ul></div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com4tag:blogger.com,1999:blog-8142585837575624831.post-68129899732941866062021-09-24T20:32:00.000+03:002021-09-24T20:32:57.954+03:00Бесшовные фоны для рамок, цитат и внешнего фона блога/сайта<div dir="ltr" style="text-align: left;" trbidi="on"><div style="background-repeat: height: 1000px; border: 1px dotted #cccccc; width: auto;"><h2 style="text-align: left;"><i><span style="color: #073763;"> Бесшовные тетрадные фоны: клетка, линия, косая черта, легкие цветные тона </span></i></h2><div><span style="text-align: justify;">Здравствуйте дорогие читатели и гости моего блога. Предлагаю разные фоны для рамок, цитат и фоны для страниц блога. Многие веб-мастера оформляют цитаты тетрадным фоном. Здесь Вы найдете линию, косую черту и квадратные тетрадные фоны. </span></div><div style="text-align: justify;"><br />Так же для Вас легкие цветные тона для страниц и внешнего фона блога/сайта. И несколько вариантов других цветных фонов. Вам нужно будет только скопировать URL адрес выбранного фона (слева-направо) и вставить в код цитаты, рамки или в шаблон блога. Думаю, что применение найдется. </div><br /><center><table><tbody><tr><td><div style="background-image: url(https://i019.radikal.ru/1407/4a/6fd86ba4560b.jpg); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s019.radikal.ru/i642/1407/e4/f5d61902cb66.jpg); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s006.radikal.ru/i213/1407/0f/d888946906b1.jpg); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666;"><span style="font-size: x-small;"><br /></span></span></center><center><span style="color: #666666;"><span style="font-size: x-small;">https://i019.radikal.ru/1407/4a/6fd86ba4560b.jpg</span><span style="font-size: xx-small;"> </span><span style="font-size: x-small;"> https://s019.radikal.ru/i642/1407/e4/f5d61902cb66.jpg </span><span style="font-size: xx-small;"> </span><span style="font-size: x-small;"> </span></span></center><center><span style="color: #666666;"><span style="font-size: x-small;"><br /></span></span></center><center><span style="color: #666666;"><span style="font-size: x-small;">https://s006.radikal.ru/i213/1407/0f/d888946906b1.jpg</span></span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s019.radikal.ru/i611/1407/58/9bd9c09c5da0.jpg); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i704/1407/9a/39653762e8fe.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i023.radikal.ru/1407/44/b156c5d9056d.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666;"><span style="font-size: x-small;"><br /></span></span></center><center><span style="color: #666666;"><span style="font-size: x-small;">https://s019.radikal.ru/i611/1407/58/9bd9c09c5da0.jpg</span><span style="font-size: xx-small;"> </span><span style="font-size: x-small;">https://s020.radikal.ru/i704/1407/9a/39653762e8fe.png<span style="background-color: white;"> </span></span></span></center><center><span style="color: #666666;"><span style="font-size: x-small;"><br /></span></span></center><center><span style="color: #666666;"><span style="font-size: x-small;">https://i023.radikal.ru/1407/44/b156c5d9056d.png</span></span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://i023.radikal.ru/1407/0b/ea2a97d721e0.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s019.radikal.ru/i622/1407/95/940ffc0aa07e.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s019.radikal.ru/i620/1407/61/00ef28d9a85e.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i023.radikal.ru/1407/0b/ea2a97d721e0.png https://s019.radikal.ru/i622/1407/95/940ffc0aa07e.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s019.radikal.ru/i620/1407/61/00ef28d9a85e.png</span></center><center><br /><table><tbody><tr><td><div style="background-image: url(https://i056.radikal.ru/1407/6c/141e0f1da801.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i710/1407/0c/f7be06ce76cc.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i021.radikal.ru/1407/2e/84acca596853.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i718/1407/0c/6e37816de43d.png https://s020.radikal.ru/i710/1407/0c/f7be06ce76cc.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i021.radikal.ru/1407/2e/84acca596853.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s020.radikal.ru/i718/1407/f6/1fe4b58e72fa.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s018.radikal.ru/i517/1407/3f/58807185c582.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i711/1407/b4/462b990f183d.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i718/1407/f6/1fe4b58e72fa.png https://s018.radikal.ru/i517/1407/3f/58807185c582.png<br /><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i711/1407/b4/462b990f183d.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s020.radikal.ru/i707/1407/58/e6564328127b.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s012.radikal.ru/i319/1407/cf/648f287f081b.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i062.radikal.ru/1407/f1/ccd90f8977d7.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i707/1407/58/e6564328127b.png https://s012.radikal.ru/i319/1407/cf/648f287f081b.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i062.radikal.ru/1407/f1/ccd90f8977d7.png</span></center><center><br /><table><tbody><tr><td><div style="background-image: url(https://s020.radikal.ru/i718/1407/51/8e45c9947b6a.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s58.radikal.ru/i162/1407/44/99ec190e0dc8.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s005.radikal.ru/i210/1407/6b/530afb2a3cf9.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i718/1407/51/8e45c9947b6a.png https://s58.radikal.ru/i162/1407/44/99ec190e0dc8.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s005.radikal.ru/i210/1407/6b/530afb2a3cf9.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://i062.radikal.ru/1407/d1/2796f5b3bdd8.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s019.radikal.ru/i613/1407/e8/43ade7d13c07.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i019.radikal.ru/1407/ef/0f5f8c983d68.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i062.radikal.ru/1407/d1/2796f5b3bdd8.png https://s019.radikal.ru/i613/1407/e8/43ade7d13c07.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i019.radikal.ru/1407/ef/0f5f8c983d68.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://i031.radikal.ru/1407/38/b10885fa0ab1.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s019.radikal.ru/i617/1407/a2/332a1443a4db.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i718/1407/8e/bf8f638e5e2b.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i056.radikal.ru/1407/6c/141e0f1da801.png https://s019.radikal.ru/i617/1407/a2/332a1443a4db.png<br /><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i718/1407/8e/bf8f638e5e2b.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s020.radikal.ru/i720/1407/28/cdeaa156d8f4.png ); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s43.radikal.ru/i101/1407/a4/463af45cd62d.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s003.radikal.ru/i204/1407/79/bc819470d0d5.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;"> https://s020.radikal.ru/i720/1407/28/cdeaa156d8f4.png https://s43.radikal.ru/i101/1407/a4/463af45cd62d.png<br /> </span></center><center><span style="color: #666666; font-size: x-small;">https://s003.radikal.ru/i204/1407/79/bc819470d0d5.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s019.radikal.ru/i637/1407/9c/e6006567fc06.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i723/1407/49/a7c345dd9c7b.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s015.radikal.ru/i332/1407/98/c206d7afac23.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s019.radikal.ru/i637/1407/9c/e6006567fc06.png https://s020.radikal.ru/i723/1407/49/a7c345dd9c7b.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s015.radikal.ru/i332/1407/98/c206d7afac23.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://i020.radikal.ru/1407/c3/a8adb2cdda78.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s43.radikal.ru/i101/1407/32/517c3e957a0d.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s018.radikal.ru/i519/1407/7a/954d90fb035f.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i020.radikal.ru/1407/c3/a8adb2cdda78.png https://s43.radikal.ru/i101/1407/32/517c3e957a0d.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s018.radikal.ru/i519/1407/7a/954d90fb035f.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s019.radikal.ru/i621/1407/ca/613c5c13415c.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s019.radikal.ru/i602/1407/cb/b9124af9cfc6.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i057.radikal.ru/1407/fd/ac2cef4e31c0.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s019.radikal.ru/i621/1407/ca/613c5c13415c.png https://s019.radikal.ru/i602/1407/cb/b9124af9cfc6.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i057.radikal.ru/1407/fd/ac2cef4e31c0.png</span></center><center><br /><table><tbody><tr><td><div style="background-image: url(https://s52.radikal.ru/i138/1407/59/f7d868564fdd.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s019.radikal.ru/i623/1407/06/51db541a4e83.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i017.radikal.ru/1407/95/689b4abb21de.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s52.radikal.ru/i138/1407/59/f7d868564fdd.png https://s019.radikal.ru/i623/1407/06/51db541a4e83.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i017.radikal.ru/1407/95/689b4abb21de.png</span></center><center><br /><table><tbody><tr><td><div style="background-image: url(https://s019.radikal.ru/i629/1407/23/1777decf8259.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i718/1407/3e/9249e621dd3d.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i018.radikal.ru/1407/38/80c42ed270f4.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">http://s019.radikal.ru/i629/1407/23/1777decf8259.png https://s020.radikal.ru/i718/1407/3e/9249e621dd3d.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i018.radikal.ru/1407/38/80c42ed270f4.png</span></center><center><br /><table><tbody><tr><td><div style="background-image: url(https://s020.radikal.ru/i714/1407/61/2984f18645d0.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i057.radikal.ru/1407/3b/450d82c86370.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s43.radikal.ru/i101/1407/26/e84ce8a1e9bc.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i714/1407/61/2984f18645d0.png https://i057.radikal.ru/1407/3b/450d82c86370.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s43.radikal.ru/i101/1407/26/e84ce8a1e9bc.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s020.radikal.ru/i711/1407/0b/9638603148db.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i020.radikal.ru/1407/e1/b1dcb974edb6.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i024.radikal.ru/1407/ce/aeed5c83846c.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i711/1407/0b/9638603148db.png https://i020.radikal.ru/1407/e1/b1dcb974edb6.png </span></center><center><span style="color: #666666; font-size: x-small;"><span style="background-color: white;"><br /></span></span></center><center><span style="color: #666666; font-size: x-small;"><span style="background-color: white;">https://i024.radikal.ru/1407/ce/aeed5c83846c.png</span></span></center><center><br /><table><tbody><tr><td><div style="background-image: url(https://s019.radikal.ru/i628/1407/01/883f23314ece.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i718/1407/72/d9fe3ae1643d.jpg); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i717/1407/d8/d47e1af2dfe8.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s019.radikal.ru/i611/1407/58/9bd9c09c5da0.jpg https://s020.radikal.ru/i718/1407/72/d9fe3ae1643d.jpg </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i717/1407/d8/d47e1af2dfe8.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s020.radikal.ru/i722/1407/d9/a95ccfea4219.jpg); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s019.radikal.ru/i605/1407/51/79c65443927a.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i704/1407/ea/3a66a3f3fe33.png ); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i722/1407/d9/a95ccfea4219.jpg https://s019.radikal.ru/i605/1407/51/79c65443927a.png<br /> </span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i704/1407/ea/3a66a3f3fe33.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s006.radikal.ru/i215/1407/23/f272722a6a09.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s43.radikal.ru/i101/1407/a5/2e50d56683ae.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i704/1407/7f/b03c91a8a006.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s006.radikal.ru/i215/1407/23/f272722a6a09.png https://s43.radikal.ru/i101/1407/a5/2e50d56683ae.png<br /> </span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i704/1407/7f/b03c91a8a006.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://i074.radikal.ru/1407/c4/c6d9f4f84301.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i051.radikal.ru/1407/15/dcbc13b242e0.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s020.radikal.ru/i713/1407/3f/45ca7b9c0d2a.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://i074.radikal.ru/1407/c4/c6d9f4f84301.png https://i051.radikal.ru/1407/15/dcbc13b242e0.png </span></center><center><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i713/1407/3f/45ca7b9c0d2a.png</span></center><center><br /><table><tbody><tr><td><div style="background-image: url(https://s50.radikal.ru/i130/1407/1c/6bee92fedef2.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s43.radikal.ru/i101/1407/47/173fc3f62e81.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s019.radikal.ru/i627/1407/37/b9f5da6e81ca.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table><span style="color: #666666; font-size: x-small;"><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s50.radikal.ru/i130/1407/1c/6bee92fedef2.png https://s43.radikal.ru/i101/1407/47/173fc3f62e81.png<br /><br /></span></center><center><span style="color: #666666; font-size: x-small;">https://s019.radikal.ru/i627/1407/37/b9f5da6e81ca.png</span><br /><br /><table><tbody><tr><td><div style="background-image: url(https://s020.radikal.ru/i705/1407/0c/95b743eacb84.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://i057.radikal.ru/1407/5d/bb1961ed7113.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td><td> </td><td><div style="background-image: url(https://s61.radikal.ru/i171/1407/2e/5d1501744e10.png); border: 2px solid #708090; height: 100px; padding: 10px; width: 120px;"></div></td></tr></tbody></table></center><div style="text-align: center;"><span style="color: #666666; font-size: x-small;"><br /></span><span style="color: #666666; font-size: x-small;">https://s020.radikal.ru/i705/1407/0c/95b743eacb84.png https://i057.radikal.ru/1407/5d/bb1961ed7113.png </span><br /><span style="color: #666666; font-size: x-small;"><br /></span><span style="color: #666666; font-size: x-small;">https://s61.radikal.ru/i171/1407/2e/5d1501744e10.png</span></div><br /><div style="text-align: justify;"><br />Если Вам понравились фоны, поделитесь со своими друзьями и знакомыми в социальных сетях.</div><div style="text-align: justify;"><br /><span style="color: #134f5c;"><b>Посмотрите по теме: </b></span> <a href="https://www.bdblogov.ru/2014/04/backgrounds-in-under-design-for-stranitsbloga.html" target="_blank">Фоны в рамках для оформления страниц блога</a>; <a href="https://www.bdblogov.ru/2014/03/ready-to-background-design-blogpages.html" target="_blank">Готовые фоны для оформления страниц блога</a>;</div></div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com0tag:blogger.com,1999:blog-8142585837575624831.post-42697665342524823642021-09-03T23:11:00.001+03:002021-09-03T23:16:38.922+03:00Меняем форму комментариев на Blogspot<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: left;"><div style="text-align: justify;"><i><u><span style="color: #0b5394;">Обновлено: 03.09.2021 г.</span></u></i> Здравствуйте друзья и читатели блога. Не знаю кому как, но мне давно не давала покоя стандартная форма комментариев на Blogspot. Так хотелось хоть немного её видоизменить. Не так давно набрела на сайт и нашла код, который для нас "чайничков" вставить не составит особого труда.</div></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Копируем код ниже и плавно переходим <u>тема<span style="color: #666666;">-открываем меню-изменить HTML</span></u> В шаблоне найти секцию <b:skin></b:skin> Вставьте скопированный код выше закрывающего тега ]]</b:skin>. Скриншот ниже:</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"> <br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-xyi_Hxu-9RI/YTJ8Rh6cKGI/AAAAAAAAUpo/CvLwWKsZf6stDV9y52RMciQukG0gPcr0QCLcBGAsYHQ/s1144/%25D1%2581%25D0%25BA%25D0%25B8%25D0%25BD.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Изменить форму комментариев" border="0" data-original-height="568" data-original-width="1144" height="159" src="https://1.bp.blogspot.com/-xyi_Hxu-9RI/YTJ8Rh6cKGI/AAAAAAAAUpo/CvLwWKsZf6stDV9y52RMciQukG0gPcr0QCLcBGAsYHQ/w320-h159/%25D1%2581%25D0%25BA%25D0%25B8%25D0%25BD.jpg" title="Меняем форму комментариев в блоггер" width="320" /></a></div><br /><div></div><br /><br /></div><div dir="ltr" style="text-align: left;" trbidi="on"><br /><div style="font-size: 14px; height: 300px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><div style="text-align: justify;"><div style="text-align: center;"><u>Код можно вставить дизайн-добавить гаджет</u>. </div><div style="text-align: center;"><br /></div><div style="text-align: center;"><b><span style="color: #0b5394;"><style>код CSS</style></span></b></div><div style="text-align: left;"><i><u><span style="color: #0b5394;"><br /></span></u></i></div><div style="text-align: left;"><i><u><span style="color: #0b5394;">Настройки:</span></u></i></div><div style="text-align: left;"><br /></div><div style="text-align: left;">#comments{overflow:hidden}</div></div><div style="text-align: justify;"><div style="text-align: left;">#comments h4{display:inline;padding:10px;line-height:40px}</div></div><div style="text-align: justify;"><div style="text-align: left;">#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}</div></div><div style="text-align: justify;"><div style="text-align: left;">#comments h4,.comments .continue a{background<span style="background-color: #f4cccc;">:#50C806</span>}</div></div><div style="text-align: justify;"><div style="text-align: left;">#comments h4,.comments .user a,.comments .continue a{font-size:16px}</div></div><div style="text-align: left;"><div style="text-align: left;">#comments h4,.comments .continue a{font-weight:normal;color:#fff}</div></div><div style="text-align: left;"><div style="text-align: left;">#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid <span style="background-color: #f4cccc;">#50C806</span>;border-right:20px solid transparent;width:0;height:0;line-height:0}</div></div><div style="text-align: left;"><div style="text-align: left;">#comments .avatar-image-container img{border:2}</div></div><div style="text-align: left;"><div style="text-align: left;">.comment-thread{color:#111}</div></div><div style="text-align: left;"><div style="text-align: left;">.comment-thread a{color:#777}</div></div><div style="text-align: left;"><div style="text-align: left;">.comment-thread ol{margin:0 0 20px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:<span style="background-color: #f4cccc;">#50C806</span>}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url([URL=https://radikal.ru/fp/f9e9332a95154de285e58e8bba4dd609][IMG]http://s019.radikal.ru/i631/1308/c5/a91f379742c9.jpg[/IMG][/URL]);width:36px;height:36px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comments-content .inline-thread{padding:0 0 0 20px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comments-content .comment-replies{margin-top:0}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-content{padding:5px 0;line-height:1.4em}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-thread.inline-thread .comment{width:auto}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-thread.inline-thread .comment-block{margin-left:48px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-thread.inline-thread .user a{font-size:13px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .continue{border-top:0;width:100%}</div></div><div style="text-align: left;"><div style="text-align: left;">.comments .continue a{padding:10px 0;text-align:center}</div></div><div style="text-align: left;"><div style="text-align: left;">.comment .continue{display:none}</div></div><div style="text-align: left;"><div style="text-align: left;">#comment-editor{width:103%!important}</div></div><div style="text-align: justify;"><div style="text-align: left;">.comment-form{width:100%;max-width:100%}</div><div style="text-align: left;"><br /></div></div></div><br /><br /><br /><div style="text-align: justify;">Выделенное<span style="background-color: #ea9999;"> розовым</span> фоном-это цвет #050C806, сейчас он зеленый, можете поменять на свой вкус. Так же можно изменить ширину(width) и высоту(height), по желанию. Только смотрите внимательно, чтобы и ширина и высота были пропорциональны.</div><br /><div style="text-align: justify;">Прежде чем изменить, изучите внимательно цифры. Больше ничего менять не рекомендую, так как сама меняла, и лучше чем есть не стало, хотя если есть желание можете экспериментировать. Всё, меняем и наслаждаемся проделанной работой. Всем всего доброго.</div></div></div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com14tag:blogger.com,1999:blog-8142585837575624831.post-40164563524493781812021-08-13T21:12:00.001+03:002021-08-13T21:12:57.667+03:00Google Контакты Сохранить адреса друзей и бизнес партнеров<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><i><u><span style="color: #0b5394;">Обновление: 13.08.2021 г</span></u></i> Всем здравствуйте. Вероятно многие уже пользуются сервисом Google "Контакты", поэтому статья для читателей, которые еще не ознакомились со всеми возможностями, предлагаемые Google. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Открываем страницу поиска, справа нажимаем на квадратик, открываем сервисы, внизу жмем "еще", находим "контакты", открываем сервис:</div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Открываем страницу сервиса Контакты" border="0" height="310" src="https://4.bp.blogspot.com/-qi9JijpCJgk/WSKHfWvJzNI/AAAAAAAAPbg/WEOZRV4FYg8WYgadBz5S6QeJkAZWgbsEQCLcB/s400/%25D0%25BA%25D0%25BE%25D0%25BD%25D1%2582%25D0%25B0%25D0%25BA%25D1%2582%25D1%258B.jpg" title="Переходим на сервис Контакты" width="400" /></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">Добавить электронный адрес друга или бизнес партнера</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Нажать красный круг для добавления контакта" border="0" height="252" src="https://3.bp.blogspot.com/-N1ss6vbGlKM/WSKIgQFSoJI/AAAAAAAAPbs/rA7pqoZlHiowIWEX6z_9BOjorJjNZvH8gCLcB/s400/%25D0%25BA%25D0%25BE%25D0%25BD%25D1%2582%25D0%25B0%25D0%25BA%25D1%2582%25D1%258B1.jpg" title="Нажимаем справа внизу красный круг с плюсиком" width="400" /></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div style="text-align: justify;">Справа кликнем красный круг с плюсиком, во всплывающем окне вписываем "имя", вставляем скопированный электронный адрес, сохраняем.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;">Как отправить письмо другу со страницы сервиса</div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Как написать письмо другу" border="0" height="111" src="https://2.bp.blogspot.com/-cPtB8263fmI/WSKJyVoTMAI/AAAAAAAAPb4/aUFn0q_eCKkjUbATi0ccXptHGok7mdzQgCLcB/s400/%25D0%25BA%25D0%25BE%25D0%25BD%25D1%2582%25D0%25B0%25D0%25BA%25D1%2582%25D1%258B%2B2.jpg" title="Подвести курсор мыши и нажать электронный адрес" width="400" /></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Наводим курсор мыши к выбранному контакту, увидите всплывающее сообщение "отправить сообщение электронной почты". Нужно нажать на электронный адрес контакта:</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Пишем текст сообщения и нажимаем отправить" border="0" height="303" src="https://4.bp.blogspot.com/-J9EiI94G7wQ/WSKKwGVqNwI/AAAAAAAAPcE/UgfzohjB31Qi-hYYc-Qwkz1Rfq0IZCoLACLcB/s400/%25D0%25BA%25D0%25BE%25D0%25BD%25D1%2582%25D0%25B0%25D0%25BA%25D1%2582%25D1%258B%2B3.jpg" title="Во всплывающем окне пишем текст письма" width="400" /></div></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Во всплывающем окне пишите сообщение другу, далее кнопка "отправить". Все сообщения автоматически добавляются в почту gmail.com, папка "отправленные".</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Слева в меню в сервисе "контакты", доступны другие функции: создать группу, импортировать и экспортировать контакты, настройки, с кем часто общаетесь.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Чтобы удалить контакт, наведите курсор мыши, справа нажмите на три точки, в окне удалить. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">По моему нужный и удобный сервис, не надо искать адреса друзей. Кстати гуглик и сам автоматически добавляет сюда контакты.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">На сегодня всё, пишите в комментариях отзывы о сервисах Google. Всем всего доброго.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><u>Читать также:</u></div><div class="separator" style="clear: both; text-align: justify;"><u><br /></u></div><div class="separator" style="clear: both; text-align: justify;"></div><ul><li><a href="https://www.bdblogov.ru/2017/03/nastroit-zakladki-v-paneli-instrumentov-brauzera.html" target="_blank">Настроить панель закладок в браузере</a>;</li><li><a href="https://www.bdblogov.ru/2017/04/ehkrannaya-klaviatura-brauzera-i-kompyutera.html" target="_blank">Экранная клавиатура браузера и компьютера</a>;</li><li><a href="https://www.bdblogov.ru/2013/10/insert-as-a-fraction-degrec-to-text.html" target="_blank">Как вставить символ в текст сообщения</a>;</li><li><a href="https://www.bdblogov.ru/2017/03/cvetnoe-skanirovanie-dokumentov-v-windows7-i-s-mfu-ustrojstva.html" target="_blank">Цветное сканирование документов в Windows7 и с МФУ устройства</a>;</li><li><a href="https://www.bdblogov.ru/2017/10/izmenit-razmer-yarlykov-na-stranice-bystrogo-dostupa-v-google-chrome.html" target="_blank">Изменить размер ярлыков на странице быстрого доступа в Google Chrome</a></li></ul></div><a href="https://text.ru/antiplagiat/5922960487c79" target="_blank"><img alt="TEXT.RU - 100.00%" border="0" height="15" src="https://text.ru/image/get/5922960487c79/101" title="Уникальность данного текста проверена через TEXT.RU" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com0tag:blogger.com,1999:blog-8142585837575624831.post-67925921487357955132021-07-21T18:59:00.002+03:002021-07-21T19:06:55.290+03:00Оригинальное горизонтальное меню для блога<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;"><i><span style="color: #073763;">Предлагаю красивое горизонтальное меню для Ваших блогов</span></i></h2><div style="text-align: justify;"><br /><i><u><span style="color: #3d85c6;">Обновление 21.07.2021 г.</span></u></i> Всем здравствуйте! Разрешите предложить Вам еще вариант горизонтального меню для Вашего блога. Мне меню очень нравится и установка легкая, без изменения в шаблоне блога. Вставляем в дизайне-добавить гаджет. Посмотрите на скриншоте, как выглядит меню:<br /><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-p4fFixtyfeA/UyshKZw1bnI/AAAAAAAAECE/W93mxeWk3nA/s1600/%D1%81%D0%B8%D0%BD%D0%B5%D0%B5+2.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt="Установка и настройка горизонтального меню для блога" border="0" height="34" src="https://2.bp.blogspot.com/-p4fFixtyfeA/UyshKZw1bnI/AAAAAAAAECE/W93mxeWk3nA/s1600/%D1%81%D0%B8%D0%BD%D0%B5%D0%B5+2.JPG" title="Оригинальное горизонтальное меню для блога" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">Копируем код</div><div style="text-align: center;"><br /><div style="background-color: ghostwhite; padding: 5px8px5px8px;"><br /><span style="color: #0c343d;"><style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://1.bp.blogspot.com/-e8VrFODNr7s/T2TK3jW0ZYI/AAAAAAAAALA/wH-oW-79nzA/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;<span style="color: #cc0000;"><span style="color: blue;">font:14px</span> </span>arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="" style="position: absolute;z-index:-11;"><img src="https://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a></span><br /><span style="color: #0c343d;"><br /></span><span style="color: #0c343d;"><div class="noop-menu-blue"></span><br /><span style="color: #0c343d;"> <ul class="menu"></span><br /><span style="color: #0c343d;"> <li><a href="<span style="color: #660000;">https</span><span style="color: #660000;">://xxx</span>/"><span style="color: #660000;">Главная</span></a></li></span><br /><span style="color: #0c343d;"> <li><a href="https://<span style="color: #660000;">ххх</span>"><span style="color: #660000;">Об авторе</span></a></li></span><br /><span style="color: #0c343d;"> <li><a href="https://<span style="color: #660000;">xx</span>x"><span style="color: #660000;">Содержание</span></a></li></span><br /><span style="color: #0c343d;"> <li><a href="https://<span style="color: #660000;">xxx</span>"><span style="color: #660000;">Контакты</span></a></li></span><br /><span style="color: #0c343d;"> <li><a href="https://<span style="color: #660000;">xxx</span>"><span style="color: #660000;">RSS</span></a></li></span><br /><span style="color: #0c343d;"> </span><br /><span style="color: #0c343d;"> <li><a href="<span style="color: #660000;">ххх</span>"<span style="color: #660000;">>Blogger</span></a></li></span><br /><span style="color: #0c343d;"> </ul></div></span><br /><br /></div></div><br /><br /><br /><span style="color: blue;">Front:14px</span> размер шрифта; впишите адреса и заголовки ссылок.<br /><br />Чтобы добавить ссылку, впишите такую строку: <span style="color: #0c343d;"> <b> <li><a href="https://<span style="color: #660000;">xxx</span>"><span style="color: #660000;">Виджеты</span></a></li>. </b><span style="color: black;"> </span></span><br /><br /><span style="color: #0c343d;"><span style="color: black;">На этом у меня все. Комментируйте, делитесь с друзьями. Всего Доброго.</span><b><br /></b></span></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com7tag:blogger.com,1999:blog-8142585837575624831.post-87803727910382534862021-07-06T13:28:00.000+03:002021-07-06T13:28:37.567+03:00Параметры CSS каскадной таблицы стилей<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><span style="color: #073763; font-family: "arial" , "helvetica" , sans-serif;"><b><i>Базовые параметры CSS каскадной таблицы стилей</i></b></span><br /><br />Приветствую гостей и читателей этого блога. В этом посте я публикую базовые CSS стили для изменения внешнего вида блога: размер, цвет и тип шрифта, рамки, фоны и цвет разных блоков, графических изображений и др. Зная базовые свойства CSS стилей и задав набор нужных параметров (стилей CSS) для каждого элемента блога, Вы без труда оформите внешний вид своего ресурса по своему усмотрению.<br /><br />Вы можете прописать CSS стили для отдельной страницы в редакторе сообщений blogger. Для этого необходимо использовать HTML тэг <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b><style>...</style></b></span>, а дальше в фигурных скобках <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>{}</b></span> задаете описание свойств стилей CSS<br /><br /><div class="bloknot7"><div style="text-align: center;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>Простой пример: .название стиля {свойство: значение;} Перед названием ставится точка или решетка #</b></span></div><div style="text-align: center;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>#content {</b></span><br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>widht:100%;</b></span><br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>margin:0;</b></span></div><div style="text-align: center;"><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif; text-align: left;">background: #f8f8ff;</b></div><div style="text-align: center;"><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif; text-align: left;">font-size: 14px;</b></div><div style="text-align: center;"><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif; text-align: left;">color:#333;</b></div><div style="text-align: center;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>}</b></span></div></div><div style="text-align: center;"><div style="text-align: justify;">Заданы стили области контента блога: ширина 100%; фон белый, размер шрифта 14px; цвет шрифта темно-коричневый;</div></div><br /></div><div style="text-align: justify;">В шаблоне блога все заданные стили CSS находятся в разделе <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b><b:skin>...</b:srin>.</b></span> Об этом подробно читайте информацию в статье<a href="https://www.bdblogov.ru/2014/04/how-quickly-and-beautifully-make-text-blog.html" target="_blank"> Как быстро и красиво оформить текст в блоге</a>. </div><div style="text-align: justify;"><b><span style="color: #134f5c; font-family: "arial" , "helvetica" , sans-serif;"><br /></span></b><b><span style="color: #134f5c; font-family: "arial" , "helvetica" , sans-serif;">CSS шрифты</span></b><br /><br /></div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>font-size:14px; </b></span> этот текст написан шрифтом высотой 14 пикселей;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>font-size:100%; </b></span> установить размер шрифта в процентах;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>font-style: normal; </b></span> нормальный шрифт;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>font-style: italic;</b></span> курсив;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>font-style: oblique;</b></span> наклонный шрифт;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>font-family: Verdana,Sans-Serif; </b></span> этот текст написан шрифтом Sans-Serif;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>font-family: "Times New Poman", Serif; </b></span>этот текст написан шрифтом Serif; Если задан параметр Serif браузером будет использован любой доступный шрифт этой группы;</div><hr /><b><span style="color: #134f5c; font-family: "arial" , "helvetica" , sans-serif;">CSS Текст</span></b><br /><div><br /></div><div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>font-weight:bold;</b></span> текст выделен полужирным шрифтом;</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>text-decoration: underline; </b></span> текст выделен подчеркиванием;</div><div style="text-align: justify;">Можно использовать другие параметры оформления текста: <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>overline</b></span> (черта сверху) и <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>line-through</b></span> (зачеркивание);</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>text-align:right; </b></span> текст выровнен по правому краю; <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>center</b></span> (по центру);<span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b> left</b></span> (по левому краю); <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>justify </b></span>(выравнивание текста по ширине);</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>margin:10px; </b></span> для текста со всех сторон установлены поля размером 10px;</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>padding:10px;</b></span> для текста со всех сторон установлены отступы размером 10px;</div><div style="text-align: justify;">Можно настроить для каждой стороны отдельно:<span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b> margin-left:</b></span> (поле слева); <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b> padding-top: </b></span>(отступ сверху); или для всех сторон <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>margin: 2px 1px 2px 3px;</b></span> (читается так: сверху, справа, снизу, слева); если устанавливаете 0, то px писать не нужно;</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>text-indent:60px; </b></span> отступ в первой строке текста (типа абзаца);<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>capitalize</b></span> (в каждом слове первая буква заглавная);<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>uppercase</b></span> (весь текст заглавными буквами);</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>letter-spacing:3px;</b></span> расстояние между буквами в тексте;</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>letter-spacing:-3px; </b></span>сжать расстояние между буквами;</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>line-height: 70% </b></span>расстояние между строками в тексте (чем больше %, тем больше расстояние);</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>word-spacing:30px; </b></span> увеличить пробел мужду словами;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>.text-shadow {text-shadow:2px 2px 4px #666;} </b></span> добавление тени к тексту;</div><hr /></div><span style="color: #134f5c; font-family: "arial" , "helvetica" , sans-serif;"><b>CSS цвета</b></span><br /><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif;"><br /></b><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif;">color: цвет;</b><br /><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif;">background: фон;</b><br /><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif;">background-transparent:</b><span style="font-family: inherit;"> задает прозрачный фон;</span><br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>color: green; </b></span> текст написан зеленым цветом;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>background: yellow; </b></span> текст на желтом фоне;<br /><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif;">background-image: </b><span style="font-family: inherit;">позволяет использовать изображение для фона;</span><br /><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif;">background-size:</b><span style="font-family: inherit;"> указывает размер изображения; </span><br /><div style="text-align: justify;">Можно написать по анлийски названия цветов, или для более точного оттенка использовать шестнадцатизначные коды цветов (#0e5198;);<br /><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif; text-align: left;">background-repeat: </b><span style="text-align: left;"><span style="font-family: inherit;"> задает тиражирование изображения; </span><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>repeat </b></span><span style="font-family: inherit;">в обоих направлениях; </span><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>no-repeat </b></span><span style="font-family: inherit;">(вводится один раз);</span><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b> repeat-x</b></span><span style="font-family: inherit;"> (по горизонтали); </span><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>repeat-y </b></span><span style="font-family: inherit;">(по вертикали);</span></span><br /><b style="color: #351c75; font-family: Arial, Helvetica, sans-serif; text-align: left;">background-position: </b><span style="text-align: left;"><span style="font-family: inherit;">задает начальное положение фонового изображения - </span></span><br /><span style="text-align: left;"><span style="font-family: inherit;"><span style="color: #351c75;">top-left</span> (верхний левый угол);<span style="color: #351c75;"> top-center</span> (верхний центральный); <span style="color: #351c75;">top-right </span>(верхний правый); <span style="color: #351c75;">center-left</span> (центральный левый); <span style="color: #351c75;">center-center </span>(центр экрана);<span style="color: #351c75;"> center-right</span> (центральный правый); <span style="color: #351c75;">bottom-left</span> (нижний левый); <span style="color: #351c75;">bottom-center</span> (нижний центральный);<span style="color: #351c75;"> bottom-right</span> (нижний правый угол экрана;<span style="color: #351c75;"> %(x y)</span> задает положение в процентах (верхний левый %%); <span style="color: #351c75;">pixels (x y) </span>задает положение в пикселях (верхний левый 0 0);</span></span></div></div><hr /><div style="text-align: justify;"><span style="color: #134f5c; font-family: "arial" , "helvetica" , sans-serif;"><b>CSS позиционирование </b></span>(мощный инструмент форматирования информации на страницах).</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>Position</b></span>-позволяет определить позиционирование элемента - <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>static</b></span> (позиционирование не применяется); <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>relacive</b></span> (позиционирование производится относительно нормального положения элемента на странице);<span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b> absolute </b></span>(позиционирование производится в абсолютных величинах); <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>fixed </b></span>(задает жесткую позицию элемента. При прокрутке страницы элемент прокручивается, сохраняя позицию относительно окна браузера);<br /><br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>Bottom</b></span>-задает положение нижнего края элемента; <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>auto</b></span> (браузер автоматически выставляет нижнюю позицию элемента)<b>; <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;">%</span></b> (задана позиция в процентах от нижнего края окна); <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>length </b></span>(задана позиция в пикселях, допускаются отрицательные значения);<br /><br />Точно также для <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>Left</b></span> (положение левого края элемента);<span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b> Right </b></span>(положение правого края элемента);<span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b> Top</b></span> (положение верхнего края элемента);<br /><br /><span style="font-family: "arial" , "helvetica" , sans-serif;"><b><i><span style="color: #134f5c;">Не размещайте элементы за пределами видимости страницы. Насколько мне известно, этот метод относится к </span><span style="color: #3d85c6;">черным методам оптимизации</span><span style="color: #134f5c;"> и может вызвать жесткие санкции поисковых систем.</span></i></b></span></div><div><hr /><b style="color: #134f5c; font-family: Arial, Helvetica, sans-serif;">CSS границ рамки</b></div><br /><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>border: solid 2px red; </b></span>текст в красной рамке; Стиль границ рамки можно задать разный: пунктирный (<span style="color: #351c75;">dashed</span>), точечный (<span style="color: #351c75;">dotted</span>), сплошная (<span style="color: #351c75;">solid</span>), двойная (<span style="color: #351c75;">double</span>), выпуклая (<span style="color: #351c75;">outset</span>), вдавленная (<span style="color: #351c75;">inset</span>), кромкой (<span style="color: #351c75;">ridge</span>); Чтобы отображалась только одна сторона рамки используйте коды:<span style="color: #351c75;"> border-top:</span> (верхняя); <span style="color: #351c75;">border-left:</span> (слева); <span style="color: #351c75;">border-right: </span>(справа); <span style="color: #351c75;">border-bottom:</span> (снизу); <span style="color: #351c75;">border-radius:</span> (закругление углов границы рамки); Можно задать разные форму, толщину и цвет каждой границы рамки:<span style="color: #351c75;"> border-top-widht: 5px dotted #f00;</span> (точечная форма верхней границы рамки красного цвета и толщина 5px);<br /><hr /><b style="color: #134f5c; font-family: Arial, Helvetica, sans-serif; text-align: left;">CSS размер</b></div><br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>height:50px; </b></span> задана высота 50px;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>widht:100px; </b></span> задана ширина 100px;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>height:auto; </b></span>высота определяется автоматически;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>max-height:50px; </b></span>задана максимальная высота;<br /><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>min-height:100px;</b></span> задана минимальная высота;<br />Точно также можно задать минимальную и максимальную ширину (widht);<br /><hr /><span style="color: #134f5c; font-family: "arial" , "helvetica" , sans-serif;"><b>CSS списки</b></span><br /><br /><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>List-style-image:</b></span> установить изображение в качестве маркера для списков CSS; <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>none</b></span> - используется маркер по умолчанию;<span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b> url</b></span> - использовать вместо маркера изображение;</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>List-style-position: </b></span> определяет место размещения маркеров в списке; <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>inside</b></span> (маркер располагается внутри текста); <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>outside</b></span> (маркер располагается слева от текста);</div><div style="text-align: justify;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>List-style-type: </b></span>задает разнообразные маркеры для текста; <b style="text-align: center;"><span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;">list-style-type: none;</span><span style="color: magenta;"> </span></b>(не используется или убрать существующие); <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>disc </b></span>(закрашенный круг); <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>squate</b></span> (закрашенный квадрат); <span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b>upper-roman </b></span>(римские цифры);<span style="color: #351c75; font-family: "arial" , "helvetica" , sans-serif;"><b> lower-roman</b></span> (маленькие римские цифры);</div><div style="text-align: justify;"><hr />На сегодня у меня пока все. Есть еще много других параметров для CSS стилей. Но это чуть позже. Пока не готова публиковать, так как до конца сама не разобралась.<br /><br />А Вы можете посетить этот <a href="https://www.w3schools.com/css/css_examples.asp" rel="nofollow" target="_blank">сайт</a>, или справочник CSS по ссылке: <b><span style="color: #0c343d;">htmlbook.ru/css</span></b><br />Найдете очень много полезной информации о свойствах CSS стилей. Собственно я на примерах с этих сайтов и учусь.<br /><br />И сегодня я говорю Вам до свидания. Пишите отзывы, может у кого то есть что добавить в статью. Буду благодарна, если поделитесь со своими друзьями в социальных сетях. Пока, пока...<br /><br /><span style="color: black; font-family: inherit;"><u>Можно еще почитать:</u></span> <a href="https://www.bdblogov.ru/2014/02/as-select-part-text-in-frame.html" target="_blank">Как выделить часть текста в рамку</a>; <a href="https://www.bdblogov.ru/2020/07/vremenno-isklyuchit-iz-poiska-ili-navsegda-udalit-ustarevshij-kontent-v-google-search-console.html" target="_blank">Временно исключить из поиска или навсегда удалить устаревший контент в Google Search Console</a>;</div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com0tag:blogger.com,1999:blog-8142585837575624831.post-63256631749318225742021-06-23T17:45:00.000+03:002021-06-23T17:45:37.192+03:00Виджет количества фиктивных посетителей на сайте <div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">Всем привет. Сегодня у меня небольшой пост о гаджете с фиктивным количеством просмотров видео, скачивании файлов и посещении страниц блога/сайта.<br /><br />Если на страницах Вашего сайта размещены видео или файлы для скачивания, можно установить для убедительности такой виджет, с воображаемым количеством онлайн посетителей, просмотров и скачиваний. Пример на скриншоте</div><div style="text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Код скрипта для вставки гаджета на страницы блога. Настройки." border="0" data-original-height="119" data-original-width="272" height="140" src="https://1.bp.blogspot.com/-7NOo2FVhn2k/XaYEbgwoyxI/AAAAAAAAStk/uvW124GvR1EasoBd34PQHBwFEulTiimngCLcBGAsYHQ/s320/123.jpg" title="Ложные просмотры и скачивания" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Копируем код</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><script type="text/javascript"></span></div><div style="text-align: center;"><span style="color: #0c343d;">document.write("На сайте онлайн: " + (</span><b><span style="color: #0b5394;">30</span></b><span style="color: #0c343d;"> + Math.floor(Math.random()*50)) + "<br />");</span></div><div style="text-align: center;"><span style="color: #0c343d;">document.write("Смотрят видео: " + (</span><b><span style="color: #0b5394;">10</span></b><span style="color: #0c343d;"> + Math.floor(Math.random()*20)) + "<br />");</span></div><div style="text-align: center;"><span style="color: #0c343d;">document.write("Скачивают файлы: " + (</span><b><span style="color: #0b5394;">10</span></b><span style="color: #0c343d;"> + Math.floor(Math.random()*20)));</span></div><div style="text-align: center;"><span style="color: #0c343d;"></script></span></div><div style="text-align: center;"><span style="color: #0c343d;"><br /></span></div><div style="text-align: justify;">Вы можете изменить значение цифр, и количество онлайн посетителей, просмотров и скачиваний увеличится. Скопированный код вставить дизайн добавить гаджет, выбрать HTML/JavaScript, вставить-сохранить в нужном месте макета блога.<br /><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Можно разбить код виджета на просмотры и скачивания</u></i>.</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><script type="text/javascript"></span></div><div style="text-align: center;"><span style="color: #0c343d;">document.write("</span><b><span style="color: #3d85c6;">На сайте онлайн</span></b><span style="color: #0c343d;">: " + (</span><b style="color: #0c343d;"><span style="color: #0b5394;">30</span></b><span style="color: #0c343d;"> + Math.floor(Math.random()*50))</span><span style="color: #0c343d;">);</script></span></div><div style="text-align: justify;"><span style="color: #0c343d;"><br /></span></div><div style="text-align: justify;"><div style="text-align: center;">Выделенный текст измените на <u>скачивают файлы</u> или <u>смотрят видео</u>.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><i><u><span style="color: #0c343d;"> И в заключение реальный виджет "жизни" Вашего сайта/блога с даты создания</span></u></i></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Код скрипта, настройки, как вставить на страницы блога" border="0" data-original-height="88" data-original-width="272" height="103" src="https://1.bp.blogspot.com/-0EHOSYzze7w/XaYGwf1dNkI/AAAAAAAAStw/veao94uI6bIUE3xOi8Ols-_PmjN8ZPVWQCLcBGAsYHQ/s320/32.jpg" title="Виджет жизни блога с даты создания" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><i><u>Копируем код</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><script language=javascript></span></div><div style="text-align: center;"><span style="color: #0c343d;"><!--</span></div><div style="text-align: center;"><span style="color: #0c343d;">d0 = new Date('</span><b><span style="color: #3d85c6;">March 21, 2017</span></b><span style="color: #0c343d;">');</span></div><div style="text-align: center;"><span style="color: #0c343d;">d1 = new Date();</span></div><div style="text-align: center;"><span style="color: #0c343d;">dt = (d1.getTime() - d0.getTime()) / (1000*60*60*24);</span></div><div style="text-align: center;"><span style="color: #0c343d;">document.write('</span><b><span style="color: #3d85c6;">Блог живет</span></b><span style="color: #0c343d;"> <B>' + Math.round(dt) + '</B>-</span><b><span style="color: #3d85c6;">й день</span></b><span style="color: #0c343d;">.');</span></div><div style="text-align: center;"><span style="color: #0c343d;">--></span></div><div style="text-align: center;"><span style="color: #0c343d;"></script></span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Измените дату создания блога на свою, месяц напишите на английском языке. Также можно вписать другой текст. На сегодня закончу. Все вопросы в комментариях или контактная форма. Всем всего доброго.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><i><u>Рекомендую другие гаджеты по теме:</u></i><br /><br /></div><div style="text-align: justify;"></div><ul><li><a href="https://www.bdblogov.ru/2017/11/gadzhet-tekushchej-daty-i-vremeni-dlya-blogger.html" target="_blank">Гаджет текущей даты и времени для блоггер</a>; </li><li><a href="https://www.bdblogov.ru/2014/02/widget-say-Hello-with-visitors-blog-site.html" target="_blank">Виджет Поздороваться с посетителями блога/сайта</a>;</li><li><a href="https://www.bdblogov.ru/2017/12/vidzhet-vremeni-s-datoj-i-dnem-nedeli-dlya-blogger.html" target="_blank">Виджет времени с датой и днем недели для блоггер</a>;</li><li><a href="https://www.bdblogov.ru/2014/02/gadget-informer-visits-blog-readers.html" target="_blank">Гаджет информер посещений блога читателями</a>;</li><li><a href="https://www.bdblogov.ru/2013/10/informerbloga.html" target="_blank">Информер для блога</a>;</li></ul></div></div><a href="https://text.ru/antiplagiat/5da610a8e8667" target="_blank"><img alt="Text.ru - 100.00%" border="0" height="15" src="https://text.ru/image/get/5da610a8e8667/101" title="Уникальность данного текста проверена через Text.ru" width="80" /></a></div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com5tag:blogger.com,1999:blog-8142585837575624831.post-54646756232302088332021-06-06T17:12:00.000+03:002021-06-06T17:12:47.357+03:00Как удалить активные ссылки в комментариях блоггер<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><div style="text-align: right;"><i><span style="color: #0b5394;">Обновление: 06.06.2021 г</span></i>.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Всем, кто читает статью, здравствуйте. В далеком 2013 году я опубликовала пост, как вставить <a href="https://www.bdblogov.ru/2013/10/blog-post_8.html" target="_blank">активную ссылку в комментариях</a> блоггер.<br /><br />Сегодня статья с точностью наоборот, как удалить активные ссылки в комментариях, а для вебмастеров, кто не заморачивается этой проблемой, открыть в новом окне, чтобы посетитель быстро вернулся на страницу вашего блога.<br /><br />Публиковать или нет комментарии с активными ссылками вебмастер решает сам. Все доводы за и против таких ссылок можно почитать в сети интернет. Я также соглашусь, что если ссылка ведет на раскрученный популярный ресурс, это очень хорошо. Но если ресурса уже давно нет (ошибка 404), или того хуже заражен вирусом, это уже очень плохо.<br /><br />При проверке своего блога на битые ссылки, было обнаружено много ошибок 404 (несуществующих адресов) именно в комментариях. Поэтому давайте перейдем от слов к делу.<br /><br /><div style="text-align: center;"><u>Открыть ссылку в комментариях в новом окне</u></div><div style="text-align: center;"><br /></div><div style="text-align: center;">Скопируйте код скрипта</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><script> </span></div><div style="text-align: center;"><span style="color: #0c343d;">$(function(){</span></div><div style="text-align: center;"><span style="color: #0c343d;"> $('.comment-content a[rel$=nofollow]').attr("target","_blank");</span></div><div style="text-align: center;"><span style="color: #0c343d;">});</span></div><div style="text-align: center;"><span style="color: #0c343d;"></script></span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><u>Удалить активную ссылку, копируем код скрипта</u></div></div><br /><span style="color: #0c343d;"><script> </span><br /><div style="text-align: center;"><span style="color: #0c343d;">$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());}); </span><br /><div style="text-align: center;"><span style="color: #0c343d;"></script></span><br /><br /><div style="text-align: justify;">Коды скриптов вставьте в шаблоне выше закрывающего тега <span style="color: #0c343d;"></body></span>. В нестандартных шаблонах в самом низу. В родных шаблонах ищите закрывающий тэг снизу HTML кода вверх, прокрутите чуть выше. </div></div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-qCBUhdG2N24/WbF6pyQbTSI/AAAAAAAAQGU/AnVtU0L_J2gdC0fXyzRcW6pYWkYZPLtAACLcBGAs/s1600/%25D1%2582%25D0%25B5%25D0%25BA%25D1%2581%25D1%2582.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Скрипт для блокировки активных ссылок в комментариях" border="0" data-original-height="140" data-original-width="865" height="63" src="https://4.bp.blogspot.com/-qCBUhdG2N24/WbF6pyQbTSI/AAAAAAAAQGU/AnVtU0L_J2gdC0fXyzRcW6pYWkYZPLtAACLcBGAs/s400/%25D1%2582%25D0%25B5%25D0%25BA%25D1%2581%25D1%2582.jpg" title="Удалить активные ссылки в комментариях блоггер" width="400" /></a></div></div><u><br /></u><u>Также проверьте в шаблоне в секции <head></head> скрипт библиотеки jquery</u><br /><br /><span style="color: #0c343d;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/></script></span><br /><br /><div style="text-align: justify;">Обычно в родных шаблонах скрипт вставлен автоматически, может только другой версии. Тогда код скрипта библиотеки <span style="color: #0c343d; text-align: center;">jquery </span>выше не копируйте.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><u>Активную ссылку мы вставляем так</u></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><a href="www.bdblogov.ru">Блог для блогов</a></span></div><div style="text-align: center;"><br /></div><div style="text-align: center;">Используя скрипт, останется только текст "Блог для блогов".</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><u>Если вместо текста пишем url адрес блога</u></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><a href="www.bdblogov.ru">www.bdblogov.ru</a></span></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">То адрес будет опубликован в виде текста. При желании можно выделить url адрес, нажать правой кнопкой мыши-перейти по ссылке.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">По всем вопросам обращайтесь в комментариях, или воспользуйтесь контактной формой. Спасибо, что читаете и не забываете. Всего доброго. <br /><br /><u>Рекомендую почитать</u>:<br /><br /><ul><li><a href="https://www.bdblogov.ru/2016/09/clearance-home-gadget-Google-comments-with-icons.html" target="_blank">Оформление родного гаджета Google комментарии с иконками</a>;</li><li><a href="https://www.bdblogov.ru/2014/07/How-install-counter-numbering-comments-in-blog-Blogspot.html" target="_blank">Как установить счетчик нумерации комментариев в блоге Blogspot</a>;</li><li><a href="https://www.bdblogov.ru/2013/08/blogspot_30.html" target="_blank">Меняем форму комментариев на Blogspot</a>;</li><li><a href="https://www.bdblogov.ru/2014/09/How-issue-field-comments-beautiful-background.html" target="_blank">Как оформить поле комментариев красивым фоном</a>;</li></ul></div></div></div></div></div><a href="https://text.ru/antiplagiat/59b18b4eca95d" target="_blank"><img alt="TEXT.RU - 100.00%" border="0" height="15" src="https://text.ru/image/get/59b18b4eca95d/101" title="Уникальность данного текста проверена через TEXT.RU" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com0tag:blogger.com,1999:blog-8142585837575624831.post-91159991744033850522021-05-22T20:53:00.000+03:002021-05-22T20:53:00.400+03:00Клавиатурные комбинации Вставить в текст стрелки и другие символы <div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="border: 1px dotted rgb(204, 204, 204); padding: 10px;"><div style="text-align: justify;"><span style="font-family: inherit;"><i><u><span style="color: #0b5394;">Обновлено: 22.05.2021 г.</span></u></i> </span></div><div style="text-align: justify;"><span style="font-family: inherit;">Здравствуйте друзья, читатели и гости блога. В статье <a href="https://www.bdblogov.ru/2013/10/insert-as-a-fraction-degrec-to-text.html" target="_blank">Как вставить символ в текст сообщения</a> я писала о таблице символов, где мы копировали нужный символ и вставляли в текст сообщения.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="font-family: inherit;">Сегодня я расскажу о другом способе, более легком. Не надо открывать таблицу, искать, копировать и вставлять.</span></div><div style="text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="text-align: justify;"><span style="font-family: inherit;">Пользоваться мы будем комбинацией клавиш на своей клавиатуре и получим вот такие символы, пример</span></div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><b><span style="color: #cc0000; font-size: x-large;">↨ ↑ ↓ → ← ↔ ▲▼◄ ► </span> </b></div><div dir="rtl" style="text-align: center;"><br /></div><div style="text-align: justify;">В любом месте текста, где нужно вставить символ, нажимаете на клавиатуре комбинацию клавиш:<span style="color: #990000;"> </span><span style="color: #660000;">Alt + число</span>. При <u>нажатой</u> клавише <span style="color: #660000;">Alt</span> жмете на <u>плюсик</u>, затем комбинацию цифр и <u>отпускаете</u> клавишу <span style="color: #660000;">Alt</span>. Язык клавиатуры любой, русский или английский.<br /><br />Alt+23 стрелка вверх/вниз<br />Alt+24 стрелка вверх<br />Alt+25 стрелка вниз<br />Alt+26 стрелка вправо<br />Alt+27 стрелка влево<br />Alt+29 стрелка вправо/влево<br />Alt+30 треугольник вверх<br />Alt+31 треугольник вниз<br />Alt+17 треугольник влево<br />Alt+16 треугольник вправо<br /><br /><br /><div style="text-align: center;"><i><u>Также можно поэкспериментировать и получить другие символы</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span face=""verdana" , sans-serif" style="color: #cc0000; font-size: x-large;">◙ ♂ ♀ ☼ ¶ § ▬ $ ' < ></span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Alt+10 закрашенный круг</div><div style="text-align: justify;">Alt+11 кружок со стрелкой</div><div style="text-align: justify;">Alt+12 кружок/внизу плюсик</div><div style="text-align: justify;">Alt+15 восьмигранник</div><div style="text-align: justify;">Alt+20 знак абзаца</div><div style="text-align: justify;">Alt+21 параграф</div><div style="text-align: justify;">Alt+22 тире</div><div style="text-align: justify;">Alt+36 знак доллара</div><div style="text-align: justify;">Alt+39 одиночный штрих</div><div style="text-align: justify;">Alt+60 левый угол</div><div style="text-align: justify;">Alt+62 правый угол</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><i><u>Карточные масти (не все)</u></i></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="font-size: x-large;"><span face=""verdana" , sans-serif">♥ ♦ ♣ ♠</span> </span></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Alt+3 черви</div><div style="text-align: justify;">Alt+4 бубны</div><div style="text-align: justify;">Alt+5 трефы</div><div style="text-align: justify;">Alt+6 пики</div><div style="text-align: justify;"><br /></div><div style="text-align: center;">И чтобы не писать отдельную статью, HTML коды от 1 до 10 цифр в кружочках</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span face=""verdana" , sans-serif" style="color: #cc0000; font-size: x-large;">❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ➒ ➓ </span><br /><div style="text-align: justify;"><br /></div><div style="text-align: justify;">1 - &#10102;</div><div style="text-align: justify;">2 - &#10103;</div><div style="text-align: justify;">3 - &#10104;</div><div style="text-align: justify;">4 - &#10105;</div><div style="text-align: justify;">5 - &#10106;</div><div style="text-align: justify;">6 - &#10107;</div><div style="text-align: justify;">7 - &#10108;</div><div style="text-align: justify;">8 - &#10109;</div><div style="text-align: justify;">9 - &#10130;</div><div style="text-align: justify;">10-&#10131;</div><div style="text-align: justify;"><br />Вы можете изменить цвет и размер любого символа в редакторе сообщений блоггер. Для этого выделите символ и вверху в меню выберите нужный размер и цвет.<br /><br />Конечно, кому-то проще пользоваться таблицей, чтобы не запоминать комбинацию клавиш, но со временем привыкнете. Я пока развлекалась, нашла комбинацию вставки смайлика <span style="color: orange; font-size: large;">☺</span>Alt+1 или такой <span style="color: orange; font-size: large;">☻ </span>Alt+2.<br /><br />На сегодня закончу. Пишите отзывы и задавайте вопросы в комментариях. Всем всего доброго.</div></div><div style="text-align: justify;"></div></div></div><br /><i><u>Почитайте другие статьи:</u></i><br /><br /><ul style="text-align: left;"><li><a href="https://www.bdblogov.ru/2016/08/change-settings-and-protect-your-personal-data-in-account-Google.html" target="_blank">Изменить настройки и защитить свои личные данные в аккаунте Google</a>;</li><li><a href="https://www.bdblogov.ru/2016/05/edit-text-links-Read-then-Add-symbol.html" target="_blank">Изменить текст ссылки Читать дальше Добавить символ</a>;</li><li><a href="https://www.bdblogov.ru/2016/03/change-URL-static-pages-blogger.html" target="_blank">Изменить URL адрес статических страниц blogger</a>;</li><li><a href="https://www.bdblogov.ru/2014/03/usefulandnecessary-program-for-webmasters.html" target="_blank">Полезные и необходимые программы для вебмастеров</a>;</li><li><a href="https://www.bdblogov.ru/2016/09/clearance-home-gadget-Google-comments-with-icons.html" target="_blank">Оформление родного гаджета Google комментарии с иконками</a>;</li></ul></div><a href="https://text.ru/antiplagiat/57bf57ab21eb4" target="_blank"><img alt="TEXT.RU - 100.00%" border="0" height="15" src="//text.ru/image/get/57bf57ab21eb4/101" title="Уникальность данного текста проверена через TEXT.RU" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com2tag:blogger.com,1999:blog-8142585837575624831.post-57416059889080832572021-05-05T15:51:00.002+03:002021-05-05T16:02:40.881+03:00Изменить изображение маркера в списке используя CSS<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">Здравствуйте дорогие друзья, новые и постоянные читатели. Информация сегодня для вебмастеров, кто часто использует маркированный список в своих статьях, а кто время от времени тоже пригодится.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">По умолчанию в маркированном списке обычно мы видим круг или квадрат, как на рисунке ниже.<br /><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Маркированный список с маркером круга" border="0" height="77" src="https://4.bp.blogspot.com/-SywhTX9HIDE/VypNjUuQHgI/AAAAAAAANG0/6qSTgjcY58k4vjRIGFcM9c9ZVyL_ol5dgCLcB/s320/%25D0%25BC%25D0%25B0%25D1%2580%25D0%25BA%25D0%25B5%25D1%2580%2B1.JPG" title="" width="320" /></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Можно просто изменить цвет маркера. В админ панели блоггер <u>тема - настройки, открыть список - изменить HTML</u>. В стили CSS вставьте строку ниже, цвет подчеркнут.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;">ul { color: <u>green</u>; list-style-type: disc }</span></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Маркер этот уже изрядно надоел, давайте изменим его на свою картинку. Пример Вы можете увидеть в этом блоге внизу статьи. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Вам нужно загрузить изображение в редактор блоггер или на диск компьютера, <u>своё</u> или выбрать на специальных сервисах<span style="color: #0c343d;"><b>.</b></span> Размер должен быть не больше 16х16 px. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Далее рекомендую создать маркированный список, правой кнопкой мыши нажмите по маркеру, и... <u>просмотр кода элемента</u>:</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-G2LnDP2r9rM/VypPqYV4vgI/AAAAAAAANHA/I2FfKLC-L7UUN8-g0yBYeJ4vFyblo1rvACLcB/s1600/%25D0%25BC%25D0%25B0%25D1%2580%25D0%25BA%25D0%25B5%25D1%2580.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt="Просмотр кода элемента, смотрим значения маркера по умолчанию" border="0" height="140" src="https://1.bp.blogspot.com/-G2LnDP2r9rM/VypPqYV4vgI/AAAAAAAANHA/I2FfKLC-L7UUN8-g0yBYeJ4vFyblo1rvACLcB/s320/%25D0%25BC%25D0%25B0%25D1%2580%25D0%25BA%25D0%25B5%25D1%2580.JPG" title="" width="320" /></a></div></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Здесь нам важно посмотреть значения <span style="color: #666666;">margin</span> и <span style="color: #666666;">padding</span>, которые установлены для маркера в вашем блоге (на скриншоте справа, рядом со стрелкой). А дальше совсем просто: <u>шаблон</u> <u>изменить шаблон</u>, не забывайте о резервной копии. Раскрываем <u>первую</u> <u>стрелку</u> <u>слева</u> и смотрим стили CSS. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Ищем строку <span style="color: #134f5c;">.post-body li{</span>. Я пересмотрела все свои тестовые блоги на родных шаблонах, конкретно такой строки нет, в отличие от сторонних. Поэтому выше строки <span style="color: #134f5c;">]]></b:skin></span> добавьте CSS для маркера</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;">.post-body li {</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;"> list-style:none; *// Убираем маркер;</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;"> list-style:url("адрес картинки");</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;">}</span></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">Кому трудно вставить CSS в шаблон, другой вариант: дизайн-добавить гаджет-HTML/Script, сохраните внизу макета блога.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;"><style></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;">.post-body li {</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;"> list-style:none;</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;"> list-style:url("адрес картинки");</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;">}</span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #134f5c;"></style></span></div></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">На сторонних шаблонах такую строку найдете без труда. Добавьте стиль CSS, значения <u>margin</u> и <u>padding</u> после указанной строки в шаблоне уже есть, при необходимости можете корректировать.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">И на этом у меня сегодня всё. Все вопросы в комментариях или в меню форма для связи. Всего доброго. </div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><i><u>Почитайте другие полезные статьи:</u></i></div><div class="separator" style="clear: both; text-align: justify;"><i><u><br /></u></i></div><div class="separator" style="clear: both; text-align: justify;"></div><ul><li><a href="https://www.bdblogov.ru/2016/04/Enlarge-image-on-page-messages-when-hover-using-CSS.html" target="_blank">Увеличить изображения на страницах сообщений при наведении используя CSS</a>;</li><li><a href="https://www.bdblogov.ru/2016/02/LightBox-in-blogger-Change-background-using-CSS.html" target="_blank">LightBox в блоггер Изменить фон с использованием CSS</a>;</li><li><a href="https://www.bdblogov.ru/2016/03/auto-scrolling-images-and-part-text-in-CSS-blogger.html" target="_blank">Автоматическая прокрутка изображений и части текста на CSS для blogger</a>; </li><li><a href="https://www.bdblogov.ru/2015/10/fix-navbar-or-menu-down-page-in-blogger.html" target="_blank">Зафиксировать navbar или меню внизу страницы в blogger</a>;</li><li><a href="https://www.bdblogov.ru/2016/05/effect-floating-labels.html" target="_blank">Эффект плавающих ярлыков</a>;</li><li><a href="https://www.bdblogov.ru/2016/09/onthemain-page-only-headers-posts-without-image.html" target="_blank">На главной странице только заголовки постов без изображений</a>;</li></ul></div><a href="https://text.ru/antiplagiat/572a6041daed3" target="_blank"><img alt="TEXT.RU - 100.00%" border="0" height="15" src="https://text.ru/image/get/572a6041daed3/101" title="Уникальность данного текста проверена через TEXT.RU" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com9tag:blogger.com,1999:blog-8142585837575624831.post-30491921208350696162021-04-12T18:49:00.001+03:002022-02-24T20:52:20.552+02:00Цветное сканирование документов в Windows7 и с МФУ устройства<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">Здравствуйте читатели, друзья и гости. В статье <a href="https://www.bdblogov.ru/2015/06/how-to-scan-documents-with-printer-to-computer.html" target="_blank">как сканировать документ с принтера на компьютер</a> я писала как получить цветные сканы документов. Но все действия в статье описаны в ОС Windows XP, как известно уже не поддерживается корпорацией.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Сегодня поработаем с документами в операционной системе Windows 7 и второй вариант, кто работает с МФУ или сканером, можно настроить параметры сканирования документов, и получить цветные сканы с устройства.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><u>В Windows 7</u><br /><br /></div><div style="text-align: justify;"></div><ul><li>Кнопка Пуск-все программы-факсы и сканирование Windows;</li><li>Кнопка Пуск-устройства и принтеры;</li><li>Кнопка Пуск, в поле вставить название программы "Факсы и сканирование";</li><li>Панель управления-устройства и принтеры;</li></ul><div style="text-align: justify;">Устройства и принтеры, выделяем принтер (устройство должно быть подключено к компьютеру).</div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Устройства и принтеры, выделяем принтер" border="0" height="218" src="https://3.bp.blogspot.com/-xMOkWinDPIg/WNvMo7-3hMI/AAAAAAAAPII/F62gIqiFWD0KN-RYpiHL_jwn-3tuaKHgQCLcB/s400/%25D0%25BD%25D0%25B0%25D1%2587%25D0%25B0%25D1%2582%25D1%258C.jpg" title="Устройства и принтеры" width="400" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;">Нажимаем правой кнопкой мыши-начать сканирование и переходим к настройкам</div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Нажимаем правой кнопкой мыши-начать сканирование и переходим к настройкам" border="0" height="218" src="https://1.bp.blogspot.com/-Zhgy--7o5wc/WNvNkkxCTsI/AAAAAAAAPIQ/BYKzlOj9SE8x86JCcFDFPm30_ggUfNqxgCLcB/s400/%25D1%2581%25D0%25BA%25D1%2580%25D0%25B8%25D0%25BD%2B%25D0%25B2%2B%25D0%25B2%25D0%25B8%25D0%25BD%25D0%25B4%25D0%25B5%2B7.jpg" title="Переходим к настройкам" width="400" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Настройки сканирования:<br /><br /></div><div style="text-align: justify;"><ul><li>Профиль - Документы;</li><li>Цветовой формат - Цветное;</li><li>Тип файла - JPEG;</li><li>Разрешение - 300 dpi (точек на дюйм); </li><li>Нажмите - Просмотр</li></ul>Загрузится документ, с углов мышью тяните обводку и обрежьте поля. После настроек нажмите <u>Сканировать</u>.<br /><ul></ul></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="После настроек нажмите Сканировать." border="0" height="235" src="https://1.bp.blogspot.com/--AtQ8jqvt6Y/WNvPqUCSmCI/AAAAAAAAPIc/rgHwsqpbtEsabybHmCb3PHwipKEdpZCgQCLcB/s400/dbylf%2B7%2Bcrfy%2B2.jpg" title="Сканирование документа" width="400" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;">Начнется сканирование документа, далее в правом углу увидите вкладку-<u>импорт</u></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Вписать имя документа и импортировать" border="0" height="158" src="https://3.bp.blogspot.com/-zYvwBN8QOus/WNvQXYH0JBI/AAAAAAAAPIk/IZ-piO7sDJIi-4Qq172PZ8JKZIdrWBG2QCLcB/s320/crfy%2B3.jpg" title="Импорт документа" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Впишите в поле название документа и нажмите <u>импорт</u>. Результат увидите в окне программы "Факсы и сканирование" или на диске в папке Мои документы-сканированные изображения.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><u>Второй способ-подключаем устройство к компьютеру, загружаем документ</u></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Подключаем сканер, нажимаем сканировать документ" border="0" height="167" src="https://2.bp.blogspot.com/-8eMzwQbAkvs/WNvTY4RIWMI/AAAAAAAAPIw/ARbsfnbllIszECGeOCTMxMEsrkp8IQNDACLcB/s320/%25D1%2583%25D1%2581%25D1%2582%25D1%2580%25D0%25BE%25D0%25B9%25D1%2581%25D1%2582%25D0%25B2%25D0%25BE.jpg" title="Получить цветные сканы с устройства" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;">Нажимаем сканировать документ-справа-Изменить параметры, переходим к настройкам</div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Переходим к дополнительным настройкам" border="0" height="255" src="https://4.bp.blogspot.com/-3xfIM-OPh0A/WNvX-cNoFXI/AAAAAAAAPI8/15UYj4MdxjA0gSHZFiYbbOhL9wun8B57QCLcB/s320/%25D1%2581%2B%25D1%2581%25D0%25BA%25D0%25B0%25D0%25BD%25D0%25B5%25D1%2580%25D0%25B0.jpg" title="Настройка параметров сканирования" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Настраиваем тип документа, цвет, тип файла и нажимаем <u>дополнительные</u> <u>параметры</u> <u>сканирования</u></div><div class="separator" style="clear: both; text-align: center;"></div><div class="bloknot7"><div style="text-align: center;"><img alt="Настройка дополнительных параметров сканирования" border="0" height="198" src="https://3.bp.blogspot.com/-F9h-du1EAfQ/WNvZE3r5BzI/AAAAAAAAPJE/Z3ZBiKwkUrAsogfVkzXM9GIZXEHQ6uPegCLcB/s320/crfyth%2B2.jpg" title="Дополнительные параметры сканирования" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Вводим значение-разрешение вывода, по желанию установите галку-автоматическая обрезка и резкость, нажмите ОК.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Документ готов, жмем <u>Сканирование</u> на вкладке, откуда переходили к дополнительным настройкам параметров. </div><div style="text-align: center;"><br /></div><div style="text-align: center;">Настройка параметров сохранения</div><div style="text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Настраиваем параметры сохранения и нажимаем ОК" border="0" height="266" src="https://4.bp.blogspot.com/-KswMmZQ5WRs/WNvaZ4zFKfI/AAAAAAAAPJQ/4VU58wEhNbEucisS1BmJTI5Cl3y2NXIMwCLcB/s320/%25D1%2581%25D0%25BA%25D0%25B0%25D0%25BD%2B3.jpg" title="Настройка параметров сохранения" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Тип и имя файла, указать путь для сохранения-нажмите кнопку Обзор и выберите нужную папку. Жмем ОК</div><div style="text-align: justify;"><div style="text-align: center;">Сканируется документ</div></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Документ готов" border="0" height="235" src="https://3.bp.blogspot.com/-9yGiD0ZoK-U/WNvcPw1XSYI/AAAAAAAAPJc/P_7coznzwfsA5E2YBDkSphb9SYKaTXiDgCLcB/s320/%25D0%25BF%25D0%25BE%25D1%2581%25D0%25BB%25D0%25B5%25D0%25B4%25D0%25BD%25D0%25B8%25D0%25B9.jpg" title="Цветной скан документа" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">И последнее действие-нажмите Готово. Сравнила документ, сканированный двумя вариантами, ничем не отличается. Выбирайте и пользуйтесь удобным для себя способом. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Я показала на примере своего устройства (МФУ), у Вас могут настройки отличаться, но смысл действий надеюсь понятен. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">На этом закончу сегодня. Все вопросы в комментариях или работает контактная форма. Всем всего доброго.<br /><br />Читайте также:<br /><br /><ul><li><a href="https://www.bdblogov.ru/2015/03/setting-coupling-key-for-language-input.html" target="_blank">Настройка сочетания клавиш для языков ввода</a>;</li><li><a href="https://www.bdblogov.ru/2015/03/setting-and-function-computer-mouse.html" target="_blank">Настройка и функции компьютерной мыши</a>;</li><li><a href="https://www.bdblogov.ru/2013/10/insert-as-a-fraction-degrec-to-text.html" target="_blank">Как вставить символ в текст сообщений</a>;</li></ul></div></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com0tag:blogger.com,1999:blog-8142585837575624831.post-16744340757886484722021-03-18T16:28:00.001+02:002021-03-18T16:46:25.637+02:00Вертикальное меню с прошитыми вкладками для блоггер<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">Всем здравствуйте. На многих сайтах часто вижу вертикальное меню с прошитыми вкладками. Почему бы такое меню не применить на наших блогах. Посмотрите скриншот, как будет выглядеть меню: </div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Настройка и установка меню в макет блога" border="0" data-original-height="340" data-original-width="232" height="320" src="https://2.bp.blogspot.com/-jd1boJJMclA/WWpw_U3__0I/AAAAAAAAPv4/K-AmzhdlGEkrp6khveJEKtCZQ25vM_SKACLcBGAs/s320/%25D0%25BF%25D1%2580%25D0%25BE%25D1%2581%25D1%2582%25D0%25BE%2B%25D0%25BC%25D0%25B5%25D0%25BD%25D1%258E.jpg" title="Вертикальное меню для блоггер" width="218" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">По-моему, нормально получилось. Для установки меню копируем код ниже, далее вставить дизайн-добавить гаджет HTML/JavaScript, сохранить в нужном месте макета блога.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;">HTML код</div><div style="text-align: justify;"><br /></div><div style="font-size: 14px; height: 200px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><div class="bloknot7"><div style="text-align: center;"><span style="color: #0c343d;"><style type='text/css'> #v_mnu_01 ul { list-style: none; margin: 0; padding: 0; font-family: Arial; <b> font-size: 16px</b>; <b>font-style: italic</b>; text-decoration: none; } </span></div><div style="text-align: center;"><span style="color: #0c343d;"> #v_mnu_01 {</span><span style="color: #990000;">background-color: #0a9e08</span><span style="color: #0c343d;">; <b>width: auto</b>; <b>margin: 3px</b>; }</span></div><div style="text-align: center;"><span style="color: #0c343d; text-align: justify;"> </span></div><div style="text-align: center;"><span style="color: #0c343d;"> #v_mnu_01 li a:link, #v_mnu_01 li a:visited { </span><span style="color: #20124d;"><b>color: #FFFFFF</b></span><span style="color: #0c343d;">; display: block ; background-color: #</span><span style="color: #20124d;"><b>000</b></span><span style="color: #0c343d;">; </span><span style="color: #20124d;"><b>border-radius:10px</b></span><span style="color: #0c343d;">;-moz-border-radius:10px;</span></div><div style="text-align: center;"><span style="color: #0c343d;">-webkit-border-radius:10px; outline:</span><span style="color: #0c343d;"> <b><span style="color: #20124d;">2px dashed #fff</span></b></span><span style="color: #0c343d;">; outline-offset:</span><span style="color: #20124d;"> <b>-7px</b></span><span style="color: #0c343d;">; padding: </span><span style="color: #20124d;"><b>10px</b></span><span style="color: #0c343d;"><span style="color: #0c343d;">; </span></span><span style="color: #20124d;"><b>min-height: 35px</b></span><span style="color: #0c343d;"><span style="color: #0c343d;">;</span><b><span style="color: #20124d;"> padding:15px 0 0 15px</span></b><span style="color: #0c343d;">;}</span></span></div><div style="text-align: center;"><span style="color: #0c343d;"><span style="color: #0c343d;"> #v_mnu_01 li a:hover {</span><b><span style="color: #274e13;">color: #FFFF00;</span></b> <b><span style="color: #274e13;"> background: #03b4cc;</span></b><b><span style="color: #274e13;"> padding:15px 0 0 15px;</span></b><span style="color: #0c343d;">}</style> </span></span></div><div style="text-align: center;"><span style="color: #0c343d;"><br /></span></div><div style="text-align: center;"><span style="color: #0c343d;"><div id="v_mnu_01"></span></div><div style="text-align: center;"><span style="color: #0c343d;"> <ul></span></div><div style="text-align: center;"><span style="color: #0c343d;"><span style="color: #0c343d;"><li><a href="</span><b><span style="color: blue;">адрес ссылки</span></b><span style="color: #0c343d;">">Главная</a></li></span></span></div><div style="text-align: center;"><span style="color: #0c343d;"><span style="color: #0c343d;"><li><a href="</span><b><span style="color: blue;">#</span></b><span style="color: #0c343d;">">Контакты</a></li></span></span></div><div style="text-align: center;"><span style="color: #0c343d;"><span style="color: #0c343d;"><li><a href="</span><b><span style="color: blue;">#</span></b><span style="color: #0c343d;">">Карта блога</a></li></span></span></div><div style="text-align: center;"><span style="color: #0c343d;"><span style="color: #0c343d;"><li><a href="</span><b><span style="color: blue;">#</span></b><span style="color: #0c343d;">">HTML</a></li></span></span></div><div style="text-align: center;"><span style="color: #0c343d;"><span style="color: #0c343d;"><li><a href="</span><b><span style="color: blue;">#</span></b><span style="color: #0c343d;">">CSS</a></li></span></span></div><div style="text-align: center;"><span style="color: #0c343d;"><span style="color: #0c343d;"><li><a href="</span><b><span style="color: blue;">#</span></b><span style="color: #0c343d;">">Социальные сети</a></li></ul></span></span></div><div style="text-align: center;"><span style="color: #0c343d;"></div></span></div></div></div><br /><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><i><u>Настройки</u></i>: выделено <b><span style="color: #0c343d;">жирным</span></b>: размер шрифта; <u>italic</u>-наклонный шрифт (курсив). если нужно обычный. замените на <u>normal</u>; ширина меню автоматически; margin:3px-расположение меню от левого края;</div><br /><div style="text-align: justify;">Выделено жирным сиреневым цветом:<span style="color: #0c343d;"> </span><span style="color: #20124d; text-align: center;"><b>color: #FFFFFF </b></span>цвет шрифта названия ссылок; <span style="color: #0c343d; text-align: center;"> background-color: #</span><span style="color: #20124d; text-align: center;"><b>000</b></span><span style="color: #0c343d; text-align: center;">; </span>цвет поля вкладки (черный); <span style="color: #0c343d; text-align: center;"> </span><span style="color: #20124d; text-align: center;"><b>border-radius:10px</b></span><span style="color: #0c343d; text-align: center;">; </span>радиус закругления углов поля; <span style="text-align: center;"><b><span style="color: #20124d;">2px dashed #fff</span></b></span><span style="color: #0c343d; text-align: center;">; </span>размер, форма и цвет прошивки; <span style="color: #0c343d; text-align: center;">outline-offset:</span><span style="color: #20124d; text-align: center;"> <b>-7px </b></span><span style="text-align: center;">выводим рамку внутри элемента; padding:<b><span style="color: #20124d;">10px</span></b>; отступ пунктира от полей; </span><br /><span style="text-align: center;"><br /></span><br /><div style="text-align: justify;">Если вместо черного фона вкладок вставить фон градиент, получится супер меню, посмотрите в<a href="https://demoblog-v.blogspot.com/" target="_blank"> демо</a> блоге. По ссылке ниже почитайте статью "меню для блоггер с фоном градиента". </div><br />Выделено<b><span style="color: #274e13;"> зеленым</span></b> цветом: цвет ссылки и поля вкладки при наведении мыши; <b><span style="color: #274e13;">padding:15px 0 0 15px;</span> </b>расположение текста (названия ссылок) верх-низ, слева-справа;<br /><span style="text-align: center;"><br /></span><span style="text-align: center;">Выделено синим: url адрес ссылки и пишем название. Вместо решеток также вставьте адрес ссылок;</span><span style="text-align: center;"><br /></span><br /><div style="text-align: center;">Выделено красным: вставьте любой цвет, и меню будет с внешним фоном, пример</div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Пример меню с добавлением внешнего фона" border="0" data-original-height="336" data-original-width="336" height="320" src="https://1.bp.blogspot.com/-JV6Avkohx2w/WWp5EXsF-cI/AAAAAAAAPwE/jD6VOjtTSzEFlE4GhxutwqcsPsyZCwVFQCLcBGAs/s320/c_26f63f8da4d3025e9fdf382b1a49aaf6.jpg" title="Вертикальное меню с добавлением внешнего фона" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Немного неудачно получился коллаж скриншотов, такой вид будет иметь меню с добавлением внешнего фона. Меню корректно отображается в браузерах Гугл Хром, Опера, Мазила, Яндекс браузер. В ИЕ11 у меня не отображается прошивка.<br /><br />Надеюсь, информация Вам пригодится, спасибо за визит. На все вопросы по настройке отвечу в комментариях или воспользуйтесь формой для связи. Всего доброго.<br /><br /><u>Читать также</u>:<br /><br /><ul><li><a href="https://www.bdblogov.ru/2017/03/menyu-dlya-blogger-s-fonom-gradienta.html" target="_blank">Меню для блоггер с фоном градиента</a>;</li><li><a href="https://www.bdblogov.ru/2016/01/simple-horizontal-drop-down-menu-for-blogs-blogspot.html" target="_blank">Простое горизонтальное выпадающее меню для блогов blogspot</a>;</li><li><a href="https://www.bdblogov.ru/2017/03/gorizontalnoe-fiksirovannoe-mnogourovnevoe-menyu-dlya-blogger.html" target="_blank">Горизонтальное фиксированное многоуровневое меню для блоггер</a>;</li><li><a href="https://www.bdblogov.ru/2013/09/animirovannoemenyu.html" target="_blank">Анимированное меню</a>;</li></ul></div></div></div><a href="https://text.ru/antiplagiat/596a8374887ef" target="_blank"><img alt="TEXT.RU - 100.00%" border="0" height="15" src="https://text.ru/image/get/596a8374887ef/101" title="Уникальность данного текста проверена через TEXT.RU" width="80" /></a> </div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com4tag:blogger.com,1999:blog-8142585837575624831.post-56125404913238092052021-03-06T18:04:00.000+02:002021-03-06T18:04:06.267+02:00Переход блога блоггер с личным доменом по протоколу HTTPS<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">Здравствуйте владельцы блогов блогспот. На днях у меня появилось сообщение о разрешении перехода блога на персональном домене на протокол с шифрованием HTTPS.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Почитала информацию в сети, в основном пишут, что переход обязателен для финансовых ресуросов, игровых, где требуется регистрация и.т.д. У кого информационный контент, переход совсем необязателен. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Посетила форумы по теме переноса, все дело в том, что может быть потеря трафика. C июля месяца этого года поисковик Google при переходе намерен сайты/блоги без шифрования помечать как опасные для посещений, смотрите скриншот.</div><div style="text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><img alt="Адрес блога без шифрования" border="0" data-original-height="450" data-original-width="661" height="217" src="https://1.bp.blogspot.com/-27hxpUSdDGQ/Wr4qhYV09EI/AAAAAAAARJ8/w-y1AjQg_yUHvZSVvSFJDhj69yeUSqxpACLcBGAs/s320/gjlrk.xtybt%2Byt%2Bpfobotyj.jpg" title="Подключение не защищено" width="320" /></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">У меня три блога, для эксперимента выбрала с наименьшим количеством статей, всего 100. В этой статье подробно напишу о переносе своего блога с http на https, и настройках после переноса. Информации будет много, на две статьи (ссылка на вторую статью ниже), так что запаситесь терпением, чтобы все сделать правильно. </div><div style="text-align: justify;"><br /></div><div style="text-align: center;">В админке блоггер открываем нужный блог и нажимаем настройки-основные:</div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-w5xD2hmmGus/Wr4sYdrqvlI/AAAAAAAARKI/wfKY6b2w0gwFz-DaoJEFJCwQRIdopJfNACLcBGAs/s1600/%25D0%25BF%25D1%2580%25D0%25BE%25D1%2582%25D0%25BE%25D0%25BA%25D0%25BE%25D0%25BB.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Как в настройках перейти на HTTPS" border="0" data-original-height="646" data-original-width="1152" height="179" src="https://2.bp.blogspot.com/-w5xD2hmmGus/Wr4sYdrqvlI/AAAAAAAARKI/wfKY6b2w0gwFz-DaoJEFJCwQRIdopJfNACLcBGAs/s320/%25D0%25BF%25D1%2580%25D0%25BE%25D1%2582%25D0%25BE%25D0%25BA%25D0%25BE%25D0%25BB.jpg" title="Переход на HTTPS" width="320" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Доступность HTTPS, ставим <span style="color: #0c343d;">Да</span>, настройки сохранятся автоматически. Минут 15-20 главная страница блога будет недоступна, другие страницы с постами могут открываться (не всегда). </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Через промежуток времени зайдите повторно в настройки и поставьте <span style="color: #134f5c;">Да</span> перенаправление по HTTPS.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">На электронную почту придет письмо с рекомендациями. Идем в вебмастер Google, на главной странице Search Console нажать <u>добавить ресурс</u> и вписать адрес блога с https. Вам нужно добавить два адреса c https с www и без.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><span style="color: #0c343d;">https://www.ozarabotkevceti.ru</span></div><div style="text-align: center;"><span style="color: #0c343d;">https://ozarabotkevceti.ru</span></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Далее переходим по адресу <span style="color: #0c343d;">https://www.ozarabotkevceti.ru</span>, справа жмем шестеренку-настройки сайта:<br /><br /><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-KP8KBjJnvY4/Wr4wvH5Y9tI/AAAAAAAARKU/DmSAI0kD160zJEIJcMis0mZQpBf6y_QdACLcBGAs/s1600/%25D1%2581%25D0%25B5%25D0%25B9%25D1%2587%25D0%25B0%25D1%2581.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="В вебмастере Google настраиваем блог с новым адресом" border="0" data-original-height="460" data-original-width="1110" height="132" src="https://1.bp.blogspot.com/-KP8KBjJnvY4/Wr4wvH5Y9tI/AAAAAAAARKU/DmSAI0kD160zJEIJcMis0mZQpBf6y_QdACLcBGAs/s320/%25D1%2581%25D0%25B5%25D0%25B9%25D1%2587%25D0%25B0%25D1%2581.jpg" title="Настройка блога с новым адресом" width="320" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;">Ставим отметку Отображать URL-адреса как www.ozarabotkevceti.ru<br /><br /><u>Добавим файл Sitemap для нового адреса</u><br /><br /><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-LsUjGEWVr_0/Wr4x93OuJFI/AAAAAAAARKg/NM-QpjwtEJYJuK2dCsEydMZT5FQ8k_FewCLcBGAs/s1600/%25D0%25BA%25D0%25B0%25D1%2580%25D1%2582%25D0%25B0.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Как добавить файл sitemap.xml" border="0" data-original-height="665" data-original-width="1109" height="191" src="https://2.bp.blogspot.com/-LsUjGEWVr_0/Wr4x93OuJFI/AAAAAAAARKg/NM-QpjwtEJYJuK2dCsEydMZT5FQ8k_FewCLcBGAs/s320/%25D0%25BA%25D0%25B0%25D1%2580%25D1%2582%25D0%25B0.bmp" title="Добавить файл Sitemap" width="320" /></a></div></div><div><br />Адрес Вашего блога уже будет вписан, добавьте только sitemap.xml<br /><br /><u>В админпанели идем в настройки-настройки поиска</u>.<br /><br /><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-qiKUJVP-ToU/Wr4zfjATqOI/AAAAAAAARKs/0IUajfKDA1YT7THs_IYylWoEgoi0FplBgCLcBGAs/s1600/%25D1%2580%25D0%25BE%25D0%25B1%25D0%25BE%25D1%2582%25D1%2581.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Как в настройках изменить файл robots.txt" border="0" data-original-height="630" data-original-width="990" height="203" src="https://1.bp.blogspot.com/-qiKUJVP-ToU/Wr4zfjATqOI/AAAAAAAARKs/0IUajfKDA1YT7THs_IYylWoEgoi0FplBgCLcBGAs/s320/%25D1%2580%25D0%25BE%25D0%25B1%25D0%25BE%25D1%2582%25D1%2581.jpg" title="Изменить файл robots.txt" width="320" /></a></div></div><br /><div style="text-align: justify;">Нам надо изменить файл robots.txt, вернее изменим только файл sitemap на https, сохраняем изменения.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><u>Возвращаемся в <span style="text-align: justify;">Search Console</span><span style="text-align: justify;"> </span>google-сканирование-инструмент проверки файла robots.txt</u></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-EgOfkdxwEac/Wr41HyaqUZI/AAAAAAAARK4/MmYWxChMWoQQZa5mt7GFCcK9CjdpROjxgCLcBGAs/s1600/fffff.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="В вебмастере Google отправить файл robots.txt на проверку" border="0" data-original-height="644" data-original-width="1152" height="178" src="https://2.bp.blogspot.com/-EgOfkdxwEac/Wr41HyaqUZI/AAAAAAAARK4/MmYWxChMWoQQZa5mt7GFCcK9CjdpROjxgCLcBGAs/s320/fffff.jpg" title="Проверка файла robots.txt" width="320" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Если автоматически не обновился файл sitemap, справа нажмите <u>отправить</u> и выполните пункт 3:<u> Сообщите Google о том, что вы обновили файл robots.txt</u>. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Слева сканирование-просмотреть как Googlebot, нажмите Сканировать-запросить индексирование.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Следующим шагом отправимся в <u>вебмастер яндекса</u>-мои сайты. Переходим по названию блога, слева индексация-переезд сайта:</div><div style="text-align: justify;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-zIY9505gkYI/Wr47GK5k4PI/AAAAAAAARLI/FYBgdPCDeMAhexmcenpRsUaZ9uGaC0xUACLcBGAs/s1600/%25D1%258F%25D1%2588%25D0%25B0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Как сообщить поисковику яндекс о блоге с новым адресом" border="0" data-original-height="563" data-original-width="1048" height="171" src="https://3.bp.blogspot.com/-zIY9505gkYI/Wr47GK5k4PI/AAAAAAAARLI/FYBgdPCDeMAhexmcenpRsUaZ9uGaC0xUACLcBGAs/s320/%25D1%258F%25D1%2588%25D0%25B0.jpg" title="Переезд сайта в яндексе" width="320" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;"><div style="text-align: center;">Отмечаем галочкой добавить https и www, сохраняем. </div><div style="text-align: center;"><br /></div><div style="text-align: center;"><div style="text-align: justify;">Через время в вебмастере яндекс появится предупреждение-для получения информации добавить сайт с https, нажмите добавить сайт. </div></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-lOork_r6c44/Wsv1pWOHsyI/AAAAAAAARSA/1Z7luAPPaQc_UfToy0Qd7vbGeU1dAQDJgCLcBGAs/s1600/%25D0%25A1%25D0%25B0%25D0%25B9%25D1%2582%25D1%258B%2B%25D0%25B2%2B%25D1%258F%25D1%2588%25D0%25B5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Нажимаем Добавить сайт с https" border="0" data-original-height="468" data-original-width="1032" height="145" src="https://1.bp.blogspot.com/-lOork_r6c44/Wsv1pWOHsyI/AAAAAAAARSA/1Z7luAPPaQc_UfToy0Qd7vbGeU1dAQDJgCLcBGAs/s320/%25D0%25A1%25D0%25B0%25D0%25B9%25D1%2582%25D1%258B%2B%25D0%25B2%2B%25D1%258F%25D1%2588%25D0%25B5.jpg" title="Уведомление в вебмастере яндекс Добавить сайт" width="320" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><div style="text-align: center;">В поле впишем новый адрес сайта с https, затем нужно подтвердить права. </div></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-1eqTkwTtE-g/Wsv2V-_YBPI/AAAAAAAARSI/xwDnxEeD-uwcnFEzmT3VYew_5uaR_xFIACLcBGAs/s1600/%25D0%25BF%25D1%2580%25D0%25B0%25D0%25B2%25D0%25B0%2B%25D0%25B2%2B%25D1%258F%25D1%2588%25D0%25B5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Подтвердить права с помощью мета-тэга" border="0" data-original-height="453" data-original-width="1075" height="134" src="https://4.bp.blogspot.com/-1eqTkwTtE-g/Wsv2V-_YBPI/AAAAAAAARSI/xwDnxEeD-uwcnFEzmT3VYew_5uaR_xFIACLcBGAs/s320/%25D0%25BF%25D1%2580%25D0%25B0%25D0%25B2%25D0%25B0%2B%25D0%25B2%2B%25D1%258F%25D1%2588%25D0%25B5.jpg" title="Подтверждение прав на блог с новым адресом" width="320" /></a></div></div><div style="text-align: center;"><br /></div>Мета-тзг в шаблон вставлять не нужно, они одинаковы с адресом http. Просто нажмите проверить, проверку Вы пройдете.<br /><br /><div style="text-align: center;">В мои сайты я добавила все три блога с https.<span style="text-align: justify;"> </span></div><div class="separator" style="clear: both; text-align: center;"></div><br /><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-D-KxI9KmEhU/Wsv3xwY9XZI/AAAAAAAARSc/Nt16QntNeSAtQN0QZYoNER16YTOjcn8kgCLcBGAs/s1600/%25D0%25B4%25D0%25BE%25D0%25B1%25D0%25B0%25D0%25B2%25D0%25BB%25D0%25B5%25D0%25BD%25D0%25BD%25D1%258B%25D0%25B5%25D1%2581%2B%2B%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D1%258B.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Блоги с новым адресом добавлены для поиска" border="0" data-original-height="385" data-original-width="1031" height="119" src="https://1.bp.blogspot.com/-D-KxI9KmEhU/Wsv3xwY9XZI/AAAAAAAARSc/Nt16QntNeSAtQN0QZYoNER16YTOjcn8kgCLcBGAs/s320/%25D0%25B4%25D0%25BE%25D0%25B1%25D0%25B0%25D0%25B2%25D0%25BB%25D0%25B5%25D0%25BD%25D0%25BD%25D1%258B%25D0%25B5%25D1%2581%2B%2B%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D1%258B.jpg" title="Сайт добавлен для индексации" width="320" /></a></div></div><div style="text-align: center;"><br /></div>Блог о заработке был добавлен самый первый и уже есть данные: загружены почти все страницы и в поиске больше половины. В двух других блогах данные скоро появятся. Обратите внимание, ТИЦ остался без изменений у блога с адресом https.<br /><br /><div style="text-align: center;"><div style="text-align: justify;">В кабинете получите уведомление, что изменилось главное зеркало. По ссылке проверьте, что новое зеркало доступно для индексирования, и отдает роботу код 200.</div></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-4nc8q8x3Vas/Wsv5WFzFraI/AAAAAAAARSs/NChyE00mB3sqXLZQyhH18es9fL5GPr9MQCLcBGAs/s1600/%25D0%25BA%25D0%25BE%25D0%25B4%2B%25D0%25BE%25D1%2588%25D0%25B8%25D0%25B1%25D0%25BA%25D0%25B8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Получите уведомление изменилось главное зеркало по новому адресу" border="0" data-original-height="402" data-original-width="1016" height="126" src="https://4.bp.blogspot.com/-4nc8q8x3Vas/Wsv5WFzFraI/AAAAAAAARSs/NChyE00mB3sqXLZQyhH18es9fL5GPr9MQCLcBGAs/s320/%25D0%25BA%25D0%25BE%25D0%25B4%2B%25D0%25BE%25D1%2588%25D0%25B8%25D0%25B1%25D0%25BA%25D0%25B8.jpg" title="Уведомление об изменении главного зеркала" width="320" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;">Добавьте файл Sitemap для сайта с адресом https</div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-WoKbZjCzVsw/Wsv6TmvVT5I/AAAAAAAARS4/2xJxJHn6zdEkjKM7Iw7NpRGWnbMWLFgJgCLcBGAs/s1600/%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B5%25D0%25BC%25D0%25B0%25D0%25BF.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Пример файла sitemap для блога с адресом https." border="0" data-original-height="514" data-original-width="1125" height="146" src="https://2.bp.blogspot.com/-WoKbZjCzVsw/Wsv6TmvVT5I/AAAAAAAARS4/2xJxJHn6zdEkjKM7Iw7NpRGWnbMWLFgJgCLcBGAs/s320/%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B5%25D0%25BC%25D0%25B0%25D0%25BF.jpg" title="Добавить файл Sitemap" width="320" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: center;">Пока информация только для одного блога, статус ОК. Для двух других в обработке.<br /><br /><div style="text-align: justify;">В метрике, в настройках добавьте новый адрес блога, нажмите генерировать код и вставьте в шаблон обновленный код счетчика.</div></div></div><div style="text-align: justify;"><br /></div><div style="text-align: center;"><u>В кабинете вебмастера Mail.ru, также измените адрес своего блога</u></div><div style="text-align: center;"><br /></div><div class="bloknot7"><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-th7zP-nDhdg/Wr4-0oXuYXI/AAAAAAAARLU/rf1RnTcIKgITINt7fcI2qIjqk_BheW-JACLcBGAs/s1600/%25D0%25BC%25D1%2584%25D0%25B9%25D0%25B4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="В кабинете Mail.ru изменить адрес блога на HTTPS" border="0" data-original-height="351" data-original-width="789" height="142" src="https://2.bp.blogspot.com/-th7zP-nDhdg/Wr4-0oXuYXI/AAAAAAAARLU/rf1RnTcIKgITINt7fcI2qIjqk_BheW-JACLcBGAs/s320/%25D0%25BC%25D1%2584%25D0%25B9%25D0%25B4.jpg" title="Изменить адрес блога в Mail.ru" width="320" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: justify;">Идем настройки-сканирование-настройка URL. Поставьте отметку показывать HTTPS, сохраняем. Блог с новым адресом будет повторно проиндексирован, понадобится какое-то время. Редактируйте файл sitemap.xml.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">В <u>аккаунте BING</u> добавьте блог с адресом <span style="text-align: center;"><span style="color: #0c343d;">https://www.ozarabotkevceti.ru</span> и <span style="color: #0c343d;">sitemap.xml</span>. При переходе с социальных сетей я думаю проблем не должно быть, мы настроили перенаправление на https. Проверила, блоги с соц сетей открываются по протоколу HTTPS.</span><br /><span style="text-align: center;"><br /></span><span style="text-align: center;">В аккаунте AdSence добавьте новый адрес блога, и в настройках рекламных блоков клиентский канал-адрес с https, поиск-новый url адрес.</span><br /><br /><div style="text-align: center;"><span style="text-align: center;"><span style="text-align: justify;"><u>В аккаунте Google Analytics обновите адрес блога</u></span></span></div><div class="bloknot7"><div style="text-align: center;"><span style="text-align: center;"><span style="text-align: justify;"><br /></span></span></div><div class="separator" style="clear: both; text-align: center;"><span style="text-align: center;"><a href="https://3.bp.blogspot.com/-LAKXYzTAwXA/Wr6ECchR5kI/AAAAAAAARMU/pVz5k21HHOowKRCzvS5Eo2ZcBaU9S2D8gCLcBGAs/s1600/%25D0%25B0%25D0%25BD%25D0%25B0%25D0%25BB%25D0%25B8%25D1%2582%25D0%25B8%25D0%25BA.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Вставить обновленный код отслеживания" border="0" data-original-height="667" data-original-width="1145" height="186" src="https://3.bp.blogspot.com/-LAKXYzTAwXA/Wr6ECchR5kI/AAAAAAAARMU/pVz5k21HHOowKRCzvS5Eo2ZcBaU9S2D8gCLcBGAs/s320/%25D0%25B0%25D0%25BD%25D0%25B0%25D0%25BB%25D0%25B8%25D1%2582%25D0%25B8%25D0%25BA.jpg" title="Изменить адрес в Google Analytics " width="320" /></a></span></div></div><div style="text-align: center;"><span style="text-align: center;"><span style="text-align: justify;"><br /></span></span></div><div style="text-align: left;"><span style="text-align: center;"><span style="text-align: justify;">Слева администратор, выбираем блог-настройки ресурса. Измените адрес на https и сохраните. В шаблон вставьте новый код отслеживания.</span></span><br /><span style="text-align: center;"><span style="text-align: justify;"><br /></span></span> <br /><div style="text-align: justify;">Для социальных сетей: в facebook, twitter, google+ и других на всех фан страницах, и в своей личной информации измените адрес сайта.</div></div><div style="text-align: center;"><span style="text-align: center;"><span style="text-align: justify;"><br /></span></span></div></div><div style="text-align: justify;"><span style="text-align: center;">Основные рекомендации мы выполнили, далее будем бороться со смешанным контентом. У меня по адресу https открылась только главная страница и статические, в адресной строке зеленый замочек. Все другие посты открывались с серым замком, то есть подключение к сайту защищено не полностью. </span></div><div style="text-align: justify;"><span style="text-align: center;"><br /></span></div><div style="text-align: justify;"><span style="text-align: center;">Эта ошибка из-за смешанного контента, в следующей статье <a href="http://www.bdblogov.ru/2018/03/https-kak-ispravit-oshibki-smeshannogo-kontenta.html" target="_blank">HTTPS Как исправить ошибки смешанного контента</a> будем разбираться в её устранении, чтобы все страницы блога открывались с зеленым замочком в адресной строке браузера. </span><br /><span style="text-align: center;"><br /></span><span style="text-align: center;">Да, пока не забыла, с адресом https и персональным доменом у нас в статистике появится возможность настройки <u>не отслеживать свои просмотры страниц</u>, точно также, как и для блогов с доменом blogspot. </span><br /><span style="text-align: center;"><br /></span><span style="text-align: center;"><u>Рекомендую почитать:</u></span><br /><br /><ul><li><a href="https://www.bdblogov.ru/2017/05/Two-contact-form-for-blogger.html" target="_blank">Две контактных формы для блоггер</a>;</li><li><a href="https://www.bdblogov.ru/2013/06/blog-post.html" target="_blank">Как подтвердить права на блог в Яндексе, Webmoney</a>;</li><li><a href="https://www.bdblogov.ru/2015/09/add-blog-and-file-sitemap-in-the-office-webmaster-bing.html" target="_blank">Добавить Блог и файл Sitemap в кабинете вебмастера Bing</a>;</li><li><a href="https://www.bdblogov.ru/2019/11/ispravit-oshibki-kategorii-pokrytie-v-google-search-console.html" target="_blank">Исправить ошибки категории Покрытие в Google Search Console</a>;</li></ul></div></div></div></div></div><a href="https://text.ru/antiplagiat/5abe7970a1930" target="_blank"><img alt="Text.ru - 100.00%" border="0" height="15" src="https://text.ru/image/get/5abe7970a1930/101" title="Уникальность данного текста проверена через Text.ru" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com19tag:blogger.com,1999:blog-8142585837575624831.post-22843557467955782892021-02-28T19:56:00.000+02:002021-02-28T19:56:08.204+02:00Оформление горизонтальной линии HR с использованием CSS<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">Здравствуйте друзья и читатели. Сегодня я вернусь к оформлению горизонтальных линий. Для каждого варианта оформления пропишу стиль CSS. Читайте, реализуйте в своих блогах, пишите отзывы и пожелания. Также посмотрите мои ранние посты:<br /><br /></div><div style="text-align: justify;"></div><ul><li><a href="https://www.bdblogov.ru/2014/04/thedividing-line-to-text-with-setting-size-and-color.html" target="_blank">Разделительные линии для текста с настройкой размера и цвета</a>;</li><li><a href="https://www.bdblogov.ru/2014/05/frame-varying-thickness-borders-and-form-border.html" target="_blank">Рамки разной толщины границ и формы окантовки</a>;</li><li><a href="https://www.bdblogov.ru/2014/02/design-alignment-remove-under-cat-text-in-blog.html" target="_blank">Оформление, выравнивание, убрать под кат текст в блоге</a>;</li></ul><div style="text-align: center;">Начнем с самого простого оформления<br /><br /></div></div><hr /><div style="text-align: center;"><br /><span style="color: #0c343d;"><style>hr {border: 0; border-bottom: 7px dashed #03b4cc;background: #006400;}</style></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="9" data-original-width="651" height="8" src="https://2.bp.blogspot.com/-2Tok6HuPKNU/XBftVEXSiTI/AAAAAAAAR-A/FJL2LLPsAmwsm0RKkKObW8U4tbOtfBiCQCLcBGAs/s640/hr1.jpg" width="640" /></div><br /></div><div style="text-align: center;"><span style="color: #0c343d;"><style>hr {border: 0; border-bottom: 9px double #006400;background: #ff9900;}</style></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="17" data-original-width="871" height="11" src="https://3.bp.blogspot.com/-fPPTbiil3UE/XBgDB4YNxbI/AAAAAAAAR_o/MFCzX_RsRAsDuBmafdY9YdhJm-680siKQCLcBGAs/s640/hr12.jpg" width="640" /></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;"><span style="color: #0c343d;"><style>hr {border: 0; box-shadow: 0 0 10px 1px #03b4cc;}</style></span></div><br /><div style="text-align: justify;">Можно изменить цвет, форму и размер рамки. Стили CSS установить дизайн-добавить гаджет, сохраните внизу макета блога, или тема (шаблон) в разделе CSS выше строки <span style="color: #0c343d;"></b:skin></span>, только без тэга <span style="color: #0c343d;"><style></style></span>.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Далее, смотря где нужно установить линию: под заголовком, меню, над/под сообщением, подчеркнуть текст и.т.д, нажмите добавить гаджет HTML, в поле впишите <b><span style="color: #0c343d;"><hr></span></b>, сохраните. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Если нужно выделить линией текст или изображение в статье, в редакторе перейти в HTML и также вписать <b><span style="color: #0c343d;"><hr></span></b> в нужном месте текста.</div><div style="text-align: justify;"><br /></div><div style="text-align: center;">Добавим к линии треугольники: </div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img alt="Код CSS для вставки в шаблон" border="0" data-original-height="18" data-original-width="625" height="17" src="https://1.bp.blogspot.com/-HNfx80k5sSU/XBfz-H0Nr1I/AAAAAAAAR-Y/6vq3xKx5vJcXqEoV8yp-8w9u38PYzBSRQCLcBGAs/s640/hr4.jpg" title="Горизонтальная линия с двумя треугольниками" width="640" /></div><div style="text-align: center;"><br /></div><div style="height: 50px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><span style="color: #0c343d;"><style>hr {</span><br /><span style="color: #0c343d;">border: 0;</span><br /><span style="color: #0c343d;">border-bottom: 7px dashed #03b4cc;</span><br /><span style="color: #0c343d;">background: #006400;</span><br /><span style="color: #0c343d;">}</span><br /><span style="color: #0c343d;"> hr::after {</span><br /><span style="color: #0c343d;"> content: '';</span><br /><span style="color: #0c343d;"> position: absolute; /* Абсолютное позиционирование */</span><br /><span style="color: #0c343d;"> left: 20px; bottom: -20px; /* Положение треугольника */</span><br /><span style="color: #0c343d;"> border: 10px solid transparent; /* Прозрачные границы */</span><br /><span style="color: #0c343d;"> border-top: 10px solid #008000; /* Добавляем треугольник */</span><br /><span style="color: #0c343d;"> }</span><br /><span style="color: #0c343d;">hr::before {</span><br /><span style="color: #0c343d;"> content: '';</span><br /><span style="color: #0c343d;"> position: absolute; /* Абсолютное позиционирование */</span><br /><span style="color: #0c343d;"> right: 20px; bottom: -20px; /* Положение треугольника */</span><br /><span style="color: #0c343d;"> border: 10px solid transparent; /* Прозрачные границы */</span><br /><span style="color: #0c343d;"> border-top: 10px solid #008000; /* Добавляем треугольник */</span><br /><span style="color: #0c343d;"> }</span><br /><span style="color: #0c343d;"></style></span><br /><div style="text-align: justify;"><br /></div><div style="text-align: justify;"></div><br /></div><div style="text-align: justify;"><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div></div><div class="separator" style="clear: both; text-align: center;"><img alt="Код CSS для вставки" border="0" data-original-height="41" data-original-width="971" height="25" src="https://1.bp.blogspot.com/-iTtBQxpkuI4/XBf04O7wkuI/AAAAAAAAR-k/18pmuwzTQzYZ4y2P_XOmGIqBvahVhmurwCLcBGAs/s640/hr5.jpg" title="Горизонтальная линия с тенью и двумя треугольниками" width="640" /></div><div style="text-align: center;"><br /></div><div style="height: 50px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><span style="color: #0c343d;"><style></span><span style="color: #0c343d;">hr {</span><br /><span style="color: #0c343d;">border: 0;</span><br /><span style="color: #0c343d;">box-shadow: 0 0 10px 1px #006400;</span><br /><span style="color: #0c343d;">}</span><br /><span style="color: #0c343d;"> hr::after {</span><br /><span style="color: #0c343d;"> content: '';</span><br /><span style="color: #0c343d;"> position: absolute; /* Абсолютное позиционирование */</span><br /><span style="color: #0c343d;"> left: 20px; bottom: -20px; /* Положение треугольника */</span><br /><span style="color: #0c343d;"> border: 20px solid transparent; /* Прозрачные границы */</span><br /><span style="color: #0c343d;"> border-bottom: 20px solid #d7b56d; /* Добавляем треугольник */</span><br /><span style="color: #0c343d;"> }</span><br /><span style="color: #0c343d;"> hr::before {</span><br /><span style="color: #0c343d;"> content: '';</span><br /><span style="color: #0c343d;"> position: absolute; /* Абсолютное позиционирование */</span><br /><span style="color: #0c343d;"> right: 20px; bottom: -20px; /* Положение треугольника */</span><br /><span style="color: #0c343d;"> border: 20px solid transparent; /* Прозрачные границы */</span><br /><span style="color: #0c343d;"> border-bottom: 20px solid #d7b56d; /* Добавляем треугольник */</span><br /><span style="color: #0c343d;"> }</span><br /><span style="color: #0c343d;"></style></span></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img alt="Код CSS для вставки" border="0" data-original-height="44" data-original-width="917" height="28" src="https://2.bp.blogspot.com/-jKBazulMtAc/XBf2CyZJGXI/AAAAAAAAR-w/_x1LgVXLOxs8Sl00xiyXSZh3E65BIgEZQCLcBGAs/s640/hr6.jpg" title="Горизонтальная линия с тенью треугольником по центру" width="640" /></div><div style="text-align: center;"><br /></div><div style="height: 50px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><span style="color: #0c343d;"><style> hr {</span><br /><span style="color: #0c343d;">border: 0;</span><br /><span style="color: #0c343d;">box-shadow: 0 0 10px 1px #006400;</span><br /><span style="color: #0c343d;">}</span><br /><span style="color: #0c343d;">hr::after {</span><br /><span style="color: #0c343d;"> content: '';</span><br /><span style="color: #0c343d;"> position: absolute; /* Абсолютное позиционирование */</span><br /><span style="color: #0c343d;"> left:50% ; bottom: -20px; /* Положение треугольника */ </span><br /><span style="color: #0c343d;"> border: 20px solid transparent; /* Прозрачные границы */</span><br /><span style="color: #0c343d;"> border-bottom: 70px solid 04af37; border-top: 20px solid #03b4cc;</span><br /><span style="color: #0c343d;"> border-bottom: 70px solid 04af37; border-bottom: 20px solid green;</span><br /><span style="color: #0c343d;"> }</span><br /><span style="color: #0c343d;"></style></span><br /><br /></div><br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="34" data-original-width="879" height="24" src="https://1.bp.blogspot.com/-MJ8TmjGtvGw/XBf4G7wwPRI/AAAAAAAAR_E/TBJLc4egpAw-508_SHYSNSE2gt5OQhyrwCLcBGAs/s640/hr8.jpg" width="640" /></div><div class="separator" style="clear: both; text-align: center;"></div><br /><div style="height: 50px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><span style="color: #0c343d;"><style>hr {border: 0;box-shadow: 0 0 10px 1px #03b4cc;}</span><br /><span style="color: #0c343d;">hr::after { content: '';</span><br /><span style="color: #0c343d;"> position: absolute; /* Абсолютное позиционирование */</span><br /><span style="color: #0c343d;"> right: 20px; bottom: -20px; /* Положение треугольника */</span><br /><span style="color: #0c343d;"> border: 20px solid transparent; /* Прозрачные границы */</span><br /><span style="color: #0c343d;"> border-bottom: 20px solid #03b4cc; /* Добавляем треугольник */ }</style></span><br /><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Код CSS для вставки" border="0" data-original-height="39" data-original-width="875" height="27" src="https://3.bp.blogspot.com/-O-A3ztF_Yts/XBf6CdSuGCI/AAAAAAAAR_Q/dwGk8eYZHj0Gi0UXgEOFFc8sn_IiG1KaQCLcBGAs/s640/hr9.jpg" title="Горизонтальная линия с тенью и двумя слитыми треугольниками слева" width="640" /></div><br /><div style="height: 50px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><span style="color: #0c343d;"><style>hr {border: 0;box-shadow: 0 0 10px 1px #800080;}</span><br /><span style="color: #0c343d;"> hr::after { content: '';</span><br /><span style="color: #0c343d;"> position: absolute; /* Абсолютное позиционирование */</span><br /><span style="color: #0c343d;"> left: 20px; bottom: -20px; /* Положение треугольника */</span><br /><span style="color: #0c343d;"> border: 20px solid transparent; /* Прозрачные границы */</span><br /><span style="color: #0c343d;"> border-bottom: 70px solid 855e42; border-right: 20px solid #8b008b;</span><br /><span style="color: #0c343d;"> border-bottom: 70px solid 855e42; border-left: 20px solid #8b008b;}</style></span><br /><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Код CSS для вставки" border="0" data-original-height="40" data-original-width="878" height="27" src="https://2.bp.blogspot.com/-Mw9Xpcs0fVQ/XBf8PZ7EbAI/AAAAAAAAR_c/EAOJ3CjLNxQiHGAY0gJG_meNjn9GgEuZwCLcBGAs/s640/hr10.jpg" title="Горизонтальная линия с треугольником слева" width="640" /></div><br /><div style="height: 50px; margin-left: 0px; margin-top: 0px; overflow: auto; text-align: center; width: 100%;"><span style="color: #0c343d;"><style>hr {border: 0; border-bottom: 7px dashed #ff9900;background: #006400;}</span><br /><span style="color: #0c343d;">hr::after { content: '';</span><br /><span style="color: #0c343d;"> position: absolute; /* Абсолютное позиционирование */</span><br /><span style="color: #0c343d;"> left: 20px; bottom: -15px; /* Положение треугольника */</span><br /><span style="color: #0c343d;"> border: 20px solid transparent; /* Прозрачные границы */</span><br /><span style="color: #0c343d;"> border-left: 20px solid #006400; /* Добавляем треугольник */ }</style></span></div><br /><div style="text-align: justify;">Тестируйте свои идеи оформления. Задавайте вопросы, в блоге работает контактная форма и поле комментариев к Вашим услугам. Всего доброго.<br /><br />Выбрать цвет по ссылкам:<br /><br /><ul><li><a href="https://www.bdblogov.ru/2017/12/rgb-i-hex-kody-cvetov-nazvanie-cveta-na-anglijskom-yazyke.html" target="_blank">RGB и HEX коды цветов Название цвета на английском языке</a>;</li><li><a href="https://www.bdblogov.ru/2017/12/bezopasnye-kody-cvetov-dlya-ispolzovaniya-v-dizajne-sajta.html" target="_blank">Безопасные коды цветов для использования в дизайне сайта</a>;</li></ul></div><style>hr { border: 0; border-bottom: 7px dashed #03b4cc; background: #006400; }</style></div></div></div><a href="https://text.ru/antiplagiat/5c180ffc41ea3" target="_blank"><img alt="Text.ru - 100.00%" border="0" height="15" src="https://text.ru/image/get/5c180ffc41ea3/101" title="Уникальность данного текста проверена через Text.ru" width="80" /></a></div><div class="blogger-post-footer"><p>С Ув.<a href="https://www.bdblogov.ru">O.Protasova</a></p></div>Olga Protasovahttp://www.blogger.com/profile/11987624358154802969noreply@blogger.com2