Где взять шаблоны для blogger?

Вчера целый день полистывал blogger, просматривая блоги, а точнее шаблоны блогов. Бесчисленное множество различных блогов на всевозможные лады открылось моему взору. Конечно, чтобы создавать шаблоны, "большую голову" иметь не надо, просто нужно чтобы были знания. Но что делать если ты, как говорится не в этой теме?

Для начала скажу что в blogger блоггерами используются два вида шаблонов, те кто недавно начали свою жизнь в блогах скажу: вы используете новые виды шаблонов XML-шаблоны для Beta Blogger 2. Конечно это круто! Но не менее круче шаблоны старого образца - для классического Blogger. Файлы таких шаблонов имеют расширение в конце HTML.

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

Что интересно, если вы не доделаете этот шаблон до конца, то в следующий заход вам не прийдётся начинать всё с самого начала, ваши данные будут сохранены!
Прочитать полностью...

Список предыдущих постов ( заголовки )

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

Для начала нужно ознакомиться с темой Добавляем содержание RSS feeds в ваш блог. Там описан метод при помощи которого добавлялось содержимое чужого блога, а чем ваш жуже?

Фид вашего блога имеет вот такой формат:
http://yourblogname.blogspot.com/atom.xml - нам его надо конвертануть в код Javascript при помощи RSS-Javascript онлайн конвертеров которых если по-гуглить предостаточно, я приведу один:
http://itde.vccs.edu/rss2js/build.php

Скопируйте этот адрес и введите его в строчку браузера. Далее по схеме описанной в пост Добавляем содержание RSS feeds в ваш блог, только вместо адреса чужого блога нужно вводить свой, также нужно боратить внимание на пункты количество отображаемых постов, выводить ли содержание и др.

Когда код сгенерировал нужно в макете страницы добавить новый элемент HTML/Javascript и ввести туда этот код.

И наслаждаться зрелищем.

Замечание: пока писал этот пост - смотрю, страницы блога начали оооччень долго загружаться, но потом выяснилось был сбой на сервере конвертера фида. Первый раз конечно за месяц пока я им пользуюсь, но все равно. Посетитель зайдёт и долго ждать загрузки страницы не будет - развернётся и уйдёт. О чём это говорит - о том что перегружать страницы виджетами с исполняемыми кодами на онлайн службах не рекомендуется!!!
Прочитать полностью...

Вставляем Flash в Blogger в текст и заголовок

Как вставить Flash картинку в блог, да также в принципе как и обычную, но есть одно НО, flash замедляет загрузку страницы и пожалуй все, нет не всё далее я расскажу об этом, потому что нужен специальный код ...

Загрузите вашe flash-картинку на какой нибудь хост. Запомните адрес картинки. Далее везде будем использовать вот такой код для вставки flash:

<object width=\"150\" height=\"340\">
<param value=\"МОЙ_FLASH.swf\" name=\"movie\"/>
<embed width=\"150\" src=\"URL_МОЙ_FLASH.swf\" height=\"340\">
</embed>
</object>

помимо замены названия картинки и URL картинки нужно заменить ещё два параметра:
'width' и 'height' соответственно ширину и высоту, то есть поменяйте размеры в коде на ваши настоящие размеры картинки. Ну если случится, что вы не знаете размеры то тогда вам поможет графический редактор в котором можно посмотреть свойства картинки и оттуда их узнать. Вот тут я привёл пример того как можно применить вышеописанное.

Flash в заголовке (в Header)

Для того чтобы добавить Flash нужно сначала добавить элемент HTML/Javascript в заголовок, как это сделать рассказывалось в теме Как добавить баннер в заголовок (HEADER). Сначала загружаем flash на какой-нибудь хост, затем модифицируем код, который я представил к всеобщему обозрению выше и вставляем его в элемент HTML/Javascript.

Всё, если есть вопросы задавайте!





Прочитать полностью...

Как добавить баннер в заголовок (HEADER)

Для того чтобы добавить баннер в заголовок надо ...

Для начала нужно иметь готовый баннер иначе что вы собираетесь размещать? Я надеюсь что у вас он уже готов. Если не готов - воспользуйтесь онлайн генераторами баннеров -в интернете их туча в основном хорошие - англоязычные, поэтому гуглим по ключевым словам 'free banner generator'. Сделали - приступим.

Заливаем баннер на хост, им может быть и googlepages.com и сам blogger. в случае с googlepages сохраняем линк от размещённого баннера. Если использовать блоггер, то тогда создаём пост и вставляем картинку со своим баннером. Мы увидим ссылку на баннер после сохранения, выглядеть приблизительно она будет так:

