Облако фотографий для Picasa
вторник, 31 марта 2009 г.
8 Комментов
Но не многие пользователи используют именно 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 г.Эффект прозрачности изображений, который исчезает при наведении курсора - один из самых распространенных в сети. Думаю Вы встречали подобное на многих сайтах и блогах.
Чтобы увидеть его в действии просто наведите курсор на изображения ниже:
Принцип работы очень простой: все заключается в небольшой части кода, который добавляется к CSS стилям в шаблоне блога. А при наведении курсора эффект исчезает, подобно тому, как изменяется курсор при наведении на ссылки ;)
Преимущество подобного стиля состоит в том, что Вы можете добавить эффект только тем изображениям, которые Вы сами выберите!
Чтобы сделать это следуйте следующим инструкциям:
Во-первых из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML" и с помощью поиска (CTRL+F) находим:
Теперь Вы можете применить прозрачный эффект для любого изображения на блоге: непосредственно в сообщении или в сайдбаре.
Код обычного изображения выглядит примерно так:
Чтобы увидеть его в действии просто наведите курсор на изображения ниже:
Принцип работы очень простой: все заключается в небольшой части кода, который добавляется к 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)".
Ведь не всегда это выглядит уместно на блоге, да и место для подобной ссылки не самое подходящее.
Для начала из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML", не забваем поставить галочку "Расширить шаблоны виджета" и с помощью поиска (CTRL+F) находим:
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->и в этом коде удаляем строчку, выделенную жирным шрифтом.
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
После чего сохраняем шаблон и не забываем откомментировать этот пост - все ли у вас получилось ;)
Как вставить музыку в сообщение
воскресенье, 22 марта 2009 г.И вот сегодня опишу самый, на мой взгляд, простой способ поделиться с читателями новой песней или давно любимым хитом - Это 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&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 г.Именно для таких, как я был написан виджет "Последние записи", который отображает заголовки последних постов блога.
По-моему это очень удобно и значительно экономит время при серфинге =)
Ознакомиться с виджетом Вы можете в правой колонке этого блога.
Если хотите такой же просто нажмите кнопочку ниже ;)
Пробуйте и не забывайте про комментарии!

