Интересный вариант меню книжная полка

Всем, доброго времени суток. Подхватила меня "менюшная" тема и по сему опять предлагаю вам очередной вариант. Меню под названием книжная полка. Достаточно необычное по дизайну и при этом с массой полезных ссылок, которые можно в нём разместить. Я подглядела его на этом сайте. Что - то перекроила, подстроила и с радостью делюсь с  вами.



Хочу сразу оговориться. Код меню книжная полка без всяких сторонних библиотек и заумных скриптов. Но эффект впечатляет. Изначально я пробовала сделать 3 книги, результатом осталась не довольна . Потом взяла 6 книг и посчитала, что это перебор уже будет. Остановилась на варианте из 5. 

Вся фишка заключается в том, что при нажатии на нужную книгу, она снимается с полки и потом при подведении курсора, открывается страниччка с названием и содержанием.

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

Ну давайте уже посмотрите на тестовом блоге его в работе, что я тут расхваливаю.

Демонстрация

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

<style>
ul.topUL {padding:0; margin:30px; list-style:none; width:250px; margin:30px auto; position:relative; z-index:100; font-family:verdana, arial, sans-serif;}
ul.topUL > li {float:left; margin-right:1px; position:relative; z-index:10;}
ul.topUL > li a.p1 {display:block; width:43px; border:2px solid #333; border-width:1px 3px; height:248px; color:#fff; top:0; left:0; text-decoration:none; position:relative;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
ul.topUL > li > a span {display:block; width:43px; white-space:nowrap; position:absolute; left:0px; top:200px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
ul.topUL > li.b1 > a {background:#562; border-color:#340;
background: -moz-linear-gradient(0, #562, #784 50%, #562 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(50%, #784), color-stop(100%, #562));
}
ul.topUL > li.b2 > a {background:#366; border-color:#144;
background: -moz-linear-gradient(0, #366, #688 50%, #366 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(50%, #688), color-stop(100%, #366));
}
ul.topUL > li.b3 > a {background:#246; border-color:#024;
background: -moz-linear-gradient(0, #246, #579 50%, #246 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(50%, #579), color-stop(100%, #246));
}
ul.topUL > li.b4 > a {background:#741; border-color:#520;
background: -moz-linear-gradient(0, #741, #a74 50%, #741 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(50%, #a74), color-stop(100%, #741));
}
ul.topUL > li.b5 > a {background:#623; border-color:#401;
background: -moz-linear-gradient(0, #623, #956 50%, #623 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(50%, #956), color-stop(100%, #623));
}
ul.topUL ul.sub {padding:0; list-style:none; position:absolute; left:-51px; top:230px; width:0; overflow:hidden; height:250px; margin:0 0 20px 0;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;
transition-delay:0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul.topUL > li.b1 > ul {background:#784;}
ul.topUL > li.b2 > ul {background:#688;}
ul.topUL > li.b3 > ul {background:#579;}
ul.topUL > li.b4 > ul {background:#a74;}
ul.topUL > li.b5 > ul {background:#956;}
ul ul li.content {width:0; height:190px; position:absolute; left:0; top:10px; background:#eee; padding:40px 0 0 0; text-indent:20px; font-size:11px; color:#444; overflow:hidden;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul ul li b {display:block;}
ul ul li a {text-decoration:none; color:#444; padding-left:20px; line-height:20px;}
ul ul li a:hover {color:#000; text-decoration:underline;}
ul ul li.cover {width:0; height:220px; position:absolute; padding-top:30px; text-indent:10px; font-size:14px font-weight:bold; color:#fff; left:0; top:0; z-index:100; overflow:hidden; white-space:nowrap;}
ul ul li.cover i {font-weight:normal; font-style:normal; font-size:10px; line-height:40px; padding-left:10px;}
ul ul li.cover em {display:block; font-weight:normal; font-style:normal; margin-top:120px; font-size:10px; line-height:40px;}
ul.topUL > li.b1 li.cover {background:#562;
background: -moz-linear-gradient(0, #562, #784 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#562),color-stop(100%, #784));
}
ul.topUL > li.b2 li.cover {background:#366;
background: -moz-linear-gradient(0, #366, #688 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#366),color-stop(100%, #688));
}
ul.topUL > li.b3 li.cover {background:#246;background: -moz-linear-gradient(0, #246, #579 100%);  background: -webkit-gradient(linear, 0 0, 100% 0, from(#246),color-stop(100%, #579));
}
ul.topUL > li.b4 li.cover {background:#741;
background: -moz-linear-gradient(0, #741, #a74 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#741),color-stop(100%, #a74));
}
ul.topUL > li.b5 li.cover {background:#623;
background: -moz-linear-gradient(0, #623, #956 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#623),color-stop(100%, #956));
}
ul.topUL > li:hover {direction:ltr; z-index:100;}
ul.topUL > li:hover a.p1 {top:230px;left:-100px;
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul.topUL li:hover ul {width:200px;
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0.5s;
-o-transition-delay: .5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
ul.topUL li:hover ul li.cover {width:200px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
ul.topUL li:hover ul li.content {width:190px;
background: -moz-linear-gradient(0, #ddd, #fff 50%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), color-stop(50%, #fff));
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.topUL li:hover ul:hover {overflow:visible;}
ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}
ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}
ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}
ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}
ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}
ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}
ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}
ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}
ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}
ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}
ul.topUL li:hover ul:hover li.cover {left:-2px; width:1px; height:235px; top:-15px; padding-top:45px;
-o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
.shelf {clear:left; width:260px; height:20px; background:#620; margin:0 auto;
background: -moz-linear-gradient(90deg, #620, #950 20%, #620 30%);
  background: -webkit-gradient(linear, 0 100%, 0 0 , from(#620), color-stop(20%, #950), color-stop(30%, #620));
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
}
</style>
<ul class="topUL">
<li class="b1"><a class="p1" href="#"><span>всё про ярлыки</span></a>
<ul class="sub">
<li class="cover">Всё про ярлыки<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>статьи</b><br />
<a href="#">1. Гаджет ярлыки</a><br />
<a href="#">2. Дизайн гаджета ярлыки</a><br />
<a href="#">3. Как изменить или удалить ярлыки</a><br />
<a href="#">4. Меню для ярлыков</a><br />
<a href="#">5. Список ярлыков</a><br />
<a href="#">6. Всё об ярлыках</a><br />
</li>
</ul>
</li>
<li class="b2"><a class="p1" href="#"><span>гаджеты для блога</span></a>
<ul class="sub">
<li class="cover">гаджеты для блога<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>статьи</b><br />
<a href="#">1. Дизайн окна поиска</a><br />
<a href="#">2. Слайдер новостей</a><br />
<a href="#">3. Виджет последних постов</a><br />
<a href="#">4. Кнопка вверх-вниз</a><br />
<a href="#">5. Всплывающее окно</a><br />
<a href="#">6. Полоса прокрутки</a><br />
</li>
</ul>
</li>
<li class="b3"><a class="p1" href="#"><span>коды меню для блога</span></a>
<ul class="sub">
<li class="cover">Коды меню<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>статьи</b><br />
<a href="#">1. Выдвигаюшееся меню</a><br />
<a href="#">2. Меню - аккордеон</a><br />
<a href="#">3. Анимированное меню</a><br />
<a href="#">4. Фиксированное меню</a><br />
<a href="#">5. Вертикальное меню</a><br />
<a href="#">6. Круглое горизонтальное меню</a><br />
</li>
</ul>
</li>
<li class="b4"><a class="p1" href="#"><span>Страницы в блоге</span></a>
<ul class="sub">
<li class="cover">Страницы в блоге<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>Категории</b><br />
<a href="#">1. Карта блога</a><br />
<a href="#">2. Красивый фон страницы</a><br />
<a href="#">3. Защищённая паролем страница</a><br />
<a href="#">4. Оформление главной страницы</a><br />
<a href="#">5. О страницах блога</a><br />
</li>
</ul>
</li>
<li class="b5"><a class="p1" href="#"><span>всё про картинки блога</span></a>
<ul class="sub">
<li class="cover">всё про картинки<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>Статьи</b><br />
<a href="#">1. Блок картинок</a><br />
<a href="#">2. Слайдер последних постов</a><br />
<a href="#">3. Слайдер - аккордеон</a><br />
<a href="#">4. Галерея изображений</a><br />
<a href="#">5.Рамки для фотографий</a><br />
</li>
</ul>
</li>
</ul>
<div class="shelf"></div>


Участок кода, который отмечен цветом отвечает за стили полки. Можно поменять цвет, ширину, высоту. Или убрать совсем за ненадобностью. С высотой книг, не советую экспериментировать, так как нужно многие значения менять. Если уверены, можно с цветом книг поиграться. Но тут нужно обратить внимание, что помимо основного, например background:#246; border-color:#024; используется свойство gradient. Попробуйте, если есть желание, воспользоваться любым генератором градиента. Просто вбейте в поиск.

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

Можно добавлять ещё строки вида

 <a href="#">6. Полоса прокрутки</a><br />

но в разумных пределах

Приготовьте заранее их где - нибудь в блокноте. Установка меню самая элементарная - дизайн - гаджет HTML/JS.  Добавлять или убирать книги, дело хлопотное, тоже нужно много значений менять. Пусть уж так будет.

Возможно вам понравится слайдер в виде книги на страницах блога.

Вт и всё. До встречи и добра всем.

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

введите пожалуйста свой email :

53 комментария:

  1. Ой. как классно! Мне очень понравилась книжная полка-меню, Вика. Оригинальненько!

    ОтветитьУдалить
    Ответы
    1. Согласна, Люба. Оригинально и функционально. А главное код без лишнего всего.

      Удалить
    2. Вика, ты умничка! Классная менюшка, особенно для нас, библиотекарей. Пока еще не придумала, что мне туда всунуть. Вот думаю, может убрать полосочки названий статичных страниц и сделать вместо них твою кн. полку. По рубрикам мне много всего вбивать придется...

      Удалить
  2. Интересное меню в форме книжной полке! Оригинально!

    ОтветитьУдалить
    Ответы
    1. Да, Ирина. Его можно по всяким другим назначениям применять.

      Удалить
  3. Ой, какие красивые. Очень нравится! Попозже , наверняка, под что-то пригодится... Даже не видела никогда ничего такого))).

    ОтветитьУдалить
    Ответы
    1. Валерия, вот представила твой блог и подумала, можно по советам - рубрикам ссылки в одном месте вставить.

      Удалить
    2. Ага, надо будет подумать).

      Удалить
  4. Спасибо, Вика! Прикольная менюшка. Пригодится.

    ОтветитьУдалить
    Ответы
    1. Елена, а я и не сомневаюсь. Вы уж точно найдёте для него нужное применение.

      Удалить
  5. Спасибо,Вика,красиво то как! Буду разбираться)

    ОтветитьУдалить
    Ответы
    1. Зоя, тут самое нудное все эти ссылки прописать с названиями. А каков функционал. Но мне нравиттся оно и за то, что код совершенно лёгкий.

      Удалить
  6. Очень интересное и красивое меню

    ОтветитьУдалить
  7. Посмотрела на тестовом блоге - красота!

    ОтветитьУдалить
    Ответы
    1. Наталья, согласна, красивое меню и достаточно функциальное.

      Удалить
  8. Только бы не запутаться)

    ОтветитьУдалить
    Ответы
    1. Зоя, сначала подготовьте названия и адреса страниц куда будут вести ссылки. Попробуйте сначала изменить только одну книгу. Так легче и понятнее будет. Я в менюшке ссылки на свои статьи не указала, так для наглядности сделала.

      Удалить
  9. Очень симпатичное смотрится, но я пока вообще на рубрикации зависла. У меня мечта сделать рубрики . Не по ярлыкам, а именно несколько основных глобальных рубрик. Но как это осуществить на блогспоте не знаю. Буквально вчера нашла один такой блог на блогспоте. Но вот как они это сделали, не знаю

    ОтветитьУдалить
    Ответы
    1. Вика, не совсем поняла, что именно ты имеешь под словом рубрики. Дай ссылку на блог. посмотреть.

      Удалить
  10. Меню - моя слабость! Вроде уже все показал, но... Очень красивое. Может лучшее (по красоте) в Вашей коллекции!!!

    ОтветитьУдалить
  11. Меню - моя слабость! Вроде уже все показал, но... Очень красивое. Может лучшее (по красоте) в Вашей коллекции!!!

    ОтветитьУдалить
  12. Light Knight, спасибо. Мне приятно, что меню многим понравилось. Оригинальное и с возможностью разместить много ссылок.

    ОтветитьУдалить
  13. ВИКА, ну сделала я. Но.. там возникли проблемы в эстетике самого блога. :) В общем я отправлю тебе на почту письмо с моим кодом и опишу проблему именно мою. А так - замечательно!Пока выглядит так https://bibliomir83.blogspot.com/

    ОтветитьУдалить
  14. Ирина, отправляй письмо. Только я не совсем поняла как это сделать Мою книжную полку.

    ОтветитьУдалить
  15. Вика,"Полка" замечательная.По функционалу именно такое меню и искала.Но вставляю в гаджет, нажимаю сохранить, затем просмотр и этого меню нет, т.е. гаджет есть, но он пустой.Что делать?Спасибо.

    ОтветитьУдалить
  16. Простите,не пойму, почему опубликовалась часть сообщения.Меню не встает в гаджет.Я его вставляю,сохраняю,захожу редактировать,а там пусто.Что делать?Спасибо.

    ОтветитьУдалить
  17. Ольга, зашла на Ваш блог и не вижу ни одного сообщения, ни половины. И гаджетов нет. Только те что по умолчанию. Об авторе и окно поиска. Где увидеть это можно. Вы вставляете в гаджет HTML%2FJavascript?

    ОтветитьУдалить
    Ответы
    1. Сейчас заново создала гаджет.Да.Когда захожу в гаджет редактировать у меня только <style></style> прописано.(Для меня создание блога-это совершенно новое.Я впервые это создаю и планирую научиться пользоваться)Многое не понятно.Спасибо.

      Удалить
  18. Ольга в гаджете ничего не нужно редактировать. Только адреса страниц. Научитесь потихоньку. Скачайте мою книгу здесь.http://www.shpargalochki.ru/p/blog-page_19.html

    ОтветитьУдалить
  19. Я поняла.Только когда открываю гаджет, чтоб вписать адреса страниц, там пусто, только две треугольные скобки.Весь код куда-то исчез. Спасибо,"Шпаргалочки" ответили мне на многие вопросы.Но,подскажите пожалуйста, я не понимаю,пока,как добавлять свои сообщения.Например,в Ваше выпадающее меню?Есть у меня в нем вкладка меню "Каталог моих работ",я добавляю сюда пункт"Ежедневники".Я пишу статью про мужские ежедневники,добавляю в код адрес статьи в этот пункт. При нажатии на вкладку меню "Ежедневники" выводится статья про мужские ежедневники.А как в эту же вкладку"Ежедневники", добавить следующую статью про женские, третью про еще какие-нибудь ежедневники?

    ОтветитьУдалить
  20. Я поняла Вас. Прочитайте про страницы http://www.shpargalochki.ru/2014/04/o-stranicah-v-bloge.html
    и подстраницы http://www.shpargalochki.ru/2014/03/delaem-podstranicy-v-bloge.html

    Про ярлыки не забывайте. будут вопросы дайте пожалуйста ссылку на Ваш блог.

    ОтветитьУдалить
  21. Вика,здравствуйте! Подскажите пожалуйста,не могу понять в чем дело,я добавляю код,сохраняю,затем открываю посмотреть,а там вместо кода сохранилось только "стиль-стиль".Другие коды работают.Куда пропадает код после сохранения?

    ОтветитьУдалить
  22. Вообще почему то сообщение исказилось, я написала, я добавила код,сохранила его,затем открываю,а там только "стиль-стиль".Куда девается код?

    ОтветитьУдалить
    Ответы
    1. Серафима. Трудно понять что у Вас происходит. ссылку бы чтобы посмотреть. Какое сообщение у Вас исказилось, не пойму. Код этого меню вставляется в гаджет.

      Удалить
  23. Ответы
    1. Как где? На странице. Под строкой "скопируйте весь код целиком к себе в блокнот"

      Удалить
    2. Вика,нашла код,в этом браузере пропадает,в другом открылся.вставила всё в гаджет,но не показывает,показывает только слова стили-стили

      Удалить
  24. Ответы
    1. Вы, как было у Ольги и Серафимы Корф (комментатор выше)как потом выяснилось скопировали не весь а только часть кода, а именно только стили CSS. Что за браузер у вас такой, в котором код пропадает. Он заключён в полосу прокрутки.

      Удалить
    2. гугл у меня,видимо глюки были.Так а куда и как мне теперь вставить код в блог,чтоб полочку видно было?

      Удалить
  25. как-то у меня тут мои тексты странно переводит,как-будто я не по-русски пишу

    ОтветитьУдалить
    Ответы
    1. Монетка, опять Вы не внимательно читаете. Написано в статье - Установка меню самая элементарная - дизайн - гаджет HTML/JS. С текстами у вас скорее всего не настроена в браузере кодировка правильно UTF-8. Если сами не знаете что это и как настроить вызывайте знающего . Я
      у Вас поэтому и спросила какой браузер. Гугл это поисковая система.

      Удалить
    2. гугл я имела в виду гугл хром,есть и centbrowser на основе хрома.Что такое Код UTF-8.Если мне надо весь код вставить через шаблон,то над какой строчкой прописать?

      Удалить
  26. я добавляю в наджет в гаджет HTML / JS,у меня ситуация точно такая как у Серафимы Корф

    ОтветитьУдалить
    Ответы
    1. Вышлите мне на почту через форму связи выше код Ваш, который Вы добавляете. завтра уже посмотрю и отвечу

      Удалить
  27. Монетка. Вам не нужно ничего в шаблоне делать. Во всех шаблонах уже прописана кодировка UTF-8 , именно у вас строка 13 в шаблоне. Блоггер позаботился о правильной кодировке.Здесь с браузером что - то у вас. Проблема такая когда например ваш браузер и веб-страница содержат в себе текстовые данные в разных кодировках. Тогда вы на своем мониторе видит не текст, а какие-то непонятные (нечитаемые) символы.Поэтому и сказала Вам, что нужно знающего человека.Или пишите на форум. https://groups.google.com/forum/#!forum/blogoask. Недавно такая же фигня была у одной моей ПЧ. Потом она отписалась и сказала, что ей брат настроил браузер.

    ОтветитьУдалить
    Ответы
    1. я ещё утром написала всё подробно через форму связи,и код,и куда я вставляю,и скриншот отправила

      Удалить
  28. и на почту сейчас написала вам.

    ОтветитьУдалить
  29. Кода нет и скрина тоже. Отписалась в письме. Смотрите почту.

    ОтветитьУдалить
    Ответы
    1. я прислала ответ что получилось,с полочкой всё хорошо,только когда последние листы выскакивают,где статьи,текста не видно

      Удалить
  30. Я не у компьютера - на озере. Со смартфона тяжело писать. завтра посмотрю.

    ОтветитьУдалить
  31. Много вариантов прикольного оформления меню и,конечно,на вкус и цвет фломастеры разные,но на мой взгляд "Книжная полочка" самая оригинальная из всех,спасибо большое за красоту!

    ОтветитьУдалить
    Ответы
    1. Да, менюшки разные и вкусы разные. Пока оригинальна по своему. Кому - то нужны простые, кто - то динамичные любит.

      Удалить

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

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