БелиберDA

10летний юбилей Blogger!

2009-08-20T15:17:00.002+04:00

Одна из самых известных и популярных блог-платформ Blogger совсем скоро отметит десятилетний юбилей!

Blogger был запущен 23 августа 1999 г компанией Pyra Labs. Это один из первых проектов, предназначенных для блоггинга, который способствовал популяризации этого вида интернет-деятельности. В феврале 2003 Pyra Labs была приобретена компанией Google. После приобретения все дополнительные удобства, которые Pyra Labs предоставляла пользователям за деньги, стали бесплатными!

В связи со столь знаменательно датой Blogger обещает приподнести приятные сюрпризы своим пользователям в ближайшие пару недель!

Шаблоны для Blogger - "Цветущий сад"

2009-05-25T14:35:00.002+04:00

Я дано хотел заняться поиском, оптимизацией и публикацией новых интересных шаблонов для Blogger. И вот этот день пришел! Сегодня представляю Вам новый шаблон "Цветущий сад".

Демо // Скачать

Этот шаблон будет интересен в первую очередь своим оформлением, т.к. сделан в ярких летних тонах. Одной из главных особенностей является анимимированная шапка блога, которая изменяется следуя движениям Вашего курсора!
Шаблон имеет фиксированную ширину, состоит из основной области, 3-х колончатого сайдбара, и такого же подвала (footer). Блоги с этим шаблоном отлично отображаются в IE7, Firefox и Opera.
Из основных достоинств блога можно выделить:

Полностью поддерживаемую встроенную форму комментариев.
Полную русификацию.
Готовую область для рекламных ссылок.
Поддержку быстрого редактирования сообщений.
Часть уже установленных виджетов.
Интегрированную систему "Read more" с изменяемой величиной.
Ссылки подписки на сообщения и комментарии

Чтобы разместить рекламные ссылки найдите в шаблоне строки вида:

<a href='http://YOUR-LINK-HERE' target='_blank'><img alt='ads' border='0' src='http://img30.imageshack.us/img30/7716/advertise125x125copy.jpg'/></a>

Все посты блога автоматически обрезаются до 430 знаков без изображений и 340 с изображениями. Остальная часть поста ображается на его странице при переходе по ссылке "Читайте далее". Изменить эти параметры можно в стоках:

summary_noimg = 430;
summary_img = 340;

изменить ссылки навбара можно в области:

<div class='NavbarMenu'>

Надеюсь новый шаблон вам понравится! Жду комментариев (=

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

2009-05-09T00:16:00.006+04:00

Я уже не раз рассказывал, как разнообразить внешний вид своего блога и как сделать его отличным от основной массы. Сегодня не буду нарушать уже сложившейся традиции и опишу способ, смены фона блога на кирпичную стену (например, как тут).
Для этого необходимо в шаблоне блога найти (Ctrl+F) часть кода подобную:

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: #fff;
background: url('http://www.................png') repeat;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

или:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Код может не совпадать точно предложенным вариантам (все зависит от вашего шаблона), но он должен содержать стоку, начинающуюся с background: в составе блока Body {
Теперь чтобы сделать фон с первым видом кирпича (самый верхний из представленных) строчку, начинающующуся с background: замените на:

background: url('http://img237.imageshack.us/img237/5771/wall3.png') repeat;

чтобы сделать фон в виде второго типа кирпича замените на:

background: url('http://img23.imageshack.us/img23/9195/wall1m.jpg') repeat;

третьего:

background: url('http://img413.imageshack.us/img413/6978/wall4.jpg') repeat;

и четвертого соответственно:

background: url('http://img23.imageshack.us/img23/395/wall2jig.jpg') repeat;

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

"Читайте также" в постах Blogger

2008-12-28T12:52:00.010+03:00

Думаю Вы уже заметили, что после каждого поста (на его странице) моего блога есть список ссылок на сообщения похожей тематики - так называемое поле "Читайте также". Оно позволяет пользователям быстро найти похожие записи блога, не используя поиск ;-)

Если есть желание добавить на страницы своего Blogger'a подобный элемент, тогда предлагаю дочитать этот пост до конца и узнать, как это сделать =)

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

теперь в коде тег </head> шаблона находим и вставляем непосредственно перед ним:

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://forum.wafl.ru/files/freeman/relatedposts.js' type='text/javascript'/>

Сохраните Шаблон!
теперь ставим галку в поле "расширить шаблон" и находим кусок кода: <p><data:post.body/></p>
и между фрагментами body/>_и_</p> (т.е. вместо "_и_") вставляем:

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Читайте также: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Снова сохраняем шаблон и смотрм наличие "Читайте также" в постах ;-)

Если у Вас есть желание, по можно заменить иконку перед каждой ссылко на свою.
Для этого в первой части кода заменитье адресс http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png на адрес своей иконки.

Виджет "Евровидение 2009"

2009-04-23T19:44:00.004+04:00

Все мы помним прошлогодний Триумф России на Евровидении 2008 и знаем, что в этом году самый престижный европейский конкурс песни пройдет в Москве.
В связи с этим Google подготовил специальный виджет, который позволяет предсказать победителей Евровидения еще до финала конкурса!
Используя статистику поисковых запросов Google, гаджет рассчитывает динамику популярности каждого участника и показывает, какое количество баллов они могли бы получить, если бы голосование началось сегодня.

Финалисты голосования получают от 1 до 12 баллов от каждой страны участницы Евровидения 2009. Вся статистика собирается только в странах, представленных на конкурсе, и обновляется ежедневно. Но при этом не учитываются запросы из страны, которую представляет участник.
Чтобы установить Этот виджет в свой блог Blogger просто нажмите на кнопку ниже:
Установить виджет на блоги других платформ используя приведенный ниже код:

<iframe src="http://eurovisiongadget.appspot.com/?lang=ru" width="320" height="370" frameborder="0" scrolling="no"></iframe>

Ждем начала конкурса и Дружно болеем за нашу страну!

Добавляем кнопку-счетчик "retweet" в заголовок сообщений

2009-04-21T23:19:00.006+04:00

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

Чтобы добавить кнопку к заголовкам потребуется внести некоторые изменения в шаблон блога:
Из панели инструментов перейдите в "Макет", где выберите "Изменить HTML", поставьте галочку "Расширить шаблоны виджета" и с помощью поиска (CTRL+F) найдите:

<div class='post-header-line-1'/>

чтобы добавить большую кнопку (как это выглядит можно посмотреть на Тестовом блоге)

добавьте после найденой строчки:

<div style='float:right; margin-left:15px;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

чтобы добавить маленькую кнопочку, отображающую только число уже "затвиттевших" ваше сообщение пользоватлей, как на этом блоге
добавьте сразу после найденой строчки:

<div style='float:right; margin-left:15px;'>
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

В конце сохраните шаблон.
Жду ваших комментариев ;)

Всплывающая при наведении курсора панель навигации Blogger

2009-04-14T18:46:00.002+04:00

Несколько месяцев назад я писал как можно избавиться от панели навигации (в народе navbar), которая не всегда сочетается с персональным оформлением блога, а также, как сделать "Панель администратора" блога, для управления своей страницей.
Но многие считают удаление navbara крайностью, в которой нет необходимости и с ними тоже можно согласиться. Ведь панель навигации позволяет просто "погулять" про блогам других пользователей переходя на новую страницу одним кликом. Да и уведомить администрацию сервиса о нежелательном содержании отдельно взятых страниц больше никак нельзя . . .

И в подобной ситуации оказывается есть компромисс - это Появляющаяся при наведении курсора панель навигации. То есть navbar не виден постоянно на странице, но при наведении курсора на область его расположения он появляется и Вы можете использовать его функции ;)
Посмотреть как это выглядит, так сказать, на деле можно на моем Тестовом блоге

Чтобы сделать подобный эффект перейдите в режим редактирования шаблона блога и с помощью поиска в коде найдите строчку:

body {

и перед ней вставьте:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Теперь сохраните шаблон и проверьте как работает ваш Navbar.

Как сделать "Панель Администратора" для вашего блога

2008-12-18T18:13:00.016+03:00

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

Так как мы будем вносить изменения непосредственно в код шаблона очень важно сделать резервную копию рабочего шаблона Вашего блога. В последующем, если Вы допустите критическую ошибку будет возможность вернуть все к изначальному состоянию ;)
Для этого в "Панели инструментов" перейдите в "Макет" >>> "Изменить HTML" и там выбирите "Загрузить весь шаблон" и сохраните его на Вашем компютере!

Перед тем как приступить к внесению изменений также необходимо выяснить идентификационный номер (id) Вашего блога/
Для этого Войдите на Blogger под своей учетной записью и перейдите на любую страницу из панели инструментов, посмотрите ее адрес в адресной строке браузера:
в ссылке будет присутствовать

blogID=XXXXXXXXXX

где XXXXXXXXXX - номер Вашего блога

Запишите этот номер в отдельном месте, позже он нам пригодится ;)

"Панель Администратора" будет доступна только когда Вы войдете на Blogger под учетной записью авотра блога. Она не доступна обычным читателям блога.

Чтож приступим к непосредственно к добавлению нужного нам кода в шаблон:

Для этого из "Панели инструментов" перейдите на вкладку "Макет", там выберите "Изменить HTML"
Убедитесь, что поле "Расширить шаблоны виджета" НЕ выбрано!

С помощью поиска браузера найдите следующую (или подобную) строку в коде шаблона

<b:section class='sidebar' id='sidebar' preferred='yes'>

Сразу после этой строки добавьте следующий код:

<span class='item-control blog-admin'>
<h2>Панель Администратора</h2>
&lt;a href='http://www.blogger.com/post-create.g?blogID=XXXXXXXXXX'>Новое Сообщение</a>
|
<a href='http://draft.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXX'>Настройки</a>
|
<a href='http://www.blogger.com/rearrange?blogID=XXXXXXXXXX'>Изменить Шаблон</a>
|
<a href='http://www.blogger.com/html?blogID=XXXXXXXXXX'>Изменить HTML</a>
|
<a href='http://www.blogger.com/moderate-comment.g?blogID=XXXXXXXXXX'>Модерировать Комментарии</a>
|
<a href='http://www.blogger.com/logout.g'>Выход</a>
</span>

После Этого замените все "XXXXXXXXXX" на номер Вашего блога, который мы записали ранее.
После всего сохраните шаблон и просмотрите блог.
Учтите Панель Администратора появится на на самом верху боковой панели.

Жду Ваших комментариев!

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

2009-03-03T19:59:00.009+03:00

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

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

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

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

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

Промежуточные итоги и апрельский апдейт PR

2009-04-02T21:25:00.002+04:00

Почти четыре месяца назад начиная с нуля и постигая основы блогинга и частично поисковой оптимизации я начал вести этот блог о Blogger, . Сегодня блог насчитывает 85 читателей Google Friend Connect, более 130 подписчиков по RSS, рейтинг Technorati равный 8 и более 50 посетителей ежедневно.

А буквально сегодня ночью Google обновил PageRank проиндексированных страниц и БелиберDA получила, как мне кажется, свои заслуженные три пункта рейтинга (PR 3) (=

И это в немалом заслуга Вас - читателей и приверженцев платформы Blogger, для которых я и пишу посты. Спасибо за ваши комментарии, замечания и даже советы!

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

Flash облако фотографий

2009-02-16T01:41:00.012+03:00

Думаю все уже читали про виджет "Flash Облако тегов", а многи уже давно активно его используют.
Но сегодня речь пойдет не совсем о нем, но об его аналоге, также написанном с приминением Flash анимации!
Это Flash облако Фотографий:

Для работы Фото-Облака требуется Flash Player 9 или выше.

Как вы можете видеть виджет позволяет отображать небольшие эскизы ваших фотографий, загруженных на ставший крайне популярным в последнее время Flickr, которые он получает из RSS канала вашей учетной записи.

Чтобы установить Flash облако фоток на свой блог/сайт вам необходимо:иметь учетную запись на flickr.com и получить URL адрес RRS подписки на ваши фото. Для этого перейдите на страницу photostream и найдя внизу иконку RSS скопируйте URL адрес подписки.
(Вы также можете использовать RSS канал Альбомов Picasa ;)

Теперь Из панели инструментов Blogger перейдите в макет Вашего блога и добавьте новый "HTML/JavaScript" виджет в удобном месте и скопировав в его содержание следующий код:

<div style="width:400px; text-align:center;"><object type="application/x-shockwave-flash" data="http://forum.wafl.ru/files/freeman/flickrwidget.swf" width="400" height="350"><param name="movie" value="http://forum.wafl.ru/files/freeman/flickrwidget.swf" /><param name="bgcolor" value="#ffffff" /><param name="wmode" value="transparent" /><param name="flashvars" value="feed=http%3A//api.flickr.com/services/feeds/photos_public.gne%3Fid%3D35047280@N07%26lang%3Den-us%26format%3Drss_200" /><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>

замените в нем выделенную карсным часть на адрес подписки на ваши фото (тот, который получили в первом пункте).

Вы также можете настроить облако на свой вкус:

выдленные синим параметры width="400"и height="350" - задают ширину и высоту облака соответственно. value="#ffffff"- цвет фона облака (можно подобрать с помощью colorpicker.com). value="transparent"- указывает на прозрачность (при необходимости можно удалить)

Жду Ваших комментариев и замечаний

Идея создания виджета принадлежит Roy Tanck

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

2009-03-31T21:08:00.001+04:00

Многие уже читали про 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"- указывает на прозрачность (при необходимости можно удалить)

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

2009-03-25T00:40:00.002+03:00

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

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

Чтобы сделать это следуйте следующим инструкциям:
Во-первых из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML" и с помощью поиска (CTRL+F) находим:

</head>

и сразу перед этим кодом добавляем:

<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>

и сохраняем шаблон!
Теперь Вы можете применить прозрачный эффект для любого изображения на блоге: непосредственно в сообщении или в сайдбаре.
Код обычного изображения выглядит примерно так:

<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>

Пробуйте и не забывайте оставлять комментарии - всегда приятно читать отзывы читателей ;)

Облако тегов для Blogger

2008-12-24T22:41:00.014+03:00

Уже на притяжении долгого времени блоггеры, использующие в качестве платформы для постинга "WordPress" имеют на своих страницах так называемые "Облака Тегов", которые по своей сути являются обыкновенном списком тем, только в более оригинальном и привлекательномом исполнении.

Так вот в сегодняшней статье хотелось бы рассказать, как путем некоторых манипуляций с шаблоном Вашего блога можно добавить подобный виджет и на страницы Blogger ;-)

Процесс это довольно таки кропотливый и трудоемкий =/ Но результат обязательно порадует Вас и ваших читателей ;-)

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

Теперь необходимо добавить виджет "Ярлыки" (Labels) на блог, если у Вас уже есть этот виджет, то повторять этого, конечно же, не стоит). Для этого переходим в "Макет" >>> "Элементы страницы" и добавляем видеж "Ярлыки" подобно тому, как мы добавляли "HTML/JavaScript", когда "заснеживали" Blogger.

Теперь приступаем к самому важно, тут уже ошибаться не стоит, инече последуют неприятные последствия(

Из макета Блога переходим к изменению "HTML" шаблона (не забудьте поставить галочку "Расширить шаблоны виджета)":
С помощью поска в браузере находим следующий код:

]]></b:skin>

и непосредственно перед ним вставляем:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

