Blogger Hacks

Hight Light. Код в Blogger.

noreply@blogger.com (Вячеслав) — Thu, 17 Mar 2011 13:50:00 +0000

Многие пользователи, особенно которые ведут блоги на темы программирования вынуждены на своей странице показывать читателям фрагменты кода. Не всегда получается изобразить "красиво".

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

И так, для тех кто не в курсе, мной сейчас будет рассказан свой метод, как это делаю я:

Заходим на сайт http://pastie.org (никакой регистрации не требуется).

Затем в поле ввода (как показано на рисунке) скопируйте свой код и нажмите на клавишу Paste.

Потом, когда вы уже проделали эту операцию, скопируйте код (как показано на рисунке) и вставьте его в своё сообщение туда, где должен быть расположен фрагмент записи.

Если вы уже профи и знаете как работать с HTML, то для вас совет:

Лучше скопировать девайс со страницы

(<pre class="sunburst">.....ваш код......</pre>)

и вставить CSS

/* Stylesheet generated from TextMate theme
 *
 * IDLE
 * 
 *
 */

/* Mostly to improve view within the TextMate HTML viewer */
body {
 margin: 0;
 padding: 0;
}

pre.sunburst {
 padding: 0;
 line-height: 1.3em;
 word-wrap: break-word;
}

pre.sunburst {
 color: #000000;
 background-color: #FFFFFF;
}

pre.sunburst .linenum {
 width: 75px;
 padding: 0.1em 1em 0.2em 0;
 color: #888;
 background-color: #eee;
}
pre.sunburst span {
   padding-top: 0.2em;
   padding-bottom: 0.1em;
}
pre.sunburst ::selection {
 background-color: #BAD6FD;
}
/* Comment */
pre.sunburst .comment {
 color: #919191;
}

/* String */
pre.sunburst .string {
 color: #00A33F;
}

/* Number */
pre.sunburst .constant_numeric {
}

/* Built-in constant */
pre.sunburst .constant_language {
 color: #A535AE;
}

/* User-defined constant */
pre.sunburst .constant_character, pre.sunburst .constant_other {
}

/* Variable */
pre.sunburst .variable_language, pre.sunburst .variable_other {
}

/* Keyword */
pre.sunburst .keyword {
 color: #FF5600;
}

/* Storage */
pre.sunburst .storage {
 color: #FF5600;
}

/* Class name */
pre.sunburst .entity_name_class {
 color: #21439C;
}

/* Inherited class */
pre.sunburst .entity_other_inherited-class {
}

/* Function name */
pre.sunburst .entity_name_function {
 color: #21439C;
}

/* Function argument */
pre.sunburst .variable_parameter {
}

/* Tag name */
pre.sunburst .entity_name_tag {
}

/* Tag attribute */
pre.sunburst .entity_other_attribute-name {
}

/* Library function */
pre.sunburst .support_function {
 color: #A535AE;
}

/* Library constant */
pre.sunburst .support_constant {
 color: #A535AE;
}

/* Library class/type */
pre.sunburst .support_type, pre.sunburst .support_class {
 color: #A535AE;
}

/* Library variable */
pre.sunburst .support_other_variable {
 color: #A535AE;
}

/* Invalid */
pre.sunburst .invalid {
 color: #FFFFFF;
 background-color: #990000;
}

/* String interpolation */ 

pre.sunburst .constant_other_placeholder_py {
 color: #990000;
}

.sunburst{
border:solid 1px #cccccc;
padding:5px;
}

Это облегчет работу и не будет проблем с RSS фидом.

Изучаем Python

noreply@blogger.com (Вячеслав) — Fri, 11 Mar 2011 17:17:00 +0000

Здравствуйте посетители этого блога.

Недавно мной был отрыт новый блог.

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

От простого к сложному.

Как вы уже наверное поняли по заголовку - изучаться будет язык Python.

Если кто то заинтересовался, вот ссылка:

Изучаем Python

Пропали постоянные читетели (виртуально)

noreply@blogger.com (Вячеслав) — Tue, 30 Mar 2010 17:10:00 +0000

Долгое время я не мог выходить в интернет и обновлять блог...

Когда пришёл в последний раз, захотелось поменять шаблон.

Как только я это сделал, у меня пропали постоянные читатели, но не совсем, а только на странице блога.

Если заходить как администратор в панель инструментов (http://blogger.com/home), то они там видны.

Сначала пришлось облазать весь интернет, но ничего на эту тему не нашёл.

Узнал одно, что Google может предоставить сам на прямую такой виджет в виде Html кода. Его берёшь и вставляешь в шаблон.

Если у вас возникла проблема, то вот ссылка на ту страницу:

Мастер сообществ Google

Там же есть и другие виджеты.

Теперь на моём блоге всё работает...

Как добавить чат на свой блог

noreply@blogger.com (Вячеслав) — Sat, 22 Aug 2009 16:03:00 +0000

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

Есть способ, при помощи которого видишь, владелец блога и читатели в сети, отключены или не делали логин.

Для этого вы можете добавить чат в свой блог.

Если вы хотите добавить его в свой блог, следуйте по инструкции ниже...

Первым делом потребуется регистрация на сайте

chatroll.

Перейдите по ссылке расположенной выше, а потом

на странице вверху, будет ссылка sign up(как на изображении ниже), перейдите по ней и создайте аккаунт.

Затем перейдите по ссылке Home

Найдите кнопку Create a chatroll(как на изображении ниже)

Нажминте на неё, и создайте форму.

В форме добавьте имя будущего поля и url(Как показано на изображении выше)

Перейдите по ссылке Next>

Затем выберите, в форме опцию публикации для всех(как на изображении ниже)

Тепеть перейдите по ссылке Embed(как на изображении ниже)

Вы увидите такое окно

Чуть выше выделеного фрагмента находится два текстовых поля, левое отвечает за ширину, а правое за длину.

Выставляет в пикселях.

Этот виджет можно вставлять в колонку своего блога, в пост и мн. др.

Выставите точный размер, который вам подойдёт.

Код выделеный красном - это html код виджета, не закрывайте эту страницу.

Перейдите в настройки блога > Макет > Добавить гаджет

Выберите Html/javascript

Перейдите на страницу с кодом виджета(где настройки чата), скопируйте html код и вставьте его в виджет. Теперь сохраните. Виджет поместите на то место, которое планировали.

На этом всё! Чтобы опубликовать своё сообщение, введите его в текстовое поле и нажмите enter.

Ajax облако тегов для Blogger

noreply@blogger.com (Вячеслав) — Mon, 17 Aug 2009 19:58:00 +0000

На сегодняшний момент это новейшая функция, которая улучшает работу блога в разы.

Ajax на много ускоряет работу блога. Это очень удобный виджет, работает в броузерах FireFox, Opera, InternetExplorer6 и др.

Хитрость быстроты работы такого облака тегов, это то, что перезагружается только колонка с сообщениями, а вы остаётесь на прежней странице.

Для того, чтобы облако работало нужно использовать XML шаблон(Не класический)

На моём блоге установлено ajax облако тегов, можете использовать в качестве примера.

Чтобы установить ajax облако тегов на своём блоге, выполните операции по инструкции, которые расположены ниже:

Шаг #1 | Шаг #2 | Шаг #3 | Шаг #4 | Шаг #5 | Шаг #6 |

Установка Ajax облака тегов(Инструкция)

Эту операцию (Шаг #1,#2) необходимо сделать если у вас ещё не установлено облако тегов.

Если установлено, то переходите к Шагу #3

Приступим к раблоте...

Шаг #1

Чтобы добавить ajax облако тегов в свой блог нужно выполнить не сколько действий:

Перейдите в Настройки блога > Макет >

Затем перейдите по ссылке: "Добавить гаджет"

Добавьте виджет "Ярлыки"

Теперь перейдите в вкладку Макет> Изменить HTML

Найдите в шаблоне тег

]]></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}

Шаг #2

Теперь найдите следующий код

]]></b:skin>

Сразу после него, но перед этим тегом

</head>

вставьте скрипт расположеный ниже:

Шаг #3

Сейчас вы должны будете выполнить ответственную операцию

Проверьте галочку "Расширить шаблоны виджета", она должна быть не нажата

Найдите код примерно похожий на этот:

<b:widget
id='Label1' locked='false' title='Labels' 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.className = 'phyLabel';

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>

Шаг #4

Теперь найдите этот тег
]]></b:skin>

Сразу после него, но перед этим тегом

</head>

вставьте скрипты расположеные ниже:

Не забудьте заменить Слово в скрипте ВашUrlБлога на url-адрес вашего блога.

Шаг #5

Эта операция понадобится, если вы свой шаблон сильно изменяли или он имеет не стандартный вид.

Найдите в шаблоне код похожий на этот

<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>

Перед ним располжен код похоий на этот

<b:section class='main' id='center-wap' showaddelement='no'>

или этот

<b:section id='main' showaddelement='no'>

Замените его на код расположеный ниже:

<b:section class='main' id='main' showaddelement='no'>

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

Найдите этот код в шаблоне

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>

Его нужно обязательно удалить.

Эта операция не повлияет на работу архива блога в виде календаря.

Шаг #6

Дальше уже идёт настройка дизайна.

Перейдите по ссылке которая расположена ниже...

Галерея дизайнов сообщений для ajax облака тегов

Шаг #1 | Шаг #2 | Шаг #3 | Шаг #4 | Шаг #5 | Шаг #6 |

А можно ли скрывать навбар?

noreply@blogger.com (Вячеслав) — Wed, 05 Aug 2009 08:16:00 +0000

Есть много статей, в которых пишется, как скрыть навбар при помощи стилей.

А можно ли это делать? Как сервис BLOGGER отреагирует на это?

Меня однажды замучил этот вопрос, полез в интернет и нашёл интересную статью(Сервис BLOGGER) Перейти

В ней описывалось: что такое навбар, для чего он нужен и дт.

И вдруг я увидел в самом конце отрывок текста:


"
Если Вы публикуете блог не через FTP, отключить Navbar нельзя.
Мы приложили все усилия к тому, чтобы панель Navbar удачно вписывалась в дизайн индивидуальных шаблонов. Некоторые проблемы с ее отображением все же могут возникнуть. Если это произойдет, можно попробовать предпринять некоторые шаги, чтобы их устранить. 

"

Когда мне захотелось посмотреть XML шаблоны в интернете, я увидел, что у всех до одного скрыт навбар. Blogger разрешает публиковать блог через FTP сервер только если вы используете классический шаблон в HTML виде.

