Как украсить сайт, чтобы отличаться от остальных

Как украсить сайт… Здравствуйте дорогие посетители!

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

Красивый сайт люди будут запоминать, и возвращаться снова и снова. Возможно, они будут приводить друзей, чтобы похвастаться, что он или она нашел (а) этот блог раньше. В общем, прочитав статью «Как украсить сайт, CSS фишки», Вы не только будете радовать свои глаза и глаза посетителей, сможете поднять поведенческие факторы, тем самым увеличить посещаемость и сделать свой web-ресурс круче и популярней! Все CSS фишки, о которых хочу рассказать, не грузят сервер!

Что мы будем делать? Ничего вымышленного и не проверенного мы не сделаем! Зачем нам эти эксперименты? Я буду описывать, и показывать, на примере своего блога, расскажу проверенные фишки, которые уже показали свои отличные результаты! Сразу предупреждаю, не во всех браузерах будут работать стили, перечисленные ниже. CSS штуки, которые будем дела, можно увидеть в сайдбаре.

КАК УКРАСИТЬ САЙТ И МЕНЮ ТОГО, ЧТО МЫ БУДЕМ ДЕЛАТЬ

Как украсить сайт? Все перечисленное выше мы с Вами сейчас сделаем и украсим. Если думаете, что это все сложно, то не стоит переживать, все это просто! Будут работать обычные HTML теги и CSS стили, кстати, нагрузка на ресурс будет минимальная. Если не знаете HTML и CSS, то ничего страшного, я буду показывать все на примере, коды уже есть, их нужно будет только скопировать и вставить в нужное место.

Красивые кнопки CSS для украшения сайта

CSS кнопки для украшения сайта

Первое, что нам нужно поставить — красивые кнопки в сайдбар! Хотите сделать рубрики кнопками, как у меня? Да в прочем, если и не рубрики, тут разницы нет! Кнопки можно сделать любые и в любом месте сайта.

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

Зайдите в админ панель, записи/ рубрики:

Рубрики записей для украшения сайта

Под каждой рубрикой есть ссылка «Перейти». Нажмите на нее правой кнопкой мыши и выберете «Открыть в новом окне». Открывшиеся ссылки нужно вставить в специальные теги. Смотрите пример:

<a href=”ссылка на рубрики” target=”_blank”>Название кнопки</a>

Ссылка будет открываться в новом окне. С переходом посетителя, будут увеличиваться поведенческие факторы, и статьи сайта будут расти в поисковой выдаче, но сейчас не об этом, давайте украсим сайт.

Когда все ссылки готовы, можно перейти к созданию CSS стилей. В этом нам поможет специальный онлайн сервис «Генератор HTML и CSS».

Генератор - как украсить сайт

Нажмите на кнопку «Button Builder», перед Вами откроется страница с генератором кнопок. Название кнопки можете не менять, нам здесь нужно только CSS. Подвигайте ползунки, делая больше кнопку, меньше, округлую или квадратную. В общем, делайте, так как больше нравиться!

Регулируем кнопку для украшения сайта

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

Стили для украшения сайта

Второй участок – «Hover State». Он отвечает за наведение курсором мыши, то есть можно сделать так, чтобы наша кнопка изменялась при наведении мышки. Тут все почти тоже самое, что и в первом, меняем цвет, градиент текста и кнопки.

Третий участок будет изменять эффект кнопки при нажатии на нее.

Теперь нажмите на «Generate CSS» и всплывет окно со всеми стилями, которые Вы указали, скопируйте их (CTRL+C) и поместите в файл CSS Вашего сайта. Думаю, знаете, где он находиться, если не знаете, пишите в комментариях, помогу.

В CSS коде есть классы «button», если они Вас не устраивают, то можно поменять на свои, главное писать латинскими буквами, не убирать точку в начале и заменить этим классом все «button».

В ссылке поставьте класс «buttom», если изменили на свой, то конечно ставьте свой, вот так:

<a href=”ссылка на рубрику” target=”_blank”>Название</a>

<a href=”ссылка на рубрику” target=”_blank” Class=”button”>Название</a>

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

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

Иконки, чтобы украсить сайт

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

Популярные записи - как украсить сайт

