Лучшие шаблоны html5 для Blogger

html5-blogger
Сегодня, когда язык микроразметки пользуется все большей популярностью, появились шаблоны для blogger на html5. И в этом обзоре вы найдете лучшие бесплатные шаблоны на html5 для blogspot.
Если в ваших планах не просто создание личного блога на Blogspot, а организация бизнеса в сети, то присмотритесь к шаблонам, предложенным ниже.

Вы можете выучить основные теги html5 и посмотреть лучшие сайты на html5.

Coming Soon
продажа бизнеса
Стильный шаблон для Blogger.com на html5. Однако мне не удалось загрузить его на тестовый блог из-за ошибки в коде. Может, удастся найти и исправить ошибку вам. Тогда у вас будет самый оригинальный шаблон на blogspot.
WebMag Blogger Template
blogger html5 шаблоны
Если вы хотите превратить ваш блог в интернет-магазин, то вы с успехом можете использовать шаблон, разработанный иностранными дизайнерами.
Особенности шаблона:

  1. Красивый слайдер в верхней части блога,
  2. Фиксированная панель навигации (Navbar) со ссылками на внутренние страницы – галерею, новинки, последние тренды), (Если вас интересуют шаблоны для blogger галерея, то перейдите по ссылке).
  3. Кнопки социальных закладок в верхней панели блога,
  4. Seo-friendly. Тема оптимизирована под поисковые системы.
  5. Похожие сообщения под каждой записью.

Landis
blogspot html5 темы
Это страница, информирующая о предстоящем запуске нового блога.
Siren
blogspot html5 шаблоны
Стильный шаблон на HTML5 с расположением постов на главной странице в виде галереи.
DCM Dark
blogger html5 шаблоны
Это интерактивная тема для Blogger на HTML5 с красивыми эффектами наведения для каждой записи и скроллинг-эффектом.
25 Pixel
blogspot html5 шаблоны
Креативная тема blogspot отлично подойдет для фотогалереи фотографа, художника и фотожурналистов.
Ubert
blogspot html5 шаблоны
Данная тема взята из шаблона wordpress. Простой, стильный шаблон для личного блога.
Spirit
blogspot html5 шаблоны
Спокойная новогодняя тема для blogger. Особенности: зимний фон и падающие снежинки при скроллинге страницы.
All Green
blogspot html5 шаблоны
Как следует из названия, в этом шаблоне преобладает зеленый цвет. Подойдет для блогов о комнатных растениях, экологии.
MXfluity Blogger Template
blogspot html5 шаблоны
Этот аккуратный макет подойдет для информационных и новостных блогов. Особенности дизайна:

  1. Горизонтальное выпадающее меню,
  2. Статьи расположены в виде галереи,
  3. Хлебные крошки,
  4. Похожие записи блога.

34 ответа к «Лучшие шаблоны html5 для Blogger»

  1. с удовольствием воспользовалась вашей подборкой и перевела блог на шаблон MXfluity Blogger Template, не могу нарадоваться!!! но пару дней спустя обнаружилось 2 огромных проблемы!! 1. невозможно отправить комментарии от пользователей Google (а эо бОльшая часть аудитории у меня)… 2. не могу вставить иконки соцсетей после каждого поста…

    Бьюсь с этими проблемами уже несколько дней, ничего не выходит(((

  2. beautybloom, попробовала прокомментировать запись с двух аккаунтов гугл — получилось с обоих. Если даже у вас возникают проблемы с комментированием, то шаблон здесь не при чем. Это скорее всего, один и багов blogger. У меня один из блогов уже несколько месяцев с шаблоном MXfluity Blogger Template, подобных проблем не возникало.

    Теперь про социальные иконки:
    для того, чтобы вставить социальные иконки в конце поста (они при этом не будут выводится на главной, в архивах и на страницах меток) в шаблоне MXfluity Blogger Template, нужно найти код:

    <div class='post-footer'> второй!!! по счету
    и вставить код:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>код ваших социальных иконок</b:if>

    сохраняйте изменения.
    Если что-нибудь не получится — пишите.

  3. Наталья, не верю своим глазам! спасибо большое за такой скорый и очень полезный ответ))) во-первых, кнопки соц сетей установились и прекрасно работают!

    во-вторых, увы, насчет комментариев — мне не один человек сказал, что не получается комментировать, да я и сама вчера пробовала с аккаунта мужа (набираю сообщение, жму отправить, ничего не публикуется, текст пропадает…). единственное совпадение тут — что у этих людей нет своего блога на блогспот, только почта gmail, но до смены шаблона все работало 🙁

    ну и логичный вопрос — можно что-нибудь сделать с этим багом вообще?? или только радикальные меры типа перехода на disqus и тп?

  4. beautybloom, опубликовала комментарий из аккаунта мужа. У него нет даже gmail, авторизацию в гугле проходит через стороннюю почту. Блогов у него тоже нет.
    Все комментарии публиковала к одной статье.
    Как бороться с багом — думаю, что здесь может помочь только время. Я видела, что ваш блог можно комментировать не авторизованным посетителям. Можно же выбирать строку Имя/URL, вписывать свое имя и отправлять комментарий. Если такой компромисс не устраивает, то тогда только менять систему комментирования (тот же disqus).

  5. Вопрос. Все решил с шаблоном, но есть одна проблема. Фотографии (миниатюры) не отображаются на главной. Только один раз получилось, самый первый пост. Уже все перепробовал ( http://www.inpravda.ru/

  6. Timongi, чтобы убрать черное меню в шаблоне MXfluity Blogger Template, нужно удалить код <nav id='nav'>…</nav> и весь код, который находится между этими тегами.

    Для того, чтобы изменить цвет, размер меню, нужно изменить код:
    #nav {
    font-weight: bold;
    background-color: #333;
    height: 35px;
    position: relative;
    z-index: 1;
    }

    За цвет панели отвечает background-color

    Я вижу миниатюры у вас на главной. Проблема решена?

  7. А у меня MXfluity Blogger Template стоял пару лет, а вчера проблемы начались — не показывает фото на главной в новых публикациях … Что за беда 🙁

  8. Светлана, во-первых, для того, чтобы отображались миниатюры на главной в шаблоне blogger, важно загружать фото в запись с компьютера (а не по ссылке из интернета). Т.е. картинки с яндекс.фоток, радикала и других фотохостингов не будут давать миниатюры. И второе, если вы загруили фото непосредственно через редактор записи blogspot, а миниатюры нет, то нужно отредактировать саму запись. Важно, чтобы ссылка на изображение имела вид: http://, а не https://….
    Правильный код изображения: <img src="http://…">
    Если код такой <img src="https://…">, то убираем "S" и приводим к правильному виду.

  9. Наташенька!!! Спасибо Вам огроменное!! Вы умничка!
    А я себе все глаза сломала, сравнивая два кода — вчерашний и старый, а вот S и не заметила лишнюю!!

  10. Подскажите пожалуйста, а как добавить иконки соц. сетей, если шаблон другой стоит? код такой же вставлять? Спасибо! Буду очень благодарна вам за помощь!

  11. Коды социальных сетей добавляют одни и те же, независимо от шаблона, платформы и пр. Различие лишь в выборе места расположения. Можете прочитать подробную статью про кнопки от pluso, а также через карту сайта или через поиск вы можете найти другие статьи про социальне кнопки, у меня их (статей) достаточно много по этой теме.

  12. Здравствуйте, Наталья.
    Я поставила шаблон MXfluity, изменила черный цвет в верхнем меню на белый, а цвет текста на черный, но никак не могу изменить цвет при наведении — при наведении на пункт меню текст становится серым, а фон вокруг черный. Подскажите пожалуйста , можно ли это изменить и если можно, то как?

  13. Марина, измените цвет фона на белый при наведении. Должно получиться так:
    #navinti ul a:hover{background-color:#fff}

  14. Нашла я строчку, что Вы написали, но у меня именно так все и стоит #navinti ul a:hover{background-color:#fff} , а при наведении все равно цвет черный

  15. Я с кодами, стилями и что там еще есть в шаблонах не знакома, и если хочу поменять цвет ищу через "Просмотр кода элемента" или в интернете.. Цвет меню вот поменяла благодаря Вашему совету, что выше написан, а как поменять цвет при наведении несколько дней никак не могла найти, а тут случайно натолкнулась. Вот эта строчка: #navinti li:hover > a{background-color:#e7f8e1} Я поменяла на св. зеленый (#e7f8e1) Может еще кому пригодится 🙂
    А Вам, Наталья, огромное спасибо за то, что так много полезного рассказываете 🙂

  16. Спасибо, Марина, за полезное дополнение
    . По шаблону MXfluity часто задают вопросы. Думаю, что ваш комментарий может оказаться полезным.

  17. Добрый день. Подскажите по какой причине в шаблон MXfluity Blogger Template не вставляется после статьи виджет "похожие сообщения", как в других блогах? Кстати, также не вставлялись кнопки соц. сетей, ваша подсказка в комментах очень помогла. Мой сайт http://maman-lima.com/ Спасибо заранее за помощь.

  18. Lili4ka, в редакторе кода блога найдите отрезок кода <div class='jump-link'>, после этого кода немного ниже вы увидите отрезок кода: <div class='post-footer'>, перед которым вам нужно вставить код похожих сообщений:
    <!—[relposts]—>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:post.labels'>
    <div class='relposts'>

    <div id='relpostsdataheader'></div>
    <div id='relpostsdatalisting'></div>

    <script type='text/javascript'>
    var relposts_prioDelta = 0;
    var relposts_labelPrio = {
    var relposts_excludeDups = true
    'javascript' : 2,
    'перевод' : 2
    };
    </script>
    <script type='text/javascript'>
    relposts_sourceLabels = []
    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    relposts_sourceLabels.push(&quot;<data:label.name/>&quot;);
    </b:loop>
    </b:loop>
    </script>
    <script type='text/javascript' src='http://izhurnalscripts.googlecode.com/svn/trunk/relposts.js'></script&gt;
    </div>
    </b:if>
    </b:if>
    <!—[/relposts]—>

    Сохраните изменения. Внимание! Похожие сообщения будут показываться лишь под теми сообщениями, если есть сообщения с такими же ярлыками.

  19. Наталья, можно еще вопрос: были ли в вашем блоге публикации на тему "как сделать карту блога (содержание)". Меня интересует скрипт, который будет корректно работать в блоге где более 500 статей. Заранее благодарю.

  20. Я рада, что все получилось. Статьи про карту сайта нет, т.е. ее нужно переписывать, так как коды уже не работают (
    Если вас устраивает карта, как у меня, то могу написать ее код (более 500 статей).

  21. У моей карты такой код:
    <link href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css&quot; media="screen" rel="stylesheet" type="text/css"></link>
    <script src="http://blogtoc-cometa.googlecode.com/files/blogtoc_wa.js"&gt;
    </script>
    <script src="http://www.mycrib.ru/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"&gt;
    </script>

    Измените ссылку на свой домен.

  22. Спасибо. В чем может быть причина, что в карту попадают не все статьи. С моей картой было тоже самое. Поставила вашу, тоже статьи не все.

  23. И правда — не все. Я и не замечала ранее. Что ж, поищу решение, если узнаю — сообщу в этой ветке комментариев.

  24. Наталья, здравствуйте!
    Снова обращаюсь к Вам за помощью по этому шаблону!
    У меня в блоге http://www.tildashop.ru показывает только 10 последних сообщений на страницах, установка другого количества в настройках блога ничего не дает — стоит 20, но показывает все равно 10. Я просмотрела код, т.к. в нем видать где-то установлено кол-во сообщений, но не нашла, где именно. Ну не нашла и не нашла — кнопка Следующая страница выполняла свою функцию и кому интересно всегда смогут нажать ее.
    Но, тут кнопка работать перестала по какой-то причине и встал опять вопрос о количестве сообщений, опять просмотрела код — не нашла где эти установки, полазила по инету — везде только настройки в Дизайне блога, которые у меня не срабатывают.
    Вот и хочу спросить — может Вы поможете мне разобраться с кодом? Я то в этой области не большой специалист, кое что подправила под себя, но вот со страницами ни как не могу разобраться.

    С уважением, Светлана.

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

  26. Наталья, спасибо!
    Если нужно, я вышлю Вам код шаблона, а, хотя он же есть у Вас — скачать же можно с этого ресурса 🙂

  27. Светлана С., покопалась в коде, но не нашла того места, которое бы отвечало за вывод количества сообщений на главной, но я смотрю — у вас установлен скрипт скроллинга постов.

  28. Наталья, ну это наверное уже в исхолнике было — я не ставила, а из за него может быть ограниченно кол-во сообщений?

  29. Светлана, это не из-за него, так как у меня на одном из блогов стоит этот шаблон, и на нем долгое время вообще скролинга не было, а изменить количество постов все равно нельзя.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *