Как добавить бейдж страницы Google+ на Blogger

вторник, 28 февраля 2012 г.
Социальная интеграция сервиса Blooger с сетью Google+ продолжается - я неоднократно публиковал новости о новых возможностях соответствующих системы, то ли еще будет. Сегодня тематика поста также связана с Google+. Если у вас уже имеется профиль в этой соц.сети (а он у вас скорее всего есть раз вы обладатель аккаунта Google), то вы наверняка уже создали для своего сайта или бренда страницу (Google Plus Brand Page). Раз так, было бы неплохо разместить у себя на блоге виджет-бейдж (аналогичный имеется для Facebook), дабы читатели имели возможность на эту страницу подписываться. Давайте посмотрим как это сделать.
Шаг 1. Начнем с того, что пользователям Google+ предлагается два варианта бейджа: Стандартный (standard badge) и Маленький (small badge):
Выбрать понравившийся или подходящий вариант у нас будет возможность позже, пока же начнем с того, что нам потребуется узнать ID вашей страницы. Чтобы это сделать залогиньтесь в Google+ и перейдите на страницу вашего бренда (если она, конечно, уже создана). Обратите внимание на адресную строку. Цифры в конце url-адреса и есть искомый ID.
Шаг 2. Теперь, возьмем в качестве основы следующий код:
<g:plus href="https://plus.google.com/ваш_id" size="badge"></g:plus>
Первое что нам нужно сделать — указать ваш ID (скопировать из адресной строки и вставить там где обозначено).
После этого, можно определить вид виждета. Как я уже обозначил выше переменная size может принимать два значения:
  • badge — стандартный бейдж;
  • smallbadge — маленький бейдж.
Шаг 3. Переходим в «админку» Blogger, создаем виджет HTML/JavaScript и вставляет в поле «Content» готовый код из предыдущего шага.
Шаг 4. Открываем главную страницу блога и проверяем отображается ли наш бейдж. Если все в порядке, работу можно считать законченной. Если бейдж не отображается, переходим в редактор шаблона (Edit HTML), находим </head> и вставляем ниже следующий код:
<script src="http://apis.google.com/js/plusone.js" type="text/javascript">
Сохраняем шаблон. Наслаждаемся. Как видите, в процессе нет ничего сложного. Google Plus Brand Page как и соответствующие элементы Facebook, Вконтакте в блоге полезны и важны для разного рода активности читателей дабы проект как ваш бренд продвигался и был узнаваем в социальных сетях.
P.S. Записки финансового аналитика на сайте Finnotes.com расскажут про фондовый рынок и как заработать на форексе, о последних тенденциях рынка золота и т.п.
Компания Империя воды вот уже 10 занимается тем, что строит бассейны а также предлагает услуги по их модернизации, содержанию и обслуживанию.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Puppy Stylin - шаблон для сайта о собаках

понедельник, 27 февраля 2012 г.
В принципе, Puppy с английского переводится как "щенок", да и в шапке нарисованы эти маленькие существа, но думаю есть смысл несколько расширить тему и завести общий сайт о собаках - будь то щенки или взрослые псы. Визуально данный шаблон сделан просто замечательно - цветовое решение очень хорошее, приятные пастельные тона, соответствующие тематике иллюстрации в шапке. Там же найдете место для заголовка сайта и блок поиска. Также понравился цвет текста и вообще блоки контента - как отделена область боковой панели от общего текста, добавлено место для описания проекта. Дизайн сразу положительно к себе располагает, читать информацию приятно. Снизу шаблон гармонично заканчивается небольшой картинкой, размещайте в футере свой копирайт и счетчики. 
Что касается функциональности, то стандартно здесь все по минимуму, нет каких-то особенностей. Как я уже говорил, в шаблоне всего 2 колонки - слева текст, справа сайдбар. В последнем выводятся списки категорий (тегов), последние посты, ссылки и архив. Есть горизонтальное меню под заголовком, хотя я бы там поменял цвет текста - ничего не видно. В шапке и боковой панели можете добавить краткое описание сайта.

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

P.S. При создании серьезных корпоративных бизнес проектов конечно изготовление сайтов в Москве лучше заказывать в веб-студии, причем полнцы цикл услуг - от дизайна до продвижения.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Урощенная установка пользовательского домена с GoDaddy

понедельник, 20 февраля 2012 г.
Адрес сайта - это часть имиджевой составляющей проекта как, например, его дизайн. Понятно, что куда более красиво, эстетично и профессионально использовать свой домен для адреса блога нежели ипя с приставкой blogspot.com. Про подключение собственного домена в Blogger я уже рассказывал. Процесс это не самый простой, для неподготовленных пользователей, хотя и ничего чрезмерно сложного в нем нет. Думаю, многие пользователи не знают разницу между A-NAME и C-NAME записями домена и где конкретно их можно найти. Моя прошлая публикация отчасти проясняла эти моменты.
К счастью, сейчас процесс подключения своего домена стал еще более простым, правда, для этого нужно дабы он был зарегистрирован в GoDaddy. Это такой американский регистратор, один из крупнейших, если не самый крупный - поэтому можете смело покупать себе доменное имя через него. Так вот GoDaddy выпустил специальный сервис (инструмент) который упрощает процесс настройки домена для работы с блогохостингом Blogspot. Весь процесс сократиться до одного клика.
Если у вас уже есть доменное имя на GoDaddy и вы хотите связать его со своим проектом на Blogger, заходите в на специальную страницу GoDaddy Tool, где нужно будет войти в свой аккаунт введя логин и пароль. Дальше укажите домен или субдомен где будет располагаться ваш блог - www.example.com или blog.example.com, после чего жмите кнопку Confirm. Это должно обновить DNS записи.
После того как DNS установлены логинимся в админку Blogger, выбираем в меню Настройки - Основное, а там находим пункт "Публикация". Кликаем по ссылке "Добавить персональный домен". Попытайтесь вникнуть и выполнить короткую инструкцию, что будет указана для подключения домена и установки перенаправление блога на купленный домен.
В принципе, на этой же странице админки в разделе "Публикация" вы найдете ссылку не только для перенаправления блога на личный домен, но и возможность купить новое доменное имя, для которого все нужные параметры автоматически будут установлены.
P.S. Продвижение сайтов без ссылок практически невозможно, осуществляться закупка постовых для блога может в биржах ссылок типа Ротапост, GoGetlinks и других.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Новые возможности кнопки +1 для блога

воскресенье, 12 февраля 2012 г.
В одной из прошлых статей Коннектимся к Google+ я рассказывал о планах и уже совершенных успешных улучшениях от разработчиков по предоставлению пользователям все больше возможностей для увеличения аудитории блога с помощью Google+.
Последняя новинка в этом направлении - счетчик для кнопки +1, который позволяет быстро просмотреть все посты блога и определить какие посты проекта являются более популярными. Работает данная функция очень просто - когда читатель или посетитель кликает по кнопке +1, специальные счетчик увеличивается, а в админке можно всегда будет посмотреть ссылку на Google+ аккаунт этих пользователей.
По умолчанию кнопка +1 доступна для всех блогов, что отображаются в динамическом формате (Dynamic Views). Вы также можете активировать ее самостоятельно на большинстве шаблонов. Для этого заходите в раздел "Дизайн" и в блоке "Сообщения блога" нажимаете ссылку "Изменить" дабы отредактировать настройки. Находим пункт "Показать кнопки для публикации" и ставим в нем галочку.
Теперь все должно работать. Сначала я не совсем понял как работает функция и искал ссылки на аккаунты пользователей на сайте, но эта статистика доступна только в админке! В принципе, все достаточно удобно и просто, информация, считаю достаточно полезна - можно сразу оценить насколько вам удалась та или иная публикация.
P.S. В сети можно найти много интересных сайтов для программистов. Проект coding4.net - разработка игр на XNA и Silverlight и другие полезные публикации будут многим интересны.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Создаем «Хлебные крошки» (Breadcrumb) на Blogger

среда, 1 февраля 2012 г.
«Хлебные крошки» или Breadcrumb — замечательный и очень полезный элемент навигации, который также может отлично исполнять функцию базовой перелинковки для блога. Нельзя сказать, что его нужно обязательно использовать на всех подряд проектах - тут, считаю, автор решает самостоятельно. Данные рассуждения уже были частично затронуты в статье про хлебные крошки в WordPress. Суть их заключается в следующем: с одной стороны формат блога, в частности и проектов на blogspot, не подразумевает вывод в качестве «хлебных крошек» какой-то сложной структуры - здесь вы найдете ссылку на главную, перечень тегов + заголовок текущей страницы. Все эти элементы пользователь может добавить самостоятельно, да и, скорее всего, они у вас уже есть.
С другой стороны благодаря подобной навигационной цепочке (пожалуй самое «научное» название данного элемента) не только улучшается структурированность шаблона, его юзабилити, но также некоторые элементы внутренней поисковой оптимизация сайта. Хуже, как говорится, от этого все равно не будет.
К сожалению, разработчики Blogger данный элемент не предусмотрели. Чем они руководствовались догадаться не сложно, об этом я уже успел сказать выше — Blogspot это не платформа для построения большого корпоративного портала или новостного сайта с глубокой иерархией страниц. Максимально что можно сделать для «хлебных крошек» это вывод нескольких ярлыков (тегов) перед названием текущей страницы. Рассмотрим каким образом это реализовывается:
1. Идем в редактор шаблона - выбираем Изменить HTML (Edit HTML) и ставим галочку «расширить шаблон виджета» (expand the widget template).
2. Находим фрагмент кода
<b:include data='top'  name='status-message'/>
и вставляем перед ним:
<b:include  data='posts' name='breadcrumb'/>
Здесь следует заметить, что в некоторых шаблонах блок кода, который мы ищем, может быть найден сразу в нескольких местах. Если это так, то вам придется попробовать поочередно добавить код сначала перед одним, а потом перед другим html блоком. Хотя, в принципе, можно сразу между двумя разместить.
3. Далее находим
<b:includable  id='main' var='top'>
и вставляет перед ним:
<b:includable id='breadcrumb'  var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Главная</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Главная</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Главная</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
По умолчанию приведенный HTML код отображает в «хлебных крошках» последний ярлык (тег), то есть получается что-то вроде: "Главная - последний тег - текущий пост". Если вы уберете из него строки, подсвеченные красным цветом (ту, что посредине - оставить), тогда в меню отобразятся все теги для данной записи - как это показано на рисунке выше.
4.Сохраните шаблон, далее можно перейти к редактированию стилей шаблона. Для этого заходим в раздел Шаблон - кликаем "Настроить" - выбираем "Дополнительно" (Advanced) и "Добавить CSS" (Add CSS ), где пишем:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
Проверяем результат. Кстати в данном скрипте «Хлебные крошки» также отображаются и на страницах архивов (тегов) для большего удобства посетителей. Вообще большинству пользователей в структуре типичного блога «без наворотов» запутаться не так уж сложно и без «хлебных крошек». Тем не менее, я настаиваю, что в большинстве случаев они как минимум не помешают. Если вы со мной согласны, может смело использовать приведенный выше алгоритм установки.
P.S. Если вы хотите начать зарабатывать на Форексе, тогда бездепозитный форекс бонус поможет начать свой путь с минимальными затратами, а точнее бесплатно.
Стильные мужчины не меньше женщин обращают внимание на аксессуары, магазин копий швейцарских часов поможет подобрать для вашего имиджа соответствующие красивые часы.
Компания Pool.ua с целью улучшения Украины предлагает создавать фонтан в городе, парке, торговом и развлекательном центрах, с использованием водных шоу.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails