Обучение: Создание сайта

снег на сайт
http://mvcreative.ru/blog/zima_na_sajte_sneg/2012-12-23-11

Чат для вашего сайта http://www.chatovod.ru/

Скачать видео с сайта
http://www.vashinternetgid.ru/instrumenty-biznesa/kak-besplatno-skachat-video-s-lyubogo-sajta.html

Как вставить видео на сайт
http://myrusakov.ru/html-video.html

Увеличение картинки при наведении
http://followdesign.com/development/2011/11/23/jquery-zummery-effekty-uvelicheniya-chast-1.html
http://www.olerant.ru/3-imagesize/multizoom_2.1/multizoomsitepage1.php
http://shpargalkablog.ru/2012/10/uvelichenie-kartinki-pri-navedenii.html

Часы для сайта
http://dezzi.ru/Flash%20Clock4.html

Горизонтальное меню
http://www.magentawave.com/2013/02/css3-horizontal-slide-menu.html

Плавное перемещение между блокам на веб-странице
Плавный скроллинг по якорям на сайте
http://sampawno.ru/viewtopic.php?f=49&t=1403
http://mattweb.ru/component/k2/item/83-plavnoe-peremeschenie-mezhdu-blokami-na-web-stranitse

1 2
1 2

Плавающий блок
http://www.magentawave.com/2013/02/simple-jquery-floating-block.html
Библиотеки jQuery подключаются перед между тегами

Гаджет появления наименований разделов при переходе
http://cio-news.ru/

http://shpargalkablog.ru/

Спросить про вставку аудиоплеера
http://savleti.ru/best-mp3/390-mp3-vremya-i-steklo-kafel.html
Контакты
http://savleti.ru/index.php?do=feedback

http://ljudamila.blogspot.ru/p/blog-page_12.html

Иконки для сайта
http://www.iconsearch.ru/

Что сделать?

1. Выделение ссылок как здесь:
http://blogodel.com/2012/12/vypadajushhee-menju-blogspot-blogger.html
2? Меню
http://blogodel-test.blogspot.de/
http://blogodel.com/2012/12/vypadajushhee-menju-blogspot-blogger.html
3. Меню
http://www.magentawave.com/2012/10/accordion-css3-jquery-menu.html
http://pcvector.net/scripts/menu_and_navigation/209-animirovannoe-menyu-na-css.html
http://bloggfast.blogspot.ru/2011/05/blog-post_1917.html
http://studying-blogin.blogspot.ru/2014/01/gorizontalnoe-menu-dlya-blogspot.html
http://all-blogger-widgets.blogspot.ru/2010/10/blogger_04.html
горизонтальное
http://shkolablogger.ru/fiksirovannoe-vyipadayushhee-menyu-dlya-blogger.html
http://bloggfast.blogspot.ru/2011/09/krasivoe-vipadaushee-menu.html
http://shpargalkablog.ru/2011/10/gorizontalnoye-vypadayushcheye-menyu.html

4. Виджет рейтингов кинопоиска
http://file-tracker.net/post/83
http://pro-kino.com/over/api/
http://blogger.omg-linux.ru/2011/10/reiting-kinopoiska.html
и Imdb
http://imdb.snick.ru
5. Виджет ТОП
http://blogger.omg-linux.ru/2012/05/gradditcom.html
6? Меню для картинок на правой кнопке
http://blogger.omg-linux.ru/2012/03/right-click-image-menu.html
7. Горизонтальное слайд шоу для фильмов, игр и др.
http://blogger.omg-linux.ru/2012/02/slideshow-for-blogspot-blog.html
8. Добавление карт городов
https://support.google.com/maps/answer/72644?hl=ru
http://blogger.omg-linux.ru/2011/12/kak-ystanovit-yandex-karti-v-blog.html
9. Вставка видео
видеоплеер с плэйлистом для letitbit
http://kommuna.me/index.php?/topic/13956-%D0%BF%D0%BB%D0%B5%D0%B5%D1%80-letitbit/
Др
http://blogger.omg-linux.ru/2011/12/youtube-modal-player.html
http://www.jwplayer.com/
10? Кнопка для скачивания
http://blogger.omg-linux.ru/2011/12/animirovannaya-knopka-v-stile-twitter.html
11. Твитни и скачай
http://blogger.omg-linux.ru/2011/11/blog-post_14.html#
12? Слайд-шоу фона
http://ruseller.com/lessons.php?rub=2&id=1922
13. Слайдер на CSS
http://webuilder.info/load/skripty_dlja_ucoz/ucoz_slajder/slajder_na_chistom_css3/43-1-0-1934
14. Слайд шоу
http://blogodel.com/2013/03/Krasivyj-slajder-slajd-shou-s-ochen-prostoj-ustanovkoj-dlja-Blogspot-Blogger.html
?????
++++
15. Заменить G+1 в мобильной версии на блог соц. сетей в мобильной версии.
16. Убрать "Технологии блоггер" из мобильной версии.
17? Красивое слайдшоу
http://pcvector.net/scripts/slideshow_and_scroller/327-lof-jslidernews-20-plagin-slaydshou.html
18. Бегущая строка
<marquee bgcolor="FFFF00" scrolldelay="145" width="100%">
Текст
</marquee>
19. Online кинотеатра (контакт) через юкоз
http://p0rtal.org/index/0-17
http://rashpill.ucoz.ru/forum/66-543-1