<a onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http://1.bp.blogspot.com/_J2kVk3AKsXA/RXcetyx4o6I/
AAAAAAAAAAw/khphtkWwAMY/s1600-h/ИМЯ_КАРТИНКИ.jpg\">
<img style=\"display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;\" src=\"http://1.bp.blogspot.com/_J2kVk3AKsXA/RXcetyx4o6I/
AAAAAAAAAAw/khphtkWwAMY/s400/ИМЯ_КАРТИНКИ.jpg\" border=\"0\" alt=\"\"id=\"BLOGGER_PHOTO_ID_5005503282919547810\" /></a>


Выдёргиваем из этого кода URL картинки который выгдядит так:

http://1.bp.blogspot.com/_J2kVk3AKsXA/RXcetyx4o6I/
AAAAAAAAAAw/khphtkWwAMY/s400/PIC_NAME.jpg


запоминаем его - он понадобится нам для вставки в header (заголовок). Далее идём в ШАБЛОН-->ИЗМЕНИТЬ HTML и находим в HTML коде header:

<div id=\"header-wrapper\">
<b:section class=\"header\" id=\"header\" maxwidgets=\"1\" showaddelement=\"no\">
<b:widget id=\"Header1\" locked=\"true\" title=\"The Widgets of Beta Blogger. (Header)\" type=\"Header\">
</b:widget>
</b:section></div>


В вышеперечисленном коде замените maxwidgets="1" на maxwidgets="3", также замените showaddelement="no" на showaddelement="yes" и locked="true" на locked="false".
Сохранимся!

Теперь идём на страничку с этементами страницы, которые можно добавить и удалить.
И вы увидите, что у заголовка появилась возможность добавления элементов. Добавляем HTML/JavaScript элемент и вставляем туда URL картинки в виде

<a href=\"URL_КУДА_ССЫЛАЕТСЯ_БАННЕР\"><img src=\"URL_ВАШЕГО_БАННЕРА_КОТОРЫЙ_МЫ_ЗАПОМИНАЛИ\" alt=\"Заголовок блога\"></a>

Сохраняемся и вуаля. Баннер стоит и просит себя нажать!
Прочитать полностью...

Создаём облако тегов ( teg clouds)

В этом посте я бы хотел затронуть такие вещи как установка и настройка кода такого известного понятия как облако тегов.

Для начала скажу чтобы корректно код заработал необходимо:
1. Залить себе на комп ваш код шаблона во избежании тяжких последствий и на всякий случай, а то мало ли, потом мне голову оторвёте :)
2. У вас уже должны быть парочка постов с тегами или ярлыками, мне удобнее называть тегами. Как минимум одним тегом, но в двух разных постах.

Поехали.
Установка кода займёт три шага.
Во первых вам нужно добавить элемент ЯРЛЫКИ и поместите его туда куда вы хотите установить облако тегов.

Первым шагом будет добавление кода в CSS сразу перед ]]></b:skin>:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


Следующий код нужно поместить после ]]></b:skin> но перед тегом </head>:


<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Время пришло поморочиться с самим виджетом тегов. Пролистайте ваш код и найдите приблизительно такую строчку:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/> в принципе похожих строчек у вас много, но не пугайтесь - ориентиром должно являться слово type='Label'. Постарайтесь - найдите, для этого нужно включить расширить шаблоны виджета.

Вставьте следующий код от начала виджета до конца, заменяя первую строку вашего виджета на первую строку кода и так до самого конца:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Теперь сохраняемся. Можете любоваться облаком.
Если что-то пошло не так, значит вы что-то не так сделали.

О настройках

var cloudMin= 1; регулирует количество показываемых тегов, если 1 значит все.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0]; регулируем цвета и размеры шрифта.
Прочитать полностью...

Добавляем иконку к заголовку поста

Хотите разнообразить заголовок и добавить небольшую картинку или иконку к заголовку поста вашего блога? Если да, то приступим

Сначала нужно создать рисунок и загрузить его на бесплатный хост, запомнив его URL.
Код картинки, вставляемый в HTML код вашего шаблона будет такой:
<img src="URL вашей картинки" style="border-width:0px" />

Затем заходим в редактировани кода вашего шаблона, включаем опцию расширить шаблоны виджета и ищем такую последовательность строк:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' rel='bookmark'>

и сразу же после неё вставляем нашу строчку <img src="LINK OF YOUR IMAGE" style="border-width:0px" />

Сохраняемся.
Всё готово!
Если же например вы хотите вставить картинку после названия поста, то тогда нашу строчку нужно вставить сразу после <b:if cond='data:post.title'>

Удачи!
Прочитать полностью...

Используем лайтбокс для показа рисунков

Для понимания ситуации щёлкните на картинку - хотите тоже самое? Тогда приступим.

Лайтбокс это разновидность pop-up'ов которые показываются поверх страницы. Лайтбокс не является новым броузером!

Мы должны совершить три основных шага ( кроме того, перед началом обязательно сделайте бэкап вашего шаблона пункт 1).

Шаг 1
Скачиваем файл Лайтбокс JavaScript
скачиваем картинку "загрузка"
Скачиваем картинку "закрыть"

