Translate

Поиск по этому блогу

понедельник, 29 февраля 2016 г.

SEO оптимизация и некоторые советы по blogspot.

                1.Заголовок.
С него и начнем, как с наиболее важного элемента в оптимизации нашего блога. Рекомендуется создание уникального заголовка каждой страницы.
Для того, чтобы в блоге заголовок показывался только на главной странице
blogspot , а на остальных страницах появилась возможность создания уникальных заголовков, мы проделываем следующее: Заходим в “Панель инструментов” => “Дизайн” => “Изменить HTML (не забывайте создавать резервную копию!)
Далее щелкаем на пустое поле. Комбинация клавиш  
Contrl +F  выводим дополнительное меню. И вставляем туда следующую комбинацию :

<title><data:blog.pageTitle/></title>

Находим её (она подсветится) и заменяем её полностью на код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/>|<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Вот и всё! Теперь название вашего блога будет показываться только на главной странице, а на остальных будут уникальные заголовки.

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

Вначале делаем так. Чтобы описание блога было актуальным только для главной страницы. Для этого опять идем в панель редактирования HTML кода и в любо         верхней части вашего шаблона, главное, чтобы между тегами <head> и </head> прописываем следующий код:

<b:if cond='data:blog.pageType == "index"'>
<meta content='описание блога в целом и (или) его главной страницы' name='description'/>
</b:if>

Для того, чтобы использовать название страниц в описание ниже этого кода вставляем :

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName+ " / название вашего блога "' name='Description'/>
</b:if>


Вот и всё! Вам остается, только в выделенной части кода (красным цветом), заменить на свои значения.
Осталось только напомнить, что для того, чтобы этот метод оптимизации сработал, важно, чтобы названия страниц были действительно уникальными, а содержание информативным.

3. Создание простых и понятных URL страниц.
Это рекомендации  Google. Здесь вообще все проще простого. Для этого перед публикацией (первой) вашего сообщения в графе название блога пишем точно такое же название, только латиницей. Между словами ставим не пробел, а тире. Публикуем. Страница вашего блога получает свой постоянный адрес. После этого остается нажать «Изменить» сообщение  и вписать на место латинского – название сообщения на русском.




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

4.URL- канонический.
Если следовать рекомендациям нашего гуру -  Google, то не стоит распылять вес блога по многим url – адресам. То есть Google хочет иметь только одну ссылку на документ!
Для этого будем использовать атрибут “
canonical” и опять все манипуляции в «Изменить HTML», в «голове блога», то есть до закрывающего тега </head>.
 Прописываем код:

<b:if cond='data:blog.pageType == "index"'>
<link expr:href='data:blog.homepageUrl' rel='canonical'/>
</b:if>

Здесь ничего менять не надо. Копируем и вставляем полностью. Как есть. Остается добавить. Что этот метод не всегда срабатывает, но…Будем надеяться!

5. Навигация по блогу.
Опять же вернемся к Google советам – «Используйте, преимущественно текстовую навигацию» и «Размещайте на сайте html – карту сайта. Думаю, что самое простое это сделать оглавление и установить кнопку «Статьи» непосредственно под шапку блога.

6 Качество контента.
Про это много уже написано и без меня. От себя остается добавить, что не стоит писать текст для поисковых машин. Лучше писать простой и понятный текст для своих читателей. Если ваши стати полезные и интересные, то они будут и подниматься в поисковой выдаче. А если вы зациклитесь на «ключевых словах» и набьете ими  бессодержательный и пустой текст, то это не приведет вас к успеху и читатели к вам в следующий раз просто не придут. Из воего опыта знаю, что можно создавать такие сайты под рекламу, но о  них не сейчас.

7. Анкорные тексты.
Google рекомендует писать информативные анкоры и не забывать про анкоры для внутренних ссылок». Почему-то настоятельно не рекомендуется использовать для анкоров слова «нажать здесь» и «линк для просмотра», и прочее.
ПРОДОЛЖИТЬ

8. Социальные сети.
                                                                                                                                          

суббота, 27 февраля 2016 г.

Выравнивание заголовка и названия блога по центру.

    Для выравнивания заголовка по центру идем в знакомую вкладку шаблоны => Изменить HTML.