Демо блог
http://zsvvidzhet.blogspot.ru/
Подборка менюшек
http://blog.nardodesign.com/ru/index.php?id=57
Гаджеты
http://www.google.com/ig/directory?synd=open
Разное
http://blogger.omg-linux.ru/search/label/js
http://mrmakerlive-mylive.blogspot.ru/2012/01/blog-post_4243.html
http://mrmakerlive-mylive.blogspot.ru/2012/01/blog-post_1055.html
http://mrmakerlive-mylive.blogspot.ru/2012/01/blog-post_582.html

Видеоинструкция
1. Регистрация
2. Выбор шаблона
3. Выбор адреса
4. Хостинг
5. Наполнение
Ярлыки, комментарии

Как запретить копирование текста с сайта?
<body onmousedown="return false;" onclick="return true;">

Разрешить выборочное копирование элемента
http://javascript.ru/forum/misc/31633-kak-otmenit-vydeleniya.html
<div id="on1">Разрешить выделение</div>
<script>
document.getElementById("on1").onmousedown = function (event) {
event.stopPropagation();
};
document.getElementById("on1").onselectstart = function (event) {
event.stopPropagation();
};
</script>

4. Раскрывающееся меню аккордеон

<ul class="accordion"> 

<li id="one" class="files"> 
<a href="#one">Мои файлы<span>10</span></a> 
<ul class="sub-menu"> 
<li><a href="#"><em>01</em>Файл<span>1</span></a></li> 
</ul>
</li>

<li id="two" class="mail">
<a href="#two">Мои картинки<span>20</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Альбом<span>2</span></a></li>
</ul>
</li>

<li id="three" class="cloud">
<a href="#three">Сфера<span>30</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Файлы сферы<span>3</span></a></li>
</ul>
</li>

<li id="four" class="sign">
<a href="#four">Вход</a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Войти на сайт</a></li>
</ul>
</li>

</ul>

<style type="text/css">

/* Reset */

.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion li {
list-style: none;
}

/* Определение и стили элементов */

.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 40px;
height: 32px;

color: #fdfdfd;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
color: #3e5706;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);

background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
.accordion li > a span {
display: block;
position: absolute;
top: 7px;
right: 0;
padding: 0 10px;
margin-right: 10px;

font: normal bold 12px/18px Arial, sans-serif;
background: #404247;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion > li:hover > a span,
.accordion > li:target > a span,
.accordion > li > a.active span {
color: #fdfdfd;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #3e5706;
}

/* Иконки перед разделами */

.accordion > li > a:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 24px;
height: 24px;
margin: 4px 8px;

background-repeat: no-repeat;
background-image: url(../img/icons.png); /* Ссылка на картинку-спрайт иконок */
background-position: 0px 0px;
}

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { background-position: -72px -24px; }

/* Стили для под меню */

.sub-menu li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;

-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sub-menu em {
position: absolute;
top: 0;
left: 0;
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif;
}

/* Скрываем неактивные блоки */

.accordion li > .sub-menu {
display: none;
}
.accordion li:target > .sub-menu {
display: block;
}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
// Указываем переменные
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');

// Автоматически открывает первый раздел
// Чтобы не открывался можно удалить
accordion_head.first().addClass('active').next().slideDown('normal');

