2013-09-17

Лучшие шаблоны 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 комментария :

beautybloom комментирует...

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

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

Иванова Наталья комментирует...

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

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

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

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

beautybloom комментирует...

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

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

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

Иванова Наталья комментирует...

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

Timongi комментирует...

Вопрос по MXfluity Blogger Template

А как убрать/поменять верхнее меню? (черная полоска)

Timongi комментирует...

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

Иванова Наталья комментирует...

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

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

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

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

Светлана С. комментирует...

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

Иванова Наталья комментирует...

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

Светлана С. комментирует...

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

Иванова Наталья комментирует...

Светлана, я рада, что все получилось)

Анонимный комментирует...

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

Иванова Наталья комментирует...

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

Марина комментирует...

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

Иванова Наталья комментирует...

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

Марина комментирует...

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

Марина комментирует...

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

Иванова Наталья комментирует...

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

Lili4ka комментирует...

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

Lili4ka комментирует...

К предыдущему комментарию. Виджет хотела взять отсюда http://newblogi.ru/2011/09/blog-post_08.html

Иванова Наталья комментирует...

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>
</div>
</b:if>
</b:if>
<!--[/relposts]-->

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

Lili4ka комментирует...

Спасибо ОГРОМНОЕ. Все получилось лучше некуда.

Lili4ka комментирует...

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

Иванова Наталья комментирует...

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

Lili4ka комментирует...

До, конечно, было бы не плохо.

Иванова Наталья комментирует...

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

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

Lili4ka комментирует...

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

Иванова Наталья комментирует...

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

Светлана С. комментирует...

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

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

Иванова Наталья комментирует...

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

Светлана С. комментирует...

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

Иванова Наталья комментирует...

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

Светлана С. комментирует...

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

Иванова Наталья комментирует...

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

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности