Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)
Устанавливается меню очень просто! В Дизайн - Добавить гаджет - 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpqzzNFnLCSVwAoanph-wlmJEsmms7MlPN539pynVYWbbfNF2z4av2LbrUsxGGxqmPnhszu-mK3QnJlkqlDWhzio87IYmNWu-D-HlCqSm0Z0-1I1fEhKk5JxX8hoCPebbMJdBLcJHRx2I/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>
Приветствую вас, дорогие друзья! Посмотрел я свои записи, а оказалось нету у меня поста, о том,
как сделать карту для блога(
содержание,
все статьи). В этом нам поможет скрипт на основе ленты фида вашего блога, он автоматически генерирует заголовки всех постов. Сама страница оглавления очень удобна для читателя, решившего ознакомиться с содержанием блога, так как все статьи разделены по ярлыкам.
Я считаю, что у каждого должен быть выбор. Поэтому сегодня, я покажу три вида карты для вашего блога:
1. Простая
карта блога, подойдёт для тех у кого мало сообщений.
2.
Содержание блога с эффектом аккордеона, для блогов с большим количеством статей.
3.
Стильная карта блога, тоже самое, у кого много постов.
Простая карта, новые сообщения помечаются значком
New !!
 |
| Карта блога |
Для того чтобы установить такую карту в блог, нужно создать статическую страницу и в режиме HTML вставить такой скрипт:
2 | <script src="###/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> |
Заменяем решетки на URL адрес вашего блога. Готово.
Как создать карту блога с эффектом аккордеона для Blogger
 |
| Карта блога с эффектом аккордеона |
Для такой карты блога, вставляем такой вот скрипт:
3 | <script src="###/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script> |
4 | <script type="text/javascript"> |
Меняем решетки на адрес блога. Всё. Скрипт - abu-farhan
Следующая карта блога, мне нравится больше всего.
 |
| Стильная карта блога для блоггер |
Здесь так же как и у карты с эффектом аккордеона, при нажатии на крестик определённого ярлыка, открываются все названия сообщений. Очень удобно, занимает меньше места.
Такую карту делаем с помощью такого скрипта:
4 | <script src='###/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc'></script> |
5 | <script type='text/javascript'> |
Вместо решеток вставляем url адрес вашего блога. Готово. Всем пока. Удачи.
Скрипт - Bloggerzbible
С уважением, Сергей - блог
Все для Blogger
Приветствую вас, дорогой читатель! Как Вы заметили, в блоге произошли значительные изменения. Долго я не решался сменить шаблон и вот свершилось. Прошу вас дорогие друзья, высказать своё мнение по поводу нового облика блога
Всё для Blogger. Замечания, предложения, всё будет учтено.
Сегодня я предлагаю вам убрать виджет "Архив блога" с боковой панели и вывести весь архив на статическую страницу. Благодаря этой операции, мы тем самым освободим драгоценное место на сайдбаре, для более полезного виджета или рекламного блока.Статическая страница с архивом, смотрится очень красиво и более удобна для посетителей.
 |
| Архив на статической странице |
Виджет "Архив на статической странице" показывает все данные: дату, названия поста, список сообщений. Ссылку на архив можно вывести в меню блога, как у меня. Прошу ознакомиться и если понравилось, тогда в перёд, к установке.
Как вывести архив блога на статическую страницу в blogger
Для этого заходим в панель инструментов Blogger - Страницы - Создать страницу. Даём название и в режиме HTML вставляем скрипт:
03 | var month_name = ["January", "February", "March", "April", "May","June", "July", "August", "September", "October", "November", "December"]; |
04 | function blog_archive_callback(json){ |
05 | if(!("entry" in json.feed)) return; |
06 | for(var i=0;i<json.feed.entry.length;i++){ |
07 | var e=json.feed.entry[i]; |
08 | var y=e.published.$t.substring(0, 4); |
09 | var m=e.published.$t.substring(5, 7); |
10 | var d=e.published.$t.substring(8, 10); |
12 | for(var j=0;j<e.link.length;j++){ |
13 | if(e.link[j].rel=="alternate"){ |
19 | if(typeof blog_archive[y]=="undefined") blog_archive[y]=[]; |
20 | if(typeof blog_archive[y][m]=="undefined") blog_archive[y][m]=[]; |
21 | if(typeof blog_archive[y][m][d]=="undefined") blog_archive[y][m][d]=[]; |
22 | blog_archive[y][m][d].push("<a href='"+h+"'>"+e.title.$t+"</a>"); |
25 | function blog_archive_display(){ |
26 | var years = []; for ( y in blog_archive ) years.push(y); |
27 | if(years.length<1) return; |
30 | for(var y=0;y<years.length;y++){ |
32 | var months = []; for ( m in blog_archive[year] ) months.push(m); |
33 | if(months.length<1) continue; |
36 | for(var m=0;m<months.length;m++){ |
37 | var month = months[m]; |
38 | document.write("<p><b><a href='/"+ year +"_"+ month +"_01_archive.html'>"+ month_name[parseInt(month)-1] +" "+ year +"</a></b></p>"); |
39 | var days = []; for ( d in blog_archive[year][month] ) days.push(d); |
40 | if(days.length<1) continue; |
43 | document.write("<ul>"); |
44 | for(var d=0;d<days.length;d++){ |
46 | if(blog_archive[year][month][day].length<1) continue; |
47 | for(var i in blog_archive[year][month][day]) { |
48 | document.write("<li>["+ day +"] "+ blog_archive[year][month][day][i] +"</li>"); |
51 | document.write("</ul>"); |
57 | <script src="#####/feeds/posts/default?max-results=999&alt=json-in-script&callback=blog_archive_callback"></script> |
59 | <script>blog_archive_display();</script> |
В коде скрипта меняем решетки
#### на URL адрес вашего блога. Опубликовываем страницу. Всё. Готово. Всего доброго. До новых встреч.
Приветствую вас, дорогие друзья! Посмотрел я свои записи, а оказалось нету у меня поста, о том, как сделать карту для блога(содержание, все статьи). В этом нам поможет скрипт на основе ленты фида вашего блога, он автоматически генерирует заголовки всех постов. Сама страница оглавления очень удобна для читателя, решившего ознакомиться с содержанием блога, так как все статьи разделены по ярлыкам.
Немає коментарів:
Дописати коментар