Как добавить набор кнопок «Поделиться в социальных сетях» внизу сообщения Blogger.
Сервисов для создания набора кнопок «Поделиться» (share) а-ля «все-в-одном» сейчас в Интернете как блох на бродячей собаке. Выбор какого-то конкретного сервиса — это уже вопрос личных сексуальных предпочтений.
Предлагаю воспользоваться сервисом AddThis.
Читать дальше »
Речь пойдет о том как сделать заголовок блога более SEO-привлекательным. И в частности, – заголовок первого типа.
Напомню, что в шаблонах Blogger доступно три варианта заголовка:
В своем блоге я использую вариант «номер раз» – изображение вместо заголовка и описания. И недавно заметил, что стандартный заголовок Blogger не удовлетворяет требованиям поисковой оптимизации. Да и структуре страницы вообще. Поэтому, как говорится, «будем лечить» или тюнинговать – кому как больше нравится.
Сменил баннер заголовка блога. По «телебатору» все чаще докладывают, что скоро Новый год, поэтому и тема для заголовка была выбрана новогодняя.
Посвящать целый пост смене какого-либо элемента дизайна, даже такого важного как заголовок блога, – это несколько скучно и, я бы даже сказал, – убого. Хотя кое кто, бывает, делает на этом рейтинг.
«Йоу, босота! Я сменил дизайн страницы ошибки 404! Давайте станцуем по этому поводу джигу!»
Поэтому будет бонус. А то и два.
Виджет Заголовок (Header) включен в шаблон блога по-умолчанию. С виду этот виджет «висит себе и жрать не просит», но он далеко не так прост, как может показаться. В этой статье я разобрал «по деталям» код виджета заголовка. Попутно рассмотрев такие конструкции шаблона как b:section, b:widget и b:includable. И сделав, пожалуй, самый подробный разбор виджета «Заголовок». Во всяком случае, этой информации пока нет даже в официальной справке.
В результате получилось очень много букв. Но все рассмотрено на конкретном примере, разобрано как целиком, так и по фрагментам, поэтому думаю будет не сложно.
Не секрет, что многие владельцы блогов на платформе Blogger предпочитают скрывать навигационную панель (navbar). Дабы не портила дизайн шаблона. Действительно, navbar далеко не всегда удачно вписывается в существующий макет. Понимая это, команда разработчиков Blogger добавила два новых стиля навигационной панели – «Прозрачная светлая» (Transparent Light) и «Прозрачная темная» (Transparent Dark).
Как выглядит, покажу на примере блога Vault-Tec, который зачастую выступает у меня тестовой лабораторией :).
Прозрачная светлая
Прозрачная темнаяНастроить навигационную панель по своему выбору можно в разделе Дизайн – Элементы страницы
Настройка панели навигации BloggerОпрятного Приятного тюнинга!
Для информирования о событиях важных и не очень, интересных и не особо, общественных и частных, онлайновых и реальных, локальных и мировых существует гаджет Event (Событие) для Blogger. Подробности установки и настройки – далее по тексту.
Для установки гаджета «Событие» нужно перейти на вкладку Дизайн и щелкнуть ссылку «Добавить гаджет». Скрывается он в группе Избранные (featured), либо можно добавить гаджет по его URL используя пункт Добавьте свой собственный (add your own).
http://www.google.com/ig/modules/calendar/socialevent/bloggerevent.xml
Какую бы последовательность ты не избрал, это должно привести тебя к окну настройки гаджета Event:
Здесь тебе предстоит ввести Заголовок (Title) и Описание (Description) события, указать дату и время начала и окончания, Местоположение (Location) и Адрес явочной квартиры. Время указывается как во всех нормальных странах – в 24-часовом формате, дата задается в виде: гггг-мм-дд. И не делай заголовок и описание слишком длинными, а то получишь ошибку 414: Request-URI Too Large.
Гаджет позволяет твоим читателям присоединиться к событию, а также видеть кто из их друзей, использующих FriendConnect тоже заявил об участии. В дополнение, любой имеющий аккаунт в Google Calendar может поместить данное событие в свое расписание в календаре Google.
Так же ты можешь разместить несколько событий в блоге и, задав им разные заголовки или ID, отслеживать присоединившихся к каждому «ивенту» в отдельности.
Переврать новость по-своему можно используя официальный источник (на английском).
--
Стартовал конкурс для SEO оптимизаторов сладкий сеопультенок, где можно побороться за главный приз, а можно просто поучаствовать.
Недавно, а точнее, – еще вчера незадолго до полуночи, – обратил внимание, что в Яндексе появился инструмент для определения и подбора цвета. Виджет отображается прямо в результатах поиска.
Просто введи название или значение цвета в строку поиска и жми «Найти». Я, например, использовал рубиновый цвет из дизайна блога #C61B1B. Яндекс нашел ближайший по значению цвет – Ализариновый.
При желании можно поделиться находкой в блоге, просто вставив полученный код из виджета.
Удачных цветовых решений!
З.Ы. А известно ли тебе, что наряду с аскетичным поиском (ya.ru) есть еще и ультра-минималистический поиск:
С сегодняшнего дня в Blogger доступны аватары в комментариях. К сожалению, «автоматически» эта функция доступна только в стандартных шаблонах. Как же быть пользователям нестандартных шаблонов Blogger?
А все довольно просто.
Good news everyone!
Теперь, по сообщению Blogger Buzz, в комментариях Blogger поддерживаются аватары. Или картинки из профиля пользователя.
Активировать или деактивировать эту функцию можно в разделе Настройки | Комментарии.
Так же упрощена возможность загрузки фото из профиля. Что значит «упрощена»? Когда в следующий раз будешь писать «Зочод!» или «КГ/АМ» в комментариях, просто загрузи аватарку. И она будет использована для комментариев блога.
Эта функция работает только для стандартных шаблонов Blogger.
UPD: А следующий пост как раз о том как включить аватары в нестандартных шаблонах Blogger.
Не так давно команда Blogger создала несколько расширений Gadget API, упрощающих разработку гаджетов для этой платформы. И я об этом писал.
Итак, собственно – новость. Аманда, автор блога Blogger Buster и вообще круглая умница, создала каталог гаджетов для Blogger.
Gadgets for Blogger(сайт закрылся) – это каталог гаджетов, разработанных специально для платформы Blogger.
Гаджеты «укомплектованы», собственно, названием, подробным описанием, скриншотом в работе и дополнительной информацией. Перед публикацией каждый гаджет проверяется на яйца глистов, педикулез и кишечных паразитов.
... но души их прибежали первыми, с разбега прыгнули в кучу железа и начали рыться там, как тутанхамоны в гробнице Шлимана.
Гай Юлий Орловский цитата из с/к «Ричард Длинные Руки»)
Гаджетов пока не так уж и много, но пытливому исследователю есть где покопаться.
Оригинальная новость на блоге автора: Introducing GadgetsForBlogger.com
Сменил стороннее облако тегов на новое облако тегов от Blogger.
Было
Стало
По-моему смотрится не хуже.
Аллилуйя, дамы и господа! И давай еще раз хором: «Аллилуйя!»
В Blogger наконец-то появился «родной» гаджет «Облако тегов»! На самом деле это все тот же старый-добрый гаджет «Ярлыки», но с дополнительной опцией Показ: Список / Облако.
Выглядит это примерно так:
Более того, теперь можно отображать как все, так и только Выбранные ярлыки.
Разработчики уверяют, что это лишь одна из многих новых функций к десятилетию Blogger. Мои поздравления!
Новость узнал на Blogger Buzz.
Или «как в блоге прятать текст под спойлеры». Недавно написал небольшой javascript-компонент Widget SpoilerManager для использования скрытого текста в блоге. Собственно, это та «культурная программа», которой я посвятил прошлую субботу. Да, я псих.
UPD: Последний раз я доверил свои файлы богом проклятому сервису HotLinkFiles! Пусть горит в аду! Позже выложу в текстовом виде.
Пример:
Как использовать
/* Стили для спойлера */
.bar {
background:#B2BDCB url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj91MO6k3OKdYj59ONnuGLGObIMEJLBtDbz7lDf4L4_QOHq3x_bp5P8ra-DgCtL2XRJh1KtVd96j3CcxIvDto-b9nI8On3Zjv9Z-x1BftnGyEr9LrR2eHtJnZ7kIOai5Www6hgtWPjvoBFw/') no-repeat;
padding-left: 30px;
color: #1A3457;
height:26px;
font-weight:bold;
cursor:pointer;
}
/* Скрытый спойлер */
.spoiler-hidden .bar {
background-position: 0 0;
}
.spoiler, .spoiler-hidden .text {
display: none;
}
/* Открытый спойлер */
.spoiler-visible .bar {
background-position: 0 -26px;
}
.spoiler-visible .copy {
text-align:right; font-size:0.6em;
}
.spoiler-visible .text {
display:visible;
padding: 0 1em;
border: 1px dashed #B2BDCB;
border-top-width:0;
}
<script src='http://www.hotlinkfiles.com/files/2667809_ezrak/widget_spoiler.js' type='text/javascript'></script>
<script type='text/javascript'>
/* Для предотвращения проблем с кириллицей, задай надпись по умолчанию */
WidgetSpoilerManager.setOption ("defaultTitleText", "Скрытый текст");
/* Запусти виджет Спойлер-Менеджера */
WidgetSpoilerManager.init();
</script>
<script src='http://sites.google.com/site/railsdepot/files/widget_spoiler.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/railsdepot/files/widget_spoiler.js' type='text/javascript'></script>
<script type='text/javascript'>
WidgetSpoilerManager.setOption ("defaultTitleText", "Скрытый текст");
WidgetSpoilerManager.init();
</script>
<div class="spoiler" title="здесь задай краткое описание">
А здесь текст, который хочешь сделать скрытым
</div>
Виджет сам найдет и скроет все блоки текста, отмеченные как спойлер.
Важная новость от Blogger Buzz! Команда Blogger запустила несколько расширений для Gadget API, которые позволят разработчикам ваять более релевантные, симпатичные и улыбчивые гаджеты для Blogger.
Каждый блог на данной платформе это контейнер гаджетов. Более того, благодаря Friend Connect, это еще и OpenSocial гаджет-контейнер. Это означает, что как разработчик ты можешь использовать social APIs для создания более удобных инструментов для блоггеров и их аудитории.
В добавок к использованию социальных инструментов, гаджеты теперь могут получать доступ к фидам (feeds) сообщений и комментариев блога через новые JSON APIs. Например, используя эти данные, ты можешь создать гаджет карты, на которой будешь отмечать географию сообщений, или гаджет популярных сообщений.
Недавно разработчики опросили пользователей, какие гаджеты для Blogger были бы наиболее востребованными. На основе сотен откликнувшихся был сформирован список пожеланий.
Когда ты создаешь гаджет для Blogger, он становится доступным миллионам активных блоггеров. Просто отправь свой гаджет нам, и в течении нескольких минут он появится в директории гаджетов Blogger где пользователи могут просматривать, настраивать и добавлять твой гаджет к своим блогам.
Лично я считаю, что это отличная новость. Не ковыряй в носу, начни создавать свои гаджеты прямо сейчас.
Недавно появился новый официальный гаджет для Blogger – гуглопоиск в блоге. Делюсь впечатлениями, что понравилось, а что нет. Опробовал на блоге Vault-Tec. Скриншот прилагается.
Можно, конечно, было бы написать «что не понравилось», или точнее: «что активно не понравилось»... или, используя стилистику дипломированных лингвистов Гугля: «что не понравилось настолько, что аж порой бесит до усрачки».
Вот именно формулировка «Страницы, связанные ссылками с этой страницей». Это клиника. Неужели среди сотрудников Google не нашлось ни одного «русскоязычного» специалиста, еще окончательно не разучившегося лаконично формулировать фразы на родном языке? Трудно было написать «связанные страницы»? А уж если хочется дать расшифровку для идиотов, то вывести ее с использованием атрибута title?
Или Гугль так увлекся набором маститых спецов, что над каждом участке у них трудятся исключительно узкопрофильные специалисты? Типа профессор лингвистики, доктор юзабилити, повелитель аякса и генерал HTML. А в спорных ситуациях все решают на «камень-ножницы-бумага-ящерица-Спок».
В общем, это мне непонятно.
Второе вытекает из первого – невозможность переименовать табы поиска.
И тем не менее, суммарные впечатления положительные. Вкусный и полезный гаджет.
P.S. Для создания скриншота использовалось дополнение FireShot.
В Blogger стал доступен новый гаджет – “Search Box” (Окно поиска). Этот гаджет позволяет искать не только в сообщениях блога, но и по страницам, на которые ссылается блог, по списку блогов и списку ссылок.
Чтобы добавить гаджет в блог, перейди в Макет, щелкни «Добавить гаджет» и выбери «Окно поиска». Настройка проста и прямолинейна как дорога в ад: просто выбери элементы, которые хочешь сделать доступными для поиска.
О том, что такое футер, как его организовать и даже как разбить его в три и более колонок, запросто отыщешь в интернете. Все примеры и методики по своему хороши, но... Я расскажу как сделать футер шаблона Blogger по-настоящему Blogger-powered! Иными словами, как использовать в подвале возможности платформы Блоггер на полную.
Для начала вводное слово, или «о чем, собственно речь». Нетерпеливые могут пропустить следующий раздел.
Футер (англ. footer) или подвал – часть сайта, находящаяся внизу страницы. Обычно содержит данные о владельце страницы, дополнительную навигацию, справочную и контактную информацию.
До недавнего времени так оно и было. Теперь, то ли с приходом веб-два-нольной эпохи, то ли с увеличением скоростей и мощностей интернета, то ли в связи с ужесточившейся конкуренцией среди веб-дизайнеров... но функции «подвала» значительно расширились. За примерами красивых футеров далеко ходить не надо – не сносив двух пар лаптей, наберешь лукошко.
Не так давно я сменил дизайн блога. В процессе получил еще и массу полезного опыта, которым охотно поделюсь.
Вот так теперь выглядит футер моего блога в режиме визуального редактирования.
Как нетрудно заметить, в каждой из трех частей подвала можно использовать виджеты для шаблонов Blogger. И теперь-то я расскажу, как создать такой футер самому.
<b:section class='footer' id='footer'/>
<b:section class='footer' id='footer2'/> <b:section class='footer' id='footer3'/> <b:section class='footer' id='footer4'/>
<b:section class='footer' id='footer2'></b:section> <b:section class='footer' id='footer3'></b:section> <b:section class='footer' id='footer4'></b:section>
.footer{
padding:0 24px;
margin:0 0 1em; text-align: left;
}
#footer2 {
width: 25%; float: left;
}
#footer3 {
width: 33%; float: left;
}
#footer4 {
width: 27%; float: right;
}Все! После этого на странице визуального редактирования шаблона (Макет - Элементы страницы) ты сможешь добавлять в каждую из колонок футера виджеты Blogger.
Сегодня на гуглопочту упало письмо от Blogger Help примерно следующего содержания:
Hi Blogger & Friend Connect User:
As a result of a recent integration between Blogger Following and Google Friend Connect, your Blogger privacy settings have been changed. It is important you read this message to understand how the change impacts the sites you follow, your visibility online when using Friend Connect, and what your options are moving forward.
You are receiving this e-mail because you've used both Blogger's Following feature and Google Friend Connect. So that sites you've joined via Friend Connect do not automatically show up on your Blogger profile without your explicit approval, we have changed your following status to "private" on all Blogger blogs. If you would like to have these sites shared publicly on your Blogger profile, here are some instructions for becoming a public follower again.
The post at Blogger Buzz goes into more detail about this change. If you have any questions about this change or how to follow the instructions above, please visit this article in our Help Center.
Thank you for using Blogger.
Перевод:
В результате недавней интеграции Blogger Following (Постоянные читатели) и Google Friend Connect, ваши настройки приватности Blogger были изменены. Важно, чтобы вы прочли это сообщение дабы понять как данное изменение влияет на сайты которые вы читаете, вашу видимость онлайн при использовании Friend Connect, и ваши возможные варианты выбора.
Вы получили это сообщение, поскольку вы использовали оба сервиса – Blogger's Following и Google Friend Connect. Чтобы сайты, к которым вы присоединены через Friend Connect не отображались автоматически в вашем профайле Blogger без (вашего) заключительного одобрения, мы изменили ваш статус читателя на “private” (анонимный) на всех блогах Blogger. Если вы хотите, чтобы эти сайты отображались в вашем профайле Blogger, здесь некоторые инструкции как снова стать публичным подписчиком.
Сообщение на Blogger Buzz несет более подробную информацию об этом изменении. Если у вас есть какие-либо вопросы о данном изменении или о том, как следовать вышеприведенной инструкции, прочтите эту статью в нашем Центре помощи.
Сообщения службы поддержки Блоггер как всегда «информативны» до неприличия. Более «подробную» инструкцию можно прочитать разве что на обертке чебурека, купленного где-нибудь в районе ж/д вокзала.
Допустим вы убрали navbar из шаблона Blogger, скрыв его при помощи CSS, или же полностью удалив с помощью JavaScript. Возможно, вы хотели бы оставить форму поиска по блогу для ваших пользователей.
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" />
<input id="search-btn" value="Искать" type="submit" />
</form>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
#FFFFFF);#333333);var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");240 и 300 -- соответственно, ширина и высота.#ffffff" (белый). Для примера вы можете изменить его на "#C61B1B". Чтобы сделать фон прозрачным, раcкомментируйте (уберите "//" в начале строки) следующую строчку кода://so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
0x333333 например на 0xE3635C.so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
12 на 14 или как захотите.