Не забывайте делать резервную копию.
Далее заходим в изменить HTML:
и сверху жмем на первый черный треугольник - вот так:
В открывшемся тексте находим   .Header h1 {

сразу после скобок прописываем  text-align:center;

Точно так же ниже производим выравнивание заголовка поста. У меня на шаблоне это выглядело вот так:
Так же прописываем text-align:center; Не забывайте ставить в конце точку с запятой и помните. что в редактировании важны все знаки.


Если вы производите выравнивание даты поста, то тогда :



Я дату не выравнивал, потому у меня это поле пустое, а вы если хотите. то можете там прописать либо text-align:center;  или справа   text-align:rigt;
Для того, чтобы лучше понимать код, я вам рекомендую прочитать короткий пост о CSS и работе с ним. Продолжайте экспериментировать и просматривать шаблон пока не добьетесь результата на предварительном просмотре. После этого можно сохранять внесенные изменения. И помните. что экспериментировать с настройками шаблона спокойнее, если у вас в запасе есть сохраненная копия.

Теперь перейдем к выравниванию заголовка боковой панели.
Идем ниже и находим  .sidebar .widget h2 {
  Прописываем text-align:center;
Для выравнивания заголовка гаджетов в футере находим .footer-inner .widget h2 {
Прописываем то же самое  text-align:center;
 Вы можете не найти у себя этих кодов, в зависимости от того. какой стиль  (макет шаблона вы используете), но есть возможность прописать это самостоятельно.
Для этого находим  внизу всех кодов CSS вот такой код - ]]></b:skin>
и прямо перед ним прописываем:

.sidebar .widget h2 {
background:url(http://www.fonstola.ru/large/201310/134392.jpg);
height:20px;
width: 200px;
border-radius: 13px;
margin-left: 0px;
padding-top:0px;
font-size: 16px;
text-align: center;
text-shadow: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10);
box-shadow: 0 4px 6px rgba(0, 0, 0, .2);}
Точно так же нужно поступить и с остальными.

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

Пройдя по это ссылке, вы сможете узнать более подробную информацию о работе с HTML кодом.
                                           

Настроить блогспот. Подпись и рамка.


Первый вариант решения

Для того, чтобы вставить красивую подпись под сообщение нам нужна сама подпись. Её можно изготовить самостоятельно в программе Power Point или сделать в интернете на различных ресурсах, включая и онлайн фото-шоп. Рекомендую делать подпись на скриншоте с вашего поста в блоге. Тогда получается совершенно точное соответствие оттенков цвета фона поста. Очень хороший ресурс позволяющий делать подпись близкой к натуральной и под наклоном https://pixlr.com

Далее готовую картинку вставляем в новое сообщение. Модно предварительно написать пару строк, чтобы картинка получилась под сообщением. Строки потом из кода легко удалить. Нажимаем слева HTML- и копируем код. Идем в Настройки блога =>> Настройки сообщений=>>и вставляем туда полученный код. удаляем все лишнее (ну то, что вы там написали. для пробы и сохраняем кнопкой слева. Проверяем.

Обычно все получается. только вот очень портит настроение рамочка серая вокруг фото. Которая выделяет подпись.

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

Предварительно лучше сделать копию вашего шаблона.

Открывается код . Кликаете на пустое поле левой кнопкой мыши и нажимаете сочетание клавиш Cntrl+F В открывшееся окно справа вверху, вводите такой код - .post-body img


      нажимаете один раз Enter и код подсвечивается. У меня их было два. В верхнем коде (первом сверху удаляю все вот так).
 Проверяю и сохраняю. Все!


Второй вариант решения  

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



PS. Осталось только напомнить, что теперь подпись появится на всех новых сообщениях автоматически. В ранее опубликованные её придется добавить (также как обычное фото) вручную.                                                                                                                                                 

четверг, 25 февраля 2016 г.

Как убрать рамку вокруг фото в blogspote ?

              Все просто. Заходим в Шаблон >> Редактировать >> Дополнительно  >> Вставить CSS >> И в пустое белое поле вводим следующий код:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
                                                                                         
Все. Дело сделано! Рамки нет, как у меня в блоге. Удачи вам!
Здесь можно узнать больше о том как настроить рамку



Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com