// Функция клика
accordion_head.on('click', function(event) {
// Скрывает открытый раздел по повторному клику
event.preventDefault();
if ($(this).attr('class') == 'active'){
accordion_body.slideUp('normal')
$(this).removeClass('active');
return false;
}
// Открывает следующий, скрывая открытый
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
</script>

5. Как подключить jQuery
http://www.magentawave.com/2013/03/jquery.html

6. Коды
Как сделать кнопку читать далее?
Как скрыть часть текста ссылкой блоггер?

7. Виджеты
Как создать плавающий виджет?
<div id='banner' style='z-index:1000; position: fixed; top:0px; right:0px'>код виджета</div>

http://www.lact.ru/poleznoe/interesnyie-vidzhetyi

8. Вывод скрипта по id в любом месте сайта.

9. Кнопка вверх
http://webmastermix.ru/raznoe/300-knopka-vverkh-dlya-saita.html

Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Изображение:

Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это: icon_top.png

HTML код:

<a href="#" class="scrollup">Наверх</a>

Наверх
CSS стили:

.scrollup{

width:40px;

height:40px;

opacity:0.3;

position:fixed;

bottom:50px;

right:100px;

display:none;

text-indent:-9999px;

background: url('http://webmastermix.ru/files/demo/creation-site/raznoe/knopka-vverh/icon_top.png') no-repeat;

}

При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.

JQuery:

Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами ...? вставляем следующее:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(window).scroll(function(){

if ($(this).scrollTop() > 100) {

$('.scrollup').fadeIn();

} else {

$('.scrollup').fadeOut();

}

});

$('.scrollup').click(function(){

$("html, body").animate({ scrollTop: 0 }, 600);

return false;

});

});

</script>

Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:

Первый ScrollTop - определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.

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

Раскрывающийся споллер:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="color: #00c12b;">Подробнее</span> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Показать'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Показать" /> </div>
<div class="alt2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: whitesmoke; background-image: none; background-position: 0% 50%; background-repeat: repeat; border: 1px inset; line-height: 1.5em; margin: 0px; padding: 6px;">
<div style="display: none;">
ВАШ ТЕКСТ
</div>
</div>
</div>

Чтобы оставить спойлер открытым, нужно удалить:
style="display: none;"
в div тэге перед ВАШИМ ТЕКСТОМ

Как защититься от блокировки и удаления блогов на Blogger (+полезные статьи)
http://vk.com/topic-50201267_27893569
Блокировка блога за спам, пример.
http://vk.com/topic-50201267_27818850

Документация Blogger
http://vk.com/topic-50201267_27885238

Сервисы для вебмастера
http://vk.com/topic-50201267_27801870
сервис HTMLBasix
http://www.htmlbasix.com/

Архивы для категории ‘Бесплатные шаблоны’
http://blog.zebrum.ru/category/free-shablons/

Ротатор баннеров для Blogger и не только
http://www.htmlbasix.com/banner.shtml

Полезные ссылки
http://firstseoblog.blogspot.ru

PR 10 Pages
http://www.seocompany.ca/pagerank/pr-10-pages.php
http://www.searchenginegenie.com/pagerank-10-sites.htm

Категория:Сайты с ТИЦ больше 1000
http://www.wikireality.ru/wiki/Категория:Сайты_с_ТИЦ_больше_1000

Таблица
http://www.avitra.ru/2012/06/kak-vstavit-tablicu.html
<table>
<tr>
<td>строка1, яйчейка1</td>
<td>строка1, яйчейка2</td>
<td>строка1, яйчейка3</td>
<td>строка1, яйчейка4</td>
<td>строка1, яйчейка5</td>
<td>строка1, яйчейка6</td>
<td>строка1, яйчейка7</td>
</tr>
<tr>
<td>строка2, яйчейка1</td>
<td>строка2, яйчейка2</td>
<td>строка2, яйчейка3</td>
<td>строка2, яйчейка4</td>
<td>строка2, яйчейка5</td>
<td>строка2, яйчейка6</td>
<td>строка2, яйчейка7</td>
</tr>
<tr>
<td>строка3, яйчейка1</td>
<td>строка3, яйчейка2</td>
<td>строка3, яйчейка3</td>
<td>строка3, яйчейка4</td>
<td>строка3, яйчейка5</td>
<td>строка3, яйчейка6</td>
<td>строка3, яйчейка7</td>
</tr>
<tr>
<td>строка4, яйчейка1</td>
<td>строка4, яйчейка2</td>
<td>строка4, яйчейка3</td>
<td>строка4, яйчейка4</td>
<td>строка4, яйчейка5</td>
<td>строка4, яйчейка6</td>
<td>строка4, яйчейка7</td>
</tr>
</table>

HTML iframe
http://ab-w.net/HTML/iframe_and.php

Убрать внизу страницы ссылки "Следующие / Главная страница / Предыдущие".
Для этого надо зайти в редактирование html, поставить галочку на расширить шаблоны виджета.
Найти строку

<b:include name='nextprev'/>
И удалить её.

Убрать надпись "Главная страница"
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Удалить подписаться на: Сообщения (Atom)
Для действий по удалению строчки Подписаться на: Сообщения (Atom), нужно перейти Дизайн > Изменить HTML, с помощью клавиш CTRL+F найти в шаблоне часть кода:

<b:include name='feedLinks'/>
и полностью удалить её

Удалить нижнюю строку Шаблон "Travel". Технологии Blogger
Открываем редактор шаблона (Дизайн->Изменить HTML), после чего ищем этот код:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
И удаляем её
или добавляем знаки 

Удалить нижнюю строку Шаблон "Travel". Технологии Blogger в мобильной версии

Как убрать "Показаны сообщения с ярлыком"
Открываем редактор шаблона (Дизайн->Изменить HTML), после чего ищем этот код:
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'><data:navMessage/> </div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
И удаляем её

Раскрывающееся меню

Как найти нужный текст на странице в браузере Chrome?
как и во всех остальных браузерах.
Ctrl+F
появится окошко в верхнем правом углу, вводишь необходимый текст и все прекрасно находится.

При нажатии на ссылку переходит на два сайта.
<a href="#" onclick="window.open('http://Ссылка #1.ru/'); window.open('http://Ссылка #2.ru/'); return false;">Link</a>

Ссылки
Чтобы при нажатии на ссылку появлялся бланк отправления сообщения?
<A HREF="mailto:email@name.ru">ссылка</A>.
При этом можно добавить автоматическое подставление темы
<A HREF="mailto:email@name.ru?Subject=тема"> вот так</A>.
Этот вариант некоppектно обpабатывается некотоpыми бpаyзеpами и мэйлеpами.
Чтобы при наведении мышки на ссылку выдавался мой текст, а не "http://www.name.ru/..."?
<A HREF="http://rhc.msk.ru"
onMouseOver="window.status='мышка на ссылке';
return true;"
onMouseOut="window.status='мышка не на ссылке';
return true;">
ссылка</A>.
и др.

Убрать гаджет Blogger с определённой страницы

Всплывающая картинка при наведении на ссылку или на картинку
в CSS прописываем :
/*Всплывающий скриншот*/
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
padding: 5px;
left: -1000px;
border: 1px solid white;
visibility: hidden;
color: Yellow;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
/*---------------------*/
Ссылка должна быть такая :
<a class="thumbnail" href="#">Здесь описание ссылки<span><img src="ВАША КАРТИНКА" width="250" height="250" alt=" Здесь описание картинки"/></span></a>

Иконки
http://www.iconsearch.ru
Набор иконок "Гламур"
http://www.webucoz.ru/iconki/272-nabor-ikonok-glamur.html
Иконки для папок, кнопок на сайтах в сочных и ярких красках.
http://fannydays.ru/kreativ/ico/54-ikonki-dlya-papok-knopok-na-saytah-v-sochnyh-i-yarkih-kraskah.html

Кнопки "Поделиться" в социальных сетях
http://intrernet-zarabotok.blogspot.com/2013/01/blogger.html
sharethis.com
http://sharethis.com/publishers/button-gallery#sthash.Bjtgriwu.dpbs

Изменить форму комментариев в Blogger
http://www.magentawave.com/2012/02/change-comment-form-on-blogger.html
Система комментариев Intensedebate
http://www.yarikbes.ru/2012/01/intensedebate.html
http://blogger.com.md/tutorials/61-comments-form.html
Регистрация и авторизация + вход через социальные сети в Kohana 3.3.0
http://ruslan.cc/2013/02/registraciya-i-avtorizaciya-vxod-cherez-socialnye-seti-v-kohana-3-3-0/
SLogin - всплывающая форма авторизации.
http://joomclub.net/blog/verstka/99.html
Голосование в комментах
(как здесь) http://muzebra.copiny.com/problem/details/id/88448#comment_179739

Авторизация
http://ulogin.ru/constructor.html
http://habrahabr.ru/post/130893/
http://habrahabr.ru/qa/25509/
http://tj-s.ru/tod/viewpost/18.html

Рейтинг в звёздочках
http://www.graddit.com/rus/ratings-widget

Как вставить смайлики в форму комментариев (+ раскрывающееся меню, как на сайте)
http://www.dljablogger.ru/2013/04/kak-vstavit-smajliki-kommentarii.html

Увеличение допустимых тегов в форме комментария
http://soft-deev.blogspot.ru/2012/10/blogger.html

CSS - свойства, значение и описание
http://www.magentawave.com/2012/02/all-css-properties-and-descriptions.html
Все HTML и RGB коды цвета,а также их примеры.
http://www.magentawave.com/2012/02/table-html-colors.html
http://www.stm.dp.ua/
http://blogger.omg-linux.ru/2012/02/nccode-skript-dlya-kommentariev-blogger.html

Гаджеты для блога - последние комментарии
http://pro100blogger.com/2012/12/Blogger-Recent-Comments.html

Удалить нижнюю строку Шаблон "Travel". Технологии Blogger. в мобильном варианте
Как удалить Технологии Blogger в мобильном шаблоне?
Как удалить надпись "Технологии Blogger" для мобильной версии

Создание сайта - Blogger