четверг, 26 мая 2011 г.

Замутим?

Спросите: - чего мутить изволите, Юлия? 
Отвечу: - свой собственный дизайн для своего любимого блога - это же второй дом для нас, площадка для самореализации и еще кучи всего интересного :)
Этот пост был написан по просьбе одного хорошего человечка, имя говорить не буду, сама себя назовет, если захочет :) да? ;)
 Ну-с, приступим-с.....
(Ага, окей же ж, начинай давай....)
Открываем свой замечательный бложек и в верхнем правом углу видим: "новое сообщение", "дизайн", "выйти". Выходить нам ни в коем случае не надо. Нам нужно наоборот, так сказать, углубиться в суть проблемы, поэтому нажимаем на "дизайн"


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

Вооот, наконец-то добрались. Можно приступать к замутам, пардон, экспериментам с оформлением :)
Самое первое что тут есть, это шаблоны. К сожалению от них никуда не уйдешь, конечно если  вы не продвинутый юзверь, и можете свободно написать на HTML любой сайт или страницу. Я в этот HTML практически неврубинштейн, поэтому пользуюсь шаблончиками. Они кстати и не такие дубовые. Абсолютно любой можно подстроить под себя и свои вкусы и нужды. У меня стоит "венецианское стекло" (выделено черным, и вариант с красным заголовком). В каждом шаблоне есть еще несколько его вариаций, так что есть с чем поиграться.

Наигрались с шаблонами, выбрали чего хотим, займемся обложкой. Конечно, можно оставить как есть, если нравится, а если "хочу свое и баста!"?  Тогда мы тыкаем на вкладочку "фон".

Под надписью "фоновое изображение" висит картинка, которую нужно поменять. Нажимаем на треугольник и вываливается вот такое окно с уже загруженными изображениями. Для удобства нам их даже по категориям разложили. Можно выбрать любую картинку из этого списка. Но нам нада свое. Поэтому нажимаем на "загрузить"

Видим вот это. По кнопке "обзор" загружаем уже накачанные из интернета фоны :)
 

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

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

Регулировка ширины. Здесь задаем своему блогу ширину: весь блог, и боковые панели. У меня их две, по сторонам от сообщения, поэтому регулирую ширину и там и там, не забывая о середине, где сам пост публикуется. Чтоб фотки не наскакивали друг на друга или не вылезали за пределы.
 Кстати, все что меняем, можно просматривать ниже. вот та нижняя цветная часть двигается колесом прокрутки. Можно просмотреть на полном экране, нажав посередине на черной полосе "развернуть окно предварительного просмотра".

 Вкладка Дизайн. Это собственно, структура блога. Где, как и с какой стороны и вас будут дополнительные колонки для гаджетов и различной инфы.

Вкладка "Дополнительно". 
Что здесь есть:
1.Текст - выбираем шрифт, цвет, размер.
 2. Фоны.
Внешний фон - фон всего блога. т.е., когда, например, грузится страница, первоначально вылазиет цвет, а потом уже обложка. Или же этот цвет можно подложить под прозрачные  предустановленные текстуры, когда выбираем фон (картинку).
Фон верхнего колонтитула - фон заголовка или то место, куда можно поместить баннер с названием.
Фон сообщения - фон, на котором ваше сообщение собственно и висит. У меня вот какой-то бледносерый. Непонятный короче. Я стараюсь все эти три фона сделать одного оттенка, чтоб все лаконично было :)
 3. Ссылки - это все те кнопочки, на которые можно тыкнуть и перейти дальше куда нас эта ссылка отсылает. Здесь задаем основной цвет ссылки, цвет посещенных вами ссылок, и цвет, который меняется, при наведении на нее мышью. Так можно вычислить в тексте, что это все-таки ссылка :)
4. Название блога.  Определямся со шрифтом, цветом и размером. Но это если нет картинки, которую можно поместить вместо названия.
Дальше идут вкладки - текст вкладок, фон кладок и т.д. В них тоже можно настроить цвет и шрифт. Кстати, когда выделяешь какую-либо вкладку, блоггер сам показывает область редактирования  (выделяет красным пунктиром).
Не спрашивайте меня, что такое "добавить CSS"  - не в курсе. Пыталась понять что по чем, но мимо кассы :)
Если все нравится нажимаем "применить к блогу" и наслаждаемся своей обновленной страничкой. Если же нет, продолжаем мучить блоггера и себя :)

Еще момент, если вместо названия блога хотим вставить картинку. Тогда идем опять в дизайн и в верхнем прямоугольнике, где написано заголовок нажимаем "изменить"

Загружаем картинку с жесткого диска, выставляем необходимые настройки, как  хотим это все видеть и жмем кнопку "сохранить".
На этом все. Мы устали, мы проделали кучу работы, нам нада отдыхать .... :)
Надеюсь, что все понятно. Но если чего, спрашивайте, постараюсь разъяснить. И я знаю, что не зря написала этот пост. Одному человеку он будет очень нужен :)

Пы. Сы.
Уффф!!! Давно так много не приходилось сочинять. Обычно такой размах мысли и полет фантазии бывает, когда прокосячусь на работе, или же вообще ни в чем не виновата, а  все равно приходится писать объяснительные и доказывать, что не верблюд....


22 комментария:

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

    ОтветитьУдалить
  2. Ох,как бы мне на него раньше наткнуться, кладезь нужной информации!Спасибо, Юль!!!

    ОтветитьУдалить
  3. Юля!Спасибо большущее!!!

    ОтветитьУдалить
  4. Юля, спасибо большое - все написано очень понятно и доступно, теперь надо только попробовать =)

    ОтветитьУдалить
  5. какая ты умничка... столько полезной информации и таким простетским языком.....СПАСИБО!!!!!!!!!!! Теперь еще научится писать такие красивые названия блогов как у тебя и ваще... все круто будет!!!!!!!!!!!!! Может научишь!?

    ОтветитьУдалить
  6. Ой Юленька =))) ТЫ же ж моя Добрая Фея!!!! =))) Не, я конечно ожидала пост, но чтобы так быстро =)))) Я в шоке!!! Спасибо тебе мой дорогой человечек, что откликнулась на призыв страждущего =)))) Эх, скорее бы выходные =)))) Засяду за редактирование =) Знаю, что возникнут вопросы по-любому, поэтому ты не будешь против, если я ими тебя слегка засыплю? (и скромненько так глазки потупила в пол) =))))
    СПАСИБИЩЕ ТЕБЕ, Юленька!!!!! Целую твои сахарные щечки =))))

    ОтветитьУдалить
  7. Здорово! Спасибки! И доходчиво. Только к моменту чтения этой инфы все предыдущие шаги уже умудрилась сделать сама. Сложности возникли дальше: как добавить интересную ссылочку, тэги и т.п. Пока сама не доперла. Так что - жду продолжения для чайников.

    ОтветитьУдалить
  8. Юленька, возник вопрос =))) А подскажи пожалуйста, есди у меня заголовок блога без картинки, как его отцентровать?

    ОтветитьУдалить
  9. Девочки, все же для вас :)))) Не стоит благодарностей)

    kola1311, я попробую подробно нарисовать, как это делается в фотошопе, но не отвечаю за то, что будет внятно :)

    sentoska? а что конкретно по ссылкам интересует? как в ее в тексте вставить, или на дополнительных панелях ? Продолжение будет :)

    Алена, он не центруется ((( Всяко пробовала, никак. Если только увеличить шрифт, чтоб название на всю длину было.

    ОтветитьУдалить
  10. Блин. Вот тут есть у шаблонов всё таки один плюс - там заголовок можно отцентрировать =( Ладно, будет у меня тогда заголовок в углу =)

    ОтветитьУдалить
  11. Благодарю, во и вчера я обновила гардероб своего блога. Получилось не все, что хотела. Все-таки и честь знать надо на работе отрываться и фотошопить. Остался еще один насущный вопрос: в шаблоне "венецианское окно" какой размер фона? По ширине у меня вроде 1800 получилось (я туда еще и название блога присобачила), а вот по высоте никак посчитать не могу. С функцией "замостить" у меня получается почти две высоты фона, поэтому где-то посредине страницы повторяется название блога.

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

    ОтветитьУдалить
  13. Спасибо, Юля, теперь наконец-то смогу фон поменять! Я думала, для этого надо чужой шаблон ставить, а все гораздо проще)))

    ОтветитьУдалить
  14. Спасибочки (спаси бочки :))), честно лазила по встроеному редактору - толку ноль. А после вашего поста - та даа!!! Интересно, когда я теперь остановлюсь, и это вообще остановимо? Имею ввиду смену нарядов своего блога )) Спасибо.

    ОтветитьУдалить
  15. Пажалста-пажалста..... для хороших людей ниче не жалко )))

    ОтветитьУдалить
  16. Юля! Добрый день. Огромное спасибо. Фон поменяла. В вот как вставить такую заставку как которая наложена на фон.

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

    ОтветитьУдалить
  18. Юля, огромное спасибо за мастер класс!!!!

    ОтветитьУдалить
  19. Юля, спасибо за мастер класс! Мне очень помог в дизайне блога!

    ОтветитьУдалить
  20. Спасибоооооооооо))))
    В будущем обязательно попробую сделать и себе красоту в блоге. Давно искала на эту тему информацию и ничего не попадалось на глаза. Теперь только побольше времени свободного и будет у меня тоже красоты-ляпота

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