Шапка для блога. Шапка блоггер


Шапка для блога. Как сделать самому

Шапка для блога

 

 

Я уже говорила, что снова стала студенткой. Беслпатная школа, где я прохожу обучение - это Академия 3Steam. Заканчивается вторая неделя учебы, и завтра нас ждет очередной вебинар. За эти две недели была проделана большая работа, и очень многому нас уже успели обучить. Я получаю очень много благодарных отзывов от тех, кто пошел учиться по моему приглашению. И если на прошлой неделе мы делали основные настройки, и наводили порядки в своих почтовых ящиках, социальных сетях, в скайпе, знакомились с новыми программами, учились оптимизировать работу своего компьютера, продумывали тему для блога, то уже на этой неделе мы вплотную приступили к его созданию.

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

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

А вот внимательности многим не хватает. И в письмах, и в видеоуроках так все подробно написано, что называется "разжевано", что остается проглотить, и все равно многие задают такие вопросы, как буд-то не смотрели уроки, или не читали, что написано в письмах. Такое отношение недопустимо, ведь иногда можно сделать непоправимые ошибки, а потом придется кусать локти. Мы создаем блог, от которого в будущем надеемся получать доход, поэтому нужно научиться все делать внимательно, шаг за шагом, не стремиться ухватить все и сразу. Сделайте что-то одно полностью, потом переходите к следующему уроку.

Но продолжу тему о шапке для блога. Цена ее относительно невелика. Всего лишь 579 руб, причем сделана  профессиональными дизайнерами, и она будет хорошим украшением вашего блога. Причем вы получите шапку необходимого размера и вашу подпись, которые вы будете использовать для вашей рассылки.  Ведь, как говорила Людмила Королева: "У вас есть несколько секунд, чтобы привлечь внимание посетителя, которому может понравиться ваш блог и он останется, чтобы ознакомиться с содержимым, или наоборот, внешний вид может только оттолкнуть". Поэтому нужно уделить особое внимание не только содержимому, но и дизайну блога. Как говорится: "Встречают по одежке..."

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

 

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

http://lyudmilamoiseenkova1.blogspot.com/

Для многих встанет вопрос - где же взять программу фотошоп, и где взять шрифты. Передо мной когда-то тоже стоял такой вопрос. Я очень люблю своих подписчиков, мне приятно получать от них добрые пожелания и теплые слова благодарности, поэтому сегодня я высылаю всем программу фотошоп, которая весит не много и не требует установки (хотя большинство ее уже получили), а также высылаю набор шрифтов, которые нужно будет установить на свой компьютер, и тогда они отобразятся в программе. Устанавливаются они легко.

Разорхивируйте папку с шрифтами. Для этого нажмите правой кнопкой мыши по архиву, в выпавшем окне выберите - извлечь в текущую папку. Заходите в папку, чтобы просмотреть шрифт, нажмите по нему 2 раза левой кнопкой мыши:

шрифты

 

Те шрифты, которые вам понравятся, вы сможете установить на компьютер, нажав на кнопочку - установить:

шрифты

 

 

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

 

internet-ledi.ru

Создаем шапку для блога

Как сделать шапку блога

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

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

Осталось вставить подготовленную картинку в  шапку блога. Заходим в Дизайн - -Элементы страницы и в районе заголовка жмем изменить.

Как сделать шапку блога
Перед нами открывается меню:
Как сделать шапку блога

В  этом окне выбираем и загружаем с жесткого диска подготовленную картинку. Место размещения - после названия и описания.

Все. Картинка установлена. Цвет текста должен быть контрастным, чтобы заголовок был читабельным. Но так хотелось чтоб надпись была с обводкой.

Со временем нашла два неплохих сервиса, где можно создать красивую надпись. Сделала себе еще две картинки на сервисе cooltext.com - одну с названием блога, другую - с описанием. И методом наложения  расположила на существующей картинке. Сначало было непонятно: если в меню "Настроить заголовок" уберу  "Название блога" и "Описание Блога" - как их увидит поисковик. Если оставлю, они продублируют мою картинку. Методом научного тыка вопрос был решен. Галочку поставить - вместо заголовка и описания.

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

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

Поигралась и вот что у меня получилось:

Как сделать шапку блога
Как сделать шапку блога
Как сделать шапку блога
Как сделать шапку блога
Как сделать шапку блога

Использовала материалы:

Основа шапки

Рис.1 и 2   -  картинки с wordpress.

Рис.3         -  личное фото

Рис.4         -  белый фон

Рис.5         -  текстура с сервиса argusfon.com/category/obo-vsyom  

Надписи

