Блог Веры Борок

Как сделать живое видео

noreply@blogger.com (Вера Борок) — Sat, 28 Jun 2014 12:20:00 +0000

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

Скачайте файл — ECAP.exe

Это программа записи с веб-камеры. Её даже не нужно устанавливать. Просто запустите файл ECAP.exe, который скачали. Для удобства лучше его скопировать на рабочий стол.

После запуска откроется окно программы:

Изображение с камеры уже будет транслироваться.

Для записи нужно нажать кнопку «Пуск», для остановки записи — кнопку «Стоп». После остановки, откроется папка с записанным файлом.

Вот и всё. Запись произошла. Данную запись заливаем на YouTube и полученную ссылку вставляем в блог.

Оно, конечно, все просто, но включив камеру, поняла, что нужно покупать новую. Старая не работала — на мониторе было расплывчатое пятно. Подобрала и заказала себе в интернете камеру с разрешением видео 1920 х 1080. Но, покрутив объектив у старой камеры, решила покупку временно отложить — уже что-то было видно. Затем настроила веб-камеру в Skype: Инструменты — Настройки — Настройки видео — Настройки веб-камеры.

Несколько советов, которые смогла найти — новичкам точно пригодятся.

Если боитесь записывать себя без шпаргалки, напишите в Блокноте текст и расположите его на мониторе под камерой.
Освещение. Садиться лучше перед чем-то белым (стена, ватман), а лампу поставить сзади и лучше дневную. Свет должен быть отражённый или дневной: лицом к окну, но не на солнце. Если лицом к компьютеру и сзади лампа, тоже будет нормально. Лампа над головой — плохо. Появляются тени.
Камера должна быть на уровне глаз. И собой надо занять большую площадь экрана.
Не приближайте микрофон близко ко рту когда будете говорить. Так как микрофон работает на полную громкость, будет слышно ваше дыхание. Это не очень приятно.
Говорить нужно медленно и четко.

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

Как скачать музыку с YouTube

noreply@blogger.com (Вера Борок) — Sun, 14 Jul 2013 22:28:00 +0000

При создании видео бывает проблематично найти нужный звуковой файл в формате mp3. Рассмотрим два варианта, как можно скачать музыку с YouTube.

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

Можно воспользоваться одним из двух самых популярных:

1. http://userscripts.org/scripts/show/62634
2. http://www.westbyte.com/dm/chrome

Рекомендуется первый

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

Добавьте в адрес страницы с роликом на сервисе Youtube.com в начало буквы SS и жмите Enter.

Пример:

Было:
https://www.youtube.com/watch?v=CHDRO5zKAFI

Стало:
SSyoutube.com/watch?v=CHDRO5zKAFI

Вы попадёте на страницу, где есть возможность скачать ролик к себе на компьютер. Выбираем формат MP4 и нажимаем кнопку Скачать. Сохраняем ролик на компьютер.

Вариант 1

Далее с сохраненным роликом можно работать в любой программе. Правда, в Windows Movie Maker не получилось. Зато Kamtasia Studio не сопротивлялась.

Загрузив ролик, перетягиваем его на монтажный стол. Появились 2 дорожки – звуковая и видео. Их нужно отсоединить. Для этого нажимаем на синий шарик с левой стороны. Программа спрашивает, действительно ли мы хотим отсоединить дорожку? Отвечаем – Да.

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

Осталось сохранить. Нажимаем на Сохранить проект ( Produce and share ) – Пользовательские настройки – Далее - выбираем формат mp3 – Далее – Выбираем папку – Пишем название - Готово. Отслеживаем процесс завершения.

Теперь можно и музыку прослушать.

Вариант 2

А недавно познакомилась с интересным ресурсом mp3cut. С его помощью скачать музыку можно в три клика, да еще и в режиме онлайн. Меню находится в футере сайта. Нажимаем "Обрезать песню онлайн" и загружаем наш скаченный видеоролик. Если обрезать музыку не нужно, выставляем бегунки в начало и конец ролика и нажимаем "Сохранить". Проще не бывает.

Как отправить скриншот

noreply@blogger.com (Вера Борок) — Sun, 30 Jun 2013 09:06:00 +0000

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

Для этого необходимо сделать 3 шага:

создать скриншот
загрузить скриншот (картинку) на компьютер
получить прямую ссылку

Все это займет не более двух минут. Итак, все по-порядку.

Создание скриншота.

Легче и быстрее всего это сделать с помощью программы FastStone Capture. До недавнего времени она была бесплатной. Работать с ней – сплошное удовольствие. Но предположим, что у вас ее нет. Зато кнопка «print screen» ( «prt sc» ) на клавиатуре есть у каждого. Нажав на нее, получаем скриншот всего экрана. Этот скриншот (картинка) находится в буфере обмена. Вспомните, когда переснимаете текст, вы его выделяете и нажимаете «Копировать». Так текст тоже хранится в буфере обмена до тех пор, пока не нажали «Вставить».

Загрузить скриншот на компьютер

Воспользуемся графическим редактором Paint, который тоже есть на любом компьютере (Пуск – Все программы – Стандартные – Paint). Открываем программу и нажимаем сочетание клавиш «ctrl+v». Скринщот перед вами. Осталось его загрузить на компьютер. Нажимаем Файл – Сохранить как.. В открывшемся окне пишем имя файла, под ним, там где Тип файла, выбираем JPEG и нажимаем «Сохранить».

Получить прямую ссылку

Для этого необходимо загрузить наш скриншот на фотохостинг. Таких сервисов много. Воспользуемся firepic.org и сделаем 3 шага:

Выбираем скриншот на компьютере.
Нажимаем «Загрузить».
Копируем прямую ссылку на картинку и отправляем по назначению.

Советую обратить внимание на данный фотохостинг. Он не требует регистрации, бесплатен, позволяет размещать изображения до 5 МБ, разрешение загружаемого файла до 5000*5000 пикселей. И самое главное - не ограничивает время хранения изображений. Все фотографии будут храниться вечно.

Данный метод отправки скриншотов предполагает, что вы эти действия выполняете редко. Если же ежедневно приходится отправлять с десяток и более картинок, лучше устанавливать специальные программы или плагин Webpage Screenthot для Google Chrome.

Не могу обойти вниманием программу SSMaker. Программа предназначена для создания скриншотов и моментальной их загрузки в Интернет. Она очень удобная, бесплатная, с пояснениями. Есть возможность скачать на компьютер, а можно работать и в онлайн. Введя адрес нужной страницы и нажав кнопку «Ввод», получаем ссылку для отправки.

Все загруженные скриншоты хранятся на сервере 30 дней. Возможно продление срока хранения.

Как создать ярлык сайта на рабочем столе

noreply@blogger.com (Вера Борок) — Sun, 03 Feb 2013 21:08:00 +0000

Работая в интернете и находя полезную информацию, возникает необходимость сохранить адрес нужного сайта или отдельно взятой статьи. Обычно пользуемся закладками. Данный вариант сохранения адресов лучше использовать когда нужный блог или сайт необходим длительно. Если же ссылка нужна на пару-тройку дней, нет смысла засорять закладки. Лучше на Рабочем столе создать ярлык. Это просто.

В окне браузера копируем ссылку нужного нам сайта, кликнув по ней правой кнопкой мыши.Выделяем адрес (в данном примере это адрес моего блога "Блог Веры Борок", браузер - Google Chrome) и в появившемся меню выбираем функцию «Копировать»:

Нужный адрес сохраняется в буфер обмена.

Затем создаем ярлык. Для этого правой кнопкой мыши кликаем на «Рабочем столе» по пустому месту и в открывшемся окне выбираем функцию "Создать — Ярлык»:

Вводим адрес нашего сайта и жмем «Далее»:

В открывшемся окне вписываем название будущего ярлыка. Постарайтесь название сайта сделать коротким, одной строчкой. Так будет удобнее. Нажимаем «Готово»:

Новый ярлык красуется на «Рабочем столе»

При клике по созданному ярлыку будет открываться страница с нужным адресом. Внешний вид ярлыка, если не нравится, можно поменять, нажав правой кнопкой мыши и выбрав пункт «Свойства». Далее - «Документ Интернета» и «Сменить значок».

Только не захламляйте рабочий стол. После окончания работы ярлык - в корзину.

Как создать видеоролик из фото

noreply@blogger.com (Вера Борок) — Sun, 11 Nov 2012 17:53:00 +0000

Смотрите ролик на весь экран

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

Чтобы создать видеоролик, нам необходима программа, музыка и фото.

Программа.

Использовала стандартную программу Windows MovieMaker, расположенную на диске С. Программой легко пользоваться, освоить сможет любой, просмотрев 15-минутный обучающий ролик на youtube. Правда, продвинутые блоггеры говорят, что в этой программе ничего путного создать нельзя. Но другой пока не владею.

Музыка.

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

С музыкой будьте осторожны. Лучший вариант купить мелодию. Мне неоднократно присылали уведомления, что нарушила авторские права. И сейчас в двух местах красуется надпись "Совпадение со сторонним содержанием." Уведомление обычно приходит на следующий день после заливки ролика на YouTube с припиской что ничего менять не надо. Лучше такие ролики удалять или менять мелодию. Могут забанить канал. Однажды меняла раз пять. Начинала со Штрауса, закончила Г.Свиридовым. Но спустя полгода все же прислали письмо что нарушила. Теперь на классическую музыку не покушаюсь. Второй случай - известная песня Л.Утесова, под которую и создавался ролик. И эту мелодию присвоили себе американцы, точнее исполнение. Удалять жалко, уже 25000 просмотров. После этого поставила крест на роликах и долго не заходила на свой канал. Но, как говорится, "волков бояться — в лес не ходить".

Картинки.

Как скачивать картинки тоже есть пост. В данном случае использовала только Yandex и Google. Интересовали только горизонтальные картинки (фото) больших размеров. Мой итоговый размер 1280х720. Но если понравившаяся картинка была размером не менее 800, не отказывалась. Если увеличивать большие картинки, качество получается приличным. Все картинки сохранила в отдельной папке. Сжимать не стала - смотри мои эксперименты с предыдущим видео.

Так как сценарием в данном случае была песня "Снег идет", в поиске задавала снег и зима. Названия всех картинок должны быть прописаны латинскими буквами, без пробелов с расширением jpg.

Затем все картинки загрузила в Picasa, отредактировала. Сделала их все одинакового размера 1280х720. Кадрировала. Будьте внимательны, водяных знаков быть не должно. И уже подготовленные картинки снова сохранила на компьютере в новой папке.

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

Монтаж видео.

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

Добавляем видеопереходы. Не старайтесь использовать все имеющиеся, достаточно 2-3х. В данном примере поставила "Плавный переход" почти на всех кадрах.

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

Текст. В данном слайдшоу меня интересовал только заголовок и титры.Их можно поставить до и после клипа. Но мне больше нравится название на выбранном клипе. Нашла картинку, откуда вырезала изображение снега, растянула до нужного размера. Цвет текста всегда ищу с помощью пипетки программы FastStone Capture. Добавила анимацию названия. По своему усмотрению оформляете заключительный кадр. Время показа текста можно регулировать.

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

Чтобы облегчить себе жизнь, во время монтажа периодически сохраняйте проект. Программа зависает. Сам проект после сохранения ролика не удаляйте. Если возникнет проблема, легко можно подправить ролик и снова разместить на YouTube.

Как убрать сайдбар со страницы в Blogger

noreply@blogger.com (Вера Борок) — Fri, 26 Oct 2012 16:48:00 +0000

Как убрать сайдбар с отдельной статичной страницы блога? Зачем это нужно? Мне давно хотелось чтобы оглавление блога располагалось на всю ширину страницы и кнопочки боковой панели не отвлекали бы читателей.

Начнем: уберём боковую панель (правую, левую или обе), а содержание растянем на всю страницу. Мне нужно было убрать правую боковую панель на странице по адресу veraborok.blogspot.com/p/blog-page_06.html

Шаблон ---> Изменить HTML ---> Приступить
Ставим галочку на "Расширить шаблоны виджета"
С помощью поиска (Ctrl+F) находим в шаблоне </head>
Перед </head> вставляем код:

<b:if cond='data:blog.url == &quot;http://veraborok.blogspot.com/p/blog-page_06.html&quot;'>
<style type='text/css'>
      .main-inner .columns {
        padding-right: 0;
      }
      .main-inner .fauxcolumn-center-outer {
        right: 0;
        _width: expression(this.parentNode.offsetWidth -
             parseInt(&quot;$(main.column.left.width)&quot;) + &#39;px&#39;);
      }
      .main-inner .fauxcolumn-right-outer {
        width: 0px;
      }
      .main-inner .column-right-outer {
        width: 0px;
        margin-right: 0;
      }
</style>
</b:if>

Источник: http://shpargalkablog.ru

В данном коде необходимо адрес моей страницы поменять на свой. Я убирала правую боковую панель column-right-outer, для левой - column-left-outer

Затем находим код ( см. ниже ) и к нему добавляем по строчке сверху и снизу. Данные строчки выделены жирным.

<b:if cond='data:blog.url != &quot;http://veraborok.blogspot.com/p/blog-page_06.html&quot;'>
<div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='1'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>
</b:if>

Источник: http://shpargalkablog.ru

Счетчик-информер

noreply@blogger.com (Вера Борок) — Sat, 29 Sep 2012 11:23:00 +0000

Хочу предложить вам многофункциональный счетчик-информер.

Он отображает:

количество онлайн посетителей
количество постов
количество комментариев
возраст блога

Данный счетчик-информер понравился, поставила себе. Устанавливаем как обычный гаджет: "Дизайн" --- "Добавить гаджет"--- "HTML/JavaScript" --- вставляем код. Сохраняем. Перетягиваем в любое место.

<img src="http://bloggerhelp.ru/templates/GiGantika/images/whoonline/user.png" alt="" width="14" height="14" /> Сейчас на сайте: <b><script 
src=http://fastonlineusers.com/online.php?d=http://твой-блог.blogspot.com/></script></b><br/>
<script style="text/javascript">
function totalPosts(json) {
document.write('<img src="http://bloggerhelp.ru/templates/GiGantika/images/com1.png" alt="" width="14" height="14" /> Всего постов: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function totalComments(json) {
document.write('<img src="http://bloggerhelp.ru/templates/GiGantika/images/post.png" alt="" width="14" height="14" /> Всего комментарии: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
<script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script>
<script language=javascript>   
d0 = new Date('september 21, 2012');   
d1 = new Date();   
dt = (d1.getTime() - d0.getTime()) / (1000*60*60*24);   
document.write('<img src="http://bloggerhelp.ru/templates/GiGantika/images/clock.png" alt="" width="14" height="14" /> Блог живет: <b><span style="color: #ff0000">' + Math.round(dt) + '</span></b>-й день.');   
</script>

Источник: http://blogger.com.md

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

Полюбовались на новую игрушку, и хватит. Несколько часов - и скрипт онлайн посетителей перестал отображаться.

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

Это один вариант. Но есть и второй. Создайте новый скрипт для онлайн посетителей. На данном сервисе все просто, бесплатно и без регистрации. Вы им адрес блога, в ответ - скрипт.

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

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

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Все статьи блога: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Все комментарии: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color:ddd><script src="http://veraborok.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://veraborok.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>

Кнопка "Читать далее" для Blogger

noreply@blogger.com (Вера Борок) — Sun, 23 Sep 2012 14:36:00 +0000

Давно хотела поменять малозаметную надпись "Читать далее", доставшуюся с шаблоном.

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

Выбрала самый простой вариант. Приступим.

Дизайн ---> Изменить HTML
Ставим галочку на "Расширить шаблоны виджета"
С помощью поиска (Ctrl+F) находим в шаблоне <data:post.jumpText/>
Вместо этой строки вставляем код:

<b:if cond='data:post.hasJumpLink'>
<DIV class='jump-link'>
<A expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyiYUJzaYGMgmPqiXYZut-Z2Hx0KicRrYslDNilTEI_sefAg0jcej8ZXMjDIsG1EWqucbxxvldtHmOTP1_fiy50tlFf_sPVFAeXjkrm173vGajHbEdutqS7XEy4sQNqS8q9ZX0kZf4_IU/s1600/knopka30.jpg" /></A>
</DIV>
</b:if>

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

Хотите кнопку с наворотами - раздвижные, анимированные - загляните на интересный блог blogger.com.md, где я взяла данный код.

Размер видео для YouTube

noreply@blogger.com (Вера Борок) — Sat, 22 Sep 2012 10:37:00 +0000

Нажмите, чтобы посмотреть видео

Каким должен быть размер видео для YouTube? Вы задавали себе этот вопрос, создавая видео или слайдшоу? Я - нет. Выбирала подходящие по теме картинки и еще удивлялась как ладно соседствуют рядом большие и маленькие изображения. На ролике и не видно.

Со временем поняла, что вертикальные картинки лучше не вставлять Узнала, что все изображения должны быть одного размера. Было непонятно, почему на YouTube одни ролики растянуты по всей ширине плеера, а другие уже, с черными полосами по бокам.

Ответ нашла на блоге Юлии Ратушной. Картинки подбираем размером 640 х 480 (соотношение 4 : 3) либо 1280 х 720 (соотношение 16 : 9). Лучше второй вариант, широкоформатный, без черных полос по бокам. YouTube предлагает именно эти размеры.

Если ваш ролик сохранен с соотношением сторон 4:3, а хочется его сделать широкоформатным - нет проблем. Загружая ролик, вставьте тег yt:crop=16:9 Не забудьте сохранить. Вопрос решен.

Тут же захотелось поэкспериментировать. Взяла свой первый ролик, которому почти 2 года. Нажала на кнопку "Изменить" над плеером.Открылся редактор, где можно вставить этот тег. Сохранить.

Все получилось.Качество картинки нормальное. Но все надписи, а их было много, съехали. Оставлять было нельзя. Возможно, этот вариант приемлем для слайдшоу, где одни картинки, без надписей. Можете попробовать. Тег как вставили, так и убрали. Ничего не испортите.

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

А как же широкоформатный ролик? Создала новый, короткий, на пару минут. Результат мне понравился.

А теперь о главном. В пору знакомства с интернетом одним из первых моих роликов, а точнее слайдшоу, была "Прогулка по Киеву". Фото мне достались от племянницы, которую водила по своим любимым местам. Из них то я и соорудила ролик. Сначала меня все устраивало. Позднее все хотелось переделать, да все руки не доходили. Фото блеклые, половина вертикальных, размером 900 х 1200. А мне нужно 1280 х 720.

Что я сделала, тоже впервые. Загрузила фото в Picasa и отредактировала: автокоррекция, резкость, четкость. Изменила размер 900 на 1280, сохраняя пропорции фото. Кадрировала. Картинки подготовила.

Создавая слайдшоу, понимала что его размер будет велик. Обычно я делала короткие видео, минуты 2 ... 3. Большая вероятность что его просмотрят до конца. Но здесь я делала для себя. Выбрала 60 фото из 100, размером 1280 х 720.

После сохранения на компьютере, ролик весил 800КБ. Качество изображений было вполне приличное. А чем лучше качество, тем вес файла больше и загрузка дольше. Видео может запинаться.

Не рискнула залить готовый ролик на YouTube. Решила еще раз сжать все картинки. Вес их уменьшила вдвое и создала новое видео худшего качества. А в итоге его вес оказался чуть ниже предыдущего - 750КБ, не вдвое, как я рассчитывала. Все же загрузила последнее видео худшего качества. А зря. Выгоды никакой, так как YouTube тоже пережимает качество.

Вывод 2: хотите видео хорошего качества и без торможения - берите фото большого размера и отличного качества. Но количество фото должно быть небольшим: 20 ... 30.

Цели своей достигла - видео получилось без черных полос по бокам.

Кнопка "Вверх" для Blogger

noreply@blogger.com (Вера Борок) — Wed, 29 Aug 2012 07:41:00 +0000

Сегодня поговорим о кнопке для быстрого перемещения вверх, устанавливаемой на блоге. Это удобно. Существует много вариантов. Приведу простейший. Установила давно, работает без сбоев.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Поехали на Верх"> 
<img border="0" alt="Back to TOP"  src = "http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22iAL6945WeWHDjyk1encXdoGBRJqP-SzVJa-JWadVMViBGCoAsL737XHMmrB4GLANKtM0GGTY3Wz31Lwa2YF-pJ1SRr0kJO9__HQB8eT8ZR_qQZ-fg-Sm3F9gcOZP8MFvGYHFUkNvlo/s1600/cooltext748576156.png"/></a>

Устанавливаем как гаджет: "Дизайн" -- "Добавить гаджет" -- "HTML/JavaScript" -- код. Сохраняем. Перетягиваем в любое место, так как расположение кнопки оговорено: по 5 пикселей снизу и справа.

Все. Кнопка "Вверх" незаметно притулилась в самом низу страницы и облегчила вашим читателям навигацию на блоге.

Что можно изменить?

Желаете поместить кнопку слева - right замените на left.
Расстояния проставьте свои.
Ну и сама кнопка. Я вам нарисовала скромненькую - устраивает, можете оставить всё как есть. Хотите картинку, поищите в интернете. Большой выбор здесь. Хотите создать свою уникальную кнопку - ознакомьтесь с материалом "Создание кнопки для блога".

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

А недавно нашла новый гаджет, на первый взгляд, интереснее предыдущего. С исчезающей кнопкой. Установила на второй блог. Работает.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://bloggerhelp.ru/uploads/demo/to-top/code.js"/></script>

Источник: blogger.com.md

И еще. А вы не пробовали нажать на клавиатуре Home - результат тот же. Может и кнопку ставить не нужно?

3D социальные иконки для Blogger

noreply@blogger.com (Вера Борок) — Fri, 10 Aug 2012 09:06:00 +0000

Роль социальных сетей - Facebook, Twitter, Вконтакте, Google+ ....... нельзя игнорировать. Уже сегодня сложно найти сайт или блог без социальных плагинов, дизайн которых становится все более оригинальным. Наткнувшись на 3D социальные иконки с эффектом вращения, не смогла пройти мимо. И хоть с сайдбаре уже был установлен комплект иконок, решила поиграться с новыми. Если навести курсор, иконки начинают вращаться и рука сама тянется кликнуть на мышку.

Код иконок позаимствовала у Сергея Мазураша.

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> 
<center>
<div id="social">
<a href="http://feeds.feedburner.com/blogspot/veraborok" rel="nofollow" target="_blank" title="Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG-fVO2u3iRUps4ZGoxsotq6ibhDxaOnLvcqmBFxxl5Unh9aue4OCw_QbI6l03Ex83YLaCp7RI_EnjtU81wvyFTkQowAehcaTWsBZLC5YKrjrDvkFbD1qsEbeRKN8nG5r0_I9tXBkbeik/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a>   <a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/MbbDy&amp;loc=ru_RU" rel="nofollow" target="_blank" title="Получать свежие статьи на Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0epopMlYXsPLR1IK-i7TsLtq9hKAQ9qRrWGNRJuY6eVqcaP7y0-l50b2p6W5CEJ1sTiSGJ6fknUhlEAGE6bjQYswpiNuQriY8zduu3BMiFq6M22-3CniPE8JBQE9s3mXBRLn7zVLY9OE/s1600/RSS-EMAIL-48.png" style="margin-right: 1px;" /></a>    <a href="https://www.facebook.com/vera.borok" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRwznVnLKPmdCUoBORaqnKAOSjBf78IyRB7CxZgBTFhB1LPUnNnnRHG0btXL96fZMBzvf_e4F3egYKCQokPPIbggOwvdC2pmBbYrNIxFtXeghh-KSIIylCL1MtHSOhX8dTK8b9QfKIFqo/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a>   <a href="https://twitter.com/#!/Vera_Borok" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAud4iKAScHoTYdWBhyphenhyphenzmXxdCFzoZ_tTTVH2aGPa6G6Vib5p31eIpIH_TQ4ZRDvmLlDDA3_fCJMw5WE8J4z519LI1wQvxAkmpn0xoMN7StLXxsg5tQddvffs2k_UIIiFlDng4aNezX_6Q/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a>   <a href="https://plus.google.com/101319911733376498080/posts" rel="nofollow" target="_blank" title="Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQk3DWCAwh1ML1WmmHKGEfJOuPyZWkrxzZQkI4x7IfM7e7VHhA_zCDS-Xn8co0LTO6myiyG5hBox0jPS0_fJr3c8qujrLAH2gfYOfOdmmJ0LEmtannZkOmOQn1BddTcUWqAYdehQ2UO0/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a>   </div>   </center>

Установить легко: "Дизайн" -- "Добавить гаджет" -- "HTML/JavaScript" -- код гаджета.

Только мои адреса профилей соцсетей и RSS канала поменяйте на свои. Сохраняем и перетягиваем гаджет, лучше повыше. Еще раз сохраняем.

Станем друзьями

Надеюсь, наши посетители тоже обратят на них внимание и непременно кликнут.

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

Вертикальное выравнивание картинки в тексте

noreply@blogger.com (Вера Борок) — Thu, 12 Jul 2012 11:27:00 +0000

При написании первого поста попыталась вставить смайлик. Почему-то он не захотел вставляться как я желала. Пришлось прилепить его в самом конце в начале строчки.

Позднее, при написании моих шпаргалок, возникла необходимость вставлять картинки-указатели в середине строки. Ответ нашелся - ведь кто ищет, знания приходят. Все оказалось несложно.

Вертикальное выравнивание картинки в тексте по центру строки выполняется с помощью значения middle свойства vertical-align.

Короче, вставляем картинку <img src="http://2.bp.blogspot.com/-……... и между <img и src ставим style="vertical-align: middle;"

Все работает!!!

Получилось!!!Получилось!!!

Если вас интересуют такие "полезные мелочи", можете посмотреть "Как добавить иконки-превьюшки в Blogger".

Улучшаем качество изображений в Blogger

noreply@blogger.com (Вера Борок) — Mon, 09 Jul 2012 11:20:00 +0000

Нажать

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

Если перейти на вкладку HTML и посмотреть код картинки, увидим следующее:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvN9iX9ktERirBqfBpVLjPsci3f6wuSrknHktfqKGRl2MQ2uiyOs4bVLV0GAbxWT78lSvV27Cixm_blRNZnhiGaYDDPb0iMa-96uFlCycxJUQt8sw_SCZoDp0XOXK6ksikClZJ3x6u2zs/s1600/derev_dom456.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="267" src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvN9iX9ktERirBqfBpVLjPsci3f6wuSrknHktfqKGRl2MQ2uiyOs4bVLV0GAbxWT78lSvV27Cixm_blRNZnhiGaYDDPb0iMa-96uFlCycxJUQt8sw_SCZoDp0XOXK6ksikClZJ3x6u2zs/s320/derev_dom456.JPG" width="320" /></a></div>

В момент загрузки картинки, она автоматом выводится в уменьшенном виде. Обычно это средний размер - 320. Сравните s1600 и s320. Первая ссылка ведет на исходный размер изображения, вторая изменена сервисом Blogger. Нам необходимо 320 заменить на 1600. Качество нашей картинки или фото улучшится, размеры при этом останутся прежними. В данном примере мне захотелось картинку уменьшить с 320 на 250. Достаточно изменить на width="250", height - пропорционально. Желательно всегда добавлять ширину и высоту изображения - это ускоряет загрузку страницы.

Вот так легко и просто можно улучшить качество изображений.

Остается только оптимизировать нашу картинку, прописав alt и title. В новом редакторе блоггер это сделать совсем легко. Для этого нужно просто кликнуть на изображение и тогда в рамке "выровнять налево-направо" появляется функция "Свойства". При этом желательно, чтобы в alt и title были прописаны ключевые слова вашей статьи.

На фото сверху можно увидеть одну из работ моего брата Олега Борок. Его миниатюры мне очень нравятся. Решила поделиться с вами. Ниже представлены фрагменты деревянного сруба.

Если интересно, то здесь можно узнать как разместить картинки рядом.

Хотите больше узнать о работе с картинками, пощелкайте кнопочку.

Создаем шапку для блога

noreply@blogger.com (Вера Борок) — Thu, 05 Jul 2012 08:18:00 +0000

Когда зарегистрировала первый блог, вставила пару своих видеороликов. В сайдбаре красовалось маленькое фото, часы да виджет с прогнозом погоды. А так хотелось украсить блог, вставить хоть какую-то картинку в шапку. Скажите, а поисковик? Сейчас и я бы так ответила, а тогда... Все оказалось просто.

Немного освоившись с картинками, нашла понравившееся фото. Выбрала нейтральный городской пейзаж. Цвет соответствовал цветной полоске на месте шапки, подходящей к фону блога. Тогда еще не знала что фон можно убрать и картинку для шапки можно выбрать любую, а от нее уже плясать. Размер только выбирайте большой, не меньше 1000, а лучше больше. Если вы еще не определились с тематикой, безпроигрышный вариант - природа.

Используя любой графический редактор, по заданным размерам вырезаем болванку из выбранного фото. В принципе, на этом этапе я и успокоилась. Если не знаете как вырезать, прочитайте у меня "Как сделать картинку уникальной". Стоит освоить все шаги, они вам пригодятся.

Осталось вставить подготовленную картинку в шапку блога. Заходим в Дизайн - -Элементы страницы и в районе заголовка жмем изменить.

Перед нами открывается меню:

В этом окне выбираем и загружаем с жесткого диска подготовленную картинку. Место размещения - после названия и описания.

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

Со временем нашла два неплохих сервиса, где можно создать красивую надпись. Сделала себе еще две картинки на сервисе cooltext.com - одну с названием блога, другую - с описанием. И методом наложения расположила на существующей картинке. Сначало было непонятно: если в меню "Настроить заголовок" уберу "Название блога" и "Описание Блога" - как их увидит поисковик. Если оставлю, они продублируют мою картинку. Методом научного тыка вопрос был решен. Галочку поставить - вместо заголовка и описания.

Итак, использовав несколько несложных приемов: обрезка фото, изменение размеров, наложение на новый слой, создание надписи - и у вас всегда оригинальная картинка.

На этой неделе мне пришлось оформить три новых шапки. Побродив по сети, нашла очень симпатичный, новый для меня сервис effectfree.ru Здесь оригинальная надпись накладывается сразу на картинку шапки.

Поигралась и вот что у меня получилось:

Использовала материалы:

Основа шапки

Рис.1 и 2 - картинки с wordpress.

Рис.3 - личное фото

Рис.4 - белый фон

Рис.5 - текстура с сервиса argusfon.com/category/obo-vsyom

Надписи

Рис.1, 2 и 3 - сервис effectfree.ru Наложить текст
Рис .4 и 5 - онлайн редактор pixlr.com/editor

Надеюсь, теперь шапка вашего блога будет эксклюзивной и привлекательной.

Виджет подписки YouTube

noreply@blogger.com (Вера Борок) — Sat, 23 Jun 2012 19:34:00 +0000

Если у вас есть свой блог и видеоканал на YouTube, думаю будет полезно как-то их объединить. Правда, можно поставить красивую кнопку, что мы и делали. А как вам такой виджет?

Привлекает внимание? Как бы вы повели себя, увидев на чужом блоге рядом с кнопкой Subscribe свое имя? Тото же. Так и вашим друзьям захочется нажать. А нажав, они автоматом оказываются подписаны на ваш видеоканал. Будут ли они постоянными гостями канала, зависит уже от вас.

Имя читателя будет высвечиваться только в том сучае, если у него открыт собственный видеоканал.

Хотите установить? Нет проблем.
border

Копируем код и вставляем. Ваш блог - Панель инструментов - Дизайн - Добавить гаджет - HTML/JavaScript. Код подредактируем - выделено красным. Вставляете имя своего видеоканала (YouTube Username) и подправляете размеры виджета. Высоту можно не трогать, ширину подгоняете под размер сайдбара. Заголовок на свое усмотрение.

Хотите проверить как работает? - жмите Subscribe!

Вас смущает, что еще нет своего канала и даже видео, ерунда. Канал уже можно создать. Загляните на мой, там найдете в плейлисте "Работа с YouTube" подборку видеороликов и через час у вас будет свой видеоканал.

Как добавить иконки-превьюшки в Blogger

noreply@blogger.com (Вера Борок) — Thu, 17 May 2012 18:54:00 +0000

Давно ничего не меняла в блоге. А тут захотелось немного его приукрасить, прицепить брошку-бантик. Побродила по интернету и вернулась с уловом: очаровательные иконки-превьюшки в конце поста.

Возможно, их мало кто и заметит, а мне душу греет. Мелочь, а приятно.

Так теперь может выглядеть и ваш блог.

И цветные кнопки соцсетей от платформы Blogger тоже смотрятся неплохо.

Добавляем наши иконки: "Дизайн" -- "Изменить HTML" и перед ]]></b:skin> вставим код:

Код:

Все просто. Пять минут - и желаемое достигнуто. Только учтите что данный вариант применим только на стандартных шаблонах Blogger.Можете даже поменять превьюшки на свои, если найдете что-то поинтереснее. Это легко сделать, заменив в коде URL картинок (http://1.bp.....png ).

Код позаимствовала у автора Bloggarolla.

Ошибки валидности на Blogger

noreply@blogger.com (Вера Борок) — Fri, 04 May 2012 16:40:00 +0000

О сервисе W3C, проверяющем блог на валидность, знала давно. Воспользовалась его услугами, посмотрела на количество своих ошибок, ужаснулась и оставила все как есть до лучших времен. Ничего вразумительного и конкретного в интернете не нашла и решила, что мне этим еще рано заниматься. Потихоньку , как мне казалось, улучшала блог, а ошибок становилось все больше и больше. HTML и CSS изучать не хотелось.
Недавно, заглянув на сервис, обнаружила только на главной странице 330 ошибок. Тут уж откладывать дальше было нельзя. В очередной раз присмотрелась к непонятным символам и ринулась в бой.

Кому интересно, поделюсь опытом. Все же 80% ошибок удалось убрать.

Центрирование. Некоторые заголовки постов и гаджеты в сайдбаре располагала по цетру. Отображалось нормально во всех браузерах. Но сервис выдал ошибку и пришлось заменить на

<div style="text-align: center;">текст или картинка</div>

Noindex. Когда-то добросовестно закрыла все внешние ссылки от индексации тегами

<noindex></noindex>

Оказалось - зря. На сегодня этот тег не работает да еще и невалиден. Пришлось убрать. Ошибок стало намного меньше. Это воодушевило. Кому не хочется расставаться с этим тегом, попробуйте такой вариант:

текст

Trbidi Почти каждый пост в редакторе начинался со строчки

<div dir="ltr" style="text-align: left;" trbidi="on">

Trbidi - транслитерация, то есть написание текста слева направо. Ее нужно отключить.

Админ. панель нового интерфейса

Отключила, а потом ручками в каждом посте пришлось убрать trbidi="on" В дальнейшем, надеюсь, такие ошибки больше не возникнут.

Просмотрите все счетчики. Если ошибка выдает символ амперсанда (&) , который применяется в адресах ссылок, разделяя несколько параметров, замените & на &. И не забудьте добавить в конце спецсимвола точку с запятой.

Отсутствие атрибута Alt. Добавьте свойство alt во все ссылки с изображениями, там где оно было пропущено.

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

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

Быстрое редактирование гаджетов

<b:include name='quickedit'/>

Ищем в коде шаблона и удаляем. Было жаль удалять, но у меня таких строчек было аж 24 и каждая тянула на себя по 2 ошибки. Итого 48 ошибок убрала. Только без фанатизма. Для постоянных читателей допускается исключение.

Можно еще убрать в коде шаблона ссылку на быстрое редактирование сообщений , тоже выдает по 2 ошибки на каждый пост, итого 10. Но я пока к этому не готова, удобство прежде всего.

Что не получилось?

Поменять в самом верху шаблона <!DOCTYPE html> Doctype не соответствует моему “стилю” кодирования. Код шаблона изначально невалиден. Это один из главных моментов и одна эта строчка тянет на 5 ошибок. А, возможно, решение этой проблемы снимет попутно еще не один десяток. 70% оставшихся ошибок: в конце тега нет значка “>” Хотя у меня с этим все нормально. Думаю, это связано тоже с Doctype.

Мой итог - 62 ошибки, не считая предупреждений. Для начала неплохо. Понимаю, что в отличие от WordPress, добиться 100% валидности блога, созданного на Blogger, нереально. Но не будем опускать руки. Знания прибавляются, сам Блоггер не стоит на месте и постоянно совершенствуется. Постараемся сделать шаблон лучше, уменьшая количество ошибок. Ведь правильный html-код блога никому не помешает.

P.S. Вы подумали что это все? Ничего подобного. Вчера нашла продолжение: CSS Validation Service, где нужно проверить блог еще и на соответствие CSS. А там ошибок не меньше. Не буду больше морочить голову. Главное, чтобы блог нормально отображался. Но вывод напрашивается сам собой - изучаем HTML и CSS.

Красивая страница 404 в Blogger

noreply@blogger.com (Вера Борок) — Mon, 09 Apr 2012 16:56:00 +0000

Дорогие мои читатели, если вам непонятно, что означает ошибка 404, введите после слеша в название вашего блога несколько любых символов (vborok.blogspot.com/zxc) и нажмите Enter. Или в адресной строке поста удалить пару последних символов и нажмите Enter Вы окажетесь на странице с ошибкой, куда попадает пользователь в случае перехода по битой ссылке, по ссылке на удалённую страницу или если ваша страница временно недоступна.

Давайте же разберемся как заставить посетителя блога улыбнуться и все же заглянуть на главную страницу.

Сейчас, после обновления интерфейса Blogger, страницу 404 можно настроить самому и без проблем.

Установка

Заходим в Настройки -- Настройки поиска -- Ошибки и переадресации -- Персонализированные сообщения об ошибке "Страница не найдена" -- Изменить

В открывшееся окно вводим код страницы. Где его взять? Создаем новое сообщение в Blogger и в визуальном редакторе оформляем страницу 404. Пишем новый пост, как всегда, только не публикуем, а оставляем в качестве черновика. Немного текста, картинка, ссылка на главную страницу блога. При желании, ссылки на свои лучшие статьи. Отформатируем и переходим в режим HTML. Полученный код копируем и вставляем в настройках. Сохраняем.

На момент написания этого поста моя страничка выглядит таким образом.

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

Взгляните на страницу 404 сайта proteys.info, улыбнитесь и создайте свой шедевр.Удачи Вам!

Школа "Успех в Интернет PRO100"

noreply@blogger.com (Вера Борок) — Fri, 17 Feb 2012 14:17:00 +0000

Закончилось обучение в школе "Успех в Интернет PRO100". Название школы говорит само за себя.

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

И я не жалею.Узнала то, что до сих пор было скрыто. Сделала то, что до сих пор не умела. Получила толчок для движения вперед.

Я благодарна школе за те знания, которые она мне дала, за те возможности, которые она передо мной открыла.

И если Вы, имея компьютер, боитесь к нему подойти, смело идите в Школу. Здесь вас научат многому. Чему? Посмотрите ролик.

Запись в школу Здесь

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы быть в курсе, подпишитесь на RSS-канал

Варианты кнопок социальных сетей для Blogger

noreply@blogger.com (Вера Борок) — Thu, 02 Feb 2012 18:09:00 +0000

Кнопки социальных сетей позволяют читателям быстро размещать ссылку на понравившуюся статью вашего блога в социальных сетях, на своих сайтах или блогах. Пользователи будут делиться информацией с вашего блога, щелкнув по кнопке социальной сети, где они зарегистрированы. А значит популярность вашего блога будет расти.

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

Привожу несколько вариантов таких кнопок.

Вариант 1

Вполне достаточный комплект кнопок на платформе Blogger уже существует. Чтобы их установить, переходим на вкладку дизайн и в настройках сообщения блога ставим галочку "Показывать кнопки для публикации".

Но их вид вряд ли нам понравится, уж слишком серенькие. Этот недостаток можно легко исправить и сделать их цветными: "Дизайн" -- "Изменить HTML" и перед ]]></b:skin> добавим код:

Код:

Вариант 2

Более симпатичные готовые кнопки социальных сетей нам предлагает Яндекс Выбираем нужный вариант и копируем код. Данный код можно вставить в шаблон блога, а можно в конце каждой статьи, переключившись на вкладку Изменить HTML. В этом случае кнопки будут доступны только на странице статей и не видны на главной. Пробовала вставить в шаблон, тогда список похожих статей выводился с пунктирным подчеркиванием. А так как нравится все менять и экспериментировать, мне легче вставить готовый блог кнопок самой. А вдруг завтра найду лучший вариант?

Вариант 3

Хотите значков побольше, зайдите на сайт Одна кнопка . Но возможность выбора здесь отсутствует. Устанавливать этот блок кнопок также легко. Два нажатия мышкой и виджет у вас в блоге.

Вариант 4

Очень симпатичные кнопки найдете на сайте AddThis.

Жмем на кнопку Get AddThis (см. красная стрелка) и попадаем на следующую страницу, где нам предлагают зарегистрироваться. Если хотите попробовать без регистрации, закрываете всплывающее окно и производите настройку. Как только выберете платформу, в нашем случае это Blogger, и стиль кнопок, появляется кнопка Установить виджет Blogger.

Нажав на эту кнопку, попадете на знакомую страницу. Выбираем блог и нажимаем "добавить виджет".

Под каждым сообщением увидите очаровательные кнопки. Перетягиваем гаджет HTML/Java Script под "Сообщения блога". На этом процесс установки закончен.

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

Вариант 5

Кнопки от ShareThis. Сервис понравился, потому остановлюсь на нем поподробнее. Предлагают зарегистрироваться. Я не регистрировалась и сразу нажала сверху на панели кнопку "Get the Button". После нажатия "Получить кнопки" откроется следующая страница:

Здесь выбираем платформу блога. Для нас это Blogger.
Затем определяемся со стилем кнопок. Возьмем первый стиль. Нажимаем и видим два окошка с кнопками:

Выбираем размер кнопок: большой или малый.
Определяемся с расположением кнопок: горизонтальное или вертикальное.
С помощью стрелок выбираем кнопки социальных сетей, какие хотим установить. Можно перемещать кнопки из правого окошка в левое и наоборот, а также изменять их последовательность.
Нажимаем большую зелёную кнопку "Get the Button" и оказываемся на знакомой странице.

Выбираем блог и нажимаем "добавить виджет". Все. Наши кнопки красуются под каждым сообщением. Остается только перетащить гаджет HTML/Java Script под "Сообщения блога".

Установка других стилей кнопок происходит аналогично.

Все вышеприведенные варианты установки кнопок (кроме первого) не требуют изменения шаблона и потому каждый новоиспеченный блоггер легко справится с их установкой.

Вариант 6

Кнопки от share42. На эти кнопочки я давно поглядывала. Они то мне нравились больше всего. Но для их установки необходимо обзавестись хостингом. Отложила изучение этого вопроса на неопределенное время. Недавно, зайдя на блог "Школа Blogger(a)", нашла виджет социальных кнопок для Blogger. Видимо у многих возникли сложности, автору надоело отвечать в комментариях и он сделал нам подарок - специальный виджет.

Для установки горизонтального виджета в редакторе шаблона найти тег <data:post.body/> и вставить после него код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center'>
Если понравилась статья, поделитесь с друзьями.
  <div align='center'>
<div class="share42init"></div>
<script type="text/javascript" src="http://dl.dropbox.com/u/48089857/share43/share42.js"></script>
<script type="text/javascript">share42('http://dl.dropbox.com/u/48089857/share43/')</script>
</div></div></b:if>

Надпись над кнопками можно убрать или поменять на свою.

Если вас устраивают яркие кнопки как на картинке, можно на этом и остановиться. Хотите изменить стиль кнопок, как у меня, поколдуем еще. В шаблоне перед строчкой
]]></b:skin> вставим код:

#share42 {
  display: inline-block;
  padding: 6px 0 0 6px;
  background: #FFF;
  border: 1px solid #E9E9E9;
  border-radius: 4px;
}
#share42:hover {
  background: #F6F6F6;
  border: 1px solid #D4D4D4;
  box-shadow: 0 0 5px #DDD;
}
#share42 a {opacity: 0.5;}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

Не забудьте сохранить шаблон.

Все права на скрипт принадлежат Share42.com

Вариант 7

Самый простой способ установки кнопок от сервиса Pluso. Множество вариантов на любой вкус.

Выбираем понравившийся стиль кнопок, цвет, фон, размер, соцсети. Предпросмотр. Если все устраивает, копируем код и вставляем в шаблон блога после <data:post.body/> (если в шаблоне будет несколько таких строк, вставьте код после последней). Не получается вставить кнопки после <data:post.body/> , попробуйте найти строчку - <div class='post-footer-line post-footer-line-1'>

Новичкам, боящимся пока вносить изменения в шаблон, данный код можно вставить в конце поста.

Мой вариант кнопок от Pluso.

Оригинальные изображения кнопок Twitter можно найти здесь

А хотите привлечь в свои социальные сети новых друзей и последователей? - Установите красивые вращающиеся иконки в сайдбаре.

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы быть в курсе, подпишитесь на RSS-канал

Список похожих статей на Blogger

noreply@blogger.com (Вера Борок) — Thu, 12 Jan 2012 19:24:00 +0000

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

Скрипт, приведенный ниже, вставляется в код блога. Как всегда: "Дизайн" --> "Изменить HTML" --> установить галочку "Расширить шаблоны виджета" и нажать CTRL+F. И после <data:post.body/> вставить.

Почему остановилась на этом коде, хотя в сети их великое множество? Да просто он оказался самым коротким. Установила, работает отлично.


<!--[relposts]-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
<div class='relposts'>

<div id='relpostsdataheader'></div>
<div id='relpostsdatalisting'></div>

<script type='text/javascript'>

var relposts_prioDelta = 0;
var relposts_labelPrio = {
'ярлык' : 2,
'еще какой-то ярлык' : 2,
'и еще ярлык' : 2
};

</script>

<script type='text/javascript'>
relposts_sourceLabels = []
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
relposts_sourceLabels.push(&quot;<data:label.name/>&quot;);
</b:loop>
</b:loop>
</script>

<script type='text/javascript' src='http://izhurnalscripts.googlecode.com/svn/trunk/relposts.js'></script>
</div>
</b:if>
</b:if>
<!--[/relposts]-->

Источник: http://mixajluta.blogspot.com

К сожалению, перед сохранением шаблона просмотреть его не получится. Список похожих статей можно увидеть только после открытия сообщения (читать полностью). Поэтому постарайтесь все сделать аккуратно.

В приведенном коде установлено оптимальное число приоритетных ссылок - по 2 предпочитаемых, менее предпочитаемых и игнорируемых. Но их можно и увеличить. Все зависит от ваших предпочтений.

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

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы быть в курсе, подпишитесь на RSS-канал

Правильное оформление заголовка статьи

noreply@blogger.com (Вера Борок) — Tue, 03 Jan 2012 15:50:00 +0000

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

Но вот незадача, заголовок статьи мы пишем по-русски, а адрес, если заметили, написан на латинице. В данном варианте в url прописывается адрес нашего блога, год и месяц опубликования поста и порядковый номер. Легко ли роботу разобраться?

Поможем ему и пропишем заголовок нового поста латинскими буквами. Просмотрела в интернете несколько транслитераторов. Мне понравился translitor.net

Перед написанием статьи, определившись с названием, в транслитераторе набираем заголовок по-русски. Копируем то, что он нам выдал и вставляем в название статьи. Заголовок не должен превышать 36 символов. Лишнее Blogger обрубает. Делаю это заранее. Потому как если нажать "Опубликовать сообщение", изменить уже ничего нельзя - адрес будет сформирован. А как только опубликуем пост, тут же удаляем латинский вариант и прописываем название по-русски.

Будет хорошо и роботу и читателям. А в адресной строке увидите вместо цифр читаемое название своего поста.

Неплохой транслитератор - translit.ru. В нем можно вставить скопированный на мышку заголовок, перевести одним кликом и снова скопировать.

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы быть в курсе, подпишитесь на RSS-канал

Падающие снежинки для Blogger

noreply@blogger.com (Вера Борок) — Sun, 25 Dec 2011 19:25:00 +0000

Поздравляю, поздравляю, поздравляю!

Пусть наступающий год будет добр для Вас,
Пусть достаток и удача преследуют Вас,
Успехов, и радости Вам!

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

Код взят с чудесного блога http://blogger4you.blogspot.com

Вставляем:

"Панель инструментов" Blogger'a, --> "Дизайн" --> "Изменить HTML"
Нажимаем на Ctrl F и в коде шаблона ищем строчку <body> В новых шаблонах она выглядит иначе, как <body expr:class='"loading" + data:blog.mobileClass'>
И после неё пишем код

<script src='http://blogger4you.narod.ru/JavaScript/snow.js'> </script>

Не забудьте "Сохранить". Остается полюбоваться на порхающие снежинки и послушать музыку.

Побродив по сети, заглянув на блог forbloggerhelp.blogspot.com, нашла еще один вариант снежинок. Возможно он кому-то покажется проще, так как нет необходимости изменять код шаблона. А у новеньких это всегда проблема.

Виджет с падающими снежинками устанавливается как гаджет. Дизайн --> HTML/JavaScript

Вставьте код:

<script type="text/javascript">

//Configure below to change URL path to the snow image
var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbcQIpO7i38y5OGpHiVPiss_DaL0cOG9-qrQDZEJ__vC0hcQ8HxTE5Ke67EijU_1uIYyHLk7F-WdTJDZFp22RIRQGTUqBAYhY3en7btbykXfCVDWWieoSRwDoufAlZvDS4iTblOWURaA/s1600/Cyt%253Bbyrf.png"
// Configure below to change number of snow to render
  var no = 12;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbcQIpO7i38y5OGpHiVPiss_DaL0cOG9-qrQDZEJ__vC0hcQ8HxTE5Ke67EijU_1uIYyHLk7F-WdTJDZFp22RIRQGTUqBAYhY3en7btbykXfCVDWWieoSRwDoufAlZvDS4iTblOWURaA/s1600/Cyt%253Bbyrf.png" : snowsrc

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>

Сохраните гаджет и перетяните его наверх, растянув на всю ширину блога.

Если хотите устроить снегопад, (var no = 12) количество снежинок можно увеличить. Но лучше ограничиться десятью снежинками. Адрес снежинок, выделенный жирным, можно поменять и вставить свои картинки. Чем понравился этот код, что вместо снежинок осенью можно вставить багряные листья, а летом - одуванчики. Развлекайтесь.

Счастливых праздников.

Как сделать картинку уникальной

noreply@blogger.com (Вера Борок) — Sun, 11 Dec 2011 18:32:00 +0000

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

Картинка должна иметь название, которое бы ей соответствовало. Делая скриншот, получаем автоматом название типа 2011-08-25_142254.jpg. Перед установкой картинки в пост, имя файла нужно поменять. Оно должно быть коротким, содержать ключевые слова и прописано латинскими буквами без пробелов. В качестве разделителя слов используется тире. Размер изображения в имя файла не включаем.

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

<img src="адрес" border="0" alt="текст" />

Не забывайте об атрибуте Title. Это также дополнительная информация поисковику. Текст из title всплывает при наведении курсора на изображение. Лучше если тексты для атрибутов Alt и Title будут разными.

<img src="адрес" border="0" alt="текст" title="текст" />

Не помешает прописать атрибуты Width и Height. Задание размеров картинки ускоряет загрузку вебстраницы. Размер изображения должен быть не меньше 320 пикселей по ширине и 240 по высоте. Иначе поисковая система примет картинку за элемент дизайна и не включит её в основной поиск.

<img src="адрес" border="0" alt="текст" title="текст" height="240"  width="440" />

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

Но не все так плачевно. Бытует мнение, что если отзеркалить изображение, оно становится уникальным. Во многих случаях - да. Но если таких умных наберется с десяток, вот вам и 10 отзеркаленных изображений. Недавно колдовала над одной картинкой. Отзеркалила - не получилось. Повернула отзеркаленную - количество копий равно 0. Результат достигнут.

Для получения уникальной картинки задействовала все известные мне сервисы, о которых писала в блоге. Это и красивые шрифты и рамки и коллажи и водяные знаки. Больше всего мне нравились готовые коллажи. Если вы первый догадались вставить картинку вместо физиономии, получите уникальное изображение. Если взяли раскрученный вариант и вставили уникальное фото - изображение уникальным не будет. Напрашивается вывод - делать собственные коллажи. Попыталась и оказалось что это совсем не сложно. Лучше, конечно, использовать Photoshop, но я задействовала онлайн редактор pixlr.com. Он также позволяет картинку отразить по горизонтали и вертикали, повернуть изображение на 90 градусов, сжать, вырезать, изменить цветовой баланс, добавить подпись.

Давайте же создадим картинку для блога. Нажав на ссылку ниже, попадете в онлайн редактор. Его интерфейс очень похож на Photoshop, но гораздо проще.

Выбрать и загрузить фото

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

Прозрачный фон

(лассо),
выделяем область,
CTRL+C (копируем),
CTRL+N ("Файл"-"Создать"), содержимое фона выбираем "Прозрачный", а нужный размер устанавливается автоматически,
CTRL+V (вставить).

Есть более простой вариант создания прозрачного фона. Но оба имеют право быть.

(волшебная палочка),
выделяем область,
"Редактировать"-"Вырезать", снимаем выделенную область.
CTRL+V (вставить) или "Файл"-"Сохранить".

Как видите, вырезать и сохранить картинку совсем просто. А теперь попытаемся из той-же самой картинки создать что-то новенькое. На уникальность в данном случае рассчитывать не будем , картинка - то одна. TinEye.com выдал 71 результат похожих картинок, а Google 92300. Оно и понятно, картинка-то раскрученная.

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

Затем вызываем рисунок с нашими человечками. Накладываем картинку на чистое полотно. А потом пошли вариации на заданную тему.

Накладываем одно изображение поверх другого

(лассо) или
выделяем область,
командой V (перемещение), удерживая левую клавишу мышки на картинке, переносим рисунок на созданное полотно,
отпустив кнопку мыши изображение появляется на новом поле.
CTRL+T (выделяем перенесенное изображение).
при нажатой SHIFT, изменяем размер рисунка, потянув за уголок выделенного участка.
командой подправляем наше изображение

Остается написать текст, кликнув на команду А (текст). Каждую строчку пишите отдельно.Это позволит ее перемещать как картинку.

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

Если что-то не устраивает, помните про команду "Редактировать" -> "Отменить".

Поэкспериментируйте со слоями ---> стили слоев. Ваша картинка преобразится и будет неповторимой.

Кстати, TinEye.com и даже Google посчитали мою картинку уникальной. Основу вырезала, обрезала, разворачивала и поворачивала. С поворотом пришлось повозиться. Угол выбирала такой, чтоб на картинку еще приятно было смотреть, а для поисковика она бы стала единственной.

Дерзайте и все получится!

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы быть в курсе, подпишитесь на RSS-канал

Tori's Eye - веселый Твиттер

noreply@blogger.com (Вера Борок) — Sun, 27 Nov 2011 22:51:00 +0000

toriseye.quodis.com

"Глаз Тори" - так называется разработка португальской дизайн студии Quodis. Она позволяет увидеть последние сообщения Твиттера от выбранных пользователей. Это красиво. Твиты показаны в реальном времени в ответ на поисковый запрос. Кликните мышкой на название под картинкой.

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

Играемся дальше? Теперь вместо своего имени введите поисковый запрос. Можно на русском. Птички не заставят себя ждать и вы прочитаете последние твиты на интересующую вас тему и по указанному адресу перейдете на блог. А это уже не только красиво, но и полезно.

Хотите удивить друзей и создать свою кнопку - нет проблем. Подберите подходящую картинку или создайте свою. А затем установите в сайдбаре, снабдив активной ссылкой на свой блог в Твиттере.