Шаг 2
Добавьте следующ.. строчку в HTML код сразу после тега <head> или же просто в секции <head>...</head>:
<script type='text/javascript' src='URL вашего хоста/lightbox.js'/>
и меняем URL вашего хоста на конкретно адрес.

Шаг 3
Заливаем всё на хост.

Шаг 4
Далее нужно добавить в CSS вот такой код:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

ВСЁ!
Теперь создаём классный пост - только классный, кидаем на хост картинку, в посте, там где <a href="URL вашей картинки"> нужно добавить свойства, чтобы выглядело так или примерно
<a href="URL вашей картинки" rel="lightbox" and title="Your title"><img scr="URL вашей картинки" width=50% height=50% /></a>
теперь после публикации поста при клике по картинке, которая уменьшена по вертикали и горизонтали на 50% т.е. в два раза, во всплывающем окне будет полноценная картинка!
Удачи!

Ссылка по теме
оптимизация SEO для картинок
вставляем баннер в каждый пост вашего блога
Прочитать полностью...

Добавляем содержание RSS feeds в ваш блог

Для начала найдём иконку RSS. Что это?

Иконки RSS feeds бывают всевозможных фасонов и мастей, но козырным изображением, вписавшимся на долгие годы является вот такой значок, который сам по себе имеет множество размеров - он является стандартом для изображения RSS feeds.

Что нам надо и для чего всё это?

Например нам в блоге понадобится показывать названия постов другого блога, ведь такое же бывает, когда у вас не один блог и например они тесно связаны по тематике, или же вы хотите публиковать новостную ленту какого-нибудь фида.

Приступим, для начала наведите на значёк RSS фида мышку и правой кнопкой копируем ярлык - он же является и адресом фида т.е. URL, который мы хотим публиковать в нашем блоге.

Теперь нам нужно сконвертировать фид в Javascript. Не пугайтесь, длинные программы писать мы не будем, да и короткие тоже, так как существуют онлайн компиляторы RSS в Javascript! Один из них расположен вот здесь http://itde.vccs.edu/rss2js/build.php, заходим туда.

В первой строчке вводим URL фида.
Во второй представляется возможность выбрать, метод отображения:
(yes= показывает заголовок и описание; title= только заголовок, no=вообще ничего не показывать).
В третьей строке указываем количество заголовков, которые хотим отображать.
В четвёртой количество символов, которые будут отображаться в описании к заголовкам.
В пятой выбираем показывать дату или нет.
В шестой делаем выбор при щелчке по ссылке вывод в новое окно или открывать в текущем.
Щёлкаем по кнопке Generate Javascript и копируем сгенерированный код. Затем идём в админку блога.

В макете страницы выбираем добавить элемент HTML/Javascript и вставляем туда код из буфера.

Всё готово можно юзать? НЕТ!
1. Для того чтобы использовать содержимое фида чужого блога нужно узнать, можно ли использовать содержимое, не нарушаете ли вы права правообладателя на информацию :)
2. Если вы используете AdSense то знайте, его боты не могут читать содержимое Javascript.
3. Вы также можете использовать виджет Feed, но он не может отображать более 5 постов, а этим способом вы можете отобразить всё сколько захотите.

Как тема?
Прочитать полностью...

Создание меню в блоггере

Очень просто!
Поверьте, что если делать именно так как я расскажу, то у вас появится меню, подобное моему сверху, да оно неказистое, но я ведь вместе с вами облагораживаю блог и поверьте если всё-всё запихнуть в блог - тоже ничего хорошего не получится.
Приступим.


Перед всем этим сохраняем свой старый HTML- читаем первый пункт, во избежании различных осложнений с вашей стороны.
Ищем в тексте HTML кода вашего шаблона такие строки выделенные синим:

<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>

а красные вставляем между ними, это мы обозначили, что появился на свет 'menubar'.
Теперь в CSS-части определяем свойства его, вставлять нужно только в CSS, короче туда, где идёт много определений с такими вот значками #, вставлять обязательно одним блоком:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}

Заголовка у нашего 'menubar' не будет, а зачем заголовок в меню? Там будут только опции, которые вы сможете добавить в макете.
Сохраняемся, упс и проблема или упс и нормально?

В некоторых шаблонах при сохранении ругается админка. Приблизительно так:

"Invalid variable declaration in page skin: Variable is used but not defined. Input: headerTextColor"

Если так, то это лечится, просто нужно описать переменную, а лучше две переменные, чтобы наверняка, вписываем в код сверху, где описываются переменные:

<Variable name="headerCornersColor" description="Цвет фона меню"
type="color" default="#fff" value="#e6e6e6">
<Variable name="headerTextColor" description="Цвет текста меню"
type="color" default="#c60" value="#5588aa">

Сохраняемся, теперь уж ничто ругаться на будет.

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

Пива всем!
Прочитать полностью...