2012-05-26

Textual description of firstImageUrl

Эффект Lightbox для Blogger

lightbox
Изменено 5.02.2014 Внимание! Скрипт в статье устарел, в дальнейшем я статью подправлю несколько позже. В этом блоге есть 2 свежих статьи по теме:
  1. Не работает lightbox в blogger
  2. Lightbox blogspot css (меняем оформление)
Читать далее ...

2012-05-18

Textual description of firstImageUrl

Темный шаблон для блога


Шаблон подойдет для блогов игровой тематики.
Описание шаблона:

Темный шаблон, контрастные цвета (черный и желтый, темно-серый и белый), 3 колонки (2 сайдбара – по одному слева и справа, закругленные углы шаблона, горизонтальное меню под шапкой.
Скачать шаблон для блога здесь.
Установка шаблона стандартная:
Распаковать скаченный zip-архив,
Админ.панель –> Шаблон –> Резервное копирование и восстановление,
Загрузить файл main.
Читать далее ...

2012-05-17

Textual description of firstImageUrl

Абстрактный шаблон для блога


Абстрактный шаблон для Blogger.com. Яркий шаблон подойдет для блога любой тематики.

Описание шаблона:

3 колонки (2 сайдбара слева и справа), фиксированная ширина (1100 пикселей), горизонтальное меню над шапкой блога вынесено за пределы рабочей части шаблона, закругленные углы.
Скачать здесь
Читать далее ...

2012-05-16

Textual description of firstImageUrl

Детский шаблон для Blogger

Шаблон Blogger для детского блога.
Описание шаблона:

Индивидуальная шапка и фон для блога
2 колонки, сайдбар слева,
Горизонтальное меню из страниц блога
Фиксированная ширина шаблона, равная 650 пикселей.
Скачать zip-архив здесь. Размер архива 56 kB.
Загрузите файл main из архива для изменения дизайна вашего блога.
Читать далее ...
Textual description of firstImageUrl

Шаблон blogger в винтажном стиле

Шаблон для Blogger в винтажном стиле для женских блогов, блогов по рукоделию.

Описание шаблона:

..

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

 

Посмотреть Демо

Скачать шаблон здесь. Размер zip-архива 65 kB.

Перед установкой распаковать архив и загрузите файл main в ваш блог, читайте подробнее про установку шаблона blogger.

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

2012-05-07

Textual description of firstImageUrl

Цитата Blockquote


Для оформления цитат на блогах используется тег blockquote. В запись вставляют код
<blockquote> Текст цитаты </blockquote>

Цитаты могут содержать неавторский текст, коды, важную информацию и т.п.
Самые простые цитаты имеют вид текста с некоторым отступом от края и выделены вертикальной чертой. Дополнительно может быть выделение текста курсивом, жирным шрифтом или отличаться размером или цветом шрифта от основного текста.
Например, может быть оформлена так
2
или так
1
В стандартных шаблонах Blogspot обычно отсутствует (все не проверяла) css код blockquote, поэтому если вы будете использовать коды цитат в записях, то у вас ничего не изменится. Вначале нужно провести работу над шаблоном блога. В нестандартных шаблонах Blogger часто уже прописаны цитаты, но вполне возможно, что вы захотите изменить их стиль. Из этой статьи вы также узнаете, как это можно сделать, а также вы найдете примеры кодов css blockquote.

Оформление Blockquote

  1. Перейдите в Blogger> Шаблон > Изменить HTML,
  2. Сделайте резервное копирование шаблона,
  3. Расширьте шаблон виджета и при помощи клавиши Ctrl + F найдите отрезок кода .post blockquote Чаще всего он выглядит следующим образом:
    .post-body blockquote { line-height:1.3em; }
    OR
    .post blockquote{ bla bla bla}

    Удалите этот код с содержимым {…} и замените на любой код, оформления цитаты, который вам понравится (примеры цитат с кодами будут приведены в этой записи ниже) или вы можете сами создать свой стиль.
  4. Вы можете не найти код Blockquote. В этом случае вам нужно найти отрезок кода ]]> </b:skin> и вставить перед ним код выбранного стиля цитаты.
    Код цитаты css
    .post blockquote {
    margin : 0 20px;
    padding: 60px 30px 40px 20px;
    background : #F1F8FE url(URL изображения) no-repeat 350px 5px;
    font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
    color : #000;
    border: 8px dotted #DAB547;
    }
    .post blockquote p {
    margin: 0;
    padding-top:10px;
    }
    Настройка кода
    • padding: Отступы цитаты от границ, которые идут в таком порядке –> сверху, справа, снизу, слева
    • background : – Цвет фона или изображение, используемые в цитате. Шестизначный значение цвета фона  или ссылка на изображение –> замените код, выделенный желтым на прямую ссылку на изображение (URL изображения)
    • font : - Она включает в себя шрифт стиль , размер и тип соответственно.Соответствие цвета с кодом выше ссылке.
    • color : -  цвет текста. Вы можете подобрать различные цвета шрифта, используя нашу таблицу цвета
    • border : – Граница и ее значения - width, style and color – ширина, стиль и цвет соответственно.
    • Все остальные цитаты можно настроить таким же образом.
  5. Сохраните шаблон. Вставляйте код <blockquote><div> Текст цитаты </div></blockquote> в режиме HTML при использовании цитаты в сообщении.

Примеры цитат blockquote и коды к ним
owl2
Код:
blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;
}
blockquote p {
margin: 0;
padding-top:10px;
}
PurpleScannedCopy2
Код:
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #435388;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
jigsaw2
Код:
.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s400/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
leftsidedbrownish2
Код:
.post blockquote {
background: #F3F3F1 url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
leftsidedgreenblack2
Код:
blockquote {
background: #484B52 url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
Brown-Scanned-copy[2]
Код:
.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
commasgreen2
Код:
.post blockquote {
  font: italic 1em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
commasnavyblue2
Код:
.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s400/comma-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
commashands2
Код:
.post blockquote {
  font:bold italic .9em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 25px;
  margin: 5px;
  background: url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb5kCZUGZI/AAAAAAAACP8/UEMNYwjmokk/s400/left.gif) no-repeat top left;
  text-indent: 65px;
color:#6299E4;
  }
  .post blockquote div {
    display: block;
    background: url(https://4.bp.blogspot.com/_7wsQzULWIwo/Swb52LlPk-I/AAAAAAAACRE/_MC7HQLGIng/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
monkeyman2
Код:
.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}
.post blockquote div{
background : #E6F1FA url(https://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}
Коды цитат взяты отсюда
Читать далее ...

2012-05-02

Textual description of firstImageUrl

Прикол: Google Underwater Image Search

 Google Underwatrer Images Search
Новый трюк поиска изображений Google (Google underwater Image Search)  основан на Jquery и JavaScripts. Это еще один эксперимент google на HTML5.
Обновлено 11 февраля 2019 года: в настоящее время прикол не работает, но если вы хотите увидеть, как это было, то смотрите видео.
Первыми этим приколом насладились пользователи Гонконга, но и российским пользователям доступна эта водная игра от Google.  Поисковая строка “утопает” в воде. Введите в поиск по изображениям запрос, как сверху посыпятся тематические изображения. Они также будут плавать и тонуть в нарисованной воде. Смотрите видео с приколом:


Читать далее ...
Textual description of firstImageUrl

Лучшие сайты на HTML5 2012


В этой статье вы познакомитесь с 10 лучших сайтов HTML5 2012 года на основе визуального артистизма, встроенного звука, простоты в использовании, и уникальности. Последнее обновление: 1 мая 2012

1 | Wilderness Downtown | Arcade Fire
The Wilderness Downtown это интерактивный клип на песню Arcade Fire "We Used to Wait". Посетителей просят ввести адрес дома, где они выросли и  сайт использует Google Планета Земля и HTML5, чтобы создать персональный клип. лучшие сайты HTML5


.. 2 | Three Dreams of Black
Three Dreams of Black – интерактивный клип с использованием HTML5. Сайт создает 3D графику, используя WebGL. 
3 | Universeries
Universeries является ссылкой сайт о зарубежных телевизионных продюсерах и демонстрирует, что они создали. Это демонстрирует, как инструменты HTML5 визуализации данных может повысить статическое представления информации.
4 | Agent008Ball
Agent008Ball Сайт создан Labs Pixel использует методы HTML5 на холсте, чтобы позволить пользователям проигрывать партию игры в бильярд прямо на экране своего компьютера. Сайт был создан в сотрудничестве с Microsoft, чтобы отметить расширенные возможности в браузере IE9 и делает именно это.
5 | Это Shell
Сайт на HTML5 предложет вашему вниманию головоломку – пазлы картинки из клипа, которую нужно собрать, пока звучит музыка. Если вы справитесь с заданием, то вы получите ссылку на скачивание mp3.
6 | Ben The Bodyguard
Телохранитель бен сайт промо Nerd iPhone App Communications Security, которое защищает передачу данных пользователя. Если прокручивать сайт вниз  то вы можете пройтись по темному району с Беном-телохранителем, который расскажет вам о нападениях.
7 | Art of Stars
Art of Stars использует ваш IP-адрес, чтобы нарисовать звезду созвездия прямо над вами.

8 | Lost Worlds Fair 
Сайт затерянного мира был разработан для демонстрации возможностей HTML5 в IE9 в создании интерактивных плакатов, которые читают пользователи, путешествуя по трем легендарным местам. Используйте прокрутку вниз для каждого затерянного мира для того, чтобы узнать его тайны.
9 | Проекты Toyota Prius
Toyota Prius проект празднует десятилетие, выделив изменения, которые произошли за этот промежуток времени и позволяет пользователям представлять себе, что в ближайшие 10 лет принесет. Это лучший пример того, как HTML5 может быть использован для создания более захватывающей работы в Сети.

10 | RUMPETROLL
Rumpetroll массивный опыт мультиплеер, который позволяет нескольким пользователям взаимодействовать и общаться, как головастики в футуристическом пруда.
В предложенном ниже видео демонстрация некоторых из перечисленных выше сайтов HTML5:
Лучшие сайты на HTML5
Читать далее ...