Шаблон Rusalka для Blogger

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

Стильное облако тегов для 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; В целом элемент смотрится весьма неплохо и оригинально.
Как вам пост?   

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

пятница, 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 для всех социальных сервисов - его нужно заменить на свой. Когда все сделали, сохраняете гаджет. Если вам не нужно выводить какой-то из сервисов, просто убираете его код.
Также следует заметить, что соответствующие картинки хранятся у владельца скрипта. Поэтому для того чтобы в один прекрасный день они не исчезли, можете скопировать и загрузить на свой хостинг или какой-то сервис хранения изображений.
Как вам пост?   
Related Posts with Thumbnails