Доброго времени суток, уважаемые читатели. Ещё в феврале 2011 года я писала про скрипт для создания эффекта LightBox. А в сентябре компания разработчиков Blogger анонсировали свой LightBox для платформы, который встроен во все шаблоны по умолчанию. А на днях, на просторах всемирного интернета я натолкнулась на очень красивую реализацию эффекта LightBox на CSS, без применения библиотеки jQuery, и вообще без каких либо скриптов.
Конечно, я не раз встречала подобные примеры, в некоторых из них все равно присутствовало несколько строчек кода JavaScript, в некоторых не было, но они не обладали такой красотой. И именно данная реализация понравилась мне больше всего, и я решила не только сделать "закладку" для себя, но и поделиться с вами.
Прежде чем начну, стоит сказать, что данный пример, к сожалению, обладает одним недостатком. Т.к. он создан с применением стандарта CSS3, он работает не во всех браузерах. Как всегда, в первую очередь, отличился браузер Internet Explorer до 8 версии включительно, также этот LightBox не будет работать в браузерах Opera до версии 9.6 и Safari до версии 3.0 включительно. Зато поддерживается в Android и iOS.
Также уточню, что разработчик описанного эффекта LightBox реализовал его в розовых цветах, что не всегда подходит под дизайн сайта, поэтому я решила для себя придать ему более привычный вид, когда фотография открывается на темном фоне, также внесла другие незначительные изменения, и в статье дам именно свой измененный код. А по ссылке вы можете прочитать оригинал статьи на английском, увидеть демо, а также скачать оригинал кода.
Начнем с HTML. Для одного изображения используется следующий код:
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="адрес_превью_1">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="адрес_изображения_1_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
</ul>
<li>
<a href="#image-1">
<img src="адрес_превью_1">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="адрес_изображения_1_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
</ul>
Обратите внимание, что для закрытия изображения используется ссылка на якорь с ID="#page". Вы можете использовать любой идентификатор, который уже присутствует в вашем коде, а можете список помещать в дополнительный контейнер с данным идентификатором. Т.е. код будет таким:
<div id="#page">
<ul class="lb-album">
<li>
……
</li>
</ul>
</div>
<ul class="lb-album">
<li>
……
</li>
</ul>
</div>
Если вы хотите использовать сразу несколько изображений, то можно добавить дополнительный код навигации:
<a href="#id_предыдущего_изображения" class="lb-prev">Предыдущее</a>
<a href="#id_следующего_изображения" class="lb-next">Следующее</a>
<a href="#id_следующего_изображения" class="lb-next">Следующее</a>
Все вместе будет выглядеть так:
<div id="page">
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="адрес_превью_1">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="адрес_изображения_1_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-4" class="lb-prev">Предыдущее</a>
<a href="#image-2" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
<li>
<a href="#image-2">
<img src="адрес_превью_2">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="адрес_изображения_2_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-1" class="lb-prev">Предыдущее</a>
<a href="#image-3" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
<li>
<a href="#image-3">
<img src="адрес_превью_3">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="адрес_изображения_3_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-2" class="lb-prev">Предыдущее</a>
<a href="#image-4" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
</ul>
</div>
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="адрес_превью_1">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="адрес_изображения_1_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-4" class="lb-prev">Предыдущее</a>
<a href="#image-2" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
<li>
<a href="#image-2">
<img src="адрес_превью_2">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="адрес_изображения_2_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-1" class="lb-prev">Предыдущее</a>
<a href="#image-3" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
<li>
<a href="#image-3">
<img src="адрес_превью_3">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="адрес_изображения_3_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-2" class="lb-prev">Предыдущее</a>
<a href="#image-4" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
</ul>
</div>
Обратите внимание на код ссылок в навигации. В каждом фрагменте, чтобы можно было листать фотографии, необходимо указывать ссылку на якорь предыдущего и следующего изображения. А каждое изображение, в свою очередь, помещено в контейнер с id="image-X", где X – порядковое число изображения
id="image-1"
id="image-2"
id="image-3"
id="image-2"
id="image-3"
С HTML кодом разобрались. Приступим к CSS.
Я намеренно разделила оформление на 2 части. На код, который отвечает непосредственно за эффект LightBox и код, отвечающий за самую красоту. Я это сделала для того, чтобы каждый желающий смог внести свои изменения, если захочет.
Итак, основной код, сразу с навигацией:
/*делаем из элемента списка, в котором находится превью, блочный элемент*/
.lb-album li > a,
.lb-album li > a img{
display: block;
}
/*скрываем большое изображение*/
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
}
/*позиционирование контейнера с названием, описанием изображения и навигацией*/
.lb-overlay > div{
position: relative;
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
}
/*код закрытия LightBox*/
.lb-overlay a.lb-close{
background: url(lightbox-btn-close.png) no-repeat;
z-index: 1001;
position: absolute;
top: 43px;
left: 50%;
line-height: 26px;
text-align: center;
width: 16px;
height: 16px;
overflow: hidden;
margin-left: -8px;
opacity: 0;
}
/*навигация*/
.lb-prev, .lb-next{
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
filter: alpha(opacity=80); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
margin-left: -30px;
background: transparent url(arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(arrows.png) no-repeat top right;
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
/*скрываем большое изображение*/
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
}
/*позиционирование контейнера с названием, описанием изображения и навигацией*/
.lb-overlay > div{
position: relative;
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
}
/*код закрытия LightBox*/
.lb-overlay a.lb-close{
background: url(lightbox-btn-close.png) no-repeat;
z-index: 1001;
position: absolute;
top: 43px;
left: 50%;
line-height: 26px;
text-align: center;
width: 16px;
height: 16px;
overflow: hidden;
margin-left: -8px;
opacity: 0;
}
/*навигация*/
.lb-prev, .lb-next{
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
filter: alpha(opacity=80); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
margin-left: -30px;
background: transparent url(arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(arrows.png) no-repeat top right;
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
Это тот минимум кода, без которого вообще ничего не получилось бы. Но если мы сейчас посмотрим на наш LightBox, то ничего красивого в нем нет. Можно только изображения открывать и закрывать и все. Вот как это выглядит у меня:
И сейчас мы добавим самую красоту.
Убираем маркеры списка:
ol, ul {
list-style: none outside none;
}
list-style: none outside none;
}
Как правило, при верстке сайта намеренно обнуляют все стили, и если у вас нет маркера у каждого элемента списка, то вам этот код не нужен.
Выстраиваем фотографии по горизонтали:
.lb-album li{
float: left;
margin: 5px;
position: relative;
}
float: left;
margin: 5px;
position: relative;
}
Оформляем каждое изображение в контейнер, создается эффект рамки:
.lb-album li > a{
width: 125px;
height: 94px;
position: relative;
padding: 10px;
background: #ebebeb;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
}
width: 125px;
height: 94px;
position: relative;
padding: 10px;
background: #ebebeb;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
}
Обратите внимание, что в значения ширины и высоты заданы размеры моих уменьшенных изображений, 125*94px. Если вы делаете превью другого размера, то не забудьте поменять эти значения. У меня получилось так:
Следующим этапом мы скроем название изображения под превью, и придадим эффект, чтобы оно появлялось, при наведении курсора мыши на картинку.
.lb-album li > a span{
position: absolute;
width: 125px;
height: 94px;
top: 10px;
left: 10px;
text-align: center;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 22px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(235,235,235,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(235,235,235,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
}
position: absolute;
width: 125px;
height: 94px;
top: 10px;
left: 10px;
text-align: center;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 22px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(235,235,235,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(235,235,235,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
}
Получилось так:
На этом этапе мы полностью закончили с оформлением превью, и переходим к оформлению непосредственно LightBox.
Добавим в последний код с классом .lb-overlay дополнительные значения фона. Получится следующее:
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(26,26,26);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%, rgba(26,26,26,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(73,73,73,0.56)), color-stop(100%,rgba(26,26,26,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
}
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(26,26,26);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%, rgba(26,26,26,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(73,73,73,0.56)), color-stop(100%,rgba(26,26,26,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
}
И вот у нас уже вырисовывается привычный нам эффект LightBox, когда изображение большого размера открывается на темном фоне.
Но пока есть проблема с ссылкой на закрытие большого изображения. Добавим нужный код:
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay:target a.lb-close{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
Попутно мы добавили немного прозрачности элементам стрелок навигации и крестику, закрывающему LightBox.
На этом можно и остановиться. LightBox готов. Разработчик же данного эффекта предлагает ещё поработать и с текстом.
Добавим следующий код:
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 24px;
float: left;
text-align: right;
border-right: 1px solid rgba(235,235,235,0.4);
margin-top:10px;
}
.lb-overlay div p{
font-size: 16px;
font-family: Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 24px;
float: left;
text-align: right;
border-right: 1px solid rgba(235,235,235,0.4);
margin-top:10px;
}
.lb-overlay div p{
font-size: 16px;
font-family: Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}
И в уже описанный мною блок:
.lb-overlay > div{
position: relative;
color: rgba(235,235,235,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(26,26,26,0.6);
}
position: relative;
color: rgba(235,235,235,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(26,26,26,0.6);
}
добавим значение color – цвет текста и text-shadow – тень текста.
И ещё немного лоска непосредственно на изображение:
.lb-overlay img{
height: 100%;
max-height: 100%;
position: relative;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
height: 100%;
max-height: 100%;
position: relative;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
Мы добавили немного теней, эффекта плавного перехода.
И ещё хочу обратить ваше внимание, в последнем коде мы указали значение высоты height: 100%;. Эта строка регулирует размер изображения в зависимости от разрешения монитора. Если разрешение монитора меньше, чем оригинал изображения, то изображение будет уменьшено до такого значения, чтобы оно полностью помещалось в окне без прокрутки. Если вы оставляете данную настройку, то для браузера Opera необходимо добавить другой код:
x:-o-prefocus, .lb-overlay img {
height: 100%;
}
height: 100%;
}
Что у меня получилось, вы можете посмотреть по этой ссылке. Если понравилось, полную версию кода с картинками навигации и закрывающего крестика качаем здесь.
Если вы имеете блог на Wordpress, и вам не интересно заморачиваться кодами, то вам подойдет плагин красивой галереи SimpleViewer для WordPress, про установку которой вы можете прочитать в энциклопедии начинающего блоггера.
Поздравляю все своих читательниц с прекрасным весенним праздником 8 марта. Хороших выходных.
Доброго времени суток, уважаемые читатели. Как всегда, идея сегодняшней статьи была навеяна частыми вопросами новичков о том, как охватить необъятное. Что нужно делать в первую очередь, что важно, а что можно оставить на потом.

Эта статья в первую очередь для тех блоггеров, которым тяжело даются знания в блогостроении и оптимизации.
Очень часто у новичка, впервые создавшего блог и осознавшего, что его нужно не просто вести, но ещё и развивать, опускаются руки. Ведь оказывается, есть такая наука, как seo, а ещё пишут о каком-то smo и вообще ничего не понятно.
Этой статьей я хочу раз и навсегда положить конец бесконечным вопросам о том, что же является главным, что второстепенным, а что вообще несущественным.
Постараюсь выработать некий план начинающего блоггера. Хотя различных планов у меня уже набралось не мало (Раскрутка блога – инструкция новичку, 5 первых шагов нового блога), думаю, и этот не будет лишним.
Итак, с чего же мне начать? Пожалуй, начну с того, что вся эта шумиха вокруг SEO – полная фигня. Да-да, именно так. Конечно, многие вещи нельзя пускать на самотек, и я считаю, что по возможности, нужно заниматься оптимизацией своего блога, но возводить это в ранг чего-то сверхнеобходимого не нужно. Относитесь к этому проще.
Многие из вас даже не представляют, как выглядел мой блог в самом начале своего пути. Я до сих пор общаюсь с двумя блоггерами, которые пришли на мой блог, когда он ещё даже не был в старом (серо-красном) дизайне и могут подтвердить, какой (не побоюсь этого слова) убогий у меня был блог.
В то время, в самые первые месяцы, у меня в блоге не было ни красивых кнопочек, ни какого бы то ни было функционала, блог был грязно-голубого цвета и, кроме облака тегов, архива и стандартного виджета подписки, больше не было ничего. Зато, уже тогда я активно интересовалась, как можно заработать в интернете и мечтала зарабатывать на блоге. Наивная... Вместо того, чтобы сразу взяться за работу.
И только спустя несколько месяцев я наконец-то более-менее закончила со всевозможными настройками, поменяла дизайн, а уж оптимизацией я занимаюсь постоянно до сегодняшнего дня. Как начала оптимизировать год назад, так до сих пор и оптимизирую. Сейчас вот ещё не закончила с новым дизайном.
Так к чему я все это рассказываю? Да к тому, что это не самое главное.
Если вы относитесь к тем людям, которые быстро схватывают на лету и сразу получается все настроить – отлично. Но есть и такие пользователи, которым с трудом дается разобраться во всех премудростях, и я считаю, что в таком ситуации, ни в коем случае нельзя себя насиловать и делать то, в чем вы не разбираетесь. Ведь лучше уделить время тому, в чем вы специалист, тому, ради чего вы вообще создали свой блог. Пишите, пишите и ещё раз пишите.
Если все же говорить о том минимуме, который необходим для первоначальной оптимизации блога, то это:
Вспомните сотни тысяч блогов по всему миру, которые публикуют картинки вместе с ссылкой. У меня тоже в блоге в первых статьях картинки с ссылками. И что? Это как-то плохо отразилось на моем блоге? Это не тот случай, из-за которого нужно паниковать.
Что касается подписки и разных кнопок. В самом начале для подписки можно воспользоваться стандартными предложениями, ведь это не на долго. А из кнопок установить самые простые, так сказать, все в одном пакете. К таким кнопка относятся Однакнопка, AddThis и другие. Как только вы начнете во все вникать, вам не составит труда это исправить. Просто не стоит расстраиваться и тратить драгоценное время на это сейчас. Используйте время с умом. Наполняйте статьями свой блог.
И чем раньше вы это начнете делать, тем быстрее и легче ваш блог начнет ранжироваться поисковыми системами. Да, именно так. Чем больше у вас будет посетителей на сайте, чем больше они будут проводить времени на вашем сайте, чем больше будут сохранять ваш блог в закладки, тем лучше поисковые системы будут относиться к вашему блогу.
У поисковиков есть свои секреты и специальные инструменты, по которым они определяют "интересность" и пользу ресурса. В ход они пускают данные статистики, тулбары для браузеров, которые устанавливают себе пользователи.
На основании данных инструментов поисковые системы вычисляют поведение пользователей на вашем сайте, а благодаря многолетней статистике вычисляют, понравился ваш ресурс пользователю или нет. Поэтому в развитии любого ресурса очень важно писать интересные полезные статьи и уметь привлекать новую аудиторию.
Если вы напишите увлекательный материал и приведете целевого посетителя, то с большой долей вероятности он задержится на вашем блоге, осуществит подписку, оставит комментарий. И поисковые системы узнают об этом.
Конечно, я упрощаю ситуацию, и мы можем только гадать, как же на самом деле происходит оценка каждого сайта по внутренней шкале поисковика, но то, что поведенческий фактор (поведение посетителя на сайте) является одним из самых важных для ранжирования, уже известно точно. Поэтому, именно привлечение посетителей должно стать вторым по важности этапом. В ход могут идти все возможные способы:
Итак, подведя итог, хочу выделить главные мысли.
Оптимизация оптимизацией, но ведем мы блоги для людей, а значит должны думать в первую очередь о том, что им рассказать и о том, как их привлечь. Остальное, хоть и является очень важным, но по сравнению с выше озвученным, уже второстепенно.
Это мой взгляд, а как думаете вы?

Эта статья в первую очередь для тех блоггеров, которым тяжело даются знания в блогостроении и оптимизации.
Очень часто у новичка, впервые создавшего блог и осознавшего, что его нужно не просто вести, но ещё и развивать, опускаются руки. Ведь оказывается, есть такая наука, как seo, а ещё пишут о каком-то smo и вообще ничего не понятно.
Этой статьей я хочу раз и навсегда положить конец бесконечным вопросам о том, что же является главным, что второстепенным, а что вообще несущественным.
Постараюсь выработать некий план начинающего блоггера. Хотя различных планов у меня уже набралось не мало (Раскрутка блога – инструкция новичку, 5 первых шагов нового блога), думаю, и этот не будет лишним.
Итак, с чего же мне начать? Пожалуй, начну с того, что вся эта шумиха вокруг SEO – полная фигня. Да-да, именно так. Конечно, многие вещи нельзя пускать на самотек, и я считаю, что по возможности, нужно заниматься оптимизацией своего блога, но возводить это в ранг чего-то сверхнеобходимого не нужно. Относитесь к этому проще.
Многие из вас даже не представляют, как выглядел мой блог в самом начале своего пути. Я до сих пор общаюсь с двумя блоггерами, которые пришли на мой блог, когда он ещё даже не был в старом (серо-красном) дизайне и могут подтвердить, какой (не побоюсь этого слова) убогий у меня был блог.
В то время, в самые первые месяцы, у меня в блоге не было ни красивых кнопочек, ни какого бы то ни было функционала, блог был грязно-голубого цвета и, кроме облака тегов, архива и стандартного виджета подписки, больше не было ничего. Зато, уже тогда я активно интересовалась, как можно заработать в интернете и мечтала зарабатывать на блоге. Наивная... Вместо того, чтобы сразу взяться за работу.
И только спустя несколько месяцев я наконец-то более-менее закончила со всевозможными настройками, поменяла дизайн, а уж оптимизацией я занимаюсь постоянно до сегодняшнего дня. Как начала оптимизировать год назад, так до сих пор и оптимизирую. Сейчас вот ещё не закончила с новым дизайном.
Так к чему я все это рассказываю? Да к тому, что это не самое главное.
Самое главное – это та информация, которой вы решили поделиться с новыми людьми.
Это те статьи, которые вы пишите. И именно это является самым важным в блоге. Ведь посетитель приходит к вам в блог не для того, чтобы нажать на кнопку, а для того, чтобы получить порцию новой, уникальной, интересной, полезной информации.Поэтому, первый шаг после создания блога – это наполнение его статьями.
И чем больше у вас будет правильного контента, тем больше интереса будет вызывать ваш блог даже у случайно зашедших посетителей. Сконцентрируйтесь на этом.Если вы относитесь к тем людям, которые быстро схватывают на лету и сразу получается все настроить – отлично. Но есть и такие пользователи, которым с трудом дается разобраться во всех премудростях, и я считаю, что в таком ситуации, ни в коем случае нельзя себя насиловать и делать то, в чем вы не разбираетесь. Ведь лучше уделить время тому, в чем вы специалист, тому, ради чего вы вообще создали свой блог. Пишите, пишите и ещё раз пишите.
Если все же говорить о том минимуме, который необходим для первоначальной оптимизации блога, то это:
- Правильный title
- Правильный robots.txt или мета-теги, закрывающие от индексации лишние страницы.
- Внешние ссылки тогда плохо, когда вы ссылаетесь на большое количество разных ресурсов, особенно, другой тематики.
- Сотни тысяч блогов по всему миру ссылаются на такие фото-хостинги, как Picasa и Flickr и ни один блог за это не был забанен или потерял так много веса, что может служить основанием для плохого ранжирования.
- Все картинки, размещенные на Picasa и участвующие в поиске, принадлежат вашему блогу и только вам. И все поисковые системы это видят и корректно воспринимают.
Вспомните сотни тысяч блогов по всему миру, которые публикуют картинки вместе с ссылкой. У меня тоже в блоге в первых статьях картинки с ссылками. И что? Это как-то плохо отразилось на моем блоге? Это не тот случай, из-за которого нужно паниковать.
Что касается подписки и разных кнопок. В самом начале для подписки можно воспользоваться стандартными предложениями, ведь это не на долго. А из кнопок установить самые простые, так сказать, все в одном пакете. К таким кнопка относятся Однакнопка, AddThis и другие. Как только вы начнете во все вникать, вам не составит труда это исправить. Просто не стоит расстраиваться и тратить драгоценное время на это сейчас. Используйте время с умом. Наполняйте статьями свой блог.
Следующий важный этап в ведении блога – это привлечение посетителей.
Это самый сложный этап в развитии любого блога. И именно на него необходимо бросить свои силы. Если вы задумались, чем вам заняться – оптимизацией или прямым привлечение новых читателей, то ответ всегда однозначный: привлечение читателей. И чем раньше вы это начнете делать, тем быстрее и легче ваш блог начнет ранжироваться поисковыми системами. Да, именно так. Чем больше у вас будет посетителей на сайте, чем больше они будут проводить времени на вашем сайте, чем больше будут сохранять ваш блог в закладки, тем лучше поисковые системы будут относиться к вашему блогу.
У поисковиков есть свои секреты и специальные инструменты, по которым они определяют "интересность" и пользу ресурса. В ход они пускают данные статистики, тулбары для браузеров, которые устанавливают себе пользователи.
На основании данных инструментов поисковые системы вычисляют поведение пользователей на вашем сайте, а благодаря многолетней статистике вычисляют, понравился ваш ресурс пользователю или нет. Поэтому в развитии любого ресурса очень важно писать интересные полезные статьи и уметь привлекать новую аудиторию.
Если вы напишите увлекательный материал и приведете целевого посетителя, то с большой долей вероятности он задержится на вашем блоге, осуществит подписку, оставит комментарий. И поисковые системы узнают об этом.
Конечно, я упрощаю ситуацию, и мы можем только гадать, как же на самом деле происходит оценка каждого сайта по внутренней шкале поисковика, но то, что поведенческий фактор (поведение посетителя на сайте) является одним из самых важных для ранжирования, уже известно точно. Поэтому, именно привлечение посетителей должно стать вторым по важности этапом. В ход могут идти все возможные способы:
- Социальные сети
- Форумы
- Комментирование других блогов
Итак, подведя итог, хочу выделить главные мысли.
- Самое важное – наполняйте блог контентом
- Привлекайте новых пользователей
- И только после первых двух пунктов улучшайте оптимизацию, ставьте те кнопки, которые вам нравятся, тратьте свое время на приятные мелочи по обустройству блога.
Это мой взгляд, а как думаете вы?
Здравствуйте, уважаемые читатели. Сегодня мы с вами поговорим о том, какой должен быть контент на блоге или сайте, как правильно писать и оформлять статьи. Это одна из тех тем, которые не сильно любят.
И многие не придают ей того значения, которое она того заслуживает. Так же тему правильного контента можно назвать достаточно сложной для понимания, т.к. не существует точных критериев правильности.
И многие не придают ей того значения, которое она того заслуживает. Так же тему правильного контента можно назвать достаточно сложной для понимания, т.к. не существует точных критериев правильности.
Контент должен быть побуждающим к действию
Давайте сразу определимся, что я считаю правильным контентом.
Правильный контент – это содержание, которое провоцирует пользователя совершить действие на сайте.
Если мы говорим о блоге, то естественно тем действием, на которое должна побуждать статья – это подписка на обновление блога, или комментарий. Если мы говорим о сайте, продающем какой-либо товар или услугу, то действие – покупка, заказ услуги. Именно такие статьи я считаю правильными.
Первая причина, по которой содержание сайта не побуждает пользователя осуществить действие – это ошибка в постановке первоначальной цели, выборе тематики и позиционировании самого блога, т.е. ошибка возникла ещё в самом начале возникновения ресурса. Попробую привести пример.
Все знают, что в наше время блоги seo и манимейкерской тематики растут, как грибы после дождя. Каждый (или через один) называет себя сеошником, манимейкером, оптимизатором и прочей братией. Это некая дань моде. И многие начинающие блоггеры считают, что если будут следовать этой моде, то так же станут модными, т.е. популярными и богатыми. Но большинство таких блогов просто не выживает. И самые частые причины этому:
Итак, отсутствие или не правильно выбранная цель влечет за собой ошибочный выбор тематики. Ведь сегодня все ведут блоги про заработок, значит именно с такого блога можно больше всего заработать. Значит и мой будет про заработок.
И тут приходит третья ошибка – позиционирование. Нельзя позиционировать себя манимейкером или свой блог – блогом про заработок, если вы ещё ни разу не зарабатывали в интернете. Нельзя называть себя seo-специалистом, если вы никогда не занимались продвижением и раскруткой сайтов, и даже наличие одного блога не дает права так себя называть. Особенно, если у блога посещаемость несколько десятков человек.
А раз вы выбираете тематику, как дань моде, а не посыл души, позиционируете себя, как человек зарабатывающий в интернете, значит ваши статьи должны быть на том уровне, на который вы себя сами поставили. Как говорится, назвался груздем, полезай в кузов.
И если блог про заработок, то надо и писать про заработок. А если деньги не текут рекой – то и писать не о чем. А если и находятся темы для новых статей, то в них нет того опыта, которым дышат статьи уже состоявшихся блоггеров. А значит, статья не цепляет, не побуждает к действию. Потому что начинается переписывание чужого опыта или написание не проверенных фактов.
Первая причина, по которой содержание сайта не побуждает пользователя осуществить действие – это ошибка в постановке первоначальной цели, выборе тематики и позиционировании самого блога, т.е. ошибка возникла ещё в самом начале возникновения ресурса. Попробую привести пример.
Все знают, что в наше время блоги seo и манимейкерской тематики растут, как грибы после дождя. Каждый (или через один) называет себя сеошником, манимейкером, оптимизатором и прочей братией. Это некая дань моде. И многие начинающие блоггеры считают, что если будут следовать этой моде, то так же станут модными, т.е. популярными и богатыми. Но большинство таких блогов просто не выживает. И самые частые причины этому:
- отсутствие цели (кроме заработка);
- не правильно выбранная тематика;
- отсутствие позиционирования себя и своего блога.
Итак, отсутствие или не правильно выбранная цель влечет за собой ошибочный выбор тематики. Ведь сегодня все ведут блоги про заработок, значит именно с такого блога можно больше всего заработать. Значит и мой будет про заработок.
И тут приходит третья ошибка – позиционирование. Нельзя позиционировать себя манимейкером или свой блог – блогом про заработок, если вы ещё ни разу не зарабатывали в интернете. Нельзя называть себя seo-специалистом, если вы никогда не занимались продвижением и раскруткой сайтов, и даже наличие одного блога не дает права так себя называть. Особенно, если у блога посещаемость несколько десятков человек.
А раз вы выбираете тематику, как дань моде, а не посыл души, позиционируете себя, как человек зарабатывающий в интернете, значит ваши статьи должны быть на том уровне, на который вы себя сами поставили. Как говорится, назвался груздем, полезай в кузов.
И если блог про заработок, то надо и писать про заработок. А если деньги не текут рекой – то и писать не о чем. А если и находятся темы для новых статей, то в них нет того опыта, которым дышат статьи уже состоявшихся блоггеров. А значит, статья не цепляет, не побуждает к действию. Потому что начинается переписывание чужого опыта или написание не проверенных фактов.
Нельзя написать качественный контент, который побуждал бы читателя остаться на вашем блоге, если не обладаешь опытом в той теме, про которую пишешь.
Я не призываю к тому, что нельзя завести блог на тему, в которой не разбираешься. Я сама год назад завела блог на тему, которую знала только теоретически. Я призываю к тому, чтобы вы писали только то, о чем уже успели точно узнать в новой для себя теме.
Допустим, цель и тематика были выбраны правильно, но отсутствует четкое позиционирование.
Например, я новичок, а позиционирую себя, как специалист. Приходит ко мне на блог настоящий специалист и мои статьи для него – детский лепет. А приходит новичок, и ничего не понимает, т.к. я изобилую терминами, которые новички не понимают, не знают, что это такое. А я так пишу, потому что стараюсь подражать специалистам.
Итог печален – специалист ушел, т.к. ему не интересно, новичок ушел, т.к. ему ничего не понятно.
Допустим, цель и тематика были выбраны правильно, но отсутствует четкое позиционирование.
Например, я новичок, а позиционирую себя, как специалист. Приходит ко мне на блог настоящий специалист и мои статьи для него – детский лепет. А приходит новичок, и ничего не понимает, т.к. я изобилую терминами, которые новички не понимают, не знают, что это такое. А я так пишу, потому что стараюсь подражать специалистам.
Итог печален – специалист ушел, т.к. ему не интересно, новичок ушел, т.к. ему ничего не понятно.
Вывод: содержание блога не соответствует тому уровню, который вы для себя сами назначили.
Итак, что же делать? Несколько месяцев назад я писала о важности постановки цели, о выборе тематики и позиционировании. Но писала об этом я с позиции в целом, что перед запуском своего проекта, будь то блог или другой ресурс, необходимо четко поставить перед собой цель, правильно выбрать тематику, и что самое важное, позиционирование.
Сейчас же я призываю придерживаться тех же самых правил при написании каждой своей статьи. Вы никогда не должны забывать, на какой круг читателей рассчитан ваш блог, и придерживаться этого при написании каждого поста.
Необходимо четко представлять, кто ваш читатель, какого уровня его знания. Что ждет от вас ваш читатель, что вы уже пообещали ему в своем заголовке или описании блога.
Сейчас же я призываю придерживаться тех же самых правил при написании каждой своей статьи. Вы никогда не должны забывать, на какой круг читателей рассчитан ваш блог, и придерживаться этого при написании каждого поста.
Необходимо четко представлять, кто ваш читатель, какого уровня его знания. Что ждет от вас ваш читатель, что вы уже пообещали ему в своем заголовке или описании блога.
В содержании сайта должна быть идея
Следующая причина по которой контент можно назвать "не правильным" – отсутствие идеи в статье.
Любую статью в блоге мы пишем для чего-то, всегда должен быть четкий ответ, для чего вы пишите статью.
Не достаточно просто так написать, чтобы была. Статья должна обладать идеей, ради которой вы ее решили написать. Даже если вы просто описываете случай из жизни, сделайте так, чтобы ваша история чему-то учила, давала какой-то урок, являлась ответом на жизненную ситуацию, поднимала настроение, заставляла задуматься, цепляла за живое, просто не оставляла равнодушным.
Ну и естественно, если вы пишите какую-то инструкцию, советы, как, например, в моем блоге, проследите за тем, чтобы тема была полностью раскрыта.
Это не значит, что надо писать целый учебник одной статьей. Многие вопросы просто невозможно охватить в одной статьей. Но просто надо четко определить рамки статьи, продумать структуру, составить (не обязательно письменно) список вопросов, на которые отвечает статья и четко следовать намеченному плану.
Ну и естественно, если вы пишите какую-то инструкцию, советы, как, например, в моем блоге, проследите за тем, чтобы тема была полностью раскрыта.
Это не значит, что надо писать целый учебник одной статьей. Многие вопросы просто невозможно охватить в одной статьей. Но просто надо четко определить рамки статьи, продумать структуру, составить (не обязательно письменно) список вопросов, на которые отвечает статья и четко следовать намеченному плану.
Статья должна дать четкий ответ на вопрос читателя, научить определенному действию, дать знания.
Не за этим ли читатель приходит в ваш блог?
Конечно, все вышесказанное очень субъективно, но я считаю, что содержание любого сайта не должно складываться стихийно, лишь бы было, а должно быть четко продуманным и наиболее полно отражать суть всего ресурса. Тогда, зайдя на такой сайт, прочитав одну статью, возникает неосознанное желание почитать ещё, осуществить подписку, стать постоянным читателем, оставить комментарий.
Конечно, все вышесказанное очень субъективно, но я считаю, что содержание любого сайта не должно складываться стихийно, лишь бы было, а должно быть четко продуманным и наиболее полно отражать суть всего ресурса. Тогда, зайдя на такой сайт, прочитав одну статью, возникает неосознанное желание почитать ещё, осуществить подписку, стать постоянным читателем, оставить комментарий.
Как правильно оформлять статьи
А сейчас хотелось бы немного сказать о том, как правильно оформлять тексты. В общем, ничего особенного в этом нет и никаких секретов я не раскрою. Дело в том, что в интернете действуют свои правила оформления статей и некоторые их этих правил я считаю просто обязательными.
Правило первое - разнообразие. Используйте специальную разметку в текстах.
- Разбивайте на небольшие абзацы – такие тексты легче читать.
- Всегда используйте подзаголовки в статьях. Это удобно глазу читателя и значительно помогает при продвижении по поисковым запросам.
- Используйте нумерованные и маркированные списки. В любом визуальном редакторе для этого есть специальные кнопки.
- Используйте цитаты.
- Используйте картинки к публикациям.
Второе правило – грамотность.
Я не знаю ни одного топового блога, в котором были бы статьи с ошибками. Если у вас проблемы с пунктуацией, пишите короткие предложения. Если проблема с орфографией, проверяйте, для этого есть большое количество способов - Word, тулбары для браузера, в Яндекс Вебмастер есть сервис проверки орфографии.
Казалось бы, ничего нового не написала, все это присутствует и в нашей повседневной жизни, однако, почему многие не думают о таких вещах? Ведь идея данной статьи у меня возникла не случайно, не просто так, а именно потому, что я достаточно часто сталкиваюсь с подобными ресурсами, на которых содержание не соответствует заявленной теме и позиционированию.
Многие вообще не следят за грамотностью, элементарно, не ставят пробелы между словами после знака пунктуации.
Конечно, существуют и другие причины, почему посетители не задерживаются на сайте, и возможно, тут я освятила не все возможные ошибки начинающих блоггеров. А вы как считаете? Буду рада дополнениям в комментариях.
Казалось бы, ничего нового не написала, все это присутствует и в нашей повседневной жизни, однако, почему многие не думают о таких вещах? Ведь идея данной статьи у меня возникла не случайно, не просто так, а именно потому, что я достаточно часто сталкиваюсь с подобными ресурсами, на которых содержание не соответствует заявленной теме и позиционированию.
Многие вообще не следят за грамотностью, элементарно, не ставят пробелы между словами после знака пунктуации.
Конечно, существуют и другие причины, почему посетители не задерживаются на сайте, и возможно, тут я освятила не все возможные ошибки начинающих блоггеров. А вы как считаете? Буду рада дополнениям в комментариях.
Доброго времени суток, уважаемые читатели. В интернете существует просто огромное количество сервисов по анализу сайтов. Инструментов, в которых можно поверить:
Любой подобный инструмент позволяет анализировать, как личный сайт, так и сайты конкурентов. Просто глаза разбегаются от такого обилия услуг.
И чем больше таких инструментов, тем больше разбегаются глаза новичков. Многие сталкиваются с тем, что один сервис что-то не видит и рекомендует исправить, другому ещё что-то не нравится.
- индексацию сайта в поисковых системах;
- показатели сайта – тИЦ и PR;
- содержимое сайта - мета-теги description и keywords, title, ключевые слова;
- наличие в каталогах;
- позиции в поисковиках
- и многое-многое другое.
Любой подобный инструмент позволяет анализировать, как личный сайт, так и сайты конкурентов. Просто глаза разбегаются от такого обилия услуг.
И чем больше таких инструментов, тем больше разбегаются глаза новичков. Многие сталкиваются с тем, что один сервис что-то не видит и рекомендует исправить, другому ещё что-то не нравится.
Доброго времени суток, уважаемые читатели. Слишком часто мне приходится наблюдать печальную картину, как начинающие блоггеры с первых дней начинают вредить сами себе. Я сама в какой-то степени этому была подвержена, но быстро справилась с искушением. Вы пока не догадались о чем я. Сейчас все станет более понятно.

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

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

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

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

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

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

Во первых, стоит сказать, что то, что мы называем ссылкой, на самом деле называется гиперссылка, потому что создается с помощью языка гипертекстовой разметки HTML. Но мы, по привычке будем именовать ее просто ссылкой.
Во-вторых, необходимо понимать разницу между активной ссылкой, на которую можно нажать и волшебным образом очутиться на другом сайте, и не активной, т.е. текстовой.
Доброго времени суток, уважаемые читатели. В продолжении темы про составление семантического ядра для сайта, сегодня пойдет речь про анализ конкурентов.
Как я уже упоминала, для того, чтобы составить семантическое ядро, не достаточно просто подобрать подходящие слова. Необходимо выбирать их из статистики запросов поисковых систем, проанализировать поисковую выдачу по этим словам и провести анализ своих потенциальных конкурентов.
Как я уже упоминала, для того, чтобы составить семантическое ядро, не достаточно просто подобрать подходящие слова. Необходимо выбирать их из статистики запросов поисковых систем, проанализировать поисковую выдачу по этим словам и провести анализ своих потенциальных конкурентов.
Доброго времени суток, уважаемые читатели. На прошлой неделе, 12 октября была статья Составление семантического ядра, в ходе которой мы научились выбирать ключевые слова для нашего блога. Но когда мы говорим о составлении семантического ядра для сайта, мы подразумеваем не просто выбор ключевых слов, отражающих суть нашего ресурса, но и полный анализ ниши, в которой находится сайт. Поэтому данную статью нельзя рассматривать в отрыве от предыдущей статьи и будущей, которая будет об анализе конкурентов по поисковый выдачи.
В целом составление семантического ядра я бы разделила на три основных шага, которые необходимо знать и применять на практике.
В целом составление семантического ядра я бы разделила на три основных шага, которые необходимо знать и применять на практике.
Доброго времени суток, уважаемые читатели. Вам грустно не стало от прочтения заголовка статьи? Наверно, в каждом блоге есть что-то подобное. И это не удивительно. У каждого автора есть свое видение на то, как стать блоггером. И я тоже решила поделиться с вами своими мыслями. И скорее всего, моя статья не ответ на вопрос, как стать блоггером, а рассуждения на заданную тему. Что я вкладываю в понятие "блог", "блоггер".

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

Кто он вообще такой, блоггер? Это человек, который ведет блог. А блог это электронный дневник. Т.е. ответ на вопрос, как стать блоггером, напрашивается сам. Что бы стать блоггером, нужно завести свой блог.
Доброго времени суток, уважаемые читатели. Вы считаете, что вы знаете, как установить счетчик статистики и другие кнопки в блог? Не стоит быть такими самоуверенными:). Предлагаю вашему вниманию элегантное решение для блогов, компактный блок со счетчиками и другими кнопками. Моя статья пригодится не только новичкам, которые вообще не знают, как устанавливаются счетчики в блог, но и бывалым блоггерам.

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

Лично я большой приверженец минимализма, и в дизайне сайтов внешнему виду придаю последнее значение. Больше ценю удобство и функциональность. По долгу могу не заниматься внешним видом своего блога, то время жалко на это тратить, лучше статью написать, то обычная лень одолевает. Казалось бы, зачем. Вроде и так все хорошо. И все же, иной раз находит настроение.
Доброго времени суток, уважаемые читатели. Думаю, сегодняшняя статья пригодится не только тем, кто ещё не имеет своего блога, но и тем, кто уже давно ведет свой блог, и возможно даже не один. Некоторые последние события натолкнули меня на мысль написать эту статью. Считаю, стоит начать с определения, что такое блог. Я считаю, что если термин не совсем понятен, то стоит обратиться к признанным источникам, например, к энциклопедиям. В рунете на данный момент существует, наверно, только одна, действительно, признанная энциклопедия, это Википедия. Даже не буду переписывать своими словами, чтобы не искажать суть, просто скопирую несколько строк из определения:
Блог (англ. blog, от «web log» — сетевой журнал или дневник событий) — веб-сайт, основное содержимое которого — регулярно добавляемые записи… По авторскому составу блоги могут быть личными, групповыми (корпоративными, клубными…) или общественными (открытыми). По содержанию — тематическими или общими.
По особенностям контента
Контентный блог — блог, публикующий первичный авторский контент.
По данным Википедии
В этом определении я подчеркнула слова, на которые хотела бы обратить особое внимание.
Доброго времени суток, уважаемые читатели. Сегодня мы поговорим о таком важном и волнующем всех вопросе, как позиции сайта в поисковых системах. А точнее, речь пойдет об инструментах, с помощью которых мы можем проверять позиции сайта.

Для начала все инструменты, с помощью которых мы можем проверить позиции сайта делятся на платные и бесплатные.
- Проверка позиций с помощью программы Site-Auditor
- Проверка позиций через инструменты вебмастера
- Проверка позиций сайта через сервис статистики Liveinternet
- Бесплатная проверка позиций в системе MegaIndex

Для начала все инструменты, с помощью которых мы можем проверить позиции сайта делятся на платные и бесплатные.
Доброго времени суток, уважаемые читатели. Сегодня мне захотелось разобраться с таким понятием, как кросспостинг. Что это такое. Есть ли от него польза, или это реальное зло, за которое можно получить санкции поисковых систем. Прежде, чем начать рассуждения, стоит разобраться, что такое кросспостинг.
Что такое кросспостинг
В сети много определений этого слова, но давайте сами разберемся, что это такое. Не сложно догадаться, что у этого слова англоязычное происхождение, и угадываются слова кросс и постинг, если с постингом все более понятно, от слова пост (post) – сообщение, предполагается публикация сообщения - posting, то кросс (cross) - имеет несколько разных переводов. Но помня школьные кроссы на уроках физкультуры, мне почему-то кажется, что это слово имеет отношение именно к спорту. Все, наверно, бегали кроссы в школе? Так вот и получается, что кросспостинг – это пробежка по постам. Но это дословно.
На самом деле предполагается быстрая публикация одной статьи в различных сервисах – блогах, форумах, социальных сетях. По сути, публикуя ссылки на свои статьи в твитере или анонсируя в различных социальных сетях, вы уже занимаетесь кросспостингом.

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

И так, придя в мир блоггинга, вам просто не обойтись без освоения новых программ для облегчения собственного труда.
Если вы до сих пор пользовались браузером Internet Explorer, то самое первое, что я бы вам посоветовала, так это сменить браузер. IE совершенно не подходит для ежедневного мониторинга интернета. Постоянно зависает, некорректно отображает многие сайты, не обладает всевозможными расширениями, помогающими в нашей работе.
Доброго времени суток, уважаемые читатели. Постоянное общение с вами, особенно за рамками этого блога, привели меня к необходимости написать эту статью. Как уже писала в одной из последних статей, есть такие вещи, которые, кажется, известны всем, потому что сам об этом знаешь, и думаешь, что знают и другие. На самом же деле, даже самые обычные вещи для интернета, для многих пользователей остаются непонятыми. Поэтому, сегодня я решила уделить внимание таким темам:
- Что такое сайт
- Что такое блог
- Что такое блоговый сервис, блог платформа и CMS.
- Что такое хостинг
- Немного напутственных слов
И так, начиная познавать интернет, мы сталкиваемся с таким понятием, как сайт. Сайт - это X количество веб-страниц, объединенных одним названием, доменом. Все, что вы можете открыть в своем браузере, будет веб-страницей, т.е. сайтом.
Блог - это "разновидность" сайта. Сайт, как понятие, имеет свою классификацию, т.е. подразделяется на виды. И блог в этой классификации - это один из видов сайта. Т.е. блог - это не отдельно взятая единица, а всего лишь подвид сайта. При этом, блог, естественно, имеет свое определение.
Блог - это дневник, веб-дневник, в котором автор делает записи. Я не собираюсь подробно все расписывать, а дам вам совет, если вы встречаете неизвестные или малопонятные термины, пользуйтесь словарями и справочниками. Есть замечательный сервис Википедия. Это ваш инструмент, которым нужно всегда пользоваться.
Доброго времени суток, уважаемые читатели. Есть такая информация, которая, на первый взгляд кажется, всем известна, а на деле оказывается, что многие не знают об этом. Поэтому сегодня пойдет речь о панели инструментов для веб-мастеров от Яндекса - Яндекс Вебмастер. План такой:
- Что такое Яндекс Вебмастер и зачем нужен
- Как добавить сайт в Яндекс Вебмастер
- Как пользоваться инструментами для веб-мастера в Яндекс Вебмастер
И так, по порядку.
Что такое Яндекс Вебмастер и зачем нужен.
Яндекс вебмастер это специальная страничка в Яндексе, предназначенная для всех владельцев сайтов и блогов в интернете. На этой страничке, каждый веб-мастер (владелец сайта или блога) может добавить свой сайт, "сказать" поисковой системе о том, что это именно его сайт. Для чего это нужно?
Чтобы следить, как поисковая система индексирует ваш сайт, когда последний раз посещал ваш сайт или блог поисковый робот, сколько страниц загрузил в свою базу, какие обнаружил ошибки, сколько внешних ссылок видит поисковая система на ваш сайт, по каким запросам и на каких позициях находится ваш сайт по этим запросам - это только малая часть того, что дает нам Яндекс Вебмастер. Давайте разберем подробнее.
Чтобы следить, как поисковая система индексирует ваш сайт, когда последний раз посещал ваш сайт или блог поисковый робот, сколько страниц загрузил в свою базу, какие обнаружил ошибки, сколько внешних ссылок видит поисковая система на ваш сайт, по каким запросам и на каких позициях находится ваш сайт по этим запросам - это только малая часть того, что дает нам Яндекс Вебмастер. Давайте разберем подробнее.
Добрый день, уважаемые читатели. В своем блоге я не раз писала, как подбирать поисковые запросы, как оптимизироваться страницы под поисковые запросы, как подбирать ключевые слова под поисковые запросы, четко следуя таким не хитрым правилам, вы совершаете большую часть работы по продвижению вашего блога в поисковых системах. Но, к сожалению, и этого бывает недостаточно.
Ведь, как известно, большая доля переходов приходится на те сайты из результатов поиска, которые находятся в самом верху, на первых позициях. А если ваш блог показывается по определенному запросу, но не достаточно высоко, чтобы получить большое количество переходов, что тогда делать? И как узнать, по каким именно запросам показывается ваш блог или какая-то конкретная статья? Об этом сегодня и пойдет речь. Мы будем анализировать свои поисковые запросы, по которым блог показывается в результатах поиска, но не имеет переходов из поисковых систем.
И так, разберем такую ситуацию - вы выбираете тематику блога или будущей статьи, подбираете к ним ключевые слова, оптимизируете страницу по этому запросу, а посетителей нет.
Добрый день, уважаемые блоггеры. Это очередная статья из рубрики "Азбука блоггера"
Принимая решение завести свой блог, в подавляющем большинстве вы не просто хотите писать, но что более важно, поделиться своими мыслями с другими людьми. Вам важно, чтобы вас читали, и чтобы ваша информация расходилась по интернету и привлекала все больше и больше читателей.

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