2017-10-31

Textual description of firstImageUrl

Теги HTML5

теги html5
HTML5 является пятым пересмотром HTML стандартов, который был создан в 2004 году, но заслужил особое внимания лишь в 2010 году, после выступления Стива Джобса с докладом, в котором он предлагает использовать  html5 как альтернативу flash. HTML5 направлен ​​на улучшение World Wide Web языка с поддержкой новейших мультимедийных возможностей. Если раньше это достигалось с помощью сторонних приложений, в настоящее время реализуется непосредственно через HTML код.  Давайте рассмотрим основные новые теги HTML5.
Сайт, созданный на html5 отличает прежде всего доктайп. Он выглядит так:
<!DOCTYPE html>
Посмотрите код страницы сайта на HTML5. Смотрите также примеры лучших сайтов HTML5.
1. <video>
Благодаря HTML5, веб-пользователи могут забыть о неприятном плагине Flash. Специальный тег <video> позволяет веб-мастерам вставлять видео без каких-либо дополнений со стороны пользователя. Обратите внимание на простейший код для видео HTML5:
<video src=”/myvideo.mp4″></video>
Или этот код может выглядеть следующим образом:
<video width=”640″ height=”480″ controls autoplay preload>
<source src=”myvideo.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”myvideo.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<source src=”myvideo.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
<p>Если вы не видите видеоплеера, значит ваш браузер не поддерживает html5 .</p></video>
2. <audio>
Как и в <video> теги, <audio> позволяет вставлять аудио файлы без стороннего программного обеспечения. HTML5 поддерживает следующие форматы аудио файлов: MP3, OGG и WAV аудио. Код выглядит следующим образом:
<audio src=”sound.mp3″ controls autoplay loop></audio>
Среди параметров, которые вы можете добавить к аудио-плеер есть автозапуск (autoplay), повтор (loop), панель управления (control), одновременная загрузка вебстраницы и файла (preload).
Кроме того, рекомендуется следующий код вставки аудио :
<audio controls>
    <source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'>
    <source src="audio/music.mp3" type="audio/mpeg">
    Если вы не видите аудиоплеера, значит ваш браузер не поддерживает html5  </audio>

3. HTML5 вводит интересный тег <canvas>, который позволяет владельцам веб-сайтов,  создавать очень привлекательный дизайн. Он предназначен для встраивания графических элементов. Этот тег также лежит в основе разработки игр HTML5. Основным инструментом здесь является JavaScript.
Код:

<canvas id="идентификатор">
</canvas>
4. <article>
Внутри  <article> заключается статья, заметка, описание или другое содержание сайта. Это лучший HTML5-вариант  с точки зрения SEO. Возможно, поисковые системы будут уделять больше веса на текст, который содержится внутри  <article>, чем на другие части веб-страницы. Тег <article> снижает необходимость использования тегов <div>.
<article>
<h1>Заголовок статьи</h1>
<p>Статья...</p>
</article>
5. <section>
Если блог был разбит на несколько разделов, то каждый раздел может быть заключен между тегами <section>. Главным преимуществом является то, что каждый раздел может иметь свой собственный заголовок HTML. Как и в случае с <article> тегами, можно предположить, что поисковые системы будут обращать больше внимания на содержание отдельных разделов. Например, если ключевые фразы, находятся в одном разделе, то это подразумевает более высокую релевантности по сравнению с тем, когда эти слова встречаются по всей странице или в разных разделах.
<article>
<h1>Заголовок</h1>
<section><h4>What We Do</h4>
<p>Содержимое абзаца…</p></section>
<section> <h4>Подзаголовок</h4>
<p>Еще абзац…</p></section>
<section><h4>Contact Us</h4>
<p>Абзац…</p></section>
</article>

6. <header>
<header> тег определяет заголовок документа, раздела или статьи.  Теги <header> также значимы для SEO. Их можно сравнить с  <H1>, но разница в том, что он может содержать много элементов, таких как H1, H2, H3 теги, целые абзацы текста, ссылки (и это важно для SEO), и любую другую информацию.
Синтаксис:
<header>
<h1>Заголовок</h1>
<p><time pubdate datetime=”2011-03-15″></time></p>
</header>

Существуют также теги HTML5 <footer>, который может быть не так важен, как <header>, но все-таки он может содержать важную информацию, и она может быть использована для целей SEO. Здесь обычно содержится информация об авторе документа, об авторском праве, ссылки на условия использования, контактную информацию и т.д.
Синтаксис:
<footer>
<p>@<a href=”http://www.mycrib.ru/”>Азбука блоггера</a>. Все права защищены</p>
<p><time pubdate datetime=”2012-06-01″></time></p>
</footer>
7 . <nav>
<nav> предназначен для создания навигации по сайту. Виды использования:
  • Главной навигации сайта,
  • для создания предыдущий / следующий ссылки статьи
  • для нумерации.
Однако, не все ссылки документа должны быть заключены между тегами <nav> и </nav> Элемент предназначен только для основного блока навигационных ссылок.

<nav>
<a href=”/html/”>HTML</a> |
<a href=”/html5/”>HTML5</a> |
<a href=”/css/”>CSS</a> 
<a href=”/css3/”>CSS3</a> |
<a href=”/js/”>JavaScript</a>
</nav>

8 . <button>
С помощью <button> создают интерактивные кнопки. Внутри <button> элемента вы можете заключить текст или изображение,а также  применить JavaScript. Вот пример:
<button name=”aName”>текст кнопки</button>
Тег может содержать разные атрибуты.
9. <cite>
Теги HTML5 <cite&gt; используется для обозначения цитат.  Обычно текст, заключенный в теги <cite> браузер отображает, используя курсив. Он может быть использован сам по себе или вместе с одним из цитату <q> и <blockquote>:
<cite title=”заголовок, описание цитаты”>Цитата</cite>
10. <aside>
<aside> указывает, на то, что окружает содержимое статьи или веб-страницы. Чаще всего, это информация боковой колонки сайта.
Синтаксис:
<aside>
Содержимое боковой колонки, сайдбара
</aside>
HTML5 - язык будущего для создания web-страниц. Он удобный, функциональный. С ним изготовление сайтов становится более простым и комфортным.
Читать далее ...

2017-10-30

Textual description of firstImageUrl

Скрипт для сайта: изменить размер текста

скрипт рамер текста
Скрипт, который поможет вам изменить размер текста на вашем блоге. Он поможет вашим читателям самостоятельно подбирать тот размер текста, который им удобен для чтения.
Посмотрите скрипт в действии на демо-сайте.
Выглядит так: изменить_размер_текста.(Демонстрация не работает, скрипт не установлен в этом блоге)

Чтобы добавить скрипт на сайт, нужно добавить код в тег <body>. Для blogspot мы добавляем новый гаджет HTML / JavaScript с кодом:

 | 


Вместо кнопок вы можете использовать текст "Увеличить размер текста" | "Уменьшить размер текста" или просто + | -


Для этого нужно исправить часть кода <button>+</button> | <button>-</button  в предложенном скрипте выше на


“Увеличить размер текста” | “Уменьшить размер текста” или на “+|-“


Читайте также как изменить размер текста html
Читать далее ...
Textual description of firstImageUrl

Разные генераторы онлайн

Конечно, для серьезной рекламной кампании промо материалы (буклеты, логотипы, футболки, визитки и др.) должны разрабатываться опытными дизайнерами. Так,  выставочные стенды производства компании mstand.ru незаменимы для представления и раздачи рекламного материала. На сайте вы можете также заказать печать баннеров, печать на баннере, печать постеров, мобильные выставочные стенды и многое другое.
Однако для своего личного блога, когда не требуется высокое качество, вы можете прибегнуть к различным онлайн-генераторам. В них вы сможете создать тоже мини-рекламу для своего блога – это визитки, кнопки, печати, логотипы, баннеры, надписи, смайлы, фоны.
2011-10-30_1453

  Печать для блога вы можете сделать в онлайн генераторе печатей http://bestsmileys.ru/stampgen.php?pt=82339389
   На этом же сайте вы можете сгенерировать смайлики с табличками, монстров и номера для автомобиля.