а уже после кода ]]></b:skin> вставьте:

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

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

<b:widget id='Label1' locked='false' title='Ярлыки' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

и заменить его весь на:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
      if(a>b){
          var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
             }
      else{
          var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
          }
      return v
   }

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
     if (!labelCount[ts[t]]){
           labelCount[ts[t]] = new Array(ts[t])
           }
        }
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
    if(ts[t] < cloudMin){
       continue;
       }
    for (var i=0;3 > i;i++) {
             c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
              }
         var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
         li = document.createElement('li');
         li.style.fontSize = fs+'px';
         li.style.lineHeight = '1';
         a = document.createElement('a');
         a.title = ts[t]+' Posts in '+t;
         a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
         a.href = '/search/label/'+encodeURIComponent(t);
         if (lcShowCount){
             span = document.createElement('span');
             span.innerHTML = '('+ts[t]+') ';
             span.className = 'label-count';
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             li.appendChild(span);
             }
          else {
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             }
         ul.appendChild(li);
         abnk = document.createTextNode(' ');
         ul.appendChild(abnk);
    }
lc2.appendChild(ul);
</script>

<noscript>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>
</noscript>
    <b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Теперь сохраниет шаблон и посмотрите наличие Облака тегов на странице блога.

Ниже для тех, кто хочет поэкспериментировать с цветами, шрифтами и прочеми параметрами привожу основные данные в введенном нами коде.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];

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

var cloudMin= 1;

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

var lcShowCount = false;

это параметр (false - по умолчание, изменимо на true) показывает, что теги выводятся без указания количества статей с одинаковым тегом.

есть еще несколько не столь важных параметров, которые можно изменить, если пожелаете узнать о них поподробнее, я обязательно о них расскажу ;)

* Виджет простого снежного эффекта *

2008-12-06T16:00:00.013+03:00

На дворе 6 декабря, а присутствие зимы совсем не чувствуется. Пугает абсолютное отсутствие снега на улицах и небывало высакая температура воздуха =/

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

Его установка не займет у вас много времени.

Во первых заходим в Вашу "Панель управления" аккаунтом Blogger.

Находим там свой блог, к которому ходим добавить виджет и переходим в "Макет"

В открывшемся окне с макетом Вашего блога добавляем новый элемент/гаджет

В открывшемся окне элементов для страницы Blogger находим и выбираем "HTML/JavaScript"

Поле "Заголовок" оставляем пустым. В содержание вписываем следующий код:
<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">
</script>

Жмем "Сохранить" и просматриваем свой блог на наличие летающих снежинок ;)

Внимание: Данный виджет работает не со всеми шаблонами оформления для страниц Blogger =( а некоторые попросту разъезжаются %)

Если у Вас возникли какие-либо вопросы или пожелания, оставляйте в комментариях.

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

2009-03-23T01:26:00.003+03:00

В прошлый раз я писал о том как подкорректировать шаблон так, чтобы в ссылке подписки, которая следует после всех сообщений на странице блога удалить слово "Atom".
Но сегодня мы попробуем вообще избавиться от "Подписаться на: Сообщения (Atom)".
Ведь не всегда это выглядит уместно на блоге, да и место для подобной ссылки не самое подходящее.
Для начала из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML", не забваем поставить галочку "Расширить шаблоны виджета" и с помощью поиска (CTRL+F) находим:

<b:if cond='data:blog.pageType != "item"'> 
    <b:if cond='data:feedLinks'>
      <div class='blog-feeds'>
        <b:include data='feedLinks' name='feedLinksBody'/>
      </div>
    </b:if>

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

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

2009-03-22T00:43:00.004+03:00

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

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

2009-03-20T23:24:00.005+03:00

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

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

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

</head>

и сразу ПЕРЕД ним вставляем:

<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'/>

теперь сохраняем шаблон и переходим в "Элементы страницы" и в том месте, где хотете видеть выпадающие меню добавляем гаджет вида "HTML/JavaScript", содержание которого вставляем следующий код:

<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>

После чего заменить текст на свой а знаки "#" на соответствующие тексту ссылки, а также удалить ненужные строки или добавить новые ;)

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

2009-03-06T00:11:00.014+03:00

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

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

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

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

Flash Облако тегов

2009-01-22T00:05:00.018+03:00

В одной из предыдущих статей я описывал как можно сделать облако тегов для блоггера, которое бы содержала ярылки ваших постов.
Сегодня я бы хотел описать способ, который позволит Вам добавить в свой блог Flash Облако тегов (которое в отличии от аналогов поддерживает кириллицу) . При этом Темы будут отображаться разными цветами - в зависимости от количества сообщений, которые будут им соответствовать ;)

Во-первых необходимо добавить виджет "Ярлыки" (Labels). Для этого переходим в "Макет" >>> "Элементы страницы" и добавляем видеж "Ярлыки" подобно тому, как мы добавляли "HTML/JavaScript", когда "заснеживали" Blogger.

Далее из макета Блога переходим к изменению "HTML" шаблона, ставим галочку "Расширить шаблоны виджета"
С помощью поска в браузере находим следующий код:

<b:widget id='Label1' locked='false' title='Ярлыки' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

и заменяем на:

<b:widget id='Label99' locked='false' title='Темы' type='Label'>
<b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <script type="text/javascript" src="http://forum.wafl.ru/files/freeman/swfobject.js"></script>
      <script type="text/javascript">
        var flashvars = {};
        flashvars.mode = "tags";
        flashvars.minFontSize = "8";
        flashvars.maxFontSize = "22";
        flashvars.tcolor = "0x0988ff";
        flashvars.tcolor2 = "0x000000";
        flashvars.hicolor = "0xd95800";
        flashvars.distr = "true";
        flashvars.tspeed = "100";
        flashvars.tagcloud = "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count'><data:label.name/></a></b:loop></tags>";
        var params = {};
        params.wmode = "transparent";
        params.bgcolor = "#333333";
        params.allowscriptaccess = "always";
        var attributes = {};
        attributes.id = "b-cumulus";
        attributes.name = "tagcloud";
        swfobject.embedSWF("http://forum.wafl.ru/files/freeman/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes);
      </script>
      <div id="b-cumulus">
        <a href="http://www.adobe.com/go/getflashplayer">
          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
      </div>
      <b:include name='quickedit'/>
    </div>
</b:includable>
</b:widget>

Облако тегов можно настроить в соответствии с оформлением вашего блога. Для этого в выше указанном коде можно изменять следующие параметры:

в строке "swfobject.embedSWF("http://FILE_HOST_NAME/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes); " 300 - это ширина виджета в пикселях. 250 - это высота виджета в пикселях.

flashvars.minFontSize = “8“; - минимальный размер шрифта.

flashvars.maxFontSize = “22“; - максимальный размер шрифта.

flashvars.tcolor = “0xffffff“; - цвет самого редкого ярлыка.

flashvars.tcolor2 = “0×0be4f8“; - цвет самого популярного ярлыка. Для остальных ярлыков будет выбран цвет между этими двумя.

flashvars.hicolor = “0xd95800“; - цвет текста при наведении курсора на ярлык.

flashvars.tspeed = “100“; - скорость вращения Flash Облака тегов

//params.wmode = “transparent“; - этот параметр обозначает прозрачный фон.

params.bgcolor = “#333333“; - цвет фона Flash Облака тегов.

Пробуйте на своих блогах, в случае чего оставляйте сообщения в комментариях.

Google Интегрирует Friend Connect в Blogger

2009-02-23T22:06:00.011+03:00

Возможно Вы заметили, что число постоянных читателей на этом блоге резко сократилось. Буквально несколько часов назад их было 40, а сейчас 28. Похожая ситуация наблюдается практически на всех блогах Blogspot. "Постоянные читатели" исчезают повсеместно!

Официальные источники (администрация Blogger'a) сообщили, что причиной столь масштабного исчезновения Постоянных читателей является интеграция сервиса с виджетом "Google Friend Connect"

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

Из списков постоянных читателей пропали (временно) только те пользователи, которые использовали виджет "Google Friend Connect" при работе с другими ресурсами и подписывались в постоянные читатели на Блоггере, т.е использовали оба сервиса одновременно.

После завершения интергации "Google Friend Connect" в Blogger такие пользователи смогут остаться анонимными (если подписывались анонимно) или сделать подписку публичной для выбранных ими ресурсов.

Более детальная инфомация будет сообщена пользователям после окончания работ!

Update: После глюка с постоянными читателями у некоторых пользователей статус подписки на блоги изменился на "Анонимный". В связи с этим настоятельно рекомендую перейти в настройки подписки и в случае необходимости сменить статус "Анонимный" на "Общедоступный"!!!

Импорт блогов с других сервисов на Blogger

2009-02-06T01:05:00.006+03:00

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

Сегодня услуга уже позволяет перенести свои блоги на Blogger.
Пользователи могут импортировать блоги со следующих движков:

Wordpress

Живой Журнал (Livejurnal)

Movable Type

Кроме того появилась возможность Экспорта своего блога с Blogger на Wordpress.

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

Как выделить комментарии автора

2009-02-13T20:16:00.009+03:00

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

Чтобы подобное выделение работало и вашем блоге необходими из Панели инструментов перейти в "Макет" блога, выбрать вкладку "Изменить HTML". Не забудьте ставить галочку "Расширить шаблоны виджета" и с помощью поиска (Ctrl+F) найдиде следующий код:

</head>

и непосредственно ПЕРЕД ним вставьте:

<style>
.comment-body-author {
background: #F5EDE3; /* Цвет фона*/
color: #000000; /* Цвет текста*/
border-top:2px solid #002F66;border-bottom:1.2px dotted #002F66 ;border-left:1.2px dotted #002F66;border-right:2px solid #002F66;
line-height: 2.4em;
margin:0;
padding:0 0 0 20px; /* Расположение*/
}
</style>

Красным выделены комментарии к синим фрагментам кода, которые Вы можете изменить на свой вкус ;)
Рамка, которая будет выделять авторский комментарий имеет два параметра: Толщину (в выше описанном коде задана параметром 1.2 px, который также можно изменить) и Вид линии границы (в приведенном примере задается параметром solid - можно изменить на dotted (пунктир) и задать нужный цвет заменив #002F66).
Поля (Margin), и отступы (padding) определяют позицию комментариев в поле комментариев.

Теперь найдите следующий код по первой строке:

<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

Недостоющую Часть кода, выделенного красным Вам нужно будет вставить, после чего сохранить шаблон.
Жду комментариев и вопросов, если таковые возникнут (=

Виджет "Размер Шрифта"

2009-02-18T09:11:00.017+03:00

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

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

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

Виджет представлен в двух вариантах:
Знаковом

Изменить размер текста

+ + + + +

И текстовом

Изменить размер текста

Маленький
Средний
Больше
Большой
Огромный

Чтобы добавить этот виджет на свой блог, нажмите на кнопку под понравившемся Вам варианте виджета

Скрываем или удаляем навигационную панель Blogger

2008-12-07T13:30:00.010+03:00

Панель навигации Blogger появляется автоматически в каждом блоге размещенном на сервисе Blogspot.com. Несмотря на то, что есть возможность изменить ее цвета в "Макет >>> Элементы страницы" иногда они не соответсвеют оформлению Вашего блога.
Но существует несколько способов скрыть эту панель или же убрать вовсе, добавив некоторый код в ваш шаблон :)

Для этого переходим в "Макет >>> Изменить HTML" и добавляем следующий код:

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

примерно в следующем месте:

После чего Сохраняем шаблон и просматриваем блог.
и не забываем оставлять комментарии ;)