Фиксированная панель в нижней части блога

Доброго времени суток, дорогие друзья. Как сделать в нижней части блога фиксированную панель, которая всегда будет перед глазами при прокрутке страницы вверх. На этой панели можно установить иконки социальных сетей, форму связи, подписку, переводчик- всё что посчитаете нужным.

У меня на этом блоге, таким образом, внизу отображено содержание блога. По тому же принципу и сегодняшний вариант стикер-панели. Только ещё небольшое дополнение к ней. Если посетителя она раздражает её можно закрыть кнопкой, расположенной справа.  

Как это выглядит можно посмотреть на тестовом блоге здесь.

Реализуется это в 3 шага. Предлагаю, как всегда скопировать по очереди 3 кода в блокнот. Сделать свои настройки и потом уже перейти к установке их непосредственно в шаблоне блога. Обязательно сделайте резервное копирование.

Шаг 1. Идём в админпанель-вкладка шаблон - изменить HTML. Находим закрывающийся тег </head> и над ним устанавливаем код JavaScript.

<script type='text/javascript'>
//<![CDATA[
var toolbar_blogger = new Array();
var toolbar_clear = new Array();
function toolbarFloat(toolb) {
toolbar_blogger[toolbar_blogger.length] = this;
var ftrpointer = eval(toolbar_blogger.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.toolbsrc = document.all? document.all[toolb] : document.getElementById(toolb);
this.toolbsrc.height = this.toolbsrc.offsetHeight;
this.toolbheight = this.cmode.clientHeight;
this.toolboffset = toolbGetOffsetY(toolbar_blogger[toolbpointer]);
var toolbbar = 'toolbar_clear['+toolbpointer+'] = setInterval("toolbarFloatInit(toolbar_blogger['+toolbpointer+'])",1);';
toolbbar = toolbbar;
eval(toolbbar);
}
function toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
while ( parentOffset != null ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return toolbTotOffset;
}
function toolbarFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("custom-toolbar").style.visibility = "hidden";
}
//]]>
</script>

Шаг 2. Там же в шаблоне ищем закрывающийся тег </body>. Над ним устанавливаем код  HTML.

<div id='custom-toolbar'>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIRTbv4f9toFnqeXjfyzFL_N31k19goWqS1mF4f2lb-WIhlQBQ6GgFYzE70sek_794Yub6vx_BXSQwO410euZOJ6V7ZX9VINyrCqAR5ehMpVGISzCuZavxm7TfRsCQiyKSjEXGXlPBCQ09/s1600/close_button.png' title='Close' width='17'/>
<table border='0' cellpadding='2'>
<tr>
<td style='padding-left:30px; padding-right:50px;'><form action='/search' method='get' target='_blank'>
<input id='form-query' name='q' placeholder='что будем искать?' value=''/> <input height='30' src='http://4.bp.blogspot.com/-0E8mG3lxork/ThDRCMmwhqI/AAAAAAAABB8/mOo0_rPITME/s1600/search+%25282%2529.png' style='padding: 0; vertical-align: bottom;' type='image' width='30'/></form><span style='font-weight:bold;'/> </td>

<td style='padding-left:20px;'><a href='http://www.facebook.com/адрес страницы' title=' Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaT7SuVXXraMIA5lXX6eY70fBNbCmGTbB8Lemk7CiNhU_zUmeUvnCoH5tGt857tclQS_TunzVBgYcqlaaJUvH5-nVTNN4amuHbcSf-V_a9jDVKYwv8dl_MDSrEdRlibtllcDEkkS5JR6tA/s1600/facebook-icon.png'/></a></td>

<td><a href='http://twitter.com/адрес страницы' title='Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnKbvvc0yG9jajiwup8tcXxGIeeRPr7nBprEjZ5-zs6rh5X5XJnT6XG1q5InEVJSTYQosLQAQddfxKVdcD6RKL-z1cJpLC8tJimYtIxXpb5aTG7t0iZsDBYhQH-G4Q6oega9sonZ9vbTOG/s1600/twitter-icon.png'/></a></td>

<td style='padding-left:40px; padding-top: 5px;'><a class='twitter-share-button' data-count='horizontal' data-lang='en' href='http://twitter.com/share' title='Publish on Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>

<td><a href='http://www.facebook.com/sharer.php' name='fb_share' title='Publish on Facebook' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>

  <td style='padding-left:60px;'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
              <img alt='feedburner' src='http://www.dreamflymarketing.com/wp-content/themes/SimplePress/images/feedburner.png' style='margin-bottom:-9px;' title='feedburner'/>
              <input class='required email' name='email' onblur='if (this.value == &apos;&apos;) this.value = &apos;Enter email here !!&apos;;' onclick='if (this.value == &apos;Enter email here !!&apos;) this.value = &apos;&apos;;' type='text' value='Введите ваш email...'/>
              <input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='подписаться '/>
              <input name='uri' type='hidden' value='shpargalochkiru'/>
              <input name='loc' type='hidden' value='en_US'/>
            </form></td>
</tr>
</table>
</div>

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

<td><a href='http://twitter.com/адрес страницы' title='Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnKbvvc0yG9jajiwup8tcXxGIeeRPr7nBprEjZ5-zs6rh5X5XJnT6XG1q5InEVJSTYQosLQAQddfxKVdcD6RKL-z1cJpLC8tJimYtIxXpb5aTG7t0iZsDBYhQH-G4Q6oega9sonZ9vbTOG/s1600/twitter-icon.png'/></a></td>

Шаг 3. Там же в шаблоне найдите строку ]]></b:skin> и над ней устанавливаем код CSS.

#custom-toolbar {
background:#BB0E0E;
overflow: auto;
position: fixed;
background:#BB0E0E; repeat-x scroll 0 bottom;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
height: 33px;
margin: 0 auto;
width: 100%;
bottom:0px;
right:0;
}
.close-toolbar {
float: right;
margin-top:6px;
padding-right: 10px;
cursor: pointer;
}
.search-text {
color: #D1D1D1;
text-align: center;
border-radius: 10px;
}

.google_translate:hover img {
filter:alpha(opacity=0.90);
-moz-opacity: 0.90;
opacity: 0.90;
border:0;
}

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

И ещё совсем маленькое добавление. Отдельный пост писать не хочется. Вместо такой панельки можно отобразить внизу навбар, который обычно расположен сверху. Тут уж совсем всё проще простого. В шаблоне блога перед строкой ]]></b:skin> добавить

#navbar-iframe {
  bottom: 0;
  position:fixed;
}

И ваш навбар так же будет в нижней части.

А у меня всё сегодня. Удачи всем. Спасибо, что читаете мои шпаргалки. До встречи.

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

Введите Ваш email