Много генераторов скриптов вы найдете на сайте http://mnog.ru/generator/index.htm  Здесь и генераторы водяных знаков, генераторы логотипов, генераторы выпадающих меню для сайта или блога, генераторы кнопок, цветного текста, слайд-шоу и др.
https://supalogo.com/ – генератор рекламных слоганов.
http://www.wordle.net/ – на этом сервисе вы можете создать свою карту ключевых слов в виде облака:
генератор_ключевых_слов
Для этого вам нужно указать адрес блога или сайта, вы можете создать такую карту из любого текста или из слов своего файла с текстом.
http://businesscards.tec-it.com/генератор визиток с поддержкой русского языка. Здесь вы можете создать pdf - файл и распечатать визитку.
Смотрите видео обзор сервиса Logaster
Читать далее ...

2017-10-29

Textual description of firstImageUrl

Как вставить плейлист Youtube на сайт

как вставить плейлист youtube на сайт
Youtube развивается быстрыми темпами, все чаще стала возникать ситуация, когда найти информацию по какому-либо запросу на Youtube стало проще, чем на обычных текстовых сайтах. Все больше блогеров пользуются популярностью видеоконтента, и создают свой “облегченный” текстовый контент – они берут идеи у популярных и не очень видеоблогеров, вставляют видео на свой сайт со своим описанием. Таким образом можно “наштамповать” много страниц на сайте. Главное в этом вопросе – попадание в тренд, поиск удачным запросов, которые находятся на взлете.
Если вы хотите стать одним из популярных видеоблогеров, то записывайтесь в школу Дениса Коновалова
Как вставить видео в блог, пожалуй, знают все (Перейдя по указанной ссылке, вы узнаете, как встраивать видео youtube на сайт 2017, я исправила статью согласно изменениям, произошедшим на популярном видеохостинге). В этой заметке я расскажу, как вставить видео плейлист на ваш сайт. Плейлист – это серия следующих друг за другом видеороликов. Добавление интересного и полезного плейлиста в статью вашего сайтаа может надолго задержать посетителя, но это произойдет лишь в том случае, если тематика плейлиста будет строго соответствовать теме статьи, дополнять ее, материал будет изложен интересно и доходчиво.
Вам может быть также интересно, как вставить видео в блог ЖЖ
Инструмент вставки плейлиста удален из обновленного интерфейса Youtube, но это не значит, что теперь функция вставки плейлиста совершенно недоступна для вебмастеров. Нужно просто знать трюк, с помощью которого это можно осуществить. О нем и пойдет речь ниже. Вам может пригодиться также информация о том, как скачивать плейлисты youtube на компьютер.

Как вставить плейлист Youtube в сообщение блога или сайта

