Шаблон Rusalka для Blogger

понедельник, 25 февраля 2013 г.
Многие шаблоны для Blogger являются адаптацией тем популярной в блогосфере wordpress cms. Основные их преимущества - достаточно стильный и хороший дизайн, а также наличие расширенной функциональности. Большинство шаблонов Blogger, который я рассматривал на страницах BlogoHelp, имеют весьма простой внешний вид, а из виджетов, как правило, только архив и список тегов. Для того чтобы привести все это к виду серьезного блога нужно повозиться. С "адаптированными WP темами" чуть проще - здесь основное время тратится на сам процесс интеграции зато потом получаете максимум возможностей. Впрочем, что я тут рассказываю, проще наглядно все продемонстрировать на примере одного из шаблонов - Rusalka.
Просматривая демо версию темы и ее внешний вид вы бы никогда не догадались о том, на какой CMS она сделана, если бы не формат URL (и некоторые отличительные детали Blogspot). Перед нами отличный функциональный шаблон блога в приятных пастельных тонах с логотипом и всеми необходимыми возможностями для блоггинга.
Тема подходит для сайтов разных тематик. Не смотря на то, что в описании сказано будто лучшими будут блоги о фильмах или журнального типа. По цветовому решению макет вполне бы сгодился, скажем, для женского сайта. Ширина шаблона Rusalka фиксированная, имеется 2 колонки.
В шапке не так много графики, 2 меню (причем второе выпадающее), ссылки на социальные сети, логотип и место для баннера. Вообще подобное расположение элементов достаточно стандартное для таких wordpress тем - как правило, они отличаются логотипом и цветовой гаммой. Футер тоже максимально прост - есть только копирайт, можно добавить еще и своих счетчиков.
Слева колонка для текстов: хорошо выделяются заголовки постов, есть ссылка читать далее (к счастью, эта опция в Blogger сейчас реализована проще простого), а также информация о дате публикации и авторе. Мне лично не хватает навигации внизу страницы - она была бы логичным завершением макета. Тем более, что сверху в колонке найдете полноценное и весьма крутое слайд шоу для постов блога.
Сайдбар в отличии от обычных блогов наполнен по максимуму. Здесь имеются кнопки социальных сетей, блок поиска, список последних и популярных постов, блоки с категориями, архивом, текстовым описанием и элементом-списком. Все это, конечно, создано для демонстрации возможностей макета, и нужно будет потом подправить виджеты под свои нужды. В целом шаблон Rusalka для Blogger производит положительное впечатление. Возможно, кому-то дизайн покажется слегка простоватым (вкусы у всех разные), но по функциональности хватает всего. 
P.S. Кстати, многие создают блоги с целью дальнейшего заработка на них - недавно нашел на этом сайте подборку разных статей по тем или иным нишам онлайн заработка, новичкам пригодится.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Стильное облако тегов для Blogger с помощью CSS3

вторник, 19 февраля 2013 г.
Про облако тегов для системы Blogspot было сказано немало, но тем, кто лишь недавно присоединился к данному блогохостингу, я кое-что повторю. Если "глубоко копнуть", то следует заменить, что изначально виджета для тегов как такового в системе не было, приходилось довольствоваться специальным хаком. Процесс внедрения облака тегов был не таким уж и простым, хотя результат получался вполне достойный.
К счастью в 2009 ситуация изменилась к лучшему, и появился специальный виджет облака тегов, с помощью которого оно ставилось за несколько кликов. Вы могли не только выбирать какие именно теги выводить, но и с помощью CSS подправить стили отображения ссылок. Собственно об этом сегодня и будет мой рассказ (спасибо авторам этой статьи). После прохождения всех этапов у вас получится такой стильный элемент для сайта.
Установку можно разделить на 2 этапа: добавление виджета облака тегов в макет блога, второй - правка в шаблоне стилей для него.
1. Заходим в админку Blogger и выбираем раздел "Дизайн". Создаем новый гаджет/виджет типа "Ярлыки". В нем указываем нужные вам настройки для облака тегов.
2. Теперь открываем раздел "Шаблон", кликаем по кнопке "Изменить HTML". В окне с кодом макета находим ]]></b:skin>. Перед этим местом добавляем следующие строки:

/*-----Custom Labels widget by www.bloggertrix.com----*/

#Label1 a{outline: 1px rgba(255,255,255,0.4) dashed;
border: 1px rgba(0,0,0,0.3) dashed;
padding: 4px 10px 4px 20px;
text-decoration: none;
color:#000000;
white-space: nowrap;
font-family: Arial;
font-size: 12px;
font-weight: bold;
position: relative !important;
background: #8dc63f;
float: left;
padding: 5px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}

#Label1 a:hover{color: rgba(0,0,0,0.5);}
.label-size{line-height:1.5;align:left;}

Сохраняем шаблон. Это все стили оформления CSS3 для вашего облака тегов. Да, возможно, он будет не совсем хорошо отображаться в мобильных шаблонах, но на обычных компьютерах вполне нормально. Кстати, если вы разбираетесь в CSS, то можете изменить данный код под себя. Цвета здесь задаются с помощью директив color (для шрифта) и background (для фона). Я бы добавил еще центрирование облака через text-align: center; В целом элемент смотрится весьма неплохо и оригинально.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Создаем блок подписчиков и фолловеров в сайдбаре

пятница, 8 февраля 2013 г.
Каждый более-менее профессиональный блоггер отслеживает количество своих подписчиков. Это, во-первых, может быть интересно ему самому дабы понимать насколько большая или не очень аудитория блога. Во-вторых, информация может использоваться при формировании цены для размещения рекламы.
Обычно эти данные (как и кратную информацию о блоге) размещают в сайдбаре ближе к верху страницы. Так, например, у меня вы можете видеть счетчик Feedburner, который показывает число подписчиков по RSS. Но есть и другие сервисы, отдающие подобную статистику - Facebook, твиттер, социальные сеть Google+, Вконтакте, Pinterest и т.п. Сегодня рассмотрю небольшой прием для отображения количества подписчиков по всем ним в одном блоке. За подсказку спасибо этой статье. Кроме числа фолловеров напротив каждого сервиса будет кнопка подписки. Выглядеть это все будет приблизительно так.
блок подписчиков
1. Первым делом заходим в админку блога и выбираем пункт меню "Шаблон". После этого кликаем по кнопке "Изменить HTML".
2. В открывшемся окне с кодом шаблона находим строку ]]></b:skin> и перед ней добавляем:
 

/* The CSS Code for the menu starts here bloggertrix.com */
div#socialbox, div#socialbox ul, div#socialbox ul li, div#socialbox ul li p, div#socialbox ul li p img, div#socialbox ul li p span, #socialbox ul li p a{
background: none;border: none;margin: 0;padding: 0;}

div#socialbox{
color: #768a96;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width:300px;}

div#socialbox ul{
background: url() repeat;
border: 1px solid #d8dcdf !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 4px #dfe4e7;
-moz-box-shadow: 0px 2px 4px #dfe4e7;
box-shadow: 0px 2px 4px #dfe4e7;
list-style: none;
margin: 0 !important;
padding: 0;}

div#socialbox ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 59px;
list-style: none;}

div#socialbox ul li:last-child{
border-bottom: none;}

div#socialbox ul li p{
padding: 19px 9px 0 9px;}

div#socialbox ul li p img{
border: none;
margin-right: 10px;
position: relative;
top: 3px;
vertical-align: baseline;}

div#socialbox ul li p span{
color: #425763;
font-weight: bold;}

div#socialbox ul li p a.socialbox-button{
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) no-repeat;
border: 1px solid #d8dcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #425763;
float: right;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -2px;}

div#socialbox ul li p a.socialbox-button:hover{
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -27px no-repeat;}

div#socialbox ul li p a.socialbox-button:active{
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -54px no-repeat;}

Это все CSS стили оформления нашего блока.
3. Дальше нужно создать соответствующий элемент. Для этого заходим в меню "Дизайн". Кликаем по ссылке "Добавить гаджет" и располагаем его в том месте шаблона, где вам захочется. Тип гаджета - HTML/Javascript. В него вставляем следующий код:

<br />
<div id="socialbox">
<ul>
<li><a href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook"><img alt="Facebook" src="http://3.bp.blogspot.com/-k-i66-3QRac/ULOabPh5-dI/AAAAAAAAFzo/8_T6Ux7XwDg/s1600/bloggertrix-facebook.png" /></a>2,563 Fans
<a class="socialbox-button" href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook">Like</a><br />

</li>
<li><a href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter"><img alt="Twitter" src="http://1.bp.blogspot.com/-O8gKTilqhO4/ULOadDY-vjI/AAAAAAAAFz4/7BB73bOJTOU/s1600/bloggertrix-twitter.png" /></a>5,365 Followers
<a class="socialbox-button" href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter">Follow</a>
</li>
<li><a href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="http://1.bp.blogspot.com/-d751wABGYCc/ULOacKr4HaI/AAAAAAAAFzs/z0JUCRsHe1E/s1600/bloggertrix-feedburner.png" /></a>1,094 Subscribers <a class="socialbox-button" href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed">Subscribe</a>
</li>
<li><a href="http://www.plus.google.com/107955298793879607964" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="http://3.bp.blogspot.com/-5mINxCqjyNQ/UQCzDgwa6nI/AAAAAAAAGeA/d1ce45hB7F8/s1600/Google-plus-icon.png" /></a>1,151 Followers
<a class="socialbox-button" href="http://www.plus.google.com/107955298793879607964" target="_blank" title="Subscribe to Feed">Follow</a>
</li>
<li><a href="http://pinterest.com/bloggertrix/" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="http://1.bp.blogspot.com/-7vq3ELxtVCQ/UQCzDt7K9rI/AAAAAAAAGeE/H1EGkFh2i8g/s1600/Pinterest-icon.png" /></a>112 Pinterest
<a class="socialbox-button" href="http://pinterest.com/bloggertrix/" target="_blank" title="Subscribe to Feed">Pinterest</a>
</li>
</ul>
</div>

Внимание! Здесь используется логин bloggertrix для всех социальных сервисов - его нужно заменить на свой. Когда все сделали, сохраняете гаджет. Если вам не нужно выводить какой-то из сервисов, просто убираете его код.
Также следует заметить, что соответствующие картинки хранятся у владельца скрипта. Поэтому для того чтобы в один прекрасный день они не исчезли, можете скопировать и загрузить на свой хостинг или какой-то сервис хранения изображений.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails