Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)
Выполнил заявку одного читателя, переделал код меню. Изначально меню отображалось внизу страницы, теперь наверху. Я уже писал о том "Как убрать NavBar - панель навигации, узкую полоску вверху Блогспот, Blogger?" и благодаря этому меню, вы сможете использовать освободившееся место с пользой. Кроме того, меню отображается всегда сверху, несмотря на прокрутку страницы.

Устанавливается меню очень просто! В Дизайн - Добавить гаджет - HTML/JavaScript.
<style>
#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 45px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed; top: 0px;
text-shadow: 1px 1px 1px #000000;
width: 960px; z-index:999;
}
/* border curves */
#stickey_footer {
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("images/home_hover.png") 23px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#stickey_footer #social_icons {
float:right; /* social icons positions */
width:auto;
margin:-45px 15px 0px;
padding:0px;
overflow:hidden;
}
#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
</style>
<div id="stickey_footer">
<div id="stickey_footer">
<ul id="footer_menu">
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
</ul>
</div></div>
Меню можно интегрировать в любой дизайн изменив цвет. Красная маркировка - цвет меню. Желтая - цвет меню при наведении.
По заявкам читателей, публикую код меню с переводчиком!

<style>
#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 45px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed; top: 0px;
text-shadow: 1px 1px 1px #000000;
width: 960px; z-index:999;
}
/* border curves */
#stickey_footer {
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("images/home_hover.png") 23px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#google_translate_element {
float:right; /* social icons positions */
width:auto;
margin:8px 15px 0px;
padding:0px;
overflow:hidden;
}
#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
</style>
<div id="stickey_footer">
<div id="stickey_footer">
<ul id="footer_menu">
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
</ul><div id="google_translate_element"></div><div id='google_translate_element'></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'ru',
autoDisplay: 'true',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
</div></div>
По заявкам читателей публикую код для баннера или рисунка по центру блога (для важных объявлений).
<style>
#stickey_footer {
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 45px;
left: 50%;
margin: 0 auto 0 -300px;
padding: 0 10px;
position: fixed; top: 300px;
}
</style>
<div id="stickey_footer"><img border="0" height="69" src="http://3.bp.blogspot.com/-Z1yxE_YzLjw/UN-1OavIMxI/AAAAAAAACns/WLWM8SQ5wIs/s1600/cooltext868333624.png" width="490" />
</div>
Там, где выделено красным вставляете ваше изображение!
Еще один вариант, с прозрачным задним фоном.
Еще один вариант, с прозрачным задним фоном.
<style>
#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 transperent;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 29px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed; top: 0px;
text-shadow: 1px 1px 1px #000000;
width: 960px; z-index:999;
}
/* border curves */
#stickey_footer {
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 4px 104px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("images/home_hover.png") 23px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#stickey_footer #social_icons {
float:right; /* social icons positions */
width:auto;
margin:-45px 15px 0px;
padding:0px;
overflow:hidden;
}
#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
</style>
<div id="stickey_footer">
<div id="stickey_footer">
<ul id="footer_menu">
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
</ul>
</div></div>
И еще один вариант, с поиском по вашему блогу!
<style>
#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 45px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed; top: 0px;
text-shadow: 1px 1px 1px #000000;
width: 960px; z-index:999;
}
/* border curves */
#stickey_footer {
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("images/home_hover.png") 23px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#google_translate_element {
float:right; /* social icons positions */
width:auto;
margin:9px 15px 0px;
padding:0px;
overflow:hidden;
}
#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
</style>
<div id="stickey_footer">
<div id="stickey_footer">
<ul id="footer_menu">
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
</ul><div id="google_translate_element"></div><div id='google_translate_element'></div>
<center><form id="google_translate_element" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Введите слово для поиска..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Искать" type="submit"/></form></center>
</div></div>
67 коммент.:
https://www.blogger.com/profile/06388498851097916165
https://www.blogger.com/profile/04220829926597375580
https://www.blogger.com/profile/05200290792579467667
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 45px;
left: 50%;
margin: 0 auto 0 [hi="yellow"]-490px;[/hi]
padding: 0 10px;
https://www.blogger.com/profile/13746790384341325111
http://vvz.nw.ru/Lessons/HTML_Colors/HTMLcolors_HSB.htm
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/04220829926597375580
Благодарю.
https://www.blogger.com/profile/11813087520165450176
https://www.blogger.com/profile/13746790384341325111
Закинул на индексирование и рамблер через некоторое время написал что не может включить меня в top100rambler.
По их правилам это может быть на основании дублированного контента с другого ресурса. По сути все содержание блога - копипаст с сайта JAM STUDIO PRO. Но т.к. раньше создавал с нуля блоги, т.е. не пользуясь копипастом, то теперь не знаю чего ожидать, проиндексируют ли меня другие поисковики?
Если я добавлю разделы с уникальным контентом, это решит проблему? Дайте совет))
https://www.blogger.com/profile/08726457423694510321
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/08726457423694510321
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/08726457423694510321
https://www.blogger.com/profile/06368007800202606993
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/10130079213415496552
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/11075863940269306631
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/11075863940269306631
https://www.blogger.com/profile/13746790384341325111
Спасибо заранее за ответ
https://www.blogger.com/profile/05106932572444773407
<img border="0" height="69" src="http://3.bp.blogspot.com/-Z1yxE_YzLjw/UN-1OavIMxI/AAAAAAAACns/WLWM8SQ5wIs/s1600/cooltext868333624.png" width="490" /> нужно заменить!
Может быть, это вам подойдет?!
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/05106932572444773407
https://www.blogger.com/profile/05106932572444773407
Заранее спасибо!
https://www.blogger.com/profile/07583622032882146502
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/04422214255958505740
http://grikot.blogspot.ru/
https://www.blogger.com/profile/08735713880985819829
http://grikot.blogspot.ru/p/blog-page_18.html
https://www.blogger.com/profile/08735713880985819829
https://www.blogger.com/profile/13746790384341325111
http://grikot.blogspot.ru/
https://www.blogger.com/profile/08735713880985819829
https://www.blogger.com/profile/05940882462289895045
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/05940882462289895045
- высоту фона, что бы не залазил на заголовок и сделать его(фон) прозрачным;
- отцентрировать содержание меню по центру страницы.
Спасибо
http://markfrm.blogspot.com
https://www.blogger.com/profile/02832606819044616175
https://www.blogger.com/profile/13746790384341325111
- чтобы поменять задний план на прозрачный я не нашел код прозрачного;
- я так понимаю, что отцентрировать содержание меню и уменьшить высоту меню, уложив его в высоту бывшей панели навигации, не представляется возможным???
Спасибо
https://www.blogger.com/profile/02832606819044616175
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/02832606819044616175
https://www.blogger.com/profile/07943275012059095121
http://blogodel.com/2014/01/Vertikalnoe-menju-tipa-Akkordeon-dlja-Blogspot-Blogger.html
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/17686807339708026395
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/17686807339708026395
http://studying-blogin.blogspot.com/
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/09073617555035015396
https://www.blogger.com/profile/17176927991555127179
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/10746677298216171667
https://www.blogger.com/profile/08717849921394333089
https://www.blogger.com/profile/08717849921394333089
https://www.blogger.com/profile/06610632136179292377
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/13746790384341325111
http://travel-busines.blogspot.com/
https://www.blogger.com/profile/07298065286036397814
Зарание спасибо
а не подскажете, как вставить в этот код иконки на соц сети? а то я там в коде разглядела что-то связаное с "иконками соц. сетей", но не смогла их туда вставить. Или просто вставить графические ссылочки-картинки рядом с текстовыми ссылками?
https://www.blogger.com/profile/15839480981238966012
1 Меню горизонтальное в шапке блога например как у вас http://prntscr.com/9qxmwi или http://prntscr.com/9qxuqd
2 Как сделать так чтобы на главной странице меню, при скролинге вниз, не полностью статьи отображены были, а "Дальше" или "Читать далее" пример как тут http://prntscr.com/9qy1w9
3 Как сделать чтобы справа в блоге были кликабельные виджеты сообществ ФБ, ВК, Гугл Пример http://prntscr.com/9qyjag
Спасибо заранее.
https://www.blogger.com/profile/16258718242867720700
Ещё раз заранее спасибо
https://www.blogger.com/profile/16258718242867720700
http://www.заработок-у.рф/
https://www.blogger.com/profile/15049855827451291986
https://www.blogger.com/profile/16763618527220836097
https://www.blogger.com/profile/02126554512347171995
https://www.blogger.com/profile/15786013133380333807
Отправка комментария
Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!