Как вставить таблицу в Blogger

Таблица для Blogger WordPress Joomla

Хотя редактор блоггера имеет вполне боеспособный набор инструментов, все же есть и такие инструменты, которые на данный момент отсутствуют в нем и таблица одна из них. Где, где, а в поисковой системе Google она очень даже ценится, так же, как картинки, видео и другие графические элементы. Впрочем добавить в статью таблицу не составит никакого труда, ее можно перенести из того же Microsoft Word. Но вот, как сделать так, чтобы она отображалась нормально не только на компьютерах, но и на мобильных устройствах? В этом нам поможет адаптивный дизайн, пример на картинке ниже:

Таблица с адаптивным дизайном

Переходим к установке:
Данный вариант подойдет для любой платформы, будь то Blogger, Wordpress, Joomla и т.д.. Я покажу ее пример на Blogger - Посмотреть демо.

1). Сперва нужно разместить CSS код, для этого откройте HTML редактор своего сайта.

html редактор

Затем после закрывающего тега */]]></b:skin> вставьте код:

<style type='text/css'>
table {border: 1px solid #eee;border-collapse: collapse;margin: 0;padding: 0;width: 100%;color:#555;}
table caption {font-size: 1.5em;margin: .25em 0 .75em;}
table tr {background: #eee;border: 1px solid #ccc;padding: .35em;}
table th,table td {border-right: 1px solid #ccc!important;text-align: center;border:0;padding: 3px;}
table th {font-size: .85em;letter-spacing: .1em;text-transform: uppercase;background: #ddd;}
table td img {text-align: center;}
@media screen and (max-width: 600px) {
table {border: 0;}
table caption {font-size: 1.3em;}
table thead {display: none;}
table tr {border-bottom: 3px solid #ccc;display: block;margin-bottom: .725em;}
table td {border-bottom: 1px solid #ccc;display: block;font-size: .8em;text-align: right;}
table td:before {content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}
table td:last-child {border-bottom: 0;}}
</style>

Сохраните тему.

2). Теперь добавим HTML структуру. Создайте новое сообщение (пост) перейдите на вкладку HTML и вставьте следующий код:

<table>
<caption>Caption Table</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name" scope="row">David Beckham</td>
<td data-label="Address">Manchester, England</td>
<td data-label="Email">davidbe@example.com</td>
<td data-label="Phone Number">021-0101099189</td>
</tr>
<tr>
<td data-label="Name" scope="row">Mike Tyson</td>
<td data-label="Address">California, US</td> 
<td data-label="Email">miketys@example.com</td>
<td data-label="Phone Number">021-9198199189</td>
</tr>
<tr>
<td data-label="Name" scope="row">Justin Bieber</td>
<td data-label="Address">New York, US</td>
<td data-label="Email">justinbr@example.com</td>
<td data-label="Phone Number">021-2929292929</td>
</tr>
<tr>
<td data-label="Name" scope="row">Selena Gomez</td>
<td data-label="Address">Texas, US</td>
<td data-label="Email">sel.gom@example.com</td>
<td data-label="Phone Number">021-8191991919</td>
</tr>
</tbody>
</table>

Замените названия ячеек на свои и опубликуйте сообщение.

Вот и все, если возникнут вопросы задавайте в комментариях.

Как поднять страницу сайта в поиске за счет другой страницы

Как поднять страницу сайта в поиске за счет другой страницы

Если нужно улучшить рейтинг определенной страницы своего сайта и тем самым поднять ее в поисковой выдаче, тогда вам может помочь 301 редирект и другая страница вашего сайта похожая по смыслу. Как это работает сейчас узнаете.

Как настроить 301 редирект

В предыдущем посте я рассказывал, как убрать в blogger ошибку 404. Именно исходя из этого материала вы узнаете, как в Blogger настроить 301 редирект между двумя страницами вашего сайта. Настройка 301 редиректа для WordPress и Joomla.

Выбор страниц

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

Google расширенный поиск

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

Вот и все дело осталось за малым, осуществляем 301 редирект между этими публикациями, ждем когда поисковой бот проиндексирует сайт и обновится поисковая выдача.

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

Clean HTML: шаблон для Blogger

Clean HTML шаблон для blogger

Clean HTML шаблон для blogger

Один из посетителей спрашивал, где можно достать чистый шаблон без лишних скриптов, библиотек jquery, bootstrap и т.д.. Вот предоставляем вам для пользования именно такой шаблон. Единственное в нем подключены шрифты гугла и fontawesome.

Демо
Скачать

Google расширяет мета тег Description в поисковой выдаче

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

Google расширил мета тег Description

Самая крупная поисковая система значительно расширила количество символов отображаемых в мета теге Description. Ранее это количество составляло не более 145 символов, соответственно такое же количество отображалось в поисковой выдаче, а может на несколько символов больше (примерно 180), честно говоря никогда не подсчитывал. C недавних пор область Описания статьи в поиске значительно увеличилась. И теперь я насчитал там около 280 символов.

расширенный мета тег Description

Сперва Гугл никак не трактовал данное решение. Но позже, все таки появился комментарий от одного из специалистов, Джона Мюллера. Он рекомендует сеошникам использовать данное нововведение, если те в свою очередь хотят повлиять на отображения мета тега в поисковой выдаче. Ведь, если поисковой робот сочтет его недостаточно полным, тогда в сниппете он отобразит кусок текста из поста, вместо его описания.



Что это меняет? Теперь у вас есть больше маневров для того, чтобы составить более эффективное описание статьи и тем самым повысить ее рейтинг в поиске и привлекательность для пользователей.

Виджет postratings, рейтинг постов и публикаций сайта Blogger, WordPress, Joomla

Виджет postratings, рейтинг постов и публикаций сайта Blogger, WordPress, Joomla

Наконец-то нашелся более менее достойный виджет рейтинга постов - postratings. Для WordPress и Joomla конечно не проблема установить такой плагин, а вот для Blogger подобрать виджет рейтинга публикаций с звездами было довольно непросто. Выглядит он точно так же, как на картинке выше.

Особенности виджета:
  • Легкий скрипт, с функцией async (сперва загружается контент сайта). 
  • Можно добавлять к рейтингу, комментарии, кнопки соцсетей и настроить все это в единый механизм. 
  • Сохранения результатов выбора посетителя осуществляется за счет куки, ip адреса или же определяется по его аккаунту в социальной сети, который он использовал для голосования.

Установка виджета:
1) Зарегистрируйтесь на сайте https://widgetpack.com.
2) Введите название для сайта и адрес своего домена.
3) Откройте главное меню, выберите нужный вариант в нашем случае это рейтинг Rating - Install.
4) Скопируйте скрипт и добавьте в нужную область своего сайта. Чтобы не отображалась ссылка на сайт удалите последнюю строку скрипта.

Megashop шаблон для blogger интернет магазин на русском

Megashop шаблон blogger интернет магазин на русском


Mega Shop - адаптивный шаблон Blogger с удивительным, чистым и современным интерфейсом, который идеально подходит для ваших интернет-магазинов моды, бутика, магазина одежды, торгового центра и других типов магазинов.

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

Демо
Приобрести полную SEO оптимизированную версию на русском языке

Blogger - шаблон Clean для креативных дизайнерских сайтов

Clean тема для blogger 2017



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

Демо
Скачать 

Blogger - шаблон Best, адаптивная тема blogspot

Best тема blogger женский сайт



Best шаблон blogger, классический стиль.

Тематика: Стиль, мода, женские блоги и дневники.

Демо
Скачать

Perfection шаблон blogger с встроенным слайдером

Perfection шаблон blogger слайдер

Perfection - это шаблон для Blogger, наиболее подходящий для сайтов, которые предоставляют новости о технологиях, моде, спорте, видео, здоровом образе жизни, путешествиях и т. д.

Демо 
Скачать

Сайты на Wix отзывы пользователей, плюсы и минусы, тарифы

Перед написанием статьи "сайты на Wix отзывы" немного насобирал материалов по теме и вот, что по этому поводу думают те пользователи, которые уже испытали конструктор Викс.

Wix отзывы пользователей



    Основная категория пользователей платформы

    Конструктор Wix выбирают только те, кто ничего не знает о сайтостроении. В основном это люди, которым нужно сделать блог, интернет магазин или одностраничный сайт. Их выбор понятен, поскольку сам конструктор действительно очень прост. Для настройки виджетов не нужно влезать в HTML редактор, чтобы добавить или изменить нужный код. Достаточно выбрать виджет из общего списка и перетащить его в нужную область.
    Редактор

    Ограниченный функционал

    Возможно кто-то уже понял, что используя CMS Wix возможности вашего сайта будут существенно ограничены, все из-за отсутствия доступа к HTML кодам сайта. Есть конечно много виджетов и гаджетов, но не все бесплатные.

    Продвижение в поисковых системах

    Если говорить о бесплатном плане, тогда у вас не получится продвинуть сайт в поисковых системах Google, Яндекса и т.д.. Больше шансов у вас появится с одним из премиум планов, ведь тогда, вы хоть сможете обзавестись нормальным доменом. Но и тут не все так гладко, о важных составляющих каждого сайта таких, как файлы sitemap и robots.txt нигде, ничего не указано, как загружать и есть ли вообще такая возможность. Еще увидел раздел под названием SEO-мастер, в принципе говорит о нужных вещах, но все они касаются только главной страницы и Обо мне.

    SEO руководитель


    Основные минусы

    Очень маленький выбор шаблонов для сайта.
    Ограниченный функционал.
    Бесплатный тариф не пригоден для продвижения в поисковых системах.
    Высокие цены на хостинг и домен, сравниваем тарифы Wix с добротным хостинг провайдером Hostinger:
    hostinger тарифы
    hostinger тарифы

    Wix тарифы
    Wix тарифы

    Отмечу, что как таковой стоимости домена Wix нет, то есть она не указана. На всех хостингах за домен нужно платить раз в год. Здесь же просто указана общая сумма за хостинг и домен. Еще после перехода на страницу покупки например тарифного плана Connect Domain цена возрастает с 4 до 6 долларов в месяц.

    Плюсы

    Самый главный плюс платформы заключается в ее простоте. Если вам нужно сделать простой блог, дневник чисто для себя, чтоб друзьям показывать, или одностраничный сайт Визитку, Landing, и лить на них трафик из социальных сетей рекламных партнерок, тогда Wix безусловно справиться с этим.

    Мнение автора статьи

    Я считаю, что лучше использовать для создания сайтов и блогов такие конструкторы, как WordPress, Joomla и Blogger. Особенно тем, кому нужно бесплатно или сэкономить рекомендую Blogger. Ну, а Wix это неплохой опыт для новичков, чтобы двигаться дальше. 

    Blogger как вставить картинку в сообщение

    Как добавить картинку в Blogger


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

    1. В Админ панели создайте новое сообщение или страницу.
    2. В верхней части редактора кликните по иконке Вставить изображение.
    3. В новом окне кликните по кнопке Выбрать файлы.
    4. Выберите нужные картинки на своем ПК, чтобы загрузить их в тело поста.  

    Так же не забывайте задавать картинкам описание.

    Если возникли сложности смотрите видео.

    Theblogger бесплатный шаблон для Blogger

    Theblogger стильный шаблон для блоггер - blogspot

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

    Скачать TheBlogger

    Демо \ Скачать шаблон

    NewsPro бесплатный шаблон для blogger, политика

    pronews шаблон для blogger политика 2017

    NewsPro Блог / Журнал / Газета, который дает вам инструменты, необходимые для написания и редактирования статей с определенной легкостью. Сфокусировавшись на снижении частоты отказов, увеличивая экспозицию рекламы, эта тема позволит вашим посетителям просматривать больше контента, одновременно увеличивая доход от рекламы! Если вы ищете шаблон блоггера в стиле журнала, это лучший вариант для вас.

    Скачать NewsPro


    Демо \ Скачать шаблон

    Шаблоны blogger для фотографа, blogspot темы

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

    Fabulous

    Fabulous  
    Демо \ Скачать 
    Является шаблоном для блоггеров с отзывчивым дизайном. Он прост в дизайне, идеально подходит для различных целей, хотя он ориентирован на фотографов и тех, кто использует портфолио для отображения своих прошлых и будущих работ.

    Photosout

    Photosout
    Демо \ Скачать 
    Адаптивный блог для тех, кто хочет продемонстрировать свою творческую работу и создать большой опыт работы с пользователями. От путешественников до фотографов.  Пусть пользователи ощутят вашу личность с первой страницы, которую они посетили. Посты с эффектом параллакса, есть фоновые изображения и текст над ними.

    Shine

    shine шаблон blogger для фотографов
    Демо \ Скачать 
    Shine - это чистая, отзывчивая и единственная тема блогера, которая позволяет вам рассказать свои мысли и истории со стилем. Она адаптивна для любых устройств. Shine прост в установке и настройке. Он предназначен для фотографии, личных блогов, стиля и моды, портфолио и других творческих и дизайнерских сайтов или блогов.

    FeaturedFeatured blogger template  

    Демо \ Скачать

    Deep Sky

    deep sky  
    Демо \ Скачать
    Потрясающая тема оснащенная слайдером на главной странице и в похожих постах. Красивый и стильный дизайн. Новые виджеты Подписки и Формы Связи.

    Карта сайта, файлы sitemap для Blogger 2018

    файлы sitemap для Blogger

    Для чего нужна карта сайта

    Хорошая и качественная карта сайта является неотъемлемой частью поисковой оптимизации каждого сайта или блога. Она преподносит простой способ для владельцев сайтов отображать их содержимое в различных поисковых системах.

    Есть отличные новости относительно файлов Sitemap для Blogger. Если у вас блог, работающий на платформе Blogger, вам больше не нужно беспокоиться о создании и обновлении пользовательской карты сайта. Теперь система автоматически создаст карту сайта в корневом каталоге, исключая необходимость использовать сторонние сервисы.

    Автоматические файлы Sitemap

    Вам больше не нужно заниматься самостоятельной отправкой карты сайта в Google Webmaster Tools. Теперь Google автоматически создаст карту сайта для вашего блога на Blogger непосредственно при его создании. Вы можете просмотреть ее по адресу: http://www.yourdomain.com/sitemap.xml (например, http://www.shablonu-dlya-blogger.ru/sitemap.xml)

    Как видите он создает отдельные страницы с содержимым вашего блога:

    • http://www.shablonu-dlya-blogger.ru/s-p.xml?page=1 
    • http://www.shablonu-dlya-blogger.ru/s-p.xml?page=2 
    • http://www.shablonu-dlya-blogger.ru/s-p.xml?page=3 

    Чем больше постов, тем больше таких страниц. Раньше ведь файлы карты сайта создавались отдельно под 150 страниц блога, 500, 1000 и т.д.. Теперь же с выходом динамической карты в этом больше нет необходимости, если конечно не брать во внимание статические страницы, для них все так же нужно это делать.

    Информация конечно запоздалая, ведь данное новшество действует еще с 2015 года. Но даже на сегодняшний день об этом мало кто знает.

    Правда для статических страниц нужно все таки добавлять отельную карту сайта, ведь динамическая рассчитана, только для сообщений. 

    Влияние ошибки 404 на продвижение, как устранить в Blogger

    Влияние ошибки 404 на продвижение, как устранить в Blogger

    Ошибка 404 возникает после удаление страниц сайта и когда на эти страницы ссылаются другие сайты или страницы вашего ресурса. Порой 404 ошибка высвечивается в Google Webmaster Tools даже если вы ничего не удаляли, причины могут быть разными в основном все зависит от платформы на которой расположен сайт.

    Влияние на продвижение в поисковых системах

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

    Кроме этого ранжирование блога может значительно снизиться. То есть он начинает терять позиции в поисковых системах.

    Как устранить в Blogger для поисковой системы Google

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

    Blogger виджет последние комментарии с аватарками

    Blogger виджет последние комментарии с аватарками

    Особенности виджета: Чистый JavaScript, Не требуется подключения к библиотекам Jquery, Отсутствие внешних скриптов и ссылок.

    Просмотреть демо

    1) Откройте панель управления, раздел Дизайн.
    2) Создайте новый гаджет HTML\Jvascript.
    3) Вставьте код:

    <style scoped='' type="text/css">
    #HTML95 .widget-content {max-height:400px;overflow:auto;}
    ul.acomments{list-style:none;margin:0;padding:0}.acomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-all;padding:10px 0;margin:0;}.acomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.acomments li img{position:relative;overflow:hidden;display:block;width:42px;height:42px}.acomments li a{font-weight:700}.acomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    // Recent Comments
    function acomments(a){var e;e='<ul class="acomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=15,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://2.bp.blogspot.com/-XjxrXKBPQqs/VYcGtLWPGUI/AAAAAAAAKaQ/5jr871JIwds/s1600/default-avatar.jpg",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
    //]]>
    </script>
    <script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=acomments&amp;max-results=5"></script>

    4) Сохраните гаджет.

    Grid Line премиум шаблон для blogger на русском

    Grid line адаптивный шаблон для blogger сетка 2017
    Где первый там и второй. Друзья подготовили для вас уже второй шаблон для blogger в этом году. В последнее время стал популярным такой тип шаблона, как сетка "Grid". Поэтому решили придерживаться того же курса и двигаться согласно этой тенденции. Скорее всего следующий шаблон будет в том же стиле, но пока не точно.

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

    Grid Line достаточно гибкий шаблон, который без проблем может подчинить себе любой сайт или блог. Как вы уже  поняли, его можно использовать практически для любой тематики, например: Авто, Спорт, Активный отдых, Бизнес, Недвижимость, Дизайн, Заработок, Игры, Здоровье, Интернет магазин, Мода и красота, Культура, Обучение, Наука, Развлечения, Природа, Фото, СМИ, Строительство и ремонт, Туризм, Женские блоги т.д..

    Шаблон состоит из:
    • Двух главных колонок (посты и панель для гаджетов)
    • Трех колонтитулов в нижней части (служат для добавления гаджетов)   

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

    Демо
    Приобрести шаблон полная seo оптимизированная версия на русском языке.