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

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

Многие уже читали про 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 г.

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


”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 г.

В прошлый раз я писал о том как подкорректировать шаблон так, чтобы в ссылке подписки, которая следует после всех сообщений на странице блога удалить слово "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 г.

Уже очень давно я хотел написать о том, как можно просто вставить музыку в сообщение 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 файла, который Вы хотите вставить в сообщение.

Ярлыки: ,

Выпадающее меню

пятница, 20 марта 2009 г.

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


Они также очень удобны при навигации по сайту/блогу, за счет чего очень востребованы =)
Сегодня мы будем делать выпадающие меню со списком ссылок для Блоггера (Пример такого меню Вы можете найти на этом блоге) , которое при желании и некоторых усилиях можно полностью подогнать под дизайн своего блога!


Во-первых из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML" и с помощью поиска (CTRL+F) находим:
</head>
и сразу ПЕРЕД ним вставляем:


<!--MULTI-LEVEL-DD-MENU-STARTS-->
<link href='http://forum.wafl.ru/files/freeman/DDM1_style.css' rel='stylesheet' type='text/css'/>
<script src='http://forum.wafl.ru/files/freeman/DDM1_script.js' type='text/javascript'/>
<!--MULTI-LEVEL-DD-MENU-http://beliber-da.blogspot.com-->

теперь сохраняем шаблон и переходим в "Элементы страницы" и в том месте, где хотете видеть выпадающие меню добавляем гаджет вида "HTML/JavaScript", содержание которого вставляем следующий код:
<!--MULTI-LEVEL-DD-MENU-STARTS-->
<ul id="menu" class="menu">
    <li><a href="#" class="menulink">Меню №Раз</a>
        <ul>
            <li><a href="#">Меню 1 - пункт 1</a></li>
            <li><a href="#">Меню 1 - пункт 2</a></li>
            <li><a href="#">Меню 1 - пункт 3</a></li>
            <li><a href="#">Меню 1 - пункт 4</a></li>
            <li><a href="#">Меню 1 - пункт 5</a></li>
        </ul>
    </li>


    <li><a href="#" class="menulink">Меню №Два</a>
        <ul>
            <li><a href="#">Меню 2 - пункт 1</a></li>
            <li><a href="#">Меню 2 - пункт 2</a></li>
            <li><a href="#">Меню 2 - пункт 3</a></li>
            <li><a href="#">Меню 2 - пункт 4</a></li>
            <li><a href="#">Меню 2 - пункт 5</a></li>
        </ul>
    </li>


    <li><a href="#" class="menulink">Меню №Три</a>
        <ul>
            <li><a href="#">Меню 3 - пункт 1</a></li>
            <li><a href="#">Меню 3 - пункт 2</a></li>
            <li><a href="#">Меню 3 - пункт 3</a></li>
            <li><a href="#">Меню 3 - пункт 4</a></li>
            <li><a href="#">Меню 3 - пункт 5</a></li>
        </ul>
    </li>


    <li><a href="#" class="menulink">Меню №Четыре</a>
        <ul>
            <li><a href="#">Меню 4 - пункт 1</a></li>
            <li><a href="#">Меню 4 - пункт 2</a></li>
            <li><a href="#">Меню 4 - пункт 3</a></li>
            <li><a href="#">Меню 4 - пункт 4</a></li>
            <li><a href="http://beliber-da.blogspot.com/">БелиберDA</a></li>
        </ul>
    </li>


</ul>


<script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>
<!--MULTI-LEVEL-DD-MENU-http://beliber-da.blogspot.com-->
После чего заменить текст на свой а знаки "#" на соответствующие тексту ссылки, а также удалить ненужные строки или добавить новые ;)

Ярлыки: ,

Часы для блога

пятница, 6 марта 2009 г.

Часто читатели задают не вопрос: "Как добавить часы на свой блог? и как можно изменить их внешний вид?"

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

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











































Какие Вам нравятся больше? Думаю коллекция будет пополняться новыми экземплярами в дальнейшем!

Виджет "Последние записи"

вторник, 3 марта 2009 г.

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

Именно для таких, как я был написан виджет "Последние записи", который отображает заголовки последних постов блога.

По-моему это очень удобно и значительно экономит время при серфинге =)
Ознакомиться с виджетом Вы можете в правой колонке этого блога.

Если хотите такой же просто нажмите кнопочку ниже ;)


Пробуйте и не забывайте про комментарии!

Ярлыки: , ,