Рис.1, 2 и 3 - сервис effectfree.ru Наложить текст Рис .4 и 5    - онлайн редактор pixlr.com/editor

Надеюсь, теперь шапка вашего блога будет эксклюзивной и привлекательной.

Понравилась статья? Поделитесь с друзьями.

veraborok.blogspot.ru

Шапка для блога | Seo Блогспот

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

  У всех без исключения блогов Блогспот, шапка стандартная. Реализована она в виде вывода title (Название)и description (Описание) блога, вверху страницы. Будь у вас стандартный шаблон или уникальный. Если конечно ваш шаблон не делали под заказ. Настроить название и описание можно в “Панели инструментов” – “Настройки” - “Основное”.

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

Как сделать шапку для блога

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

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

  Если такого редактора нет в наличии, подойдет стандартный Paint Windows. Самое главное сохранять созданную картинку в формате PNG (Не потеряется качество и размер будет меньше). Про размер я упомянул не зря.

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

  Для создания своей шапки лично я использовал Photoshop Portable и Paint. Так как у Portable ограниченное количество функции, я чередовал два редактора изображений.

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

Как вставить шапку в блог

Когда писал эту статью на своем ноутбуке, мне понадобился его ремонт. Помощь, как сделать замену матрицы ноутбука на дому нашел на этом сайте. Эфективно и достойно! Давайте продолжим.   После того как вы создали свой собственный логотип. Нужно вставить шапку в блог. Тут есть два варианта: Использовать стандартную настройку заголовка или найти в редакторе шаблона строку CSS, где нужно будет поменять URL картинки.
  • Первый вариант – Настройка заголовка. 

  Зайдите в “Панель инструментов”, выберите “Дизайн”, найдите виджет “Заголовок”, нажмите изменить. Появится вот такое вторичное окно.

  Выберите загрузить картинку, после загрузки шапка появиться в окне. Выберите место размещения. Лучше всего, если вы хотите полностью убрать текстовое название и описание блога, выбрать “Вместо заголовка и описания”. В этом случае картинка полностью заменит стандартную шапку Блогспот.

Таким способом вставить шапку в блог не составит большого труда.

  • Второй вариант – Изменение CSS

  Вставить шапку с помощью второго варианта будет значительно труднее, в особенности, если навыков в CSS и Html у вас нет. Кстати шапка блога Seo блогспот, реализована с помощью второго варианта, признаюсь мне пришлось попотеть.

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

Перейдите в “Шаблон” - ”Изменить Html”.

Находим примерно такую строчку:

body{background

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

В строке находите

url(http:// - здесь то и будет вся шапка вашего блога. Всё верхнее изображение.

  Перейдите по url, скопируйте картинку, отредактируйте ее в редакторе (увеличьте, наведите красоту). Если такой строки в вашем шаблоне нет, ищите похожие, ориентируйтесь на url. Просматривайте все изображения, уверяю вас найдете для себя, что то новое. После редактирования старой шапки, сохраните новую, загрузите ее на хостинг изображений, в случае с Блогспот, желательно picasa.

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

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

Поэтому перед изменением шаблона обязательно сохраните его копию.

avitra.ru

Как добавить гаджет над шапкой в Blogger

 Захотелось мне добавить гаджет над шапкой в Blogger. Но по умолчанию в блоке header всего один гаджет - "Заголовок". В этот же гаджет можно и добавить картинку со своей шапкой для блога. Иногда необходимо добавить баннер, объявление, бегущую строку и др. Инструкция оказалась очень простой. Так можно вставлять несколько гаджетов как над шапкой, так и под ней.

Как добавить гаджет над шапкой в Blogger

1. Делаем резервную копию шаблона блога на всякий случай. 2. Переходим в настройках блога слева в меню в пункт Тема. Нажимаем Изменить HTML.  3. Далее в списке виджетов выбираем Header1 4. Поднимаемся на строку выше и видим код <b:section maxwidgets='1' showaddelement='no'> 5. В этом коде нам нужно сделать всего 2 простых изменения:

    1) цифру '1' заменить на цифру '2' или более (в зависимости от количества гаджетов, которые будете добавлять в блок header)    2) заменить значение 'no' на 'yes' (чтобы гаджеты отображались) 6.  Далее переходим в пункт Дизайн. Нажимаем кнопку F5, чтобы обновить страницу в браузере. И видим, что над гаджетом Заголовок появилась надпись Добавить гаджет.

