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

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

Обычно это происходит в самом начале блоговедения, когда всё хочется попробовать. И мы совершенно не думаем о читателях и их удобстве. А уж как это смотрится некрасиво! Да и кому понравится бесконечно крутить колесо мыши и ждать когда же это безобразие закончится. Поверьте, посетитель пришёл за информацией и ему совершенно не нужны всякие часики, погода в вашем городе и прочее. Прочитайте об этом здесь.

В раскрывающейся панели есть много своих преимуществ. В закрытом виде панель практически не видна. При нажатии на яркую кнопку "открыть меню" посетителю предоставляется масса информации. Закрывается всё по желанию пользователя. В ней разместим-

1. Информацию об авторе с аватором профиля.
2. Окно поиска.
3. Ссылки на ярлыки (категории) или страницы блога.
4. Фому подписки на обновления блога.
5. Иконки социальных сетей.

Давайте уже смотреть о чём я веду речь.



Прежде чем приступить к установке такой выпадающей панели нужно спрятать или удалить навбар.

Поскольку панель работает на 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(http://1.bp.blogspot.com/-NUzxkktRzaU/Uv_kp1jV21I/AAAAAAAAGLo/KtKg7i17Ecc/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(http://4.bp.blogspot.com/-xlp0IDZdYO0/Uv_kY314jPI/AAAAAAAAGLQ/rViPl1Lb6AA/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(http://2.bp.blogspot.com/-5XawEIl5fZ4/Uv_kY6E8W2I/AAAAAAAAGLc/3gC41-rCLcE/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(http://3.bp.blogspot.com/-xRg5USmC76w/Uv_kY2BfO2I/AAAAAAAAGLU/ssNd4LjkegQ/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(http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/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(http://3.bp.blogspot.com/-dT-QzDtobHo/Uv_j8KyMIWI/AAAAAAAAGLE/dhWa0RKCLpI/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(http://4.bp.blogspot.com/-zAJKRnLzcmc/Uv_yHsaS9FI/AAAAAAAAGMc/1fbDDXwrbbY/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='http://3.bp.blogspot.com/-b3ZedGTPF8E/U_93L9eGS5I/AAAAAAAACns/XVM0P9UKy7w/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='http://4.bp.blogspot.com/-7yw8LAxUHDs/Uv_yeMsPAzI/AAAAAAAAGMk/FmmQs1-0onE/s1600/Facebook.png' style='padding:5px;' title='Follow on Facebook' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img src='http://2.bp.blogspot.com/-m3RbHRx_SrU/Uv_yefCLr6I/AAAAAAAAGMo/UkejpiUz5gk/s1600/RSS.png' style='padding:5px;' title='RSS Feed' width='32'/></a>
<a href=' Ваш адрес в Гугл+'><img src='http://4.bp.blogspot.com/-BDo6SRqhmMk/Uv_yefar_mI/AAAAAAAAGM4/lBmHhNcUceY/s1600/Google-plus.png' style='padding:5px;' title='Follow on Google' width='32'/></a>
<a href='Ваш адрес страницы в Твиттер'><img src='http://4.bp.blogspot.com/-DBsj0D214z8/Uv_yeiKl49I/AAAAAAAAGMw/xG8n2ZSVR98/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://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http://3.bp.blogspot.com/-b3ZedGTPF8E/U_93L9eGS5I/AAAAAAAACns/XVM0P9UKy7w/s44/*&container=blogger&gadget=a&rewriteMime=image/*


То что выделено красным, нужно удалить и добавить /jpg. Посмотрите как она должна выглядеть в коде 3.


С остальными ссылками и названиями, думаю, вы разберётесь. Как я говорила выше, вместо категорий можно дать ссылки на отдельные статьи или страницы блога. Поставьте адреса ваших страниц в соц. сетях. Прочитайте здесь как их узнать. 

Если всё правильно установили, нажимайте на просмотр. Всё, панель с массой информации будет аккуратно расположена в самом верху блога.

Спасибо всем и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Как интересно, полезная штучка и совсем не мешает, спасибо Вика за твои замечательные шпаргалки!

    ОтветитьУдалить
    Ответы
    1. Татьяна. И правда вариант интересный. тебе спасибо за комментарий.

      Удалить
  2. Привет, Вика. Наконец, и я решила заглянуть. Очень интересный вариант. Сразу даже и не заметила.

    ОтветитьУдалить
  3. Люба, спасибо что заглянула и что понравилось это решение.

    ОтветитьУдалить
  4. Ответы
    1. Пожалуйста. Рада, что понравилось.

      Удалить
  5. Добрый день, не работает. Видел такое меню на английском языке,ставил,все получалось,но сейчас не хочет

    ОтветитьУдалить
  6. Сергей, добрый. Но у меня на тестовом, куда ссылка дана - работает. Посмотреть бы, где не хочет работать.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск