Раскрывающаяся панель в верхней части блога.

Раскрывающаяся и закрывающаяся при клике на кнопку панель, может освободить много места в сайдбаре . В раскрывающейся панели есть много своих преимуществ. В закрытом виде панель практически не видна. При нажатии на яркую кнопку "открыть меню" посетителю предоставляется масса информации. Закрывается всё по желанию пользователя. В ней разместим: 1. Информацию об авторе с аватором профиля. 2. Окно поиска. 3. Ссылки на ярлыки (категории) или страницы блога. 4. Фому подписки на обновления блога. 5. Иконки социальных сетей. Прежде чем приступить к установке такой выпадающей панели нужно спрятать или удалить навбар(http://www.shpargalochki.ru/2015/04/kak-sprjatat-udalit-navbar-v-blogger.html). Поскольку панель работает на jquery нам нужно внести дополнения непосредственно в шаблон блога. Шаг 1. Идём во вкладку шаблон и делаем резервное копирование. Нажимаем клавишу изменить HTML. Находим в шаблоне закрывающийся тег </head>. Сразу над ним устанавливаем первый код. 1 код. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&quot;#open&quot;).click(function(){ $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;); }); $(&quot;#close&quot;).click(function(){ $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;); }); $(&quot;#toggle a&quot;).click(function () { $(&quot;#toggle a&quot;).toggle(); }); });</script> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> body#layout #slide-top-panel {display:none !important;} </style> </b:if> Шаг 2. Стили CSS. Копируем следующий код и вставляем его сразу под первым. 2 код. <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> body#layout #slide-top-panel {display:none !important;} </style> </b:if> <style> .clearfix:after {content: &quot;.&quot;;display: block;height: 0;clear: both;visibility: hidden;} .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;} .clearfix {height: 1%;} .clearfix {display: block;} .tab { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzBAoaqyml4Uhy_3yjY1YgAPaggftbfodBNQf2D8txnjegwVOobighQcLwstKplSOEKL9eyvk3xeYK-gI29pxcs0Yd-KghOb19fSDeU53gVvMONuK9SgKyrNbBbc0eODJaHLroQDie5se/s1600/sliding-panel-tab-0.png) repeat-x 0 0; height: 42px; position: relative; top: 0; z-index: 999; } .tab ul.login { display: block; position: relative; float: right; clear: right; height: 45px; width: auto; font-weight: bold; line-height: 42px; margin: 0; right: 150px; color: white; font-size: 90%; text-align: center; } .tab ul.login li.left { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi21uGhTpInDK1weqa5LsOsbE8iSzGeHbefR16Us_U0RBiUBMsl_mWJwZDoIF0dAvd9xwbSQ7FdVD1NwWxCiLr9kC3VWAxjDwUp2lZ77WyVBdWliFic17k1r56LLfOpLlJh1RQnqovTZKsv/s1600/sliding-panel-tab-left.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li.right { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzeK5Owl-bMdN3ePaZx7aWPg9w2uEzH315uBORY27-H_-yH1Wf28fnxg2ytjcawcXmkhYiuifKy0cEgeUFU59swh5wzai7z12hPArViXrBQiWwhgkdlFAPCA0Y3nEV5IeLzI7rhXe5hbxG/s1600/sliding-panel-tab-right.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 42px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOppTKUPmiPyXz7RxJJRYZS5KR8nb3cHZ8YAkDmw6sjzjFYe5y_G_Os6Gm5nuXVQjEwooS7fsBfGKvB0JxsZSAaWsk1cttrYP2Uex99g8uNfoUanFFA8WbR5yoiKJNwi4E3glRzqJ-yEP_/s1600/sliding-panel-tab.png) repeat-x 0 0; } .tab ul.login li a {color: #15ADFF;} .tab ul.login li a:hover {color: #FFFFFF;} .tab .sep {color:#414141} .tab a.open, .tab a.close { height: 20px; line-height: 20px !important; padding-left: 30px !important; cursor: pointer; display: block; width: 100px; position: relative; top: 11px; } .tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-xfTgSM2a5tsp0LQwZB5eWqwXAyRqWyjNtWpQHiOKRDcBEhsk3pu2TypxDKSRiLc8SvwvLnBID5xBtuBG_HSCiUkUsmtlyMDC_47oBHwOz2R932mHjtlfiFhkhW3arTIM3nmZxXbVnggM/s1600/button-open.png) no-repeat left 0;} .tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTtC5CeP5FscTB6MbnkcrfSkatErAsqXPIrSjEOKmuTY_VvV0BYN475WkAQ4NTE_38dy_daPDvFlTZZo9gi8TJC9kUjVeCD1_Mpux1U8MrXp4iEJ5XubFbToOOPXPjpXjA2K7ZKDaDn4r/s1600/button-close.png) no-repeat left 0;} .tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-xfTgSM2a5tsp0LQwZB5eWqwXAyRqWyjNtWpQHiOKRDcBEhsk3pu2TypxDKSRiLc8SvwvLnBID5xBtuBG_HSCiUkUsmtlyMDC_47oBHwOz2R932mHjtlfiFhkhW3arTIM3nmZxXbVnggM/s1600/button-open.png) no-repeat left -19px;} .tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTtC5CeP5FscTB6MbnkcrfSkatErAsqXPIrSjEOKmuTY_VvV0BYN475WkAQ4NTE_38dy_daPDvFlTZZo9gi8TJC9kUjVeCD1_Mpux1U8MrXp4iEJ5XubFbToOOPXPjpXjA2K7ZKDaDn4r/s1600/button-close.png) no-repeat left -19px;} #slide-top-panel { position: absolute; top: 0; width: 100%; z-index: 999; text-align: center; margin-left: auto; margin-right: auto; } #panel { width: 100%; height: 230px;  color: #999999; background: #272727; overflow: hidden; position: relative; z-index: 3; display: none; } #panel h4 { font-size: 18px; color: #F2F2F2; text-align: center; padding: 5px 0 10px; margin: 0; } #panel p { margin: 5px 0; padding: 0px; } #panel a { text-decoration: none; color: #15ADFF; } #panel a:hover { color: white; } #panel .content { width: 960px; margin: 0 auto; padding-top: 15px; text-align: left; font-size: 0.95em; } #panel .content .left { width: 280px; float: left; padding: 0 15px; border-left: 1px solid #333; } #panel .content .right { border-right: 1px solid #333; } #panel .content form { margin: 0 0 10px 0; } #panel .content label { float: left; padding-top: 8px; clear: both; width: 280px; display: block; } #panel .content input.field { border: 1px #1A1A1A solid; background: #545454; border-radius: 10px; margin-right: 5px; margin-top: 4px; width: 200px; color: white; height: 18px; } #panel .content input:focus.field { background: #7F7F7F; } #panel .content input.button-register { display: block; clear: both; height: 24px; width: 94px; color: white; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFlTCd_aXb4ZpUNNZ9CoZbLLZV83K_XfqchbTCpzo9-i2_7JwostCmdQYUK7H_Zg4Y_34YG0KFGW25EV29OarooYzOx7NohUWrp2jhBN21YlkOC6QEIY6z7eFZOEg2jGYsX3qbSPIdysd4/s1600/button-register.png) no-repeat 0 0; text-align: center; cursor: pointer; border: none; font-weight: bold; margin: 10px auto; } #sliding-panel { width: 160px; float: left; } #sliding-panel2 { width: 160px; float: right; } #sliding-panel ul, #sliding-panel2 ul{ font-family: Arial, Helvetica, sans-serif; list-style-type:none; margin:0; padding:0; } #sliding-panel ul li a, #sliding-panel2 ul li a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXQEqNVsIRAgS3SI8KkEPnTv7WCpjDwSSfzmmyr4A5YKgbEU8ISB-xCNPFVZj4ej2FtAaZo7LkxvohspL2Od7feg48PmvxnctNdIRyvQMC9edKkgI-NgUwB4N54euLnMEpFaH8OWhKlh0e/s1600/star-bullet.png) center left no-repeat; margin:0; padding:3px 3px 3px 18px; } #sliding-panel li, #sliding-panel2 li { display: inline; } #sliding-panel a, #sliding-panel2 a{ color: #999999; text-decoration: none; font-size: 12px; display: block; padding: 3px; width: 160px; } #sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited { color: #999999; text-decoration: none; } #sliding-panel a:hover, #sliding-panel2 a:hover { color: #FFFFFF; } #search-box22{ margin-top: 20px; } #search-box22 input[type=&quot;text&quot;] { float: right; background: 10px 6px #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #777; width: 160px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search-box22 input[type=&quot;text&quot;]:focus { width: 190px; } .about-author { width: 100%; text-transform: none; margin-top: 15px; } .authorbox { overflow: hidden; padding: 0; width: 100%; } .authorbox .authorinfo { } .authorbox .authorinfo img { float: left; margin: 4px 10px 4px 5px; border-radius: 100%; width: 20%; background: #222; padding: 5px; } .authorbox .authorinfo p { margin: 0; padding: 0 5px; text-align: left; } .authorinfo p a { text-decoration:none; } .authorbox h3 { margin: 0; display: inline-block; } h3.boxtitle { font-size: 14px; } </style> По необходимости измените высоту панели height: 230px; и цвет фона   background: #272727; . Изменить в этом коде можно практически всё. Шаг 3. Следующий код, где все div- ы,  лучше сначала скопировать в блокнот, чтобы заменить все названия ссылок на свои. Ниже разберём. Когда внесёте ваши изменения, там же в шаблоне находим тег <body>. Посмотрите ещё раз скриншот, она чуть ниже тега </head>. В некоторых шаблонах вместо <body> есть строка такого вида - <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>, Сразу после неё устанавливайте готовый 3 код. <!-- старт панельl --> <div id='slide-top-panel'> <div id='panel'> <div class='content clearfix'> <!-- первый блок --> <div class='left' style='width:240px !important'> <h4>Добро пожаловать!</h4> <div class='about-author'> <div class='authorbox'>   <div class='authorinfo'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGNxv3V5NNxz-LXLQtuGnXe1xeG7HiKzMVeDXlS7Dkl1RwUzeIMH6CpGS3qGanmi6DLJAh5rafBOYukvjrcSLBiYYvlQnbsS13nrFJA58_xqTRrEsYwoyfWTq1XAZugM57c-4S6j1I_dTK/s44/jpg '/> <h3 class='boxtitle'>Об авторе</h3> <p>Привет, меня зовут Виктория. Мне очень приятно что Вы заглянули в мои шпаргалки .</p> </div> </div> </div> <p align='right' style='margin-top: 10px;'>Что хотите найти?</p> <form action='/search' id='search-box22' method='get'>   <input name='q' placeholder='Поиск...' size='40' type='text'/> </form> </div> <!-- второй блок --> <div class='left' style='width:320px !important'> <h4>Категории</h4> <div id='sliding-panel'> <ul> <li><a href=' URLстраницы'>Категории 1</a></li> <li><a href='URLстраницы'>Категории 2</a></li> <li><a href='URLстраницы'>Категории 3</a></li> <li><a href='URLстраницы'>Категории  4</a></li> <li><a href='URLстраницы'>Категории  5</a></li> <li><a href='URLстраницы'>Категории  6</a></li> <li><a href='URLстраницы'>Категории  7</a></li> </ul> </div> <div id='sliding-panel2'> <ul> <li><a href='URLстраницы'>Категории  1</a></li> <li><a href='URLстраницы'>Категории   2</a></li> <li><a href='URLстраницы'>Категории  3</a></li> <li><a href='URLстраницы'>Категории  4</a></li> <li><a href='URLстраницы'>Категории  5</a></li> <li><a href='URLстраницы'>Категории  6</a></li> <li><a href='URLстраницы'>Категории  7</a></li> </ul> </div> </div> <!-- третий блок --> <div align='center' class='left right'> <h4>Форма подписки!</h4> <p style='padding:0px 30px;'>Получайте новые статьи блога прямо на почту! Введите пожалуйста свой Email</p> <form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'> <input class='field' name='email' type='text/' value=''/> <input name='uri' type='hidden' value='Feed-Name'/> <input name='lang' type='hidden' value='en_EN'/> <input class='button-register' type='submit' value='Подписаться'/></form> <div align='center' style='clear: both;'> <a href='Ваш адрес страницы в Фейсбук'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiygt6TU0PVoEuDbOS3MNhl26Z3eHR9Q66ddc05o5mCmF_ds5PUUJP0ZVFoFZXncPeVSj8tcCveK5WaEFoKobeXfzt4Bajx-3GufeVtUC22ArOkKJHS6QQDtf-i541kcDJeYWZxtYF1d9Q0/s1600/Facebook.png' style='padding:5px;' title='Follow on Facebook' width='32'/></a> <a href='http://blog-address.blogspot.com/atom.xml'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLheP2CqpmXNLYFbN-vKZTD1lzxMRXdyFtuovJVPX7oAYDJiUpDu-eSnMQmFwvIMJIzTSwLi-3VB7vlwfVPGGMtlrAYIXzq8hmt3JtHbfNdcTQyg_JHflwxYFmb-UfbEXX9eScDhygMPkH/s1600/RSS.png' style='padding:5px;' title='RSS Feed' width='32'/></a> <a href=' Ваш адрес в Гугл+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJcMyaqe7h0dlH7BS3q2Msty3AeeEEeJKW-9JeSrugI8rahbHuy8_PPbOg7rJWfDYUddhH6p_ZSXmAc5oO5j6aRY3uV6Py5VgXWx8nidLj4WZZfVZ5zA5vA6YuyXX0ojV5ZbKK5er-MG_Q/s1600/Google-plus.png' style='padding:5px;' title='Follow on Google' width='32'/></a> <a href='Ваш адрес страницы в Твиттер'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMTzFk46zce7DXVv6qrPuVL30ET-JP7GVKF_6gT1OpWtycXL1k4UoRJW3_OEenZGQdMe3fF1JwxOA9YTxrrj0n36TvSBmrlJ14dEca2PWf1ibwD942KHNZsfT2Xk6MS3X8nuF4OdqkIa6v/s1600/Twitter.png' style='padding:5px;' title='Follow on Twitter' width='32'/></a> </div> </div> </div> </div> <div class='tab'> <ul class='login'> <li class='left'/> <li>Привет!</li> <li class='sep'>|</li> <li id='toggle'> <a class='open' href='#' id='open'>Открыть меню</a> <a class='close' href='#' id='close' style='display: none;'>Закрыть меню</a> </li> <li class='right'/> </ul> </div> </div> Зеленым цветом  адрес фотографии профиля. Кликните по картинке правой кнопкой мыши и из предложенных опций выбираем копировать URL. Копируем. Ссылка будет примерно такого вида https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGNxv3V5NNxz-LXLQtuGnXe1xeG7HiKzMVeDXlS7Dkl1RwUzeIMH6CpGS3qGanmi6DLJAh5rafBOYukvjrcSLBiYYvlQnbsS13nrFJA58_xqTRrEsYwoyfWTq1XAZugM57c-4S6j1I_dTK//*&container=blogger&gadget=a&rewriteMime=image/* То что выделено красным, нужно удалить и добавить /jpg. Посмотрите как она должна выглядеть в коде 3. Вместо категорий можно дать ссылки на отдельные статьи или страницы блога. Поставьте адреса ваших страниц в соц. сетях. источник: http://www.shpargalochki.ru/2017/02/raskryvayushayasya-panel-v-verhnej-chasti-bloga.html