И сейчас можем над шапкой, а потом переместить под шапку, если необходимо, любой из гаджетов для Blogger.  Если же у Вас, как и у меня, после добавления гаджета над шапкой видно фон, который был первоначально настроен в шаблоне: То нужно перейти в конструктор тем и в пункте Дополнительно -> Фон -> Фон верхнего колонтитула нужно поставить прозрачный. Я пока добавила над шапкой блога в Blogger гаджет HTML/JavaScript, а в него код бегущей строки со ссылками. Потом и другие гаджеты попробую добавить. Не забывайте, что простым перетаскиванием в блоке header расположение гаджетов можно менять: размещать над или под шапкой (гаджетом "Заголовок").

samasajt.blogspot.ru

Полезности: Полезности - живая шапка на блог Blogger и другое

Полезности - динамичная шапка на блог Blogger, как убрать надпись в подвале и как повесить колокольчики по углам блога. Вау! Сразу три полезности.

   *** Приступим. Как сделать картинки для шапки на блог Blogger. Размер картинок. Как и где получить ссылки на свои картинки. Это вопросы мы решили в предыдущем посте. Кто подзабыл - можно посмотреть.    *** Как сделать живую или динамичную шапку на блог. Оказывается, достаточно просто. Только надо делать внимательно и четко.  Полезности показывают пример такой шапки.

Идем - Шаблон - Изменить. Ищем строку

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

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

maxwidgets='3'и maxwidgets='yes'

Расположена искомая строка примерно на уровне строк с номером 615-667 в зависимости от шаблона. У меня эта строка стоит под номером 665.

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

В это новое поле добавляем гаджет HTML - название пустое, а в содержание вставляем следующий код

<style type="text/css">

#slider {width: 900px; height: 200px; background: #fff no-repeat 50% 50%;

position: relative;

margin: 0 auto;}

#slider img

{position: absolute;

border: none;

display: none;}

</style> <script src="http://code.helperblogger.com/js-image-slider.js#sthash.THuZbOyd.dpuf "

type="text/javascript"></script> <br />

<div id="slider">

<img border="0" width="900" src="http://s50.radikal.ru/i130/1401/b2/8e8d0a077baa.jpg" />

<img alt="" src="http://s004.radikal.ru/i208/1401/ea/911c04a4e03e.jpg " /><img alt="" src="http://s020.radikal.ru/i717/1401/30/7bcc3303b359.jpg " /><img alt="" src="http://s006.radikal.ru/i215/1401/1f/cd9705fdba7e.jpg " /><img alt="" src="http://s009.radikal.ru/i310/1401/c6/a06e25b1461c.jpg " /></div>

Мой размер 900 на 200 (выделено цветом). Вы можете устанавливать свои размеры. Чтобы вставить свои картинки, - замените мои ссылки на свои (выделено цветом). Сохраните. Сохраните расположение. Все. Динамичная шапка на блог Blogger готова! Красота и динамика. Любопытно и привлекает внимание читателей.

ВНИМАНИЕ  - рекомендую делать такую шляпу очень осторожно. Блог стал плохо себя вести.    *** Продолжаем творить полезности. Иногда напрягает подвал в блоге Blogger.  Уберем его. Идем - Шаблон - Изменить - Список виджетов - ищем - жмем на attribution1. Выходим на строку нужную - у меня это номер 1886.

<b:widget id='Attribution1' locked='true' title='' '' type='Attribution'>

Меняем на<b:widget id='Attribution1' locked='false' title='' '' type='Attribution'>

Сохранить шаблон. Вернемся в блог. Внизу жмем Изменить на гаджете Атрибуция. Появилась строка Удалить. Именно это мы и делаем. Все. Готово. Сохраняем расположение. Смотрим обновленный блог. Пример смотрим здесь.

   *** А теперь про самые приятные полезности - про украшение блога Blogger. Примеры украшений по углам блога вы уже видели, а еще можно посмотреть здесь и здесь. Как это сделать? Элементарно! Идем в Дизайн - добавляем гаджет HTML в любое место. Название оставляем пустым, а в содержание списываем коды

<img src="https://lh6.googleusercontent.com/-5R7C9LMfqKY/Txo_0iOthMI/AAAAAAAAELw/rzmYWYHYXBs/w189-h297-k/christmas-icon.png"

style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/>

<img src="https://lh5.googleusercontent.com/-PbiGUGyANAs/Txo_yfoVXSE/AAAAAAAAELw/cZylwGVCEuw/s145-c/212012" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>

Получим по колокольчику в левом и правом углах. Если заменить выделенные цветом ссылки - можно установить по углам свои картинки. Если не устраивают размеры, - можно установить свои. Как работать с картинками мы с вами уже проходили. Посмотрите. 

Чудесных вам и неповторимых блогов!

www.vseoblog.com


Смотрите также