wowSliderProject generated by WOWSlider.com

22 нояб. 2013 г.

December 2013

7 окт. 2013 г.

JW Player на blogspot/blogger.

<div id="myElement">Loading the player...</div>

<script type="text/javascript">
    jwplayer("myElement").setup({
        file: "/uploads/myVideo.mp4",
        image: "/uploads/myPoster.jpg"
    });
</script>

-------------------
В редакторе вставляется этот код с адресом .mp4 вашего видео и обложки .jpg
В <head> добавляется этот скрипт:

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

Loading the player...

--------------------
Или можно загрузить свое видео на сервис (ограничение в 5 видео для бесплатных аккаунтов) и получить код для размещения.
Вот пример:

Все подгрузилось без проблем как видите, осталось получить ссылку для первого плеера.
Повторюсь, первый код плеера собран самостоятельно, (то есть сами файлы загружались на сторонние файловые хранилища) второй код в автоматическом режиме получен с хостинга разработчиков.
Ссылка со стороннего сервиса не сработала.
Пока оставляю рабочий вариант с загрузкой на JW Player-сервис.

4 мар. 2013 г.

wowSlider

wowSlider.

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

wowSlider v.3.0 Free version.

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

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

4 дек. 2012 г.

Тропарь.

Тропарь праздника Введения во храм Пресвятой Богородицы.

http://youtu.be/HHPEHFJtxIA

Днесь благоволения Божия предображение, и человеков спасения проповедание,
в храме Божии ясно Дева является, и Христа всем предвозвещает.
Той и мы велегласно возопиим: радуйся смотрения Зиждителева исполнение.

3 дек. 2012 г.

Overflow

CSS от Alen Grakalic.

/* overflow */
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left;
float:top;
margin-right:1px;
border:1px solid #999;
padding:1px;
}
ul#thumbs a{
display:block;
float:left;
float:top;
width:230px; /* ширина видимой части */
height:200px; /* высота видимой части */
line-height:230px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-60px;
}
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
/* /overflow */

20 нояб. 2012 г.

Fade Caption

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

<div id="mainwrapper">
<div class="box" id="box-3">
<img id="image-3" src="http://1.bp.blogspot.com/-nIAIr9lXkNI/UKqB47cyV2I/AAAAAAAABrQ/bSIjkeQqB2c/s320/coffee3+%E2%80%94jquery1.JPG" />
<h3>
<span class="caption fade-caption">Проявляющаяся подпись Fade Caption
dzhordvik.blogspot.ru. </h3></span>

И вот что получается:

Проявляющаяся подпись Fade Caption dzhordvik.blogspot.ru.

html каркас.

Так выглядит конструкция HTML для применяемых стилей.

<div id="mainwrapper">



<div id="box-1" class="box">
<img id="image-1" src="http ://image.JPG"/>
<span class="caption simple-caption">
<p>Простая подпись</p>
</span>
</div>



<div id="box-2" class="box">
<img id="image-2" src="http ://image.JPG"/>
<span class="caption full-caption">
<h3>Подпись на всю картинку Full Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>



<div id="box-3" class="box">
<img id="image-3" src="http ://image.JPG"/>
<span class="caption fade-caption">
<h3>Проявляющаяся подпись Fade Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>



<div id="box-4" class="box">
<img id="image-4" src="http ://image.JPG"/>
<span class="caption slide-caption">
<h3>Выскальзывающая подпись Slide Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>



<div id="box-5" class="box">
<div class="rotate">
<img id="image-5" src="http ://image.JPG"/>
<span class="caption rotate-caption">
<h3>Подпись с поворотом This is rotate caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>



<div id="box-6" class="box">
<img id="image-6" src="http ://image.jpg"/>
<span class="caption scale-caption">
<h3>Масштабная подпись Free Style Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>

19 нояб. 2012 г.

CSS3

Это просто загруженные картинки, без применения стилей.

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

Простая подпись

Подпись на всю картинку

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Проявляющаяся подпись
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Выскальзывающая подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Подпись с поворотом

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Масштабная подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

1 окт. 2012 г.

hCard

Элементы hCard обрабатываемые Яндексом.

Использование микроданных для HTML-страниц сайтов, благоприятно влияет на результаты выдачи поисковиков.
Далее будет приведен пример того, что Яндекс рекомендует веб-мастерам для использования на сайтах.
Первый пример, показывающий краткую, минимально необходимую информацию об авторах блогов и организациях.
Так выглядит код для поисковых систем.

<div class="vcard">
  <div>Кафе <span class="fn org">Плюшка</span></div>
  <div class="adr">
    <span class="locality">г. Энгельс</span>,
    <span class="street-address">просп. Строителей, д. 21</span>
  </div>
  <div class="tel">Телефон: 
    <abbr class="value" title="+ 7 (8452) 123-45-67">123-45-67</abbr>
  </div>

 <span class="url">
    <span class="value-title" title="http://www.plushka-cafe.ru"> </span>
  </span>
</div>

C помощью вложенного элемента класса value-title с атрибутом title, в карточку можно добавить, невидимое для посетителей сайта, свойство url или category:

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

Наличие свойства category (род деятельности организации) облегчает отнесение организации сервисом, к конкретной рубрике.

e-mail

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

"Стандарт hCard допускает наличие нескольких элементов класса url, однако при добавлении карточки  в Справочник организаций, будет выбран наиболее подходящий.

Если адрес сайта отображается в блоке  с контактной информацией, то класс url можно присвоить элементу <a>:"

<div class="vcard">
  <div>
<span class="category">Кафе</span>-<span class="category">кулинария</span>
    <a class="fn org url" href="http://www.plushka-cafe.ru">Кафе Плюшка</a>
  </div>
  <div class="adr">
    <span class="postal-code">410000</span>,
    <span class="country-name">Россия</span>,
    <span class="region">Саратовская область</span>,
    <span class="locality">г. Энгельс</span>,
    <span class="street-address">просп. Строителей, д. 21</span>,
    <span class="extended-address">этаж. 2, оф. 201</span>
    <div class="tel">Телефон: 
      <abbr class="value" title="+ 7 (8452) 123-45-67">123-45-67</abbr>
    </div>
<div class="tel">
    <abbr class="type" title="fax">Факс:</abbr> 
    <abbr class="value" title="+ 7 (8452) 123-45-89">123-45-89</abbr>
  </div>
  </div>
</div>

<div class="email">
admin@plushka-cafe.ru</div>

<div>Электронная почта:
<a class="email" href="mailto:plushka@plushka-cafe.ru">
plushka@plushka-cafe.ru
</a>
</div>
<div>По вопросам трудоустройства:
<a class="email" href="mailto:hr@plushka-cafe.ru">
hr@plushka-cafe.ru
</a>
</div>
<div>По вопросам закупок:
<a class="email" href="mailto:buy@plushka-cafe.ru">
buy@plushka-cafe.ru
</a>
</div>

geo

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

latitude — широта;
longitude — долгота.

<span class="geo">
    <span class="latitude">
      <span class="value-title" title="55.792188"> </span>
    </span>
    <span class="longitude">
      <span class="value-title" title="37.764956"> </span>
    </span>
  </span>

workhours

Время работы организации.
Свойство не предусмотрено стандартом hCard, добавлено Яндексом в качестве расширения. Допустимо указывать время работы в произвольном формате.

пн-пт 9:00-18:00
пн-пт 9:00-18:00, обед 13:00-14:00, сб-вс 10:00-17:00, обед 13:30-14:00
пн-сб 11:00-20:00, вс 12:00-24:00
ежедн. 10:00-24:00
круглосуточно

<div>

    Мы работаем<span class="workhours">ежедневно с 11:00 до 24:00</span>
  </div>

Остальные свойства, предусмотренные форматом hCard, в настоящее время игнорируются Яндексом.
Если ваша контактная информация содержит логотип организации, используйте свойство logo.
Полный список свойств представлен в официальной спецификации формата, в разделе Property List.

15 апр. 2012 г.

Харчо.

20 июл. 2011 г.

Ярлык на Blogger.

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

Второй пост

Этот блог экспериментальный, как и предшествующие.
Методом проб и ошибок, достигаются максимально значимые результаты.
И от раза к разу, все дальше и дальше уходишь от первых своих шагов и ускоряя движение, приближаешься к полету мысли, если не сказать парению.
2leep.com - Виджеты для блогов будут опробованы на функциональность на этом блоге, когда он наберет оборотов.
А сегодня, из шаблона был удален код виджета, со ссылкой на дизайнера, который отображается внизу блога.
Вот этот код:

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

<b:includable id='main'>

<b:if cond='data:feedbackSurveyLink'>

<data:feedbackSurveyLink/>

</div>

</b:if>

<b:if cond='data:attribution != ""'>

<data:attribution/>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Если нужно удалить всю секцию, необходимо захватить ещё одну строчку расположенную выше кода и одну ниже.

<b:section…..>

код виджета

</b:section>

5 мар. 2011 г.

Новое сообщение

Новое сообщение испытания шаблона.
Cегодня используя программу Ashampoo Snap я записал это пробное видео и закинул на YouTube.
Еще идет обработка и я не видел как это получилось в оригинале.
Надеюсь, что не плохо.

22 нояб. 2013 г.

7 окт. 2013 г.

4 мар. 2013 г.

wowSlider.

4 дек. 2012 г.

Тропарь праздника Введения во храм Пресвятой Богородицы.

3 дек. 2012 г.

20 нояб. 2012 г.

Проявляющаяся подпись Fade Caption dzhordvik.blogspot.ru.

19 нояб. 2012 г.

Подпись на всю картинку

Проявляющаяся подпись Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Проявляющаяся подпись

Выскальзывающая подпись

Подпись с поворотом

Масштабная подпись

1 окт. 2012 г.

15 апр. 2012 г.

20 июл. 2011 г.

5 мар. 2011 г.

22 нояб. 2013 г.

7 окт. 2013 г.

4 мар. 2013 г.

4 дек. 2012 г.

3 дек. 2012 г.

20 нояб. 2012 г.

19 нояб. 2012 г.

Проявляющаяся подпись
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

1 окт. 2012 г.

15 апр. 2012 г.

20 июл. 2011 г.

5 мар. 2011 г.