>br />
  1. Сначала нужно найти плейлист нужной тематики. Набираем в поиске Youtube ключевое слово и задаем фильтр “Плейлисты”. Смотрите скриншот ниже с порядком действий:
    найти плейлист youtube

    Результаты поиска:
    поиск плейлиста на youtube
    Вы можете перейти по ссылке – "название плейлиста” (выделено красной рамкой на скрине). Тогда вы попадете в окно просмотра видео из плейлиста. Если вы перейдете по ссылку “Просмотреть весь плейлист”, то попадете на страницу плейлиста с перечнем видео. Чаще всего вы будете иметь дело с первым вариантом.
  2. Итак вы на странице плеера плейлиста youtube. Скопируйте ссылку страницы:
    встроить плейлист с видео на сайт

  3. Пример: Ссылка на плейлист -
    https://www.youtube.com/watch?v=NEPWOPcx43k&list=PLo1IuCm4SoLj74J2EgtZp5fZgjsxNxPOl
    Из него нужно вычленить id плейлиста. Это код, который идет после &list=
    В примере id плейлиста PLo1IuCm4SoLj74J2EgtZp5fZgjsxNxPOl

    Если вы находитесь на странице просмотра плейлиста:
    встроить плейлист youtube на сайт

    Здесь также нужно скопировать ссылку страницы и вычленить оттуда id плейлиста.
    Ссылка на страницу плейлиста в примере:
    https://www.youtube.com/playlist?list=PLo1IuCm4SoLj74J2EgtZp5fZgjsxNxPOl
    id плейлиста – это набор символов, идущих после знаков ?list=
    В примере id – PLo1IuCm4SoLj74J2EgtZp5fZgjsxNxPOl
    Как мы видим, что id одного плейлиста, полученного разными способами совпадает. Это значит, что мы все делаем правильно. Используйте один из способов для получения id.
  4. Теперь вам нужно поставить id плейлиста в код:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=ID frameborder="0" gesture="media" allowfullscreen></iframe>
    Вместо ID (в коде выделено красным) подставьте свой id.
Пример плейлиста на сайте:

Как добавить плейлист вашего канала Youtube на сайт

Если у вас есть свой канал Youtube, и вы создаете плейлисты, добавляя в них свои или чужие видео (нет никакой разницы), то вы можете воспользоваться способом, описанным выши для встраивания плейлиста на сайт, но есть способ и проще. О нем и пойдет речь далее.
Перейдите в раздел “Творческая студия” –> Менеджер видео –> плейлисты –> выберите плейлист –> На странице плейлиста нажмите на кнопку “Изменить”:
добавить видео плейлист на сайт
Теперь нажмите на кнопку “Отправить” –> HTML – код:
html-код-плейлиста
Читать далее ...

2017-10-26

Textual description of firstImageUrl

Конвертер Word документов в html онлайн

Конвертер Word в html онлайн
Использовать текстовый редактор Word очень удобно для написания статей для вашего сайта, но далее блогер сталкивается с проблемой выкладывания статей из ворд документов на сайт. Простой совет использования горячих клавиш CTRL + C и CTRL + V не подойдет, так как теряется все форматирование, и особенно жаль таблицы.
Выход из этой ситуации – использовать блог клиенты Windows Live Writer или Open Live Writer – подойдет тоже не всем, так как имеются сложности с использованием программ для публикации статей на вордпресс (их блокируют плагины безопасности), а также эти клиенты создают лишний код, что является существенным недостатком.
Вебмастерам, которые любят выкладывать на своих сайтах сложные таблицы, особенно рекомендую прочитать эту статью до конца. Некоторые решения проблем с созданием и публикацией таблиц в постах блогов я уже освещала в статьях:

Как перевести документ Word в html

Удобный сайт, который помогает преобразовывать тексты word файлов в html - https://word-to-html.ru/
Перевод Word в html онлайн
Пользоваться конвертером очень лекго. Копируйте содержимое вашего Word-документа в буфер обмена и вставляйте в редактор сайта word to html. Далее нажмите на значок исходного кода:
Word в html онлайн
Теперь выделите код, скопируйте его и вставьте в html-редактор записи вашего блога. Перед копированием кода, рекомендую провести оптимизацию кода (нажмите кнопку “Оптимизировать” на сайте). Самый большой плюс этого генератора в том, что таким образом вы сможете добавлять на ваш сайт сложные таблицы с шапками, объединенными ячейками, а также с выделением строк или столбцов цветом. При добавлении “цветной таблицы” оптимизировать код html нельзя.
Пример таблицы, добавленной при помощи сервиса:
Моя цветная таблица
ячейка
Пустое поле
Пример таблицы
-
Зеленое поле
Второе зеленое поле
Однако, сервис не лишен недостатков:
  1. Нельзя загрузить Word документ, необходимо вставлять содержимое копированием. Также, как и нет возможности скачать html-документ.
  2. Картинки пропадают. Придется их вставлять вручную.