Это даёт повод задуматься...

Если вы хотите отобразить навбар на блоге(Если он скрыт) нужно сделать одну операцию:

Перейдите в настройки блога> Макет > Изменить HTML

Найдите код




#navbar-iframe {
height:0;
visibility:hidden;
display:none;
}

Теперь просто его удалите.

Это всё!

Paginator для blogger

noreply@blogger.com (Вячеслав) — Sun, 02 Aug 2009 14:14:00 +0000

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

Если вы хотите добавить этот хак, следуйте по инструкции:

В данном случае вы можете выбирать дизайн:

Перейти далее

Перейти далее

Для того, чтобы добавить такой пагенатор следует выполнить несколько операций:

Перейдите в Настройки блога > Макет > Изменить HTML

Найдите строчку


]]></b:skin>

Перед ней вставьте стили:


  .showpageArea a {
margin:0.7px;
color:#000;
  text-decoration:none;
  }
  .showpageNum a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdC84RI0AtD16Lad2Wpm61PVBazzmbdKQl-rJ1ZQv6yZ-QPMwM4nngI24j3I9ybdnaXFFSgxlGDvIZKrPyAZNRtwqKTgTtyc5qipXyR7ibnblii4lxvEVaOnWNurAjvlG247ZAWzL1Qzg/) ;

padding:9px 23px 14px 14px;
  text-decoration:none;

  }
  .showpageNum a:hover {
color:#FFF !important;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaWOWJJsXExWTDRCX9LHYn86NwdkjFIzQEnNnpQBAjt5N85LpcEZ6-S5AiWq_GDwXquTyBncgywbL49h4fgjkvY1wg6cgSt04wUlvsMSnig6RxQg-I6VUR4VKs9oW1XmInAsz61QZ7_I/);

padding:8px 24px 14px 14px;

  background-color:#ccc;
  }
  .showpagePoint {
  color:#FFFFFF;
  text-decoration:none;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaWOWJJsXExWTDRCX9LHYn86NwdkjFIzQEnNnpQBAjt5N85LpcEZ6-S5AiWq_GDwXquTyBncgywbL49h4fgjkvY1wg6cgSt04wUlvsMSnig6RxQg-I6VUR4VKs9oW1XmInAsz61QZ7_I/) repeat scroll 0% 0%;

padding:8px 24px 14px 14px;
  }
  .showpageOf {
display:none;
  text-decoration:none;
  padding:3px;
  margin: 0 3px 0 0;
  }
  .showpage a {
  text-decoration:none;

  padding:4px;
  }
  .showpage a:hover {
  text-decoration:none;
  }
  .showpageNum a:link,.showpage a:link {
  text-decoration:none;
  color:#333;
  }

.showpage{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1_4UgP3FZ2IgI-_k66wsaWAQml-dzsnsgMj4ULR16X5Jyjn6KIhOgoUXJu8pjgestN0CbgkRd8Kha1vUkeIR1kYjIThciKYROaPNSISsyjuF3ig4U7VsKvgTK0BgPKnhzbqCHpjssVw/);
font-size:14px;
padding:10px 71px 10px 7px;
}



.showpage-next{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1_4UgP3FZ2IgI-_k66wsaWAQml-dzsnsgMj4ULR16X5Jyjn6KIhOgoUXJu8pjgestN0CbgkRd8Kha1vUkeIR1kYjIThciKYROaPNSISsyjuF3ig4U7VsKvgTK0BgPKnhzbqCHpjssVw/);
font-size:15px;
padding:10px 34px 10px 7px;

}
#blog-pager{
background:#FFFFFF none repeat scroll 0% 0%;
padding:1em;
text-align:center;

}

Теперь найдите строчку

<b:widget id='Blog1' locked='true' title='Сообщения
блога' type='Blog'/>

Сразу под ней вы увидите тег

</b:section>

Под ним вставьте код:



&lt;script type=&quot;text/javascript&quot;&gt;


function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;

thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ?
thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) :
thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= &#39;&#39;;

var upPageHtml =&#39;&#39;;

var downPageHtml =&#39;&#39;;
var pageCount = 5;
var displayPageNum = 5;
var upPageWord = &#39;Предыдущие&#39;;
var downPageWord = &#39;Далее&#39;;

var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=&#39;&#39;){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++)
{

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}
postNum++;
htmlMap[htmlMap.length] =
&#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

}

}//end if(post.category){





itemCount++;

}

}else{

if(title!=&#39;&#39;){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

if(title!=&#39;&#39;) postNum++;

htmlMap[htmlMap.length] =&#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

itemCount++;

}

}

for(var p =0;p&lt; htmlMap.length;p++){

if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

upPageHtml = &#39;&lt;span class=&quot;showpage-next&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

}else{

upPageHtml = &#39;&lt;span class=&quot;showpage-next&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
fFlag++;
}

if(p==(thisNum-1)){

html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{

if(p==0){

if(isLablePage){

html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}

}else{

html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}





if(eFlag ==0 &amp;&amp; p == thisNum){

downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;

}

}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){

if(!isLablePage){

html = &#39;&#39;+upPageHtml+&#39; &#39;+html+&#39; &#39;;

}else{

html = &#39;&#39;+upPageHtml+&#39; &#39;+html+&#39; &#39;;

}

}





html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Страниц (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;




if(thisNum&lt;(postNum-1)){

html += downPageHtml;





}





if(postNum==1) postNum++;

html += &#39;&lt;/div&gt;&#39;;





if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName(&quot;pageArea&quot;);

var blogPager = document.getElementById(&quot;blog-pager&quot;);





if(postNum &lt;= 2){

html =&#39;&#39;;

}





for(var p =0;p&lt; pageArea.length;p++){

pageArea[p].innerHTML = html;

}





if(pageArea&amp;&amp;pageArea.length&gt;0){

html =&#39;&#39;;

}





if(blogPager){

blogPager.innerHTML = html;

}

}





}

&lt;/script&gt;





&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
</div>

На этом всё!!!


]]></b:skin>

Перед ней вставьте стили:



  .showpageArea a {
  text-decoration:underline;
  }
  .showpageNum a {
  text-decoration:none;
  border: 1px solid #ccc;
  margin:0 3px;
  padding:3px;
  }
  .showpageNum a:hover {
  border: 1px solid #ccc;
  background-color:#ccc;
  }
  .showpagePoint {
  color:#333;
  text-decoration:none;
  border: 1px solid #ccc;
  background: #ccc;
  margin:0 3px;
  padding:3px;
  }
  .showpageOf {
  text-decoration:none;
  padding:3px;
  margin: 0 3px 0 0;
  }
  .showpage a {
  text-decoration:none;
  border: 1px solid #ccc;
  padding:3px;
  }
  .showpage a:hover {
  text-decoration:none;
  }
  .showpageNum a:link,.showpage a:link {
  text-decoration:none;
  color:#333;
  }

Теперь найдите строчку

<b:widget id='Blog1' locked='true' title='Сообщения
блога' type='Blog'/>

Сразу под ней вы увидите тег

</b:section>

Под ним вставьте код:

&lt;script type=&quot;text/javascript&quot;&gt;



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;

var thisLable = isLablePage ?
thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length)
: &quot;&quot;;

thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ?
thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) :
thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= &#39;&#39;;

var upPageHtml =&#39;&#39;;

var downPageHtml =&#39;&#39;;



var pageCount = 5;

var displayPageNum = 5;

var upPageWord = &#39;Previous&#39;;

var downPageWord = &#39;Next&#39;;







var labelHtml = &#39;&lt;span
class=&quot;showpageNum&quot;&gt;&lt;a
href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;



for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=&#39;&#39;){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



postNum++;

htmlMap[htmlMap.length] =
&#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=&#39;&#39;){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!=&#39;&#39;) postNum++;

htmlMap[htmlMap.length] =
&#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

itemCount++;

}

}



for(var p =0;p&lt; htmlMap.length;p++){

if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

if(fFlag ==0 &amp;&amp; p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

upPageHtml = &#39;&lt;span
class=&quot;showpage&quot;&gt;&lt;a
href=&quot;/&quot;&gt;&#39;+ upPageWord
+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

upPageHtml = &#39;&lt;span
class=&quot;showpage&quot;&gt;&lt;a
href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+
upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}



fFlag++;

}



if(p==(thisNum-1)){

html += &#39;&lt;span
class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;

}else{

if(p==0){

if(isLablePage){

html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

html += &#39;&lt;span
class=&quot;showpageNum&quot;&gt;&lt;a
href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

html += &#39;&lt;span
class=&quot;showpageNum&quot;&gt;&lt;a
href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+
(p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}



if(eFlag ==0 &amp;&amp; p == thisNum){

downPageHtml = &#39;&lt;span
class=&quot;showpage&quot;&gt; &lt;a
href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+
downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

eFlag++;

}

}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

}//end for(var p =0;p&lt; htmlMap.length;p++){



if(thisNum&gt;1){

if(!isLablePage){

html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;

}else{

html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;

}

}



html = &#39;&lt;div
class=&quot;showpageArea&quot;&gt;&lt;span
style=&quot;COLOR: #000;&quot;
class=&quot;showpageOf&quot;&gt; Pages
(&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;



if(thisNum&lt;(postNum-1)){

html += downPageHtml;



}



if(postNum==1) postNum++;

html += &#39;&lt;/div&gt;&#39;;



if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName(&quot;pageArea&quot;);

var blogPager = document.getElementById(&quot;blog-pager&quot;);



if(postNum &lt;= 2){

html =&#39;&#39;;

}



for(var p =0;p&lt; pageArea.length;p++){

pageArea[p].innerHTML = html;

}



if(pageArea&amp;&amp;pageArea.length&gt;0){

html =&#39;&#39;;

}



if(blogPager){

blogPager.innerHTML = html;

}

}



}

&lt;/script&gt;



&lt;script
src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;;
type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

На этом всё!!!

Дата поста в виде календаря

noreply@blogger.com (Вячеслав) — Sat, 01 Aug 2009 16:02:00 +0000

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

Для того, чтобы добавить этот хак на свой блог, нужно

будет сделать несколько процедур:

Откройте настройки блога > Макет > Изменить HTML
Поставьте галочку : Расширить шаблон

Найдите в шаблоне строчку:

<TITLE><data:blog.pageTitle/></TITLE>

Под ней вставьте скрипты:


