К основному контенту

Создаем уникальную шапку для блога

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

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

картинка в шапке блога
И попадаем в следующее меню:
картинка в шапке блога2
В этом окне вы можете выбрать картинку с жесткого диска и загрузить ее выбрав параметр сжать до размеров экрана. Однако ширина картинки останется неизменной , да и не все картинки подойдут по длине и ширине,Ю ведь в каждом шаблоне свои размеры шапки.
Для того чтобы узнать размеры шапки вашего шаблона, необходимо зайти в Изменить HTML и найти следующий скрипт:
#header-wrapper {
height:138px;
margin:0 auto;
width:950px;
background:#FF0000;
}
Где красные строчки указывают высоту и длину шапки вашего блога соответственно. Эти параметры желательно запомнить или записать далее они нам пригодятся.
Владея выше перечисленными сведениями можно перейти непосредственно к созданию шапки вашего блога. Для этого я предлагаю использовать бесплатный сервис Xheader, который можно скачать здесь.
В архиве находятся два файла первый Xheader setup – установочный файл программы, второй Xheader Bonus – бонусная часть с 500 бесплатных шапок для блоггер.
Итак скачав и установив эту программу мы можем перейти к созданию шапки блога. Запустив программу вы увидите следующее:
Xheader, создание шапки блога
В левом верхнем углу нажмите кнопку NEW для создания уникальной шапки вашего блога. Перед вами откроется окно в котором можно выбрать следующие варианты:
1. Load from Template library – что можно использовать если вы установили бонусные 500 вариантов шапок для блоггер, Советую установить так как там есть более 10 тематик, музыка, бизнес, и тд.. с очень впечатляющими вариациями.
2.Create a blank header – создать чистую шапку.
3. Load XHF – загрузить ранее сохраненные вами недоработанные файлы.
4. Load image from hard disk – возможно наиболее важное так как каждому из нас хочется использовать свои картинки  и фотографии в оформлении блога.
Хочу заметить, что работа во всех 4 вариантах примерно одинакова, а я рассмотрю наиболее для нас важный 4ый.
Итак выбираем 4 вариант - загрузку с жесткого диска:
Xheader, создание шапки блога3
Как мы видим я выбрал картинку которая мне понравилась. Изначально она практически подходила по размерам к шапке моего блога, однако как я выяснил раньше ширина моей картинки 950 mpx, а ширина картинки которую я загрузил 900 mpx, для того чтобы изменить длину мы заходим в верхнем меню в Options/ Resize header, и открывается следующее меню:
изменяем размер шапки блога
Здесь мы и вводим необходимую высоты и длину шапки блога, нажимаем ок, после чего все автоматически подгоняется.
Далее выбрав любую из функций в панели инструментов(написать текст, сделать рамку…) вы должны выделить область где хотите внести изменения, а затем начать их делать в панели ниже, вот так:
Xheader, создание шапки блога4
После создания сохраняем шапку блога на жестком диске и загружаем в блоггер как я рассказывал в самом начале. Стоит заметить, что я выбрал параметр отображать картинку вместо названия блога, так что я написал название блога вручную на картинке, и вот что получилось:
шапка шаблона
Вот так красиво получилось.
Хочу напомнить, что многие смогут найти хорошие шапки в 500 бесплатных вариантах, где они практически готовы к использованию. Немаловажным моментом будет для тех кто хочет использовать свои фотографии будет, то что все фотографии как правило квадратные, а не прямо угольные. Для этого хочу посоветовать еще один сервис Paint.net, скачать его можно здесь,
Сразу же хочу вкратце рассказать как работать с ним:
После установки, открываем необходимую вам картинку, в файл/открыть вот так:
шапка блога, создание
Зная, что все шапки блогов будут как правило вытянутые необходимо искать такие фото в которых после обрезания останется доступный, видимый материал, в моем случае это низ картинки, где идет надпись.
Во вкладке Изображение/Размер полотна мы можем обрезать необходимый нам участок, вот так:
шапка блога, создание2
Здесь мы выбираем необходимую нам длину и высоту шапки, а так же отмечаем какой край оставляем нетронутым, – в моем случае это нижний край так как именно там идет надпись. И вот вам еще одна готовая шапка для блога с названием:готовая шапка блога 2
В следующих статьях расскажу как делать тоже самое с нижней частью вашего блога. Если что-то не понятно, то пишите в комментариях.

Комментарии

  1. Спасибо. Очень полезный пост.
    Xheader установил.

    Сложность в другом.

    В шаблоне Стандартный (Легкость)
    в код HTML #header-wrapper не найден.

    Подскажите как решить проблему ?

    ОтветитьУдалить
  2. wrap только в одном месте ... но не похож на тот код, что описан.
    может у меня особый шаблон ? Называется "Легкость"
    Не присутствует такого

    ОтветитьУдалить
  3. вот у Вас поле где начинается редактирование шапки

    /* Header

    ищите данный тэг

    ОтветитьУдалить
  4. /* Header
    ----------------------------------------------- */
    .header-inner {
    padding: 27px 0 3px;
    }
    .header-inner .section {
    margin: 0 35px;
    }
    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    }
    .Header h1 a {
    color: $(header.text.color);
    }
    .Header .description {
    font-size: 115%;
    color: $(description.text.color);
    }
    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    }

    Вот, весь код который связан с тегом /* Header

    ОтветитьУдалить
  5. ну да! Вы можете вставить картинку вместо заголовка в настройках блога!

    ОтветитьУдалить
  6. вставить могу
    только не понятно какой размер

    ОтветитьУдалить
  7. У Вас не работает ссылка на скачивание Xheader

    ОтветитьУдалить
  8. вылетел хостинг по видимому, попробуйте в интернете скачать.

    ОтветитьУдалить
  9. What are the best casinos to play in 2021?
    Which casinos offer slots? — Casino Sites. Best casino sites are 1xbet korean those worrione that allow players to 사설 토토 사이트 try a game from anywhere. casinosites.one The most common online slots https://sol.edu.kg/

    ОтветитьУдалить

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

Популярные сообщения из этого блога

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж

Добавляем красивый гаджет Поделиться

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

Открыть несколько ссылок одним кликом мыши

Многие из Вас наверняка встречали сайты, на которых нажав на одну ссылку открывается сразу несколько сайтов. Так делают те кто хочет прорекламировать независимый интернет ресурс, в таком случае открывается ссылка по которой вы должны перейти и еще одна, так-же это делают для увеличения просмотров определенных страниц на сайте, либо если действительно необходимо открыть сразу две ссылки. Для обычного блоггера это может быть полезным так как заинтересовав человека одной ссылкой Вы как бы повышаете популярность Вашего ресурса, так как он посетит вместо одной страницы в Вашем блоге сразу несколько. Чтобы вставить такую ссылку необходимо к тексту добавить следующий код: <a href="http://www.ссылка1.com/" target="_blank" onmouseover="window.open(&quot;&quot;http://www.ссылка2.com&quot;&quot;);window.open(&quot;&quot;http://www.ссылка3.com&quot;&quot;);">Click Here Link Bucket</a>   Вставьте свои ссылки, увеличьт