Еще один сайт, который справляется с этой задачей - https://wordtohtml.net/
Как превратить документ Word в файл html
Здесь более расширенный редактор по сравнению с предыдущим конвертером. Недостаток: английский интерфейс. Функционал ограничен в бесплатной версии, так, например, загружать Word-документы можно только в PRO-аккаунте.
Конечно, в интернете есть и другие редакторы, но я остановилась на тех, которые мне больше всего понравились.
Читать далее ...

2017-10-23

Textual description of firstImageUrl

Виджет последние комментарии для Blogspot

Виджет последние комментарии для blogspot
Анимированный виджет последние комментарии. Для всех любителей анимации.
Как сделать такие комментарии:
Вкладка “Дизайн” –> Добавить гаджет “HTML/Javascript” –> вставьте код:
/*
<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
     var
  numComments  = 5,
  showAvatar  = true,
  avatarSize  = 35,
  roundAvatar = true,
  characters  = 40,
  defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
  hideCredits = true;
  maxfeeds=50,
  adminBlog='ваш ник';
//]]>
</script>
<script type="text/javascript" src="http://photoforum.do.am/1.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>
Правка кода виджета:
numComments – количество отображаемых комментариев в виджете,
 showAvatar – измените значение на false. если не хотите показывать аватары в виджете
 avatarSize – размер аватара в пикселях.
 roundAvatar – поменяйте значение на false, если не хотите, чтобы аватар был круглым в виджете комментариев.
 characters – количество символов в комментариях.
 defaultAvatar – укажите адрес аватара, который будет покаываться напротив пользователей без аватара.
Сохраните гаджет после внесенных изменений..
Вам могут понравится темы блога:

Читать далее ...

2017-10-08

Textual description of firstImageUrl

Обновление профиля twitter

профиль twitter
Около 2 недель назад был обновлен twitter профиль. Теперь он включает в себя большую фоновую картинку с вашим аватаром и описание профиля в верхней части вашего twitter-аккаунта.
Пользователи могут загружать горизонтальные изображения - или "шапку" (header), что напоминает фото на обложке как на страницах известных соцсетей Facebook и Google+ . Главное отличие – внедрение аватара в шапку профиля.
Несколько советов по оформлению профиля twitter:

Выбор изображения

Оригинальный размер изображения не должен превышать 1252 × 626 пикселов (максимальный размер файла 5 Мб). Twitter не указывает минимальный размер, но не рекомендую загружать изображения менее 640 пикселей. Это скажется на качестве шапки.
Фото  альбомной ориентации будет выглядеть лучше, чем портретной (вертикальной).
Примечание. Читайте также как загрузить фото в твиттер и твиттер виджеты для блога

Цвет фона

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

Вместо этого, выберите заголовок, который контрастирует с цветом шрифта.

 Различные устройства

Имейте в виду, что новый дизайн не выглядит одинаково на всех устройствах. Мобильное приложение для iPhone , немного отличается. Пользователи видят полный профиль Twitter, разделенный на две части. Ipad отображает все на одной странице.
     Примечание. Если вы хотите приобрести новый сотовый, то интернет магазин мобильных телефонов поможет вам с выбором средств связи по низким ценам.
Теперь модной тенденцией является следующее оформление профиля twitter, когда аватар является продолжением общего фона заставки. Пример вы видите ниже:

Однако, эта иллюзия не доступна пользователям мобильных устройств:
Читать далее ...
Textual description of firstImageUrl

Убрать или изменить надпись “Показаны сообщения с ярлыком”

Убрать или изменить надпись “Показаны сообщения с ярлыком”
Надпись “Показаны сообщения с ярлыком” часто не устраивает блогеров, т.к. она не всегда нужна, не всегда выглядит красиво и выдает то, что блог ведется на платформе Blogger (некоторые вебмастера скрывают этот факт).
Если вы хотите красиво оформить ярлыки, то прочитайте статью по ссылке.
Полезная статья про настройку новых шаблонов Blogger 2017: как показать ярлыки в шаблоне Blogger 2017
показаны сообщения с ярлыком
Еще одна надпись, возникает при использовании встроенного поиска по блогу: “Показанные сообщения отсортированы по релевантному запросу (календарь). Сортировать по дате Показать все сообщения”.
Показанные сообщения отсортированы по релевантному запросу

Поэтому, убрав эти надписи, мы избавляемся от ненужного элемента и от лишнего кода. Из этой статьи вы узнаете, как это сделать несколькими способами, и как изменить эту надпись, прописав свой текст.
Узнайте также о том, как оптимизировать вашу тему Blogger, прописав заголовки h1, h2, h3
Внимание! Перед любыми изменениями в html редакторе темы, делайте резервную копию

Способ 1. Удаляем надпись “Показаны сообщения с ярлыком… Показать все сообщения”


  1. Перейдите в админке Blogger по пути Тема –> Изменить html
    Тема – Изменить html
  2. Клик в любом месте кода мышкой и нажмите CTRL +F для активации поиска по коду. Ищите отрезок кода:
    <b:includable id='status-message'>
  3. Кликните на стрелочку напротив найденного кода для раскрытия
    Убрать или изменить надпись “Показаны сообщения с ярлыком”
  4. Удалите весь код, заключенный внутри секции b:includable с идентификатором 'status-message', а именно:
         <b:includable id='status-message'>       <b:if cond='data:navMessage'>       <div class='status-msg-wrap'>         <div class='status-msg-body'>           <data:navMessage/>         </div>         <div class='status-msg-border'>           <div class='status-msg-bg'>             <div class='status-msg-hidden'><data:navMessage/></div>           </div>         </div>       </div>       <div style='clear: both;'/>       </b:if>     </b:includable>

    Убрать или изменить надпись “Показаны сообщения с ярлыком”
  5. Вставьте на его место код:
    <b:includable id='status-message'>
    <b:if cond='data:navMessage'>
    <div>
    </div>
    <div style='clear: both;'/>
    </b:if>
    </b:includable>
  6. Сохраните изменения.
Если таким способом вам по каким-то причинам, удалить указанную надпись не удалось, тогда переходим к способу 2.

Способ 2 удаления текста “Показать сообщения с ярлыком”

  1. Переходим в html редактор темы Blogger (Тема –> Изменить html)
  2. Найдите в шаблоне отрезок кода ]]></b:skin>
  3. Вставьте перед ним: .status-msg-wrap { display: none; }
  4. Сохраните изменения.

Как изменить текст надписи “Сообщения с ярлыком …”

  1. Повторите шаги 1-3 из Способа 1 (удаление надписи)
  2. Замените удаленный код следующим:
    <b:includable id='status-message'>
       <b:if cond='data:navMessage'>
       <div class='status-msg-wrap'>
         <div class='status-msg-body'>
           <b:if cond='data:blog.pageType == "index"'>
           <b:if cond='data:blog.searchLabel'>
             Сообщения с ярлыком <b><data:blog.searchLabel/></b>
           </b:if>
           <b:if cond='data:blog.searchQuery'>
             Показаны сообщения, соответствующие запросу <b><data:blog.searchQuery/></b>
           </b:if>
           <b:else/>
           <data:navMessage/>
           </b:if>
         </div>
         <div class='status-msg-border'>
           <div class='status-msg-bg'>
             <div class='status-msg-hidden'><data:navMessage/></div>
           </div>
         </div>
       </div>
       <div style='clear: both;'/>
       </b:if>
    </b:includable>
  3. Вы можете изменить текст, выделенный синим и зеленым на свой собственный.
Читать далее ...

2017-10-06

Textual description of firstImageUrl

Как изменить шаблон сайта

как изменить шаблон сайта
Часто, перед блогеров встает вопрос изменения шаблона сайта или блога. В сегодняшней статье будет информация, которая пригодиться для блогеров, независимо от того, на какой платформе находится блог – будь то Blogger, Wordpress, Joomla, Ucoz и др. Если вы не на 100% разбираетесь в кодах, но вам нужно поменять ту или иную часть (футер, сайдбар или отдельный виджет, выпадающее меню, шрифт в статьях и многое другое.) сайта, то вам поможет моя инструкция. Также этим способом вы сможете воспользоваться, если обнаруживаются ошибки на сайте, например, сдвиг отдельных элементов дизайна.
Итак, для работы над шаблоном сайта нам понадобятся плагины для браузеров, которые значительно упрощают задачу.
  1. Web Developer
    • для Mozilla Firefox. Ссылка для установки https://addons.mozilla.org/ru/firefox/addon/web-developer/
    • для Google Chrome -
      https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ru
    • для Opera, https://addons.opera.com/ru/extensions/details/web-developer/?display=en-US
    • для IE разработана модификация плагина под названием  Developer Toolbar. Это нечто среднее меджу firebug и Web Developer. Ссылка http://www.microsoft.com/en-us/download/confirmation.aspx?id=18359
  2. Firebug
      • для Mozilla Firefox. Скачать плагин https://addons.mozilla.org/ru/firefox/addon/firebug/
      • для Google Chrome
        https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench
      • для Opera, https://addons.opera.com/ru/extensions/details/firebug-lite-button/?display=en
Читайте также про полезные плагины для браузеров:

Web Developer


Активируйте плагин в вашем браузере, и вы увидите значок в верхней левой части браузера. При клике на иконку появляется панель с многочисленными инструментами:
http://игры-для-девочек.рф
Основные пункты web developer^
  • Disable – выключает javascript,
  • Cookies – работаем с куками, удаляем, добавляем.
  • CSS – редактируем стили. Вы можете просмотреть сайт без стилей (disable all styles), быстро отредактировать стиль (edit css).
  • Form – работа с формами,
  • Image – изображения, их стили, показывает атрибуты alt,
  • Information. Здесь вы можете включить границ div, показывает информацию по отдельному элементу, показывает сайт при различных разрешениях экрана и др.
  • Miscellaneous – чистим кэш, определение цвета каждой точки экрана монитора, измеряем размеры отдельных элементов страницы, а также их абсолютную позицию, сайт – в один столбец (так в большинстве случаев выглядит веб-страница в мобильных браузерах.
  • Outline – выделение элементов сайтов – таблиц, блоков, страниц и т.д.
  • Resize – изменяем размеров экрана,
  • Tools – быстрый доступ к валидаторам кодов.
  • Options – настройки.

Firebug

Этот замечательный плагин выполняет роль инспектора кодов. С его помощью вы можете выстро найти код интересующего элемента дизайна сайта. Вам стоит лишь выделить интересующий элемент на веб-странице, щелкнуть правой кнопкой мыши и выбрать пункт @Inspect with Firebug Lite”.
firebug
Появится окно, в котором код данного элемента будет обозначен синим. Вы можете удалить его, внести изменения и просмотреть, как будут проявляться изменения кода в действии. Справа вы видите код css, который вы также можете изменять.
Web Developer

Таким образом, протестировав сначала изменения кода непосредственно в браузере, вы можете изменять шаблон своего сайта. Кстати, таким же образом, вы сможете узнать код любой флеш-игры или флеш-анимации. Еще один способ читайте в статье - Как вставить flash-ролик с любого сайта в блог
Читать далее ...