<SCRIPT
type='text/javascript'>
//<![CDATA[
/*********************************/
/*
http://trick-blog.blogspot.com
*/
/*********************************/
function
date_replace(date) {
var da = date.split('.');
var day = da[1],
mon = da[0], year = da[2];
var month = ['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

Затем найдите код:

]]></b:skin>

Перед ним вставьте стили:




.dateblock {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2tuGRbH3kGIGNyEgD0KPF-IHmqeiTrX6suAhuGKdobklgQrVyfw1CMkanwS_2-z4TVBerBl4RYli-ys9VWJf891Nrlevq0n2KTlNyCNOWMgqIT38yjbEADyZwvwSturYxRyXP4nsMSc/")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Теперь найдите код в шаблоне (Если есть):


.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

Если нет то этот


h2.date-header {
margin:1.5em 0 .5em;
}

Удалите этот фрагмент кода.

Теперь проверьте, что у вас поставлена галочка [ Расширить шаблон виджета ]
Продолжим...

Найдите в шаблоне следующий код:

<data:post.dateHeader/>

Замените на этот:

<DIV class='dateblock'> <SCRIPT>
date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

Ну теперь всё! Этот хак на вашем блоге.

Стильный шаблон 3 колонки

noreply@blogger.com (Вячеслав) — Mon, 27 Jul 2009 11:05:00 +0000

В этом сообщении я предлагаю скачать шаблон(пример расположен ниже).

Этот шаблон интересен следующими качествами:

Установлены виджеты

Архив блога в виде календаря
Облако тегов
Поиск по блогу
Другие виджеты находятся в стандартном виде
На самом верху расположена таблица ссылок
Дизайн очень лёгкий для загрузки

Скачать | Просмотреть

Виджет Фотоальбом Picasa

noreply@blogger.com (Вячеслав) — Wed, 01 Jul 2009 09:02:00 +0000

Данный виджет - фото выставка. Для того, чтобы этом виджетом пользоваться, у вас должен быть зарегистрированный акаунс на сайте http://picasaweb.google.com/.

Чтобы вставить фотоальбом в свой блог нужно выполнить несколько операций:

Зайдите в настройки блога > макет-добавить гаджет > html/javascript
Вставьте код расположенный ниже:

<style>

#picasaStream img {border: 1px solid #000; margin: 0 5px 5px 0;}

</style>

<script
src="http://bloggerbuster-tools.googlecode.com/files/jquery.min.js"
type="text/javascript"></script>





    <script type="text/javascript">

        $j = jQuery.noConflict();

        $j(document).ready(function(){


$j.getJSON("http://picasaweb.google.com/data/feed/base/user/username?kind=photo&thumbsize=72c&access=public&alt=json&callback=?",

                function(data){

                  var thumbCount = 15;(Количество изображений)

                  var smallThumb = 0;

                  var mediumThumb = 2;

                  var largeThumb = 2;

                  var picsCount = data.feed.entry.length - 1;

                  for (var i = picsCount; i > picsCount -
thumbCount; i--) {

                        var pic = data.feed.entry[i];

                        $j("<img/>").attr("src",
pic.media$group.media$thumbnail[smallThumb].url).attr("alt",
pic.summary.$t).appendTo("#picasaStream");

                  }

                  });

                });

      </script>





    <div id="picasaStream"></div>

Не забудьте заменить в коде username(выделено красным) на пользовательское имя акаунта Picasa.

Flash Облако тегов

noreply@blogger.com (Вячеслав) — Sat, 06 Jun 2009 12:26:00 +0000

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

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

Во-первых необходимо добавить Гаджет "Ярлыки" (Labels). Для этого переходим в "Макет" >>> "Элементы страницы" и добавляем видеж "Ярлыки".

Далее из макета Блога переходим к изменению "HTML" шаблона, ставим галочку "Расширить шаблоны виджета"

С помощью поска в браузере находим следующий код:


<b:widget id='Label1' locked='false' title='Ярлыки' type='Label'>

<b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <ul>

    <b:loop values='data:labels' var='label'>

      <li>

        <b:if cond='data:blog.url == data:label.url'>

          <span expr:dir='data:blog.languageDirection'>

            <data:label.name/>

          </span>

        <b:else/>

          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

            <data:label.name/>

          </a>

        </b:if>

        <span dir='ltr'>(<data:label.count/>)</span>

      </li>

    </b:loop>

    </ul>



    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

и заменяем на:


<b:widget id='Label99' locked='false' title='Темы' type='Label'>

  <b:includable id='main'>

    <b:if cond='data:title'>

      <h2><data:title/></h2>

    </b:if>

    <div class='widget-content'>

      <script type="text/javascript" src="http://forum.wafl.ru/files/freeman/swfobject.js"></script>

      <script type="text/javascript">

        var flashvars = {};

        flashvars.mode = "tags";

        flashvars.minFontSize = "8";

        flashvars.maxFontSize = "22";

        flashvars.tcolor = "0x0988ff";

        flashvars.tcolor2 = "0x000000";

        flashvars.hicolor = "0xd95800";

        flashvars.distr = "true";

        flashvars.tspeed = "100";

        flashvars.tagcloud = "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count'><data:label.name/></a></b:loop></tags>";

        var params = {};

        params.wmode = "transparent";

        params.bgcolor = "#333333";

        params.allowscriptaccess = "always";

        var attributes = {};

        attributes.id = "b-cumulus";

        attributes.name = "tagcloud";

        swfobject.embedSWF("http://forum.wafl.ru/files/freeman/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes);

      </script>

      <div id="b-cumulus">

        <a href="http://www.adobe.com/go/getflashplayer">

          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />

        </a>

      </div>

      <b:include name='quickedit'/>

    </div>

  </b:includable>

</b:widget>

Облако тегов можно настроить в соответствии с оформлением вашего блога. Для этого в выше указанном коде можно изменять следующие параметры:

в строке "swfobject.embedSWF("http://FILE_HOST_NAME/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes); " 300 - это ширина виджета в пикселях. 250 - это высота виджета в пикселях.

flashvars.minFontSize = “8“; - минимальный размер шрифта.

flashvars.maxFontSize = “22“; - максимальный размер шрифта.

flashvars.tcolor = “0xffffff“; - цвет самого редкого ярлыка.

flashvars.tcolor2 = “0×0be4f8“; - цвет самого популярного ярлыка. Для остальных ярлыков будет выбран цвет между этими двумя.

flashvars.hicolor = “0xd95800“; - цвет текста при наведении курсора на ярлык.

flashvars.tspeed = “100“; - скорость вращения Flash Облака тегов

//params.wmode = “transparent“; - этот параметр обозначает прозрачный фон.

params.bgcolor = “#333333“; - цвет фона Flash Облака тегов.

Цвета RGB, и их 16-й код

noreply@blogger.com (Вячеслав) — Fri, 01 May 2009 08:21:00 +0000

Это огромная таблица. Чтобы просмотреть её перейдите по ссылке "Читать полностью"(Она расположена в конце этого поста)

Цвета и коды в RGB

Написание	Цвет	RGB	Код для HTML
Snow	Snow	255 250 250	#FFFAFA
GhostWhite	GhostWhite	248 248 255	#F8F8FF
WhiteSmoke	WhiteSmoke	245 245 245	#F5F5F5
Gainsboro	Gainsboro	220 220 220	#DCDCDC
FloralWhite	FloralWhite	255 250 240	#FFFAF0
OldLace	OldLace	253 245 230	#FDF5E6
Linen	Linen	250 240 230	#FAF0E6
AntiqueWhite	AntiqueWhite	250 235 215	#FAEBD7
PapayaWhip	PapayaWhip	255 239 213	#FFEFD5
BlanchedAlmond	BlanchedAlmond	255 235 205	#FFEBCD
Bisque	Bisque	255 228 196	#FFE4C4
PeachPuff	PeachPuff	255 218 185	#FFDAB9
NavajoWhite	NavajoWhite	255 222 173	#FFDEAD
Moccasin	Moccasin	255 228 181	#FFE4B5
Cornsilk	Cornsilk	255 248 220	#FFF8DC
Ivory	Ivory	255 255 240	#FFFFF0
LemonChiffon	LemonChiffon	255 250 205	#FFFACD
Seashell	Seashell	255 245 238	#FFF5EE
Honeydew	Honeydew	240 255 240	#F0FFF0
MintCream	MintCream	245 255 250	#F5FFFA
Azure	Azure	240 255 255	#F0FFFF
AliceBlue	AliceBlue	240 248 255	#F0F8FF
lavender	lavender	230 230 250	#E6E6FA
LavenderBlush	LavenderBlush	255 240 245	#FFF0F5
MistyRose	MistyRose	255 228 225	#FFE4E1
White	White	255 255 255	#FFFFFF
Black	Black	0 0 0	#000000
DarkSlateGray	DarkSlateGray	47 79 79	#2F4F4F
DimGrey	DimGrey	105 105 105	#696969
SlateGrey	SlateGrey	112 128 144	#708090
LightSlateGray	LightSlateGray	119 136 153	#778899
Grey	Grey	190 190 190	#BEBEBE
LightGray	LightGray	211 211 211	#D3D3D3
MidnightBlue	MidnightBlue	25 25 112	#191970
NavyBlue	NavyBlue	0 0 128	#000080
CornflowerBlue	CornflowerBlue	100 149 237	#6495ED
DarkSlateBlue	DarkSlateBlue	72 61 139	#483D8B
SlateBlue	SlateBlue	106 90 205	#6A5ACD
MediumSlateBlue	MediumSlateBlue	123 104 238	#7B68EE
LightSlateBlue	LightSlateBlue	132 112 255	#8470FF
MediumBlue	MediumBlue	0 0 205	#0000CD
RoyalBlue	RoyalBlue	65 105 225	#4169E1
Blue	Blue	0 0 255	#0000FF
DodgerBlue	DodgerBlue	30 144 255	#1E90FF
DeepSkyBlue	DeepSkyBlue	0 191 255	#00BFFF
SkyBlue	SkyBlue	135 206 235	#87CEEB
LightSkyBlue	LightSkyBlue	135 206 250	#87CEFA
SteelBlue	SteelBlue	70 130 180	#4682B4
LightSteelBlue	LightSteelBlue	176 196 222	#B0C4DE
LightBlue	LightBlue	173 216 230	#ADD8E6
PowderBlue	PowderBlue	176 224 230	#B0E0E6
PaleTurquoise	PaleTurquoise	175 238 238	#AFEEEE
DarkTurquoise	DarkTurquoise	0 206 209	#00CED1
MediumTurquoise	MediumTurquoise	72 209 204	#48D1CC
Turquoise	Turquoise	64 224 208	#40E0D0
Cyan	Cyan	0 255 255	#00FFFF
LightCyan	LightCyan	224 255 255	#E0FFFF
CadetBlue	CadetBlue	95 158 160	#5F9EA0
MediumAquamarine	MediumAquamarine	102 205 170	#66CDAA
Aquamarine	Aquamarine	127 255 212	#7FFFD4
DarkGreen	DarkGreen	0 100 0	#006400
DarkOliveGreen	DarkOliveGreen	85 107 47	#556B2F
DarkSeaGreen	DarkSeaGreen	143 188 143	#8FBC8F
SeaGreen	SeaGreen	46 139 87	#2E8B57
MediumSeaGreen	MediumSeaGreen	60 179 113	#3CB371
LightSeaGreen	LightSeaGreen	32 178 170	#20B2AA
PaleGreen	PaleGreen	152 251 152	#98FB98
SpringGreen	SpringGreen	0 255 127	#00FF7F
LawnGreen	LawnGreen	124 252 0	#7CFC00
Green	Green	0 255 0	#00FF00
Chartreuse	Chartreuse	127 255 0	#7FFF00
MedSpringGreen	MedSpringGreen	0 250 154	#00FA9A
GreenYellow	GreenYellow	173 255 47	#ADFF2F
LimeGreen	LimeGreen	50 205 50	#32CD32
YellowGreen	YellowGreen	154 205 50	#9ACD32
ForestGreen	ForestGreen	34 139 34	#228B22
OliveDrab	OliveDrab	107 142 35	#6B8E23
DarkKhaki	DarkKhaki	189 183 107	#BDB76B
PaleGoldenrod	PaleGoldenrod	238 232 170	#EEE8AA
LtGoldenrodYello	LtGoldenrodYello	250 250 210	#FAFAD2
LightYellow	LightYellow	255 255 224	#FFFFE0
Yellow	Yellow	255 255 0	#FFFF00
Gold	Gold	255 215 0	#FFD700
LightGoldenrod	LightGoldenrod	238 221 130	#EEDD82
goldenrod	goldenrod	218 165 32	#DAA520
DarkGoldenrod	DarkGoldenrod	184 134 11	#B8860B
RosyBrown	RosyBrown	188 143 143	#BC8F8F
IndianRed	IndianRed	205 92 92	#CD5C5C
SaddleBrown	SaddleBrown	139 69 19	#8B4513
Sienna	Sienna	160 82 45	#A0522D
Peru	Peru	205 133 63	#CD853F
Burlywood	Burlywood	222 184 135	#DEB887
Beige	Beige	245 245 220	#F5F5DC
Wheat	Wheat	245 222 179	#F5DEB3
SandyBrown	SandyBrown	244 164 96	#F4A460
Tan	Tan	210 180 140	#D2B48C
Chocolate	Chocolate	210 105 30	#D2691E
Firebrick	Firebrick	178 34 34	#B22222
Brown	Brown	165 42 42	#A52A2A
DarkSalmon	DarkSalmon	233 150 122	#E9967A
Salmon	Salmon	250 128 114	#FA8072
LightSalmon	LightSalmon	255 160 122	#FFA07A
Orange	Orange	255 165 0	#FFA500
DarkOrange	DarkOrange	255 140 0	#FF8C00
Coral	Coral	255 127 80	#FF7F50
LightCoral	LightCoral	240 128 128	#F08080
Tomato	Tomato	255 99 71	#FF6347
OrangeRed	OrangeRed	255 69 0	#FF4500
Red	Red	255 0 0	#FF0000
HotPink	HotPink	255 105 180	#FF69B4
DeepPink	DeepPink	255 20 147	#FF1493
Pink	Pink	255 192 203	#FFC0CB
LightPink	LightPink	255 182 193	#FFB6C1
PaleVioletRed	PaleVioletRed	219 112 147	#DB7093
Maroon	Maroon	176 48 96	#B03060
MediumVioletRed	MediumVioletRed	199 21 133	#C71585
VioletRed	VioletRed	208 32 144	#D02090
Magenta	Magenta	255 0 255	#FF00FF
Violet	Violet	238 130 238	#EE82EE
Plum	Plum	221 160 221	#DDA0DD
Orchid	Orchid	218 112 214	#DA70D6
MediumOrchid	MediumOrchid	186 85 211	#BA55D3
DarkOrchid	DarkOrchid	153 50 204	#9932CC
DarkViolet	DarkViolet	148 0 211	#9400D3
BlueViolet	BlueViolet	138 43 226	#8A2BE2
Purple	Purple	160 32 240	#A020F0
MediumPurple	MediumPurple	147 112 219	#9370DB
Thistle	Thistle	216 191 216	#D8BFD8
Snow1	Snow1	255 250 250	#FFFAFA
Snow2	Snow2	238 233 233	#EEE9E9
Snow3	Snow3	205 201 201	#CDC9C9
Snow4	Snow4	139 137 137	#8B8989
Seashell1	Seashell1	255 245 238	#FFF5EE
Seashell2	Seashell2	238 229 222	#EEE5DE
Seashell3	Seashell3	205 197 191	#CDC5BF
Seashell4	Seashell4	139 134 130	#8B8682
AntiqueWhite1	AntiqueWhite1	255 239 219	#FFEFDB
AntiqueWhite2	AntiqueWhite2	238 223 204	#EEDFCC
AntiqueWhite3	AntiqueWhite3	205 192 176	#CDC0B0
AntiqueWhite4	AntiqueWhite4	139 131 120	#8B8378
Bisque1	Bisque1	255 228 196	#FFE4C4
Bisque2	Bisque2	238 213 183	#EED5B7
Bisque3	Bisque3	205 183 158	#CDB79E
Bisque4	Bisque4	139 125 107	#8B7D6B
PeachPuff1	PeachPuff1	255 218 185	#FFDAB9
PeachPuff2	PeachPuff2	238 203 173	#EECBAD
PeachPuff3	PeachPuff3	205 175 149	#CDAF95
PeachPuff4	PeachPuff4	139 119 101	#8B7765
NavajoWhite1	NavajoWhite1	255 222 173	#FFDEAD
NavajoWhite2	NavajoWhite2	238 207 161	#EECFA1
NavajoWhite3	NavajoWhite3	205 179 139	#CDB38B
NavajoWhite4	NavajoWhite4	139 121 94	#8B795E
LemonChiffon1	LemonChiffon1	255 250 205	#FFFACD
LemonChiffon2	LemonChiffon2	238 233 191	#EEE9BF
LemonChiffon3	LemonChiffon3	205 201 165	#CDC9A5
LemonChiffon4	LemonChiffon4	139 137 112	#8B8970
Cornsilk1	Cornsilk1	255 248 220	#FFF8DC
Cornsilk2	Cornsilk2	238 232 205	#EEE8CD
Cornsilk3	Cornsilk3	205 200 177	#CDC8B1
Cornsilk4	Cornsilk4	139 136 120	#8B8878
vory1	Ivory1	255 255 240	#FFFFF0
vory2	Ivory2	238 238 224	#EEEEE0
Ivory3	Ivory3	205 205 193	#CDCDC1
Ivory4	Ivory4	139 139 131	#8B8B83
Honeydew1	Honeydew1	240 255 240	#F0FFF0
Honeydew2	Honeydew2	224 238 224	#E0EEE0
Honeydew3	Honeydew3	193 205 193	#C1CDC1
Honeydew4	Honeydew4	131 139 131	#838B83
LavenderBlush1	LavenderBlush1	255 240 245	#FFF0F5
LavenderBlush2	LavenderBlush2	238 224 229	#EEE0E5
LavenderBlush3	LavenderBlush3	205 193 197	#CDC1C5
LavenderBlush4	LavenderBlush4	139 131 134	#8B8386
MistyRose1	MistyRose1	255 228 225	#FFE4E1
MistyRose2	MistyRose2	238 213 210	#EED5D2
MistyRose3	MistyRose3	205 183 181	#CDB7B5
MistyRose4	MistyRose4	139 125 123	#8B7D7B
Azure1	Azure1	240 255 255	#F0FFFF
Azure2	Azure2	224 238 238	#E0EEEE
Azure3	Azure3	193 205 205	#C1CDCD
Azure4	Azure4	131 139 139	#838B8B
SlateBlue1	SlateBlue1	131 111 255	#836FFF
SlateBlue2	SlateBlue2	122 103 238	#7A67EE
SlateBlue3	SlateBlue3	105 89 205	#6959CD
SlateBlue4	SlateBlue4	71 60 139	#473C8B
RoyalBlue1	RoyalBlue1	72 118 255	#4876FF
RoyalBlue2	RoyalBlue2	67 110 238	#436EEE
RoyalBlue3	RoyalBlue3	58 95 205	#3A5FCD
RoyalBlue4	RoyalBlue4	39 64 139	#27408B
Blue1	Blue1	0 0 255	#0000FF
Blue2	Blue2	0 0 238	#0000EE
Blue3	Blue3	0 0 205	#0000CD
Blue4	Blue4	0 0 139	#00008B
DodgerBlue1	DodgerBlue1	30 144 255	#1E90FF
DodgerBlue2	DodgerBlue2	28 134 238	#1C86EE
DodgerBlue3	DodgerBlue3	24 116 205	#1874CD
DodgerBlue4	DodgerBlue4	16 78 139	#104E8B
SteelBlue1	SteelBlue1	99 184 255	#63B8FF
SteelBlue2	SteelBlue2	92 172 238	#5CACEE
SteelBlue3	SteelBlue3	79 148 205	#4F94CD
SteelBlue4	SteelBlue4	54 100 139	#36648B
DeepSkyBlue1	DeepSkyBlue1	0 191 255	#00BFFF
DeepSkyBlue2	DeepSkyBlue2	0 178 238	#00B2EE
DeepSkyBlue3	DeepSkyBlue3	0 154 205	#009ACD
DeepSkyBlue4	DeepSkyBlue4	0 104 139	#00688B
SkyBlue1	SkyBlue1	135 206 255	#87CEFF
SkyBlue2	SkyBlue2	126 192 238	#7EC0EE
SkyBlue3	SkyBlue3	108 166 205	#6CA6CD
SkyBlue4	SkyBlue4	74 112 139	#4A708B
LightSkyBlue1	LightSkyBlue1	176 226 255	#B0E2FF
LightSkyBlue2	LightSkyBlue2	164 211 238	#A4D3EE
LightSkyBlue3	LightSkyBlue3	141 182 205	#8DB6CD
LightSkyBlue4	LightSkyBlue4	96 123 139	#607B8B
SlateGray1	SlateGray1	198 226 255	#C6E2FF
SlateGray2	SlateGray2	185 211 238	#B9D3EE
SlateGray3	SlateGray3	159 182 205	#9FB6CD
SlateGray4	SlateGray4	108 123 139	#6C7B8B
LightSteelBlue1	LightSteelBlue1	202 225 255	#CAE1FF
LightSteelBlue2	LightSteelBlue2	188 210 238	#BCD2EE
LightSteelBlue3	LightSteelBlue3	162 181 205	#A2B5CD
LightSteelBlue4	LightSteelBlue4	110 123 139	#6E7B8B
LightBlue1	LightBlue1	191 239 255	#BFEFFF
LightBlue2	LightBlue2	178 223 238	#B2DFEE
LightBlue3	LightBlue3	154 192 205	#9AC0CD
LightBlue4	LightBlue4	104 131 139	#68838B
LightCyan1	LightCyan1	224 255 255	#E0FFFF
LightCyan2	LightCyan2	209 238 238	#D1EEEE
LightCyan3	LightCyan3	180 205 205	#B4CDCD
LightCyan4	LightCyan4	122 139 139	#7A8B8B
PaleTurquoise1	PaleTurquoise1	187 255 255	#BBFFFF
PaleTurquoise2	PaleTurquoise2	174 238 238	#AEEEEE
PaleTurquoise3	PaleTurquoise3	150 205 205	#96CDCD
PaleTurquoise4	PaleTurquoise4	102 139 139	#668B8B
CadetBlue1	CadetBlue1	152 245 255	#98F5FF
CadetBlue2	CadetBlue2	142 229 238	#8EE5EE
CadetBlue3	CadetBlue3	122 197 205	#7AC5CD
CadetBlue4	CadetBlue4	83 134 139	#53868B
Turquoise1	Turquoise1	0 245 255	#00F5FF
Turquoise2	Turquoise2	0 229 238	#00E5EE
Turquoise3	Turquoise3	0 197 205	#00C5CD
Turquoise4	Turquoise4	0 134 139	#00868B
Cyan1	Cyan1	0 255 255	#00FFFF
Cyan2	Cyan2	0 238 238	#00EEEE
Cyan3	Cyan3	0 205 205	#00CDCD
Cyan4	Cyan4	0 139 139	#008B8B
DarkSlateGray1	DarkSlateGray1	151 255 255	#97FFFF
DarkSlateGray2	DarkSlateGray2	141 238 238	#8DEEEE
DarkSlateGray3	DarkSlateGray3	121 205 205	#79CDCD
DarkSlateGray4	DarkSlateGray4	82 139 139	#528B8B
Aquamarine1	Aquamarine1	127 255 212	#7FFFD4
Aquamarine2	Aquamarine2	118 238 198	#76EEC6
Aquamarine3	Aquamarine3	102 205 170	#66CDAA
Aquamarine4	Aquamarine4	69 139 116	#458B74
DarkSeaGreen1	DarkSeaGreen1	193 255 193	#C1FFC1
DarkSeaGreen2	DarkSeaGreen2	180 238 180	#B4EEB4
DarkSeaGreen3	DarkSeaGreen3	155 205 155	#9BCD9B
DarkSeaGreen4	DarkSeaGreen4	105 139 105	#698B69
SeaGreen1	SeaGreen1	84 255 159	#54FF9F
SeaGreen2	SeaGreen2	78 238 148	#4EEE94
SeaGreen3	SeaGreen3	67 205 128	#43CD80
SeaGreen4	SeaGreen4	46 139 87	#2E8B57
PaleGreen1	PaleGreen1	154 255 154	#9AFF9A
PaleGreen2	PaleGreen2	144 238 144	#90EE90
PaleGreen3	PaleGreen3	124 205 124	#7CCD7C
PaleGreen4	PaleGreen4	84 139 84	#548B54
SpringGreen1	SpringGreen1	0 255 127	#00FF7F
SpringGreen2	SpringGreen2	0 238 118	#00EE76
SpringGreen3	SpringGreen3	0 205 102	#00CD66
SpringGreen4	SpringGreen4	0 139 69	#008B45
Green1	Green1	0 255 0	#00FF00
Green2	Green2	0 238 0	#00EE00
Green3	Green3	0 205 0	#00CD00
Green4	Green4	0 139 0	#008B00
Chartreuse1	Chartreuse1	127 255 0	#7FFF00
Chartreuse2	Chartreuse2	118 238 0	#76EE00
Chartreuse3	Chartreuse3	102 205 0	#66CD00
Chartreuse4	Chartreuse4	69 139 0	#458B00
OliveDrab1	OliveDrab1	192 255 62	#C0FF3E
OliveDrab2	OliveDrab2	179 238 58	#B3EE3A
OliveDrab3	OliveDrab3	154 205 50	#9ACD32
OliveDrab4	OliveDrab4	105 139 34	#698B22
DarkOliveGreen1	DarkOliveGreen1	202 255 112	#CAFF70
DarkOliveGreen2	DarkOliveGreen2	188 238 104	#BCEE68
DarkOliveGreen3	DarkOliveGreen3	162 205 90	#A2CD5A
DarkOliveGreen4	DarkOliveGreen4	110 139 61	#6E8B3D
Khaki1	Khaki1	255 246 143	#FFF68F
Khaki2	Khaki2	238 230 133	#EEE685
Khaki3	Khaki3	205 198 115	#CDC673
Khaki4	Khaki4	139 134 78	#8B864E
LightGoldenrod1	LightGoldenrod1	255 236 139	#FFEC8B
LightGoldenrod2	LightGoldenrod2	238 220 130	#EEDC82
LightGoldenrod3	LightGoldenrod3	205 190 112	#CDBE70
LightGoldenrod4	LightGoldenrod4	139 129 76	#8B814C
LightYellow1	LightYellow1	255 255 224	#FFFFE0
LightYellow2	LightYellow2	238 238 209	#EEEED1
LightYellow3	LightYellow3	205 205 180	#CDCDB4
LightYellow4	LightYellow4	139 139 122	#8B8B7A
Yellow1	Yellow1	255 255 0	#FFFF00
Yellow2	Yellow2	238 238 0	#EEEE00
Yellow3	Yellow3	205 205 0	#CDCD00
Yellow4	Yellow4	139 139 0	#8B8B00
Gold1	Gold1	255 215 0	#FFD700
Gold2	Gold2	238 201 0	#EEC900
Gold3	Gold3	205 173 0	#CDAD00
Gold4	Gold4	139 117 0	#8B7500
Goldenrod1	Goldenrod1	255 193 37	#FFC125
Goldenrod2	Goldenrod2	238 180 34	#EEB422
Goldenrod3	Goldenrod3	205 155 29	#CD9B1D
Goldenrod4	Goldenrod4	139 105 20	#8B6914
DarkGoldenrod1	DarkGoldenrod1	255 185 15	#FFB90F
DarkGoldenrod2	DarkGoldenrod2	238 173 14	#EEAD0E
DarkGoldenrod3	DarkGoldenrod3	205 149 12	#CD950C
DarkGoldenrod4	DarkGoldenrod4	139 101 8	#8B658B
RosyBrown1	RosyBrown1	255 193 193	#FFC1C1
RosyBrown2	RosyBrown2	238 180 180	#EEB4B4
RosyBrown3	RosyBrown3	205 155 155	#CD9B9B
RosyBrown4	RosyBrown4	139 105 105	#8B6969
IndianRed1	IndianRed1	255 106 106	#FF6A6A
IndianRed2	IndianRed2	238 99 99	#EE6363
IndianRed3	IndianRed3	205 85 85	#CD5555
IndianRed4	IndianRed4	139 58 58	#8B3A3A
Sienna1	Sienna1	255 130 71	#FF8247
Sienna2	Sienna2	238 121 66	#EE7942
Sienna3	Sienna3	205 104 57	#CD6839
Sienna4	Sienna4	139 71 38	#8B4726
Burlywood1	Burlywood1	255 211 155	#FFD39B
Burlywood2	Burlywood2	238 197 145	#EEC591
Burlywood3	Burlywood3	205 170 125	#CDAA7D
Burlywood4	Burlywood4	139 115 85	#8B7355
Wheat1	Wheat1	255 231 186	#FFE7BA
Wheat2	Wheat2	238 216 174	#EED8AE
Wheat3	Wheat3	205 186 150	#CDBA96
Wheat4	Wheat4	139 126 102	#8B7E66
Tan1	Tan1	255 165 79	#FFA54F
Tan2	Tan2	238 154 73	#EE9A49
Tan3	Tan3	205 133 63	#CD853F
Tan4	Tan4	139 90 43	#8B5A2B
Chocolate1	Chocolate1	255 127 36	#FF7F24
Chocolate2	Chocolate2	238 118 33	#EE7621
Chocolate3	Chocolate3	205 102 29	#CD661D
Chocolate4	Chocolate4	139 69 19	#8B4513
Firebrick1	Firebrick1	255 48 48	#FF3030
Firebrick2	Firebrick2	238 44 44	#EE2C2C
Firebrick3	Firebrick3	205 38 38	#CD2626
Firebrick4	Firebrick4	139 26 26	#8B1A1A
Brown1	Brown1	255 64 64	#FF4040
Brown2	Brown2	238 59 59	#EE3B3B
Brown3	Brown3	205 51 51	#CD3333
Brown4	Brown4	139 35 35	#8B2323
Salmon1	Salmon1	255 140 105	#FF8C69
Salmon2	Salmon2	238 130 98	#EE8262
Salmon3	Salmon3	205 112 84	#CD7054
Salmon4	Salmon4	139 76 57	#8B4C39
LightSalmon1	LightSalmon1	255 160 122	#FFA07A
LightSalmon2	LightSalmon2	238 149 114	#EE9572
LightSalmon3	LightSalmon3	205 129 98	#CD8162
LightSalmon4	LightSalmon4	139 87 66	#8B5742
Orange1	Orange1	255 165 0	#FFA500
Orange2	Orange2	238 154 0	#EE9A00
Orange3	Orange3	205 133 0	#CD8500
Orange4	Orange4	139 90 0	#8B5A00
DarkOrange1	DarkOrange1	255 127 0	#FF7F00
DarkOrange2	DarkOrange2	238 118 0	#EE7600
DarkOrange3	DarkOrange3	205 102 0	#CD6600
DarkOrange4	DarkOrange4	139 69 0	#8B4500
Coral1	Coral1	255 114 86	#FF7256
Coral2	Coral2	238 106 80	#EE6A50
Coral3	Coral3	205 91 69	#CD5B45
Coral4	Coral4	139 62 47	#8B3E2F
Tomato1	Tomato1	255 99 71	#FF6347
Tomato2	Tomato2	238 92 66	#EE5C42
Tomato3	Tomato3	205 79 57	#CD4F39
Tomato4	Tomato4	139 54 38	#8B3626
OrangeRed1	OrangeRed1	255 69 0	#FF4500
OrangeRed2	OrangeRed2	238 64 0	#EE4000
OrangeRed3	OrangeRed3	205 55 0	#CD3700
OrangeRed4	OrangeRed4	139 37 0	#8B2500
Red1	Red1	255 0 0	#FF0000
Red2	Red2	238 0 0	#EE0000
Red3	Red3	205 0 0	#CD0000
Red4	Red4	139 0 0	#8B0000
DeepPink1	DeepPink1	255 20 147	#FF1493
DeepPink2	DeepPink2	238 18 137	#EE1289
DeepPink3	DeepPink3	205 16 118	#CD1076
DeepPink4	DeepPink4	139 10 80	#8B0A50
HotPink1	HotPink1	255 110 180	#FF6EB4
HotPink2	HotPink2	238 106 167	#EE6AA7
HotPink3	HotPink3	205 96 144	#CD6090
HotPink4	HotPink4	139 58 98	#8B3A62
Pink1	Pink1	255 181 197	#FFB5C5
Pink2	Pink2	238 169 184	#EEA9B8
Pink3	Pink3	205 145 158	#CD919E
Pink4	Pink4	139 99 108	#8B636C
LightPink1	LightPink1	255 174 185	#FFAEB9
LightPink2	LightPink2	238 162 173	#EEA2AD
LightPink3	LightPink3	205 140 149	#CD8C95
LightPink4	LightPink4	139 95 101	#8B5F65
PaleVioletRed1	PaleVioletRed1	255 130 171	#FF82AB
PaleVioletRed2	PaleVioletRed2	238 121 159	#EE799F
PaleVioletRed3	PaleVioletRed3	205 104 137	#CD6889
PaleVioletRed4	PaleVioletRed4	139 71 93	#8B475D
Maroon1	Maroon1	255 52 179	#FF34B3
Maroon2	Maroon2	238 48 167	#EE30A7
Maroon3	Maroon3	205 41 144	#CD2990
Maroon4	Maroon4	139 28 98	#8B1C62
VioletRed1	VioletRed1	255 62 150	#FF3E96
VioletRed2	VioletRed2	238 58 140	#EE3A8C
VioletRed3	VioletRed3	205 50 120	#CD3278
VioletRed4	VioletRed4	139 34 82	#8B2252
Magenta1	Magenta1	255 0 255	#FF00FF
Magenta2	Magenta2	238 0 238	#EE00EE
Magenta3	Magenta3	205 0 205	#CD00CD
Magenta4	Magenta4	139 0 139	#8B008B
Orchid1	Orchid1	255 131 250	#FF83FA
Orchid2	Orchid2	238 122 233	#EE7AE9
Orchid3	Orchid3	205 105 201	#CD69C9
Orchid4	Orchid4	139 71 137	#8B4789
Plum1	Plum1	255 187 255	#FFBBFF
Plum2	Plum2	238 174 238	#EEAEEE
Plum3	Plum3	205 150 205	#CD96CD
Plum4	Plum4	139 102 139	#8B668B
MediumOrchid1	MediumOrchid1	224 102 255	#E066FF
MediumOrchid2	MediumOrchid2	209 95 238	#D15FEE
MediumOrchid3	MediumOrchid3	180 82 205	#B452CD
MediumOrchid4	MediumOrchid4	122 55 139	#7A378B
DarkOrchid1	DarkOrchid1	191 62 255	#BF3EFF
DarkOrchid2	DarkOrchid2	178 58 238	#B23AEE
DarkOrchid3	DarkOrchid3	154 50 205	#9A32CD
DarkOrchid4	DarkOrchid4	104 34 139	#68228B
Purple1	Purple1	155 48 255	#9B30FF
Purple2	Purple2	145 44 238	#912CEE
Purple3	Purple3	125 38 205	#7D26CD
Purple4	Purple4	85 26 139	#551A8B
MediumPurple1	MediumPurple1	171 130 255	#AB82FF
MediumPurple2	MediumPurple2	159 121 238	#9F79EE
MediumPurple3	MediumPurple3	137 104 205	#8968CD
MediumPurple4	MediumPurple4	93 71 139	#5D478B
Thistle1	Thistle1	255 225 255	#FFE1FF
Thistle2	Thistle2	238 210 238	#EED2EE
Thistle3	Thistle3	205 181 205	#CDB5CD
Thistle4	Thistle4	139 123 139	#8B7B8B
grey11	grey11	28 28 28	#1C1C1C
grey21	grey21	54 54 54	#363636
grey31	grey31	79 79 79	#4F4F4F
grey41	grey41	105 105 105	#696969
grey51	grey51	130 130 130	#828282
grey61	grey61	156 156 156	#9C9C9C
grey71	grey71	181 181 181	#B5B5B5
gray81	gray81	207 207 207	#CFCFCF
gray91	gray91	232 232 232	#E8E8E8
DarkGrey	DarkGrey	169 169 169	#A9A9A9
DarkBlue	DarkBlue	0 0 139	#00008B
DarkCyan	DarkCyan	0 139 139	#008B8B
DarkMagenta	DarkMagenta	139 0 139	#8B008B
DarkRed	DarkRed	139 0 0	#8B0000
LightGreen	LightGreen	144 238 144	#90EE90

FAQ для Прокофевны

noreply@blogger.com (Вячеслав) — Sun, 26 Apr 2009 08:11:00 +0000

Как я изменяю стандартный шаблон под свои нужды

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

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

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

Это намного дольше, но "навечно".

Рассказать вам Прокофевна всё, как я подстраивал шаблон под себя не могу, это не будет иметь смысла. Для моих глобальных объяснений нужно знать что такое html, css, javascript и знать как с ними всеми работать. Подстройка шаблона в плане дизайна, это огромная работа с css и html кодом; в плане быстроты, техники исполнения - это работа с javascript.

Те вещи которые легки для понимания и которые можно сделать не зная html и... , я расскажу.

У вас был вопрос : "Как выделить тело поска определённым цветом".

Опять сталкиваясь с шаблонами стандартными - это процедура подходит ко всем, но зная, что у вас шаблон переделан, то будет это исполняться по другому.

У стандартных нужно добавить стили перед тегом


.post {
background:#FFFFFF;
padding:1em;
}

Но в вашем блоге Эксперимент, нужно добавлять другие стили:


.posts {
background:#fffff;
padding-left:0.5em;
padding-right:0.5em;
}

(#fffff - это шеснадцатеричный код цвета, его можно поменять. См. RGB-таблицу цветов)

Чтобы постоянно не испытывать дискомфорт из-за шаблонов виджета, я предлагаю вам скачать шаблон, который специально для вас создал:
Этот шаблон многофункционален, примерно схожен с дизайном вашего блога Эксперимент,
имеет облако тегов, архив блога в виде календаря, индикатор загрузки, установлено пост-резюме (читать полностью), тело поста мало изменено, подлежит исправлению, я не ставлю на свой блог или сайт ссылки, этот шаблон имеет резиновый дизайн(сделан на основе Yahoo сетки См. сайт yahoo сетки). Некоторые собственные ваши виджеты вы можете добавить.

Скачать шаблон Просмотреть

Как пользоваться некоторыми функциями этого шаблона:

Пост-резюме(Читать полностью...)
Если вы хотите, чтобы на главной странице была видна только часть какого то сообщения, а не полностью, нужно ту часть которую нужно будет скрыть поместить между тегами
```
<div class="fullpost">.................................................</div>
```
При нажатии на ссылку "Читать полностью...", будет отображаться полное сообщение.
Если вы не ставили эти теги в сообщение вообще, то ссылка "Читать полностью..." будет находиться в конце поста.
Архив блога в виде календаря
Чтобы этот виджет работал нужно сделать следующее:
Зайдите в настройки данного виджета, выберите стиль: список
обновлять: каждый месяц.
Всё! Этот гаджет установлен. Сразу под календарём будет список
постов, которые были созданы в определённый месяц.
Если у вас такие же настройки были до этого, то не обязательно делать эту процедуру.
Облако тегов - его изменять не надо. Если вы удалите этот виджет, то облако тегов придётся по новой устанавливать. Копия виджетов здесь не поможет.
Резиновый дизайн - его делал не я. Изменять не стоит.

Добавить индикатор загрузки страницы(spinner)

noreply@blogger.com (Вячеслав) — Fri, 24 Apr 2009 17:10:00 +0000

Для того, чтобы добавить индикатор загрузки, много усилий не потребуется:

найдите тег

<body>

(в своём шаблоне виджета) и замените на код расположенный ниже:



<body onLoad='init()'>
<span class='spinner1' id='loading' style='position:absolute;
text-align:center; top:10px; right: 10px;'><img border='0'
class='sp1'
src='http://image-host.com/images/ljgx70fz3uyvr1jkfxi.gif'/>Идёт
загрузка...</span>
<script>
var ld=(document.all);




var ns4=document.layers;
var ns6=document.getElementById&amp;&amp;!document.all;
var ie4=document.all;




if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;




function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>

Теперь индикатор загрузки добавлен, но с моего альбома хоста и моего фона, поэтому вы можете(по собственному желанию) заменить изобрежение spinner (код выделен оранжевым) на своё.

Я эту процедуру делал через сайт, ссылка на который находится ниже.

Скачать индикатор загрузки
На этом сайте можно задать цвет фона индикатора, а затем цвет области прокрутки. А потом скачать нужный вам spinner.

Блог на пять звёзд

noreply@blogger.com (Вячеслав) — Thu, 09 Apr 2009 14:55:00 +0000

Для любого блоггера важна обратная связь с читателями. Как вы понимаете, в этой статье я буду писать о том, как сделал после каждого сообщения "опрос" в виде пяти звёзд(пример на изображении снизу). Я с первого дня ведения блога мечтал иметь такую мелочь чтобы иметь обратную связь с читателями блога. Чтобы получить пятизвёздочный опрос, нужно сделать следующее:

Зайдите на сайт http://www.outbrain.com/
Найдите слева боковую панель, на ней вы увидите множество кнопок, вам понадобится кнопка, на которой изображён значок блоггера. Вы должны навести курсор и кликнуть по нему(Пример на изображении спизу)

После нажатия кнопки найдите строчку "STEP 2: Install widget ", рядом с ней есть поле списка, выберите свой язык. Затем надмите на кнопку Get Widget Now (Пример изображён справа)

Затем добавьте виджет в свой блог (блог можно выбрать). Расположение гаджета который будет автомотически создан роли не играет. Названия может не быть.

Жмём добавить виджет. После этого на вашем блоге есть пятизвёздочный тип голосования.

Кнопки закладок в блоге

noreply@blogger.com (Вячеслав) — Tue, 31 Mar 2009 13:42:00 +0000

Социальные закладки - это один из элементов новомодной концепции Web 2.0
По сути, это сервисы, которые предлагают хранить закладки на интересные интернет-страницы не на локальном компьютере, а в сети. И не просто хранить, а и обмениваться ими. Все в точности с постулатами: "контент должен создаваться самими пользователями" и "пользователи должны объединятся в социальные сети".
Чем это выгодно блоггеру?

Вы бесплатно получаете ссылки на ваш блог с других сайтов. И чем лучше вы пишите, тем больше будет ссылок. А это всегда хорошо.
Но для того, чтобы читатели сохранили закладку на ваш блог на одном из сервисов социальных закладок, необходимо одно из двух: или предустановленный плагин в браузере читателя (а вы никогда не узнаете, есть он или нет), или специальная панель с кнопками в вашем блоге. Я предлагаю сделать панель. Для этого необходимо:

Зайдите на свой блог, затем в настройки, форматирование, шаблон сообщения:
Туда вы должны вставить следующий код:

<script src="http://odnaknopka.ru/ok3.js"
type="text/javascript"></script>

Затем надо сохранить настройки.

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

Гаджет - перевести страницу

noreply@blogger.com (Вячеслав) — Mon, 30 Mar 2009 07:54:00 +0000

Сейчас я расскажу, как я сделал гаджет "Перевести страницу".

Многие люди, которые ищут определённую информацию, чаще всего редкую, попадают на сайты, где язык им встречается неизвестный. Со мной такое часто встречается, так как больше всего ценной информации (с моей точки зрения) находится на Американских сайтах.

Не на всех сайтах есть гаджет транслитерации, но он сильно выручает.

Для того, чтобы его установить нужно:

Зайдите в настройки блога, макет, добавить гаджет, выберите HTML/Javascript. Озаглавить можно как хотите. В текстовую область добавьте следующий код.


<style>
.google_translate img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

.google_translate:hover img {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

.google_translatextra:hover img {

filter:alpha(opacity=0.30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

</style>

<div>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="English"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en');
return false;"><img alt="English" border="0"
align="absbottom" title="English" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5-4BtB0R-Ik1HRCjqGEOLeIwJCMQg2ohQgp3Q_ZLXO9Y15XZ-WdlqPK6iqUxU5FHztiSXiMd_pu6JXmjMhrWY1JMNbalUWMkYnmi71mYrzeE5AkvwfBE44Ora_7_cyzf4sb9CslLfhCE/?imgmax=800"
style="cursor: pointer;margin-right:13px"
width="24"/></a>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="French"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en');
return false;"><img alt="French" border="0"
align="absbottom" title="French" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiil6nzQRnKXJU_hT1Wq0dF-xDqc0kBpFtmK12HBgdJd-aFG9bPnEb1-hWQz6w4vVZvekVdVHrGQNErS0N6ACp5jPNMbsv1h-KdiJPQcOiy36vYgXBKBHmFjUD4koZe0wHY9z1jrnyJg8/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="German"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en');
return false;"><img alt="German" border="0"
align="absbottom" title="German" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7tzWFT8gDNXkzyOgwdhfnz04WKunVqQl7g87XO3TFmh94TKBNsKcLNpoEP6TR8Hvd3p-ZuPt1SY4ifo5UumqPhJowRvaCyBr0IrnANnUkYFV4THWjXk6t1y5p8hLjJz0Vgx_id061EcSz/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="Spain"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en');
return false;"><img alt="Spain" border="0"
align="absbottom" title="Spain" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1G2LQNOIXvlmohoxhSgHzoneI7Hs7kCAlcfqGvXujSIUdb3VKeno_WxxqQDHJTtuthY4tYGDNQAKTsLENo6mA-mtJ0jGojJZHWBcu1-RXhpzAdZNkEYQ9JwAvoPhpYve3W4o7HtW3Evsh/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="Italian"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en');
return false;"><img alt="Italian" border="0"
align="absbottom" title="Italian" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtMJDMMQ1gipaji9m-Gbq8qIZLUUnAaIVIynuyXRa_ZljN4-rPsFnP7iPKYbm8N-R9Nqu3P6p7BhMSF58UkHU-uJTJnL5OI-_6B79aY0IP2hyyWmMMQ8nK3Z0Z3_r_xhMXXxyUwxYEYTw/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="Dutch"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en');
return false;"><img alt="Dutch" border="0"
align="absbottom" title="Dutch" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMNIn6V5ld3FHC6Fyb0IpGbuhPhZ-ZdG1mplDzXKD9dQ15Hbwoe9KH1YyHcKcINtL0Xu2P4yykBv6A_dECr-wtgmzDPU_-_BrNvDjbWPfiE7qaJoX8ohHx9vbXsR_4fJ-jHxeuQr-QrAM/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

<br/><br/>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="Russian"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en');
return false;"><img alt="Russian" border="0"
align="absbottom" title="Russian" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutKBZAGa_8-9Y4AY8jzDDL8hftSbUTBm5NxT_gISZirpIRkeky2c1j3Mm_ZVFfijRlNrR31SDJaDRJq_EzpULmf_zUlLlZPkb6b733zN_fi1V5JCMsh9INt7zC3iwXb20D_aSJjkKolM/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="Portuguese"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en');
return false;"><img alt="Portuguese" border="0"
align="absbottom" title="Portuguese" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0tLcM0S1UY1TrvXcxQftgGAcVfSiszLJbT7vlWEahGhB6GW2aSrEWYJY0RprrSZRHOV6tmPnOg1B5Bf22Czt00IMP_vYC5IZWbLYMi1OVb4jCZzSVWbkE2l2KJSxeHfsUgibgvf8UM8/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="Japanese"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en');
return false;"><img alt="Japanese" border="0"
align="absbottom" title="Japanese" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT_7GGx0YsX9N6hU7TiMORnznvSf2fUH5lOWTTGwZTaKRX24acULJaqWMcXQ5KjKe3vHaEFa8iB6OklAyEI0dNTgASDicUthwxcp3255vVQZ-r1kk3yjV5uOIG4okWsm8Ux2K0Q3aLG_-D/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="Korean"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en');
return false;"><img alt="Korean" border="0"
align="absbottom" title="Korean" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5iSujgYwqxnL1B49zSEqh8AuvI-wJcHo3l8wBr9d0neq-9DSXpLTdJW3kMZcNdt88B1TU7mXZNMruP7FFhn-w-8EG-IN_R1mWMFkQS9BPeJDHHarV1KNHitYPWAkyXoKf3eXCCU8rakg/?imgmax=800"
style="cursor: pointer;margin-right:13px"
width="24"/></a>


<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="Arabic"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en');
return false;"><img alt="Arabic" border="0"
align="absbottom" title="Arabic" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7cFYDQ7b6uviGfwJXDyjCKSlvL2mXZsaSMtevGEV15Acr0SAjF1Vs0IZmN7s-P4KVpg7TkPj4IRoTJka8p1h5XTn6oJmUK-XrMAUx997aocSDhhibg_j-KIqUhi13StgcYbEk5vWxcWY/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#"
target="_blank" rel="nofollow" title="Chinese
Simplified"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en');
return false;"><img alt="Chinese Simplified"
border="0" align="absbottom" title="Chinese
Simplified" height="32"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjySvQAv3XkEKp7wO_4W437btcUvDVv1P5kwvvYqAJJqy68IsD1Rucc3NcVZT-latpd_XKoRxWOVrvhLpoYqiHPdAOjozVSDsOWid8OmG3ueuIWFDIzlsSSG4DIY4J-umWQL6tLl38o-Xg/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24"/></a>

</div><div style="font-size:10px;margin:10px 0px 3px
0px">

by : <a href="http://www.blogspottutorial.com">BTF</a>

</div>

Сохраните шаблон. Местоположение этого гаджета не имеет значения.

Гаджет - перевести страницу упрощеный

noreply@blogger.com (Вячеслав) — Tue, 24 Mar 2009 09:29:00 +0000

Теперь я расскажу о более простом гаджете транслитерации. Его можно использовать, чтобы сократить время загрузки страницы(сравнивая с гаджетом транслитерации ниже).
Для того, чтобы добавить себе этот гаджет нужно:

Зайдите в настройки, макет, добавить гаджет, выберите HTML/Javascript, в текстовую область добавьте следующий код:


<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

Всё! Сохраните! Теперь гаджет добавлен. Вы можете перемещать его в любое место, это не имеет значения.

Добавить Yahoo смайлики эмоции в Blogger Комментарии

noreply@blogger.com (Вячеслав) — Mon, 23 Mar 2009 17:08:00 +0000

Сегодня, ходя по сайтам где описываются хаки блоггера я наткнулся на то, что узнал интересную вещь! Оказывается можно в форму комментариев вставлять смайлики! Я попробовал так себе сделать и мне понравилось.

Теперь
я расскажу Вам, как установить его в Blogger.

Но сначала вы должны иметь встроенный комментарий в форме блога (например, вставлять комментарий ниже форму blogger должностей)

Сейчас, как
его установить.

Найдите следующие строки:


<p
class='comment-footer'>
<b:if
cond='data:post.embedCommentForm'>
<b:include data='post'
name='comment-form'/>
<b:else/>
<b:if
cond='data:post.allowComments'>
<h3><a
expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a></h3>
</b:if>
</b:if>
</p>
</b:if>

Замените на код, который расположенный ниже:

<p class='comment-footer'>
<b:if
cond='data:post.embedCommentForm'>
<div
style='-moz-background-clip: -moz-initial; -moz-background-origin:
-moz-initial; -moz-background-inline-policy: -moz-initial; width:
369; text-align: left; border: 1px solid #cccccc; padding: 5px;
background: #eeeddf; height:86'>
<b>

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'
width='18'/> :))

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'
width='18'/> ;))

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'
width='18'/> ;;)

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'
width='18'/>:D

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'
width='18'/>;)

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'
width='18'/>:p

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'
width='22'/>:((

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'
width='18'/>:)

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'
width='18'/>:(

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'
width='18'/> :X

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'
width='18'/> =((

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'
width='18'/>:-o

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'
width='20'/> :-/

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'
width='18'/> :-*

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'
width='18'/> :|

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'
width='24'/> 8-}

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'
width='31'/>:)]

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'
width='44'/> ~x(

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'
width='30'/>:-t

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'
width='18'/> b-(

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'
width='18'/>:-L

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'
width='34'/> x(

<img border='0' height='18'
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'
width='30'/> =))

</b>
</div>
<b:include
data='post' name='comment-form'/>
<b:else/>
<b:if
cond='data:post.allowComments'>
<a
expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Сохраните! Если нет ошибок, продолжим.

Теперь
найдите тег

</ BODY>

перед ним вставте следующий код:

<script
src='http://bandofgirls.googlepages.com/smiley.js'
type='text/javascript'/><noscript><a
href="http://anshuldudeja.blogspot.com"
target="_blank">Blogger Widgets</a></noscript>

Сохраните шаблон.

Теперь смайлы
добавлены!

Как сделать пост Резюме (Читать далее...)

noreply@blogger.com (Вячеслав) — Sun, 22 Mar 2009 17:54:00 +0000

Мне много пришлось облазить в интернете сайтов, чтобы узнать, а в первую очередь понять, как правильно это делать. Я имею в виду пост-резюме(Читать далее...). Для того, чтобы это получить, много трудиться не следует.

Выполните следующие действия:

Шаг # 1:

1. Войдите в Blogger с вашим ID

2. На приборной панели нажмите кнопку Макет.

3.Затем выберите вкладку "Изменить HTML.

4. Нажмите кнопку "Загрузить полный шаблон ссылке. Сохранить шаблон (очень важно)

5. Пожалуйста, отметьте флажок Расширить шаблоны виджета.

6.Перейти в код шаблона, и найти код, подобно этому :

<p><data:post.body/></p>

7. Замените его на следующий:

  <b:if cond='data:blog.pageType == "item"'>

 <style>.fullpost{display:inline;}</style>

 <p><data:post.body/></p>

 <b:else/>

 <style>.fullpost{display:none;}</style>

 <p><data:post.body/>

 <a expr:href='data:post.url'><strong>Read
more...</strong></a></p> 

 </b:if>

8. Нажмите кнопку Сохранить шаблон

Шаг # 2:

1.Щелкните вкладку "Настройки".

2. Щелкните вкладку форматирования.

3. Перейти к нижней стороне. Вы найдете пустой текст рядом пост шаблонов. Заполните, что пустое текстовое поле с настоящим кодом:


<div class="fullpost"> 

 </div>

4.Нажмите кнопку Сохранить настройки.

Как разместить свою статью?

Для этого много трудиться не придётся:

При редакции нового сообщения вы увидите теги:

 <span class="fullpost"> .......</span>

Та часть, которая будет отображаться при просмотре сообщения в полном виде, должна быть помещена между этими тегами. При просмотре к коротком виде, она отображаться не будет.

Иконка сайта favicon для Blogger

noreply@blogger.com (Вячеслав) — Sun, 15 Mar 2009 15:31:00 +0000

Иконка сайта, favicon, которая отображается
на вкладке маленьким значком, это
украшение. Но красивая иконка сайта
сделает его заметнее - конечно, стандартная
favicon на блогах тоже ничего, но она одна
и та же у всех на Blogger. Оригинальная
иконка это и лицо сайта, и хороший тон
дизайнера. Сделать favicon самому
нетрудно, а для размещения

её потребуется вставить только одну строчку в код шаблона. Итак
, заводим себе аккаунт на любом хостинге
картинок (та же Picasa подойдёт), берём
любой графический редактор и создаём
favicon ico за пять минут.

Для этого нужно сделать следующее:

Загружаем ваш
графический редактор (Adobe Photoshop, GIMP...) и
создаём изображение размером 16х16 или
22х22 пикселя. Рисуем и создаём favicon -
можно взять из элементов оформления
блога или из любого понравившегося
изображения. Главное, чтобы изображение
было несложным - помните, ваш холст
всего 22х22 пикселя!
Сохраняем результат
в
формате png или
ico.
Есть мнение, что
favicon
ico предпочтительнее,
однако
favicon png так
же
хорошо отображаются (во всяком
случае,
Blogger-ом).
Загружаем получившийся favicon
на
хостинг изображений, берём
оттуда
прямую ссылку на наш favicon.
Теперь заходим
в
Панель управления блогами в
Blogger,
нажимаем Макет и там -
Править
HTML. В коде блога ищем:

<title><data:blog.pagetitle/></title>

Сразу под этим кодом
вставляем такой:

<link href='http://где.ваша.картинка.png' rel='shortcut icon'/>

Приведённый код
должен быть между
тегами

<head> ... </head>

Сохраняем шаблон и перезагружаем страницу. Всё, теперь на вкладке должна появиться созданная иконка.

Облако тегов на Blogger

noreply@blogger.com (Вячеслав) — Sat, 14 Mar 2009 15:58:00 +0000

Этот хак - удобная вещь для блога.

Посетитель, который приходит на ваш блог сразу видит, на какую тему написано больше постов.

Такая организация тегов экономит место на странице и просто это выгледит красиво.

Чтобы добавить на свой блог виджет "Облако тегов" перейдите по ссылке которая расположены ниже

Установка виджета Облако тегов

Создание административной панели блога

noreply@blogger.com (Вячеслав) — Thu, 12 Mar 2009 18:43:00 +0000

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

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

Для этого необходимо:

Заходим в настройки> макет> тсоздать гаджет> Html/Javascript, копируйте код расположенный в таблице ниже и вставляем:

<div id="LinkList1" class="widget LinkList">

<h2>Административная панель</h2>

<div class="widget-content">

<ul>

<li>

<span class="adminlist">

<a href="http://www.blogger.com/home">Панель инструментов</a>

</span>

</li>

<li>

<span class="adminlist">

<a href="http://www.blogger.com/blog-options-basic.g?blogID=##################">Настройки</a>

</span>

</li>

<li>

<span class="adminlist">

<a href="http://www.blogger.com/rearrange?blogID=##################">Макет</a>

</span>

</li>

<li>

<span class="adminlist">

<a href="http://www.blogger.com/post.g?blogID=##################">Изменить сообщения</a>

</span>

</li>

<li>

<span class="adminlist">

<a href="http://www.blogger.com/post-create.g?blogID=##################">Новое сообщение</a>

</span>

</li>

</ul>

<div class="clear"/>

<span class="widget-item-control">

<span class="item-control blog-admin">

<a title="Edit" target="configLinkList1" onclick='return _WidgetManager._PopupConfig(document.getElementById("LinkList1"));' href="http://www.blogger.com/rearrange?blogID=934829683866516411&amp;widgetType=LinkList&amp;widgetId=LinkList1&amp;action=editWidget" class="quickedit">

<img width="18" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" alt=""/>

</a>

</span>

</span>

<div class="clear"/>

</div>

</div>

Не забудьте заменить ################## на идентификатор.

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


.adminlist {

background:transparent url(http://home.kpn.nl/oosti468/images/lock.png) no-repeat scroll left center;

padding:2px 0px 2px 20px;

}

Предварительный просмотр ссылок или миниатюры страниц

noreply@blogger.com (Вячеслав) — Wed, 11 Mar 2009 12:09:00 +0000

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

Snap Shots Logo
Такую удобную опцию просмотра ссылок можно реализовать и на Blogger. Для этого необходимо установить утилиту Snap Shots. Установка очень проста:

1. Перейдите на сайт www.snap.com
2. Справа Вы увидите раздел Publishers / Bloggers

3. Щелкните кнопку Get Started

4. На следующей странице Вам необходимо настроить цвет фона окошка

5. Select Your Shots Language: Russian

6. Advanced Settings (Дополнительные настройки)

* Show Snap Shots Link Icon (Показывать иконку Snap Shots около ссылок)

* Trigger Snap Shots on Link Icon Only (Генерировать миниатюру только при наведении на значок)

* Display Large Snap Shots by Default (Показывать большое окошко)

* Enable Snap Shots for External Links (Разрешить миниатюры для внешних ссылок)

* Enable Snap Shots for Internal Links (Разрешить миниатюры для внутренних ссылок)

* Only Display Preview Shots (Показывать только миниатюру, без интерактивности)

* Enable Snap Shots to look for key phrases on your web site, and then add the right Snap Shots. (Разрешить миниатрюры для просмотра ключевых фраз)

7. Нажмите кнопку Continue

8. На следующей странице введите адрес e-mail, URL своего блога и новый пароль для доступа к Snap Shots

9. Прочтите и примите условия Snap Shots Terms of Use Policy

10. Нажмите кнопку Continue

11. На следующей странице Вы увидите заголовок Install Snap Shots on Blogger

12. Просто нажмите Install Now

13. После чего Вы попадёте на знакомую страницу Добавить элемент страницы Blogger

14. Выберите из списка блог и нажмите Добавить виджет

15. После чего на блоге появится новый виджет, который Вы можете переместить в удобное место и настроить.

Ограничение численности постов RSS

noreply@blogger.com (Вячеслав) — Tue, 10 Mar 2009 18:16:00 +0000

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

Здесь применён следующий трюк

 http://Ваш блог.blogspot.com/feeds/posts/default?orderby=published&max-results=5

Это ссылка на вашу RSS, которая будет иметь пять последних постов(сообщений). "5" то что выделено зелёным цветом показывает сколько постов нужно показывать в RSS-ленте. Вы можете изменить количество постов отображаемых на RSS фиде.
Как показывает статистика, более ранние посты особо никто и не читает.
Вы можете увидеть у меня на этом блоге два вида RSS на боковой панели справа (полная, на пять постов).