Увеличение картинки для украшения сайта

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

Открыть в новом окне стили для увеличения картинки.

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

<img src=”ссылка картинки”>

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

<div class=”ex2”>

<img src=”ссылка картинки”>

</div>

В стилях обязательно укажите размер картинки и ее увеличение при наведении. Загрузите все это через FTP клиент и сохраните. Должна получиться прикольная картинка!

ПОЛЕЗНО ЗНАТЬ

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

Такие отделы сделал, и я себе в сайдбаре, придал стиль CSS картинкам — прикольное отражения. Как это сделать у себя на сайте? Читайте дальше и все узнаете…

Украшаем сайт отражающими картинками

Отражающие картинки для украшения сайта

Тут я делал таблицу из 3 строки и 2 столбца. Создадим таблицу:

<table width="100%" height="337" border="0">
<tr>
<td><img src=”Ссылка на картинку”></td>
<td><img src=”Ссылка на картинку”></td>
</tr>
<tr>
<td><img src=”Ссылка на картинку”></td>
<td><img src=”Ссылка на картинку”></td>
</tr>
<tr>
<td><img src=”Ссылка на картинку”></td>
<td><img src=”Ссылка на картинку”></td>
</tr>
</table>

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

Идем дальше. Как и в предыдущем, нам понадобятся картинки, то есть ссылки с них. Между тегами td вставим и поставим классы:

<td class=”kartinki_sidebar”><img src=”Ссылка на картинку”></td>

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

Как украсить сайт классными стилями

Здесь мы сделаем, вращающеюся изображение и черно-белое затухание.

Крутящаяся картинка для украшения сайтаЧерно-белый цвет для украшения сайта

Все делается еще проще! Берите ссылку на картинку, заключайте ее в тег img, поставьте геги div, укажите класс и встройте в сайт. Как это все делать Вы уже знаете! Копируйте стили и закидывайте в файл CSS.

Открыть CSS стили для вращающегося изображения и для черно-белого затухания.

Наконец-то мы закончили! Теперь ваш ресурс отличается от всех своей красотой и функциональностью.

Смотрите видео — CSS фишки ВКонтакте

На этом у меня все. Надеюсь, у Вас все получилось! Возможно, отложили это на будущее, но зато теперь знаете, как украсить сайт, для того чтобы он был лучше других. Только вот лучше не откладывать и делать сразу, а то потом может никогда не наступить. Как Вам статья? Подписывайтесь на [urlspan]обновления блога[/urlspan], чтобы не пропускать полезные и интересные посты.

С уважением, Алексей Кобзарев



Интересный и полезный контент

9 thoughts on “Как украсить сайт, чтобы отличаться от остальных

  1. Сергей

    Классные решения! Я заметил у вас блог вообще весь украшен все двигается при наведении мыши интересно так =)

    Только вот не нагружает ли это сервер?

    1. Алексей Кобзарев Автор записи

      Сервер грузят всякие скрипты и Javascript, вначале создания блога, стояли они, что значительно влияло на загрузку страниц. Я нашел замену — CSS стили, они ничем не хуже и нагрузки почти нет. Блог загружается одинаково быстро, что с ними, что без. Короче говоря, нагрузки на сервер нет, можно ставить не боясь.

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

  2. aleksandr

    Красота не должна идти в ущерб другому. Ваш сайт очень долго загружается -10 секунд.

    1. Сергей

      Я бы не сказал что блог грузиться долго, хотя у меня сейчас ужасный интернет, это у вас что та aleksandr

  3. Сергей

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

  4. Елена Контиевская

    Это вы где такое время загрузки Лешиного блога увидели, марсианин? Я вижу только вот эти самые большие данные-4 секунды: США, Вашингтон, Сиэтл
    При поддержке ComfortVPS. 91.206.200.180 4,067090
    Ну, дак это ж Америка! До нее дальше всего. Леша, спасибо за сервис. Взяла себе в Закладки! 😉

  5. Елена Контиевская

    Алексей, спасибо за такую живую красоту на твоем блоге. Порадовал меня! Подписалась на обновления твоего блога. 😉 Обожаю ковыряться в кодах…найду время и еще вернусь к тебе на блог!

  6. Алексей

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *