Подключение иконки фавикон (favicon) для Blogspot

воскресенье, 26 июня 2011 г.
Фавикон (favicon) - это такая небольшая иконка, которая отображается в строке браузера когда пользователь попадает на ваш сайт или, например, доступна в поисковой выдаче яндекса и при сохранении закладки на ваш сайт в favourites. В принципе, иконка не является обязательным элементом сайта, каким-то сверх полезным и необходимым ключевым моментом. Это просто дополнительная возможность выделить свой сайт в дизайнерском плане, добавив авторскую небольшую картинку, которая иногда весьма здорово характеризует весь блог.



По умолчанию в блоггере для всех сайтов отображается фавикон с логотипом сервиса, у меня как видите он немного изменен. Про создание, особенности и подключение фавиконки (favicon) я уже писал, скажу лишь, что для Blogspot достаточно в файле шаблона указать ссылку на соответствующую иконку:
<link href="http://design-mania.ru/files/blogohelp/blogger-ico2.ico" rel="shortcut icon">
Код добавляется в блок head до начала body, причем иконка должна иметь формат .ico. Также сам файл иконки нужно было загрузить на ФТП другого сайта (у blogspot нет ftp) дабы иметь к нему доступ. Я точно не уверен, но возможно фавикон можно загрузить и в Picasa либо другой бесплатный сервис хранения картинок.

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

Для того чтобы изменить фавикон нужно, во-первых, зайти в шаблоны Блоггера http://draft.blogger.com дальше раздел "Дизайн" - "Элементы страницы" (Design | Page Elements). Над блоком панели навигации появится небольшой значок с ссылкой "Изменить".


В открывшемся окне появится поле и кнопка для загрузки картинки со своего компьютера. На данный момент поддерживается только формат .ico, но вы легко сможете сконвертировать файлы JPEG, PNG и другие с помощью специального софта. Если не умеете делать это в фотошопе, то как минимум можете попробовать онлайновый конвертор фавиконок ICO converter.


Итак, после того как вы выбрали на компьютере .ico файл, нажимаем сохранить. Картинка автоматически будет преобразована к нужным размерам и вы увидите иконку в админке Blogspot (там где раньше была фавиконка по умолчанию). Дальше нужно будет сохранить весь шаблон, нажав оранжевую кнопку "Сохранить". После этого сможете видеть свою новую иконку в окне браузера.

Напоследок есть 2 момента. Во-первых, разработчики обещают добавить поддержку еще некоторых форматов изображений для загрузки (видимо, конвертирование будет проходить прямо в системе). Во-вторых, подключение иконки, судя по тому HTML коду, что получился, несколько отличается от стандартного метода. Я не нашел упоминания тега link, точнее он указывал на обычную иконку Blogspot, а новая фавиконка при этом подгружалась с помощью скрипта. Не думаю, что это лучшее решение, хотя, возможно, она как-то со временем заменит стандартную.

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

Анонсы постов с картинками на главной странице

среда, 15 июня 2011 г.
Во многих случаях отображение на главной странице постов целиком является не лучшим решением. Конечно, с некоторых пор у blogspot-блогера появилась возможность прятать посты «под кат». Это открыло кое-какие возможности, но тега more явно не достаточно в том случае, если вы хотите аккуратно сверстать на главной странице анонсы постов (особенно если при этом вы хотите, снабдить такие "саммари" превьюшками). Когда я собирался внедрить для BlogoHelp`а какой-то из журнальных шаблонов Blogger`а, то как раз думал о возможности добавления картинок в анонсы.

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

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




Что, по-моему, очень даже замечательно! Если и вам нравится, тогда переходим к инсталляции:

Первым делом делаем бекап — Дизайн > Изменить HTML > Загрузить весь шаблон (Design > Edit HTML, Download Full Template). Далее устанавливаем галочку «расширить шаблон виджета», находим <data:post.body /> и заменяем на следующий фрагмент:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
В принципе вы уже на данном этапе можете сохранить шаблон и посмотреть изменения. На главной странице блога вы увидите уже сформированные «саммари», но пока еще не отформатированные, поэтому займемся стилями.

Находим </b:skin> и вставляем перед:
.thumb img {
float: left;
margin: 0 10px 10px 0;
}
Если вы хотите чтобы превью располагалась справа:

.thumb img {
float: right;
margin: 0 0 10px 10px;
}
Вот и все, можно проверять результат. Кстати, тэгом more вы тоже по прежнему може пользоваться!

P.S. Если вам нужен современный и функциональный интернет магазин, платформа magento может идеально подойти для реализации этой задачи.
Про то что такое бесплатная раскрутка сайта вы узнаете на блоге SEOinUA.
Кстати сейчас компаний (агрегатор) Webeffector проводят конкурс Продвижение неизбежно для всех вебмастреров и оптимизаторов.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Шаблон для блога-галереи - Photo Gallery Blogger Template

среда, 8 июня 2011 г.
Хорошие шаблонов-галерей для Blogspot существует не так много. Главная причина — технические ограничения платформы. Вообще, конечно, галереи разумно использовать для фотоблогов или сайтов-портфолио, где 90% информации сайта составляют именно изображения. Для всех остальных проще использовать стандартные шаблоны, добавляя в них картинки и, возможно, соответствующие скрипты. Сегодня рассказу об одном классном шаблоне - Photo Gallery Blogger Template - поистине настоящий «бриллиант» среди галерей.



Главное чем Photo Gallery Blogger от большинства более простых шаблонов — использование скрипта Lightbox2. Кроме, того разработчики широко использовали возможности CSS3. Результат — глядя на этот шаблон так сразу и не подумаешь, что перед вами блог на платформе Blogger.

Основные возможности и особенности шаблона:
  • легковесность и высокая скорость загрузки;
  • автоматическая генерация превьюшек;
  • стильное верхнее меню;
  • использование Google Custom webfonts (Damion и Oswald);
  • стилизованые аватары комментаров;
Скачать код шаблона Photo Gallery Blogger Template можно здесь. Его отличительная особенность, как вы могли видеть на картинке выше, черный фон. Иногда это выглядит стильно, но для любителей все же светлых дизайнов существует и «древесный» вариант оформления данной темы - Photo Gallery Woody.



Как сами понимаете, технически он ничем кроме оформления от Photo Gallery Dark не отличается. Скачать XML шаблона для Photo Gallery Woody можно здесь.

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

P.S. Новости и мониторинг буксов. Информация для начинающих зарабатывать в интернете на буксах, матрицах, партнерских программах. Рефбэк до 100% и полная поддержка пользователей.
Многие авторы блогов занимаются также предоставлением определенных услуг, так SEO специалист под ником B-ReD ведет прикольный блог и продвигает сайты.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails