Облако фотографий для Picasa

вторник, 31 марта 2009 г.
8 Комментов

Многие уже читали про Flash фото облако, которое позволяет отображать ваши фотографии из rss подписки сервиса Flickr.
Но не многие пользователи используют именно Flickr в качестве веб альбомов для хранения своих фотографий и рисунков. Именно поэтому облако виджет был доработан и оптимизирован для работы с Веб альбомами Picasa
Как это выглядит и работает Вы можете наблюдать ниже:
Чтобы установить Picasa Flash облако фоток на свой блог/сайт вам необходимо скопировать ссылку RSS канала альбома (или всего профиля), фотографии которго будут отображаться в облаке. Теперь Из панели инструментов Blogger перейдите в макет Вашего блога и добавьте новый "HTML/JavaScript" виджет в удобном месте и скопировав в его содержание следующий код:
<div style="width:350px; text-align:center;"><object type="application/x-shockwave-flash" data="http://media.roytanck.com/flickrwidget.swf" width="350" height="350"><param name="movie" value="http://media.roytanck.com/flickrwidget.swf" /><param name="bgcolor" value="#ffffff" /><param name="wmode" value="transparent" /><param name="flashvars" value="feed=http://picasaweb.google.com/data/feed/base/user/nikola.piter/albumid/5264530528802166593?alt=rss&kind=photo&hl=ru" /><param name="AllowScriptAccess" value="always"/><p>Для работы <a href="http://beliber-da.blogspot.com/">Фото-Облака</a> требуется Flash Player 9 или выше.</p></object><span style="font-size:9px;">Получить виджет от <a href="http://beliber-da.blogspot.com/">БелиберDA</a></span></div>
теперь текст, выделенный красным замените на полученную ранее ссылку подпискии сохраните виджет! P.S. некоторые параметры облака по прежнему легко поддаются изменениям на ваш вкус: выдленные синим параметры width="350"и height="350" - задают ширину и высоту облака соответственно. value="#ffffff"- цвет фона облака (можно подобрать с помощью colorpicker.com). value="transparent"- указывает на прозрачность (при необходимости можно удалить)

Ярлыки: , ,

Прозрачные изображения - эффект при наведении курсора

среда, 25 марта 2009 г.
15 Комментов

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


”RSS” ”Google” ”Twitter” ”Feedburner”/ ”Яндекс”


Принцип работы очень простой: все заключается в небольшой части кода, который добавляется к CSS стилям в шаблоне блога. А при наведении курсора эффект исчезает, подобно тому, как изменяется курсор при наведении на ссылки ;)
Преимущество подобного стиля состоит в том, что Вы можете добавить эффект только тем изображениям, которые Вы сами выберите!


Чтобы сделать это следуйте следующим инструкциям:
Во-первых из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML" и с помощью поиска (CTRL+F) находим:
</head>
и сразу перед этим кодом добавляем:
<!--LINK-OPACITY-STARTS-->
<style type="text/css">


a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}


a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }


</style>
<!--LINK-OPACITY-STOPS-http://beliber-da.blogspot.com-->
и сохраняем шаблон!
Теперь Вы можете применить прозрачный эффект для любого изображения на блоге: непосредственно в сообщении или в сайдбаре.
Код обычного изображения выглядит примерно так:
<a href="http://feeds2.feedburner.com/beliber-da" target="_blank" alt="RSS Подписка"><img src="http://forum.wafl.ru/files/freeman/rss.png" /></a>
Чтобы добавит прозрачный эффект просто добавьте код выделенный жирным:
<a class="linkopacity" href="http://feeds2.feedburner.com/beliber-da" target="_blank" alt="RSS Подписка"><img src="http://forum.wafl.ru/files/freeman/rss.png" /></a>
Пробуйте и не забывайте оставлять комментарии - всегда приятно читать отзывы читателей ;)

Ярлыки: , ,

Удалить "Подписаться на: Сообщения (Atom)"

понедельник, 23 марта 2009 г.
27 Комментов

В прошлый раз я писал о том как подкорректировать шаблон так, чтобы в ссылке подписки, которая следует после всех сообщений на странице блога удалить слово "Atom".
Но сегодня мы попробуем вообще избавиться от "Подписаться на: Сообщения (Atom)".
Ведь не всегда это выглядит уместно на блоге, да и место для подобной ссылки не самое подходящее.
Для начала из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML", не забваем поставить галочку "Расширить шаблоны виджета" и с помощью поиска (CTRL+F) находим:
  <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
    <b:if cond='data:feedLinks'>
      <div class='blog-feeds'>
        <b:include data='feedLinks' name='feedLinksBody'/>
      </div>
    </b:if>
и в этом коде удаляем строчку, выделенную жирным шрифтом.
После чего сохраняем шаблон и не забываем откомментировать этот пост - все ли у вас получилось ;)

Ярлыки: ,

Как вставить музыку в сообщение

воскресенье, 22 марта 2009 г.
12 Комментов

Уже очень давно я хотел написать о том, как можно просто вставить музыку в сообщение Blogger.
И вот сегодня опишу самый, на мой взгляд, простой способ поделиться с читателями новой песней или давно любимым хитом - Это Flash mp3 плеер для Blogger:
Для этого Вам при написании поста перейти в режим "Изменить HTML" и в ставить там следующий код:
<object data="http://coloriteman.googlepages.com/player.swf" height="24" id="audioplayer1" type="application/x-shockwave-flash" width="290"> <param name="movie" value="http://coloriteman.googlepages.com/player.swf"> <param name="FlashVars" value="playerID=1&amp;soundFile=http://4289211129791433206-a-1802744773732722657-s-sites.googlegroups.com/site/beluberda/mp3/Shivaree-John.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>
предварительно заменив выделенный красным текст на прямую ссылку mp3 файла, который Вы хотите вставить в сообщение.

Ярлыки: ,