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

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

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

Заходим во вкладку шаблон изменить HTML. Находим строку ]]></b:skin> и над ней устанавливаем следующий код.

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

Результат. Картинка, заголовок и описание получились строго по центру.
выровнять изображение в шапке

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

#header-inner {
 background-size: cover;
 width: 100% !important;
 text-align: center;
 }
 #header-inner img {
 width: 100%;
 height: 100%;
 }


Чтобы описание блога было слева, то пишем это-

#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}


Справа-
#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}

При изменениях нажимайте кнопку просмотр, чтобы видеть результат. И если всё нравится - сохранить.

Используя стили можно сделать картинку слева или справа на фоне.


#header-inner h1 {
  overflow: hidden;
  line-height: 150px; /* блок с текстом по вертикали */
  text-align: center; /* текст по центру по горизонтали */
  position: relative;
}
#header-inner h1:before {
  content: url(адрес картинки);
}


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

Подведите курсор на шапку блога и щёлкните правой кнопкой мыши. Выберете опцию ПРОСМОТРЕТЬ КОД. Откроется окно, где в левой части можно увидеть этот размер.


Некоторые начинающие блогеры, когда загружают готовую картинку в разделе дизайн - гаджет HEDER, делают ошибку. Не прописывают название и описание блога. Потому что они не красиво накладываются на изображение. Это не очень хорошо для оптимизации, так как получается, что не название title не описание блога description поисковик не видит. В этом случае оптимальным вариантом будет опять использовать CSS.
Задать прозрачность тексту и указать размер 0.

.Header h1 {
 font: normal normal 0 sans-serif;
 color: transparent;
}


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

/* Header
----------------------------------------------- */

Коль пошла такая тема, позволю себе немного разобрать, что к чему, чтобы понятнее было.

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

- .header-outer - общий, внешний контейнер;
- .header-inner - внутренний контейнер;
- .titlewrapper - блок названия;
- .Header h1 - название блога;
- .descriptionwrapper - контейнер блока описания;
- .Header .description - блок описания;

Обычно в них и добавляются стили CSS.

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

А у меня сегодня всё. Спасибо всем. Увидимся.
👇
здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

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

Вариант 1.

Такое окно с предупреждением о переходе на другой сайт. Блокирует любое действие пользователя, на какой-то момент оно задерживает его на странице и, в то же время, выдаёт предупреждение.

Попробуйте перейти по ссылке ниже.

шпаргалки блогерши

<a href=" ссылка на страницу " onclick="return confirm('Вы уверены что хотите перейти по ссылке?')">шпаргалки блогерши</a>,

Вариант 2.

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


<script>
if(confirm("Если вы не нашли здесь нужной информации - нажмите ОК, где вы наверняка найдёте много полезного! Желаете остаться на этой странице - нажмите Отмена! "))
{
location = "адрес страницы ";
}
else
{
history.back();
}
</script>

Вариант 3.

Ещё одно диалоговое окно, которое появляется при копировании материала и блокирует действия пользователя пока он не нажмет на кнопку. Можно обратится к пользователю с предложением поделиться информацией или напомнить, чтобы дал активную ссылку на скопированный текст.
Здесь я этот пример дать не могу, так как предполагается, что все коды, которые я публикую в блоке, предназначены исключительно для копирования. И такое окно будет совершенно не уместным. Посмотреть наглядно можно на тестовом блоге здесь. Попробуйте скопировать кусочек любого фрагмента.
&lt;body onCopy=&quot;alert(&#39;Вы скопировали контент блога. Автору будет очень приятно если вы поделитесь информацией с друзьями и не забудете указать активную ссылку на источник при публикации материала!&#39;); return true;&quot;&gt;

Два первых кода устанавливаются непосредственно на странице любого сообщения в режиме HTML. Отображаться диалоговые окна будут только на этих страницах.

Последний код устанавливаем в шаблоне блога перед закрывающимся тегом </head>. Он будет появляться всегда, если пользователь скопировал любую информацию на вашем блоге.😌

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

Введите Ваш email


Здравствуйте, друзья, читатели и гости блога. Сегодня опять статья про картинки. Очень уж мне эта тема нравится. Сделаем эффект маски для изображений используя свойство градиент. Не нужно прибегать к графическим библиотекам и другим редакторам. Всё сделаем сами просто в сообщении блога.

Градиенты используются для плавной заливки элемента страницы, когда один цвет переходит в другой. В статье красивые цветовые эффекты CSS я подробно писала о них.

Маска действует в виде наложения на элемент и обрезает его визуально. Делает участки картинки прозрачным или полупрозрачными. Маска состоит из изображения или градиента. Давайте  смотреть.

Маска с использованием градиента.

Для примера возьмём вот такую картинку jpg.


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

<img src=" адрес картинки jpg" style="-webkit-mask-box-image:
    -webkit-linear-gradient(black, transparent);">

В результате чего имеем-




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

<img src=" адрес картинки jpg" style="-webkit-mask-box-image: -webkit-linear-gradient( left,transparent, transparent 5%, white 20%, white 80%, transparent 95%); border-radius: 70px;" />

Результат-



Используя радиальный градиент можно замаскировать любой элемент на странице, допустим участок текста-

<div style="background: white; padding: 20px;
     -webkit-mask-box-image: -webkit-radial-gradient(white,transparent 50%);">здесь текст </div>

 Вот результат-
ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn


Маска с использованием изображения.

В этом случае нам понадобится само изображение в формате jpg. Добавим ему свойство webkit-mask-box-image , что позволит масштабировать маску по границам картинки. И нам нужно изображение - маска, какой - то не прозрачной фигуры, на прозрачном фоне( я взяла для примера сердечко в формате PND). Чтобы было понятнее - эта картинка, будет как "трафарет" для обрезания основной .
Хочу отметить, что свойство webkit-mask-box-image не поддерживается браузером mozilla.

<img src="адрес картинки. jpg" width="250" height="140" style="-webkit-mask-box-image: url(адрес картинки .png);" />

И вот результат-

В Блоггере все эти коды с эффектом маски и вашими картинками устанавливаются в редакторе сообщения в режиме HTML в нужном месте сообщения. Попробуйте с ними поиграться. Можно создать просто необыкновенные визуальные отображения ваших изображений. У меня всё. Спасибо всем за внимание и до новых встреч.
👇
здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

В статье заметки на полях был предложен подобный вариант. Так же, используя стили CSS с лёгкостью зафиксируем блок в нужном нам месте. Посмотрите на тестовом блоге картинку вверху слева и выдвигающуюся боковую панельку, при нажатии на которую появляется гаджет Google+ Followers.

Код для картинки.


<style>
 #panel {
 position: fixed;
 top: 80px;    /* расстояние от верхнего края*/
 left: 0;
 }  </style>

<div id="panel"><img src=" адрес изображения " /> </div>


Картинки вставляйте любого формата - png, gif и jpeg. Какую пожелаете. Расположить сам блок с картинкой можно в любом месте блога - по центру, справа, выше, ниже, соответственно меняя значения

top: 80px;
 left: 0;


Код выдвижного блока. Принцип тот же, только добавим ещё стили для корректного отображения на странице.

<style>#panel 1 {
  position: fixed;
  top: 260px; /* расстояние от верхнего края*/
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#panel 1_inner {
  position: fixed;
  top: 260px;     /* расстояние от верхнего края*/
  left: -260px;    /* величина настраиваемая*/
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#panel 1:hover {
  left: 210px;
}
#panel 1:hover #panel 1_inner {
  left: 0;
}</style>

<div id="panel 1 ">
  <img src="адрес картинки" alt="я в гугл+" />
  <div id="panel 1_inner">
 Здесь вставляйте хоть что - код кнопки, баннера, формы связи, подписки и так далее
  </div>
</div>

Меняйте значения  top:расположение относительно верха. left:- так же подбирается индивидуально. Я отметила пояснительным текстом в коде. Каждый из кодов устанавливается в гаджет HTML/JavaScript в любом месте макета блога. Так что, для начинающих блогеров создать такое не составит особого труда.

Сегодня у меня всё. Спасибо что читаете мои шпаргалки и до встречи.

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

Введите Ваш email


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

Вообще, если уж говорить правильно - не ссылка, а гиперссылка. Но уж коль на слуху и языке у всех всё же ССЫЛКА, так и назовём её.

Что такое ссылка? Это фрагмент нашего сообщения - текст, картинка, кнопка, при нажатии на которую мы переходим на другие страницы.

Какие виды ссылок существуют?

Видов и типов ссылок достаточно много. Остановлюсь на основных. Как они могут выглядеть.

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

Вот простой пример анкорной ссылки -

битые ссылки и как их проверить

Вся структура такой ссылки в документе выглядит так

<a href=" адрес страницы куда приведёт ссылка" > отображаемый текст</a>

Безанкорная ссылка представляет собой просто адрес страницы по которой, так же. осуществляется переход и выглядит она так - http://www.shpargalochki.ru.

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

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

Тут есть ещё 2 функции, но об этом ниже.

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

Что такое активные и неактивные ссылки.

Активные ссылки это именно те, при нажатии на которую сразу осуществляется переход на указанную страницу. Неактивные ссылки прописываются текстом Вот пример таковой - shpargalochki.ru. Пользователю нужно её скопировать и вставить в окно браузера, чтобы перейти по ней. Или выделить ссылку, нажать правой кнопкой мыши и выбрать перейти по адресу.


Что такое внутренние и внешние ссылки.

Внутренние ссылки - это ссылки, которые перенаправляют читателя на страницы вашего же блога. Всем знакомое слово ЛИНК. То есть мы таким образом делаем перелинковку. Это, в первую очередь, создаёт удобство для пользователя.
Человек зашёл на ваш блог, по ссылке получил ещё дополнительную информацию - это улучшает статистику поведенческих факторов, поисковые машины это видят и учитывают. Они помогают поисковым машинам, создают связанную сеть ваших постов на сайте

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

Что такое открытые и закрытые ссылки.

Выше я говорила о двух функциях, которые предлагает Блоггер при добавлении ссылки. Посмотрите, одна из них добавить атрибут rel=nofollow.  Если поставить галочку в окошке, мы запретим поисковой системе Гугл индексировать эту ссылку. Если ссылку закрыть тегом <noindex> - ссылка будет закрыта от Яндекс.

<noindex><a href="http:// ваш домен">здесь анкор или текст гиперссылки</a></noindex>

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

Если установить флажок в окошке открыть ссылку в новом окне, то адрес откроется в новом окне браузера. Можно сделать, чтобы каждая ссылка открывалась так автоматически. Об этом я писала здесь.

Думаю, что мне пора на этом остановиться. Такое впечатление, что эта тема на столько глубокая и в одной статье её не раскрыть. Придётся ещё не раз вернуться. Но основные моменты, как могла, постаралась донести. Пару моментов ещё.

Если ваш блог ещё молодой не стоит злоупотреблять внешними ссылками.
Не стоит перебарщивать и с внутренними ссылками. Тут сам Гугл нам говорит-

Придерживайтесь адекватного количества внутренних ссылок на странице.
И что? Тут уж решать только вам. Если статья небольшого объёма, то 2-3 ссылки вполне достаточно.

Сегодня на этом закончу. Все вопросы оставляйте в комментариях. Спасибо всем за внимание и до новых встреч.
👇
здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Пользовательский поиск