Первоначально установленный блог оснащен только самым начальным набором функциональных элементов. Кроме собственно отображения сообщений это архив блога, информация о владельце, поиск по блогу и переход к панели управления. Для расширения функциональности и увеличения удобства пользования блогом Blogger предоставляет пользователям необходимый инструментарий. Для многих функций уже разработаны соответствующие гаджеты, а для тех, для которых гаджетов нет, разработаны соответствующие трюки.
Механизм гаджетов и неограниченная возможность изменения шаблона блога позволяют достичь функциональности, сравнимой с функциональностью самостоятельного блога, получив все преимущества последнего и сохранив комфорт и удобство бесплатного хостинга Google.
Правка шаблона применяется в трех случаях:
В связи с этим самым предпочтительным является использование гаджетов от Google, затем идет использование сторонних готовых гаджетов, и только в том случае, когда нет других вариантов, применяется правка шаблона блога.
Основываясь на таком подходе, попробуем оснастить созданный блог дополнительной функциональностью. 
Гаджетов отображения списков последних статей и последних комментариев нет в стандартном наборе гаджетов Google, но в данном случае можно использовать нестандартное применение стандартного гаджета «Канал», отображающего заголовки RSS-лент сторонних сайтов.
Раз гаджет отображает сторонние RSS-ленты, значит, может отображать и свои. Создаем два гаджета вида «Канал», называем один «Последние сообщения», второй - «Последние комментарии» и задаем им в качестве URL канала соответственно http://имя_блога.blogspot.com/feeds/posts/defaultom/feeds/posts/default и http://имя_блога.blogspot.com/feeds/posts/defaultom/feeds/comments/default. Вызываем в меню «Настройки» команду «Канал сайта», настраиваем выдачу сообщений и получаем требуемый результат.
Теперь добавляем на страницу стандартный гаджет «Ссылки для подписки», возможно, еще какие-то гаджеты вроде просмотра новостей, показа слайдов или видеороликов, и всё, первоначальную настройку можно считать законченной.
Вот тут и наступает время правки шаблона страницы. Если на странице настройки (меню «Макет», пункт «Изменить HTML») отметить поле «Расширить шаблоны виджета» (опять смешение виджетов и гаджетов, отмеченное в предыдущей статье), то вместо тегов вызовов гаджетов в шаблоне будет отображен код гаджетов, который можно теперь корректировать для изменения их поведения. При этом следует отметить, что имеющаяся на той же странице ссылка «Восстановить шаблоны виджетов по умолчанию» становится при дальнейшей работе запрещенной для использования: нажатие на нее восстановит оригинальный текст всех гаджетов и все внесенные изменения исчезнут. На всякий случай при этом стоит почаще (после любых изменений шаблона) пользоваться функцией «Загрузить весь шаблон». Несмотря на неподходящее по смыслу название, эта ссылка служит для выгрузки текущего шаблона на компьютер пользователя в качестве резервной копии. 
Рассмотрев содержимое гаджета Blog1, который отвечает за вывод сообщения, выясняем, что текст сообщения выводится неделимой конструкцией <data:post.body/>, то есть гаджет в любом случае будет выдавать весь текст сообщения.
Но нас интересует не столько количество выдаваемой гаджетом информации, сколько то, что именно будет отображено в браузере. Скрыть часть сообщения можно при помощи соответствующего кода CSS, который будет отображать или скрывать ненужные части сообщений в зависимости от режима просмотра. Для этого, аналогично тому как подготавливаются сообщения к публикации в LiveJournal, автор сообщения производит разметку сообщения с разделением его на анонс и основную часть, но делает это не специальным зарезервированным тегом (в LiveJournal это тег <lj-cut>), а заключением скрываемой части в теги с соответствующим CSS-стилем, например: <span id="fullpost">скрываемая часть сообщения</span>. Теперь для страниц, где мы хотим видеть сообщение целиком, класс fullpost объявляется видимым, для сокращенного варианта - невидимым. Для этого достаточно в шаблоне в секцию <b:skin> добавить следующую конструкцию (item - встроенный признак страницы, на которой отображается одиночное сообщение):
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
Для чего нужно было разворачивать шаблон? Для того, чтобы после конструкции вывода текста сообщения можно было вставить ссылку «Показать полный текст статьи...», ведущую на страницу вывода сообщения в полном виде. Можно, конечно, обойтись и без этого, но тогда посетителю страницы придется догадываться, что полное сообщение можно увидеть, нажав на его заголовок. Мало для кого из нормальных посетителей такое поведение очевидно и приемлемо.
На этом можно было бы и остановиться - получившаяся модификация вполне работоспособна и выполняет возложенные на нее задачи, но возникают серьезные сомнения в рациональности использования имеющихся ресурсов. Получается, что, уже загрузив в браузер полный текст сообщения, мы видим только анонс, а для того, чтобы увидеть полный текст, необходимо перейти по ссылке и загрузить сообщение еще раз.
Этот вариант полностью реализован в модификации шаблона «Blogger hack: Expandable posts with Peekaboo view» (см. ссылку в конце статьи). В этой модификации средствами JavaScript реализуется переключение видимости скрытой части сообщения. Модификация полностью работоспособна, и для ее установки достаточно выполнить три шага прилагаемой к ней инструкции и заменить текст «Read More...» и «Summary only...» на, соответственно, «Показать полный текст статьи...» и «Свернуть текст статьи...». 
Вот теперь мы получили вполне функциональный, удобный и красивый блог. Конечно, тема расширения функциональности блога этим не исчерпывается, но об этом мы поговорим в следующей статье.
Ссылки по теме
02.10.2008
Blogger: строим свой блог. Установка гаджетов
29.09.2008
Тема оформления блога
Тема оформления блога в качестве иллюстрации к статье "Blogger: строим свой блог. Оформление" (и статьи "Blogger: строим свой блог. Установка гаджетов").
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders 2
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#000" value="#000000">
<Variable name="postTitleColor" description="Post Title Color" type="color"
default="#333" value="#333333">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#810" value="#003d88">
<Variable name="borderColor" description="Post Border Color" type="color"
default="#bbb" value="#bbbbbb">
<Variable name="mainLinkColor" description="Link Color" type="color"
default="#b30" value="#003d88">
<Variable name="mainVisitedLinkColor" description="Visited Link Color"
type="color" default="#c63" value="#3399cc">
<Variable name="titleBgColor" description="Page Header Background Color"
type="color" default="#710" value="#003d88">
<Variable name="titleTextColor" description="Blog Title Color"
type="color" default="#fff" value="#ffffff">
<Variable name="topSidebarHeaderColor"
description="Top Sidebar Title Color"
type="color" default="#fff" value="#000000">
<Variable name="topSidebarBgColor"
description="Top Sidebar Background Color"
type="color" default="#999" value="#ffffff">
<Variable name="topSidebarTextColor" description="Top Sidebar Text Color"
type="color" default="#fff" value="#000000">
<Variable name="topSidebarLinkColor" description="Top Sidebar Link Color"
type="color" default="#fff" value="#380088">
<Variable name="topSidebarVisitedLinkColor"
description="Top Sidebar Visited Link Color"
type="color" default="#ddd" value="#3399cc">
<Variable name="bodyFont" description="Text Font" type="font"
default="normal normal 90% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal normal 90% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="pageTitleFont" description="Blog Title Font" type="font"
default="normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="descriptionFont" description="Blog Description Font" type="font"
default="normal normal 90% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal normal 90% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="headerFont" description="Sidebar Title Font" type="font"
default="normal bold 90% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 90% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="postTitleFont" description="Post Title Font" type="font"
default="normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
body {
background:#ccc;
margin:0;
text-align:center;
line-height: 1.5em;
font:bodyFont;
color:$mainTextColor;
}
/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
#outer-wrapper {
width:95%;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:74%;
float:$startSide;
background:$mainBgColor;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:$startSide;
width:100%;
background:;
padding:10px 0 0;
}
#main {
background:;
padding:0;
width:100%;
}
#sidebar-wrap {
width:25%;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.main .widget {
margin-top: 4px;
width: 100%;
padding: 0 13px;
}
.main .Blog {
margin: 0;
padding: 0;
width: 100%;
}
/* Links
----------------------------------------------- */
a:link {
color: $mainLinkColor;
}
a:visited {
color: $mainVisitedLinkColor;
}
a:hover {
color: $mainVisitedLinkColor;
}
a img {
border-width:0;
}
/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:;
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}
/* Posts
----------------------------------------------- */
h2.date-header {
margin-top:0;
margin-$endSide:28px;
margin-bottom:0;
margin-$startSide:43px;
font-size:85%;
line-height:2em;
text-transform:uppercase;
letter-spacing:.2em;
color:$dateHeaderColor;
}
.post {
margin:.3em 0 25px;
padding:0 13px;
border:1px dotted $borderColor;
border-width:1px 0;
}
.post h3 {
margin:0;
line-height:1.5em;
background:url("http://www2.blogblog.com/rounders2/icon_arrow.gif") no-repeat 10px .5em;
display:block;
border:1px dotted $borderColor;
border-width:0 1px 1px;
padding-top:2px;
padding-$endSide:14px;
padding-bottom:2px;
padding-$startSide:29px;
color: $postTitleColor;
font: $postTitleFont;
}
.post h3 a, .post h3 a:visited {
text-decoration:none;
color: $postTitleColor;
}
a.title-link:hover {
background-color: $borderColor;
color: $mainTextColor;
}
.post-body {
border:1px dotted $borderColor;
border-width:0 1px 1px;
border-bottom-color:$mainBgColor;
padding-top:10px;
padding-$endSide:14px;
padding-bottom:1px;
padding-$startSide:29px;
}
html>body .post-body {
border-bottom-width:0;
}
.post-body {
margin:0 0 .75em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
background: #eee;
margin:0;
padding-top:2px;
padding-$endSide:14px;
padding-bottom:2px;
padding-$startSide:29px;
border:1px dotted $borderColor;
border-width:1px;
font-size:100%;
line-height:1.5em;
color: #666;
}
.post-footer p {
margin: 0;
}
html>body .post-footer {
border-bottom-color:transparent;
}
.uncustomized-post-template .post-footer {
text-align: $endSide;
}
.uncustomized-post-template .post-author,
.uncustomized-post-template .post-timestamp {
display: block;
float: $startSide;
text-align:$startSide;
margin-$endSide: 4px;
}
.post-footer a {
color: $mainLinkColor;
}
.post-footer a:hover {
color: $mainVisitedLinkColor;
}
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background:;
padding-$startSide:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:;
padding-$startSide:14px;
}
.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:1px solid $borderColor;
}
blockquote {
margin:.75em 0;
border:1px dotted $borderColor;
border-width:1px 0;
padding:5px 15px;
color: $dateHeaderColor;
}
.post blockquote p {
margin:.5em 0;
}
#blog-pager-newer-link {
float: $startSide;
margin-$startSide: 13px;
}
#blog-pager-older-link {
float: $endSide;
margin-$endSide: 13px;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
margin-$startSide: 13px;
}
/* Comments
----------------------------------------------- */
#comments {
margin:-25px 13px 0;
border:1px dotted $borderColor;
border-width:0 1px 1px;
padding-top:20px;
padding-$endSide:0;
padding-bottom:15px;
padding-$startSide:0;
}
#comments h4 {
margin:0 0 10px;
padding-top:0;
padding-$endSide:14px;
padding-bottom:2px;
padding-$startSide:29px;
border-bottom:1px dotted $borderColor;
font-size:120%;
line-height:1.4em;
color:$postTitleColor;
}
#comments-block {
margin-top:0;
margin-$endSide:15px;
margin-bottom:0;
margin-$startSide:9px;
}
.comment-author {
background:;
margin:.5em 0;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
font-weight:bold;
}
.comment-body {
margin:0 0 1.25em;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-footer {
margin:0 0 .5em;
padding-top:0;
padding-$endSide:0;
padding-bottom:.75em;
padding-$startSide:20px;
}
.comment-footer a:link {
color: $mainTextColor;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 5px;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
border: 4px solid $topSidebarTextColor;
}
.profile-datablock {
margin-top:0;
margin-$endSide:15px;
margin-bottom:.5em;
margin-$startSide:0;
padding-top:8px;
}
.profile-link {
background:;
padding-$startSide:15px;
font-weight:bold;
}
.profile-textblock {
clear: both;
margin: 0;
}
.sidebar .clear, .main .widget .clear {
clear: both;
}
#sidebartop-wrap {
background:$topSidebarBgColor;
margin:0px 0px 15px;
padding:0px 0px 10px;
color:$topSidebarTextColor;
}
#sidebartop-wrap2 {
background:;
padding: 10px 0 0;
margin:0;
border-width:0;
}
#sidebartop h2 {
line-height:1.5em;
color:$topSidebarHeaderColor;
border-bottom: 1px dotted $borderColor;
margin-bottom: 0.5em;
font: $headerFont;
}
#sidebartop a {
color: $topSidebarLinkColor;
}
#sidebartop a:hover {
color: $topSidebarVisitedLinkColor;
}
#sidebartop a:visited {
color: $topSidebarVisitedLinkColor;
}
/* Sidebar Boxes
----------------------------------------------- */
.sidebar .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}
.widget-content {
margin-top: 0.5em;
}
#sidebarbottom-wrap1 {
background:;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}
#sidebarbottom-wrap2 {
background:;
padding:0 0 8px;
}
.sidebar h2 {
margin:0;
padding:0 0 .2em;
line-height:1.5em;
font:$headerFont;
}
.sidebar ul {
list-style:none;
margin:0 0 1.25em;
padding:0;
}
.sidebar ul li {
background:;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:3px;
padding-$startSide:16px;
margin-bottom:3px;
border-bottom:1px dotted $borderColor;
line-height:1.4em;
}
.sidebar p {
margin:0 0 .6em;
}
#sidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $borderColor;
}
/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background:;
color:$titleTextColor;
}
#footer {
background:;
padding:8px 15px;
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:$titleTextColor;}
#footer .widget-content {
margin:0;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}
body#layout #header, body#layout #header-wrapper,
body#layout #outer-wrapper {
margin-$startSide:0,
margin-$endSide: 0;
padding: 0;
}
body#layout #outer-wrapper {
width: 100%;
}
body#layout #footer-wrap1 {
padding-top: 0;
}
]]></b:skin>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
</head>
<style type='text/css'> #navbar-iframe { display: none !important;} /* hostinfo style */ div.note-l, div.note-r{ font-size:14px; width:215px; margin:5px 15px 15px 0; padding: 10px 5px 15px 15px; border-top:1px solid #DB0029; border-bottom: 1px solid #DB0029;background: #F6F6F6; color: #333333; line-height:130%;} div.note-l{float: left; margin:5px 15px 15px 0; padding: 10px 5px 15px 15px;} div.note-r{float: right; margin:5px 0 15px 15px; padding: 10px 5px 15px 15px;}
</style>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='Владимир Огнев (заголовок)' type='Header'/>
</b:section>
</div>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>
<div id='main-wrap1'>
<div id='main-wrap2'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='false' title='Сообщения блога' type='Blog'/>
</b:section>
</div>
</div>
<div id='sidebar-wrap'>
<div id='sidebartop-wrap'>
<div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='HTML1' locked='false' title='Поиск в блоге' type='HTML'/>
<b:widget id='Label1' locked='false' title='Разделы' type='Label'/>
<b:widget id='Feed1' locked='false' title='Последние сообщения' type='Feed'/>
<b:widget id='Feed2' locked='false' title='Последние комментарии' type='Feed'/>
<b:widget id='BlogArchive1' locked='false' title='Архив статей' type='BlogArchive'/>
</b:section>
</div>
</div>
<div id='sidebarbottom-wrap1'>
<div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Подпишитесь на' type='Subscribe'/>
</b:section>
</div>
</div>
</div>
<div id='footer-wrap1'>
<div id='footer-wrap2'>
<b:section class='footer' id='footer'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>
</div>
</div>
</body>
</html>
26.09.2008
Blogger: строим свой блог. Оформление
Естественным первым желанием нового владельца блога становится индивидуализация блога с уходом от первоначального стандартного оформления. Blogger предоставляет пользователю возможности изменения внешнего вида блога в самых широких пределах. В HTML-коде шаблона внутри тега <body>...</body> задается построение страницы блога путем использования стандартных средств HTML-разметки и CSS, определенного в теге <b:skin>. В тех местах шаблона, в которых предполагается вывод данных блога, вставляются теги <b:section>. В этих тегах задаются названия секций данных (id), CSS-класс секции (class), максимальное количество активных программных элементов, допустимых в секции (maxwidgets), индикатор появления метки добавления программного элемента на странице визуальной настройки шаблона (showaddelement), порядок расположения активных элементов в секции (growth). Из всех полей описания секции обязательным является только id. Остальные могут не описываться и принимают значения по умолчанию, описанные в справке Blogger. Приведенное описание нужно только для предварительного понимания построения шаблонов, и оно не означает, что каждому пользователю блога придется самостоятельно разрабатывать тему оформления. Blogger оснащен комплектом стандартных шаблонов, которые можно предварительно настраивать при выборе шаблона, а затем менять по своему вкусу шрифты и цвета выбранного шаблона на соответствующей вкладке страницы настроек макета. Кроме того, для системы Blogger разработано огромное количество бесплатных и платных шаблонов от сторонних разработчиков. К счастью, пользовательское соглашение Blogger не навязывает владельцам блогов обязательного присутствия на странице этой панели. Панель не присутствует в теле шаблона, но отображается плавающим фреймом (iframe), который можно сделать невидимым средствами CSS. Для этого перед тегом <body> шаблона на вкладке «Изменить HTML» добавляем следующие строки: <style type="text/css"> После этого навигационная панель со страницы исчезнет. Сюда же можно добавить и другие CSS-определения для дополнительной коррекции внешнего вида блога. Теперь желательно восстановить полезные функции, исчезнувшие с удалением навигационной панели. Поиск по блогу организуется путем добавления гаджета HTML/JavaScript. На странице настроек гаджета название меняем, например, на «Поиск в блоге», а в поле «Содержание» пишем: <nobr><form id="searchthis" method="get" action="/search" style="display:inline;"><input id="search-box" name="q" type="text" size="20"/> <input id="search-btn" type="submit" value="Поиск"/></form></nobr> Получается функция поиска, полностью аналогичная той, что была в навигационной панели. Полностью эквивалентной замены полям настроек навигационной панели нет, но перейти на страницу настроек можно по ссылке на стандартном гаджете «Логотип». Для этого нужно лишь добавить гаджет в нужное место на странице и поменять в настройках его внешний вид, выбрав один из предложенных вариантов. Оснащение блога дополнительной функциональностью и будет темой следующей статьи. Ссылки по теме
На фоне множества бесплатных блогохостингов Blogger от Google выделяется рядом привлекательных черт. Надежность хостинга, бесплатность, отсутствие навязываемой рекламы, а наоборот - возможность заработать на показах рекламы в своем блоге, удобство формирования внешнего вида блога и набора используемых сервисов, возможность использования в блоге всего разнообразия сервисов, предоставляемых Google, и так далее.
Попробуем описать весь цикл построения своего блога на сервисе Blogger.
После того как шаблон создан (при условии, что создан он правильно), на страницах визуальной настройки шаблона появляется возможность как менять в интерактивном режиме цвета и шрифты шаблона, так и добавлять и перемещать активные элементы блога. Активные элементы, если судить по названию поля секции maxwidgets, должны называться виджетами, но называются они в дальнейшем гаджетами. Это связано с тем, что по мере развития концепции модульного построения веб-страниц Google чисто визуальные элементы (виджеты) трансформировались в многофункциональные программные модули (гаджеты), а название поля в описании секции осталось прежним в соответствии с одним из золотых правил программирования «не трогай то, что работает».
Теперь на основе полученных первоначальных сведений попробуем настроить внешний вид блога.
#navbar-iframe {display: none !important;}
</style>
02.09.2008
Lively. Бета-версия 3D-мира от Google
Начальная попытка создания социального 3D-мира от мультисервисной компании
Lively создается в рамках проекта Google Labs с использованием "свободного" времени сотрудников Google. Дело в том, что 20% рабочего времени сотрудников Google оставляет на усмотрение самих сотрудников, чтобы они занимались теми проектами, какие лично им интересны.
Сейчас 3D-мир Lively позволяет пользователям создавать свои аватары и личные комнаты, обставлять свои личные пространства по своему вкусу, используя обширную библиотеку предметов и аксессуаров.
После создания аватара пользователь может посещать комнаты других участников игры, взаимодействовать с ними, выбирая движения и эмоции, запрограммированные в клиенте, и общаясь в текстовом режиме в стиле комиксов (фразы всплывают в так называемых "пузырях" над головами аватаров).
Предметы в Lively обладают свойствами интерактивности — на кресло можно сесть, динозавр ревет ужасным голосом, дверь позволяет переместиться в другую точку виртуального мира. Кстати, все объекты и предметы в Lively имеют собственный интернет-адрес (обычный URL). Оснастив несколько виртуальных комнат дверями с перекрестными ссылками, можно получить уже "многокомнатное" помещение.
Для входа в мир Lively используется стандартный аккаунт Google, и объекты в Lively используют различные Google-сервисы — телевизоры показывают видеоролики из YouTube, в рамках можно отобразить изображения из сервиса Picassa. Набор используемых компонентов расширяется. Предположительно со временем в объекты Lively можно будет вводить функциональность всех Google-гаджетов.
Вообще, проект Lively сейчас находится в стадии стихийного становления — запущены базовые элементы, проводится бета-тестирование, и дорабатывается и обретает конкретные черты проект уже по результатам массового тестирования. В отличие от многих других стартапов Google может позволить себе не ожидать немедленной коммерческой отдачи от проекта и проводит достаточно дорогостоящие натурные эксперименты, опираясь на свою финансовую мощь.
Как и большинство проектов Google, этот проект будет, скорее всего, бесплатным для пользователей — даже продажа рекламных площадок пока не планируется, но, несомненно, внутренние экономические отношения в системе ожидаются. Это вполне естественно, так как если какие-то узконишевые и игровые проекты могут получать доход от продажи клиентам самого контента, то массовые социальные проекты не интересны пользователям без возможности организации внутреннего экономического взаимодействия — работа и экономика занимают в виртуальном мире такие же важные места, как и в его реальном прототипе.
Элементы будущих экономических отношений видны уже сейчас — получение бесплатного инвентаря осуществляется по кнопке Shop For More ("Купить еще"), в выборе каждого предмета присутствует поле цены, равное пока нулю.
Возможности создавать объекты самостоятельно пользователи пока не имеют, можно только выбирать из уже имеющихся, но в пользовательском уже прописан запрет на создание самореплицирующихся объектов и вирусов, то есть и эти возможности уже зреют в недрах Google. Тут же не лишним будет вспомнить и трехмерный редактор Sketchup от Google, и сервис для обмена 3d-моделями — очень уж хорошо вписывается этот сервис в будущий 3D-мир.
Здесь просто напрашивается активизация сервиса электронной валюты GBuy от Google, находящегося уже длительное время в полумертвом состоянии. Если место GBuy как конкурента основным электронным валютам на настоящий момент весьма сомнительно, то использование этой валютной системы в качестве расчетного инструмента внутреннего мира Google будет очень органичным.
Для входа в систему пользователь скачивает начальный загрузчик размером около 500 Кб, который, в свою очередь, загружает клиентскую часть Lively и клиент Google Update общим размером около 17 Мб. Клиент, созданный на основе игрового движка Gamebyro, пока работает только в среде Windows XP/Vista и использует для взаимодействия с пользователем интерфейс окна браузера (сейчас это либо Internet Explorer, либо FireFox). Устанавливаемый на рабочий стол ярлык запуска вызывает браузер, установленный в системе по умолчанию с адресом страницы Lively каталога комнат, созданных пользователям. Если по умолчанию в системе установлен другой браузер, например Opera, ярлык придется поменять для запуска браузера, поддерживаемого клиентом Lively. Если же запустить напрямую программу lively.exe из каталога установки программы, то откроется автономное окно некоей тестовой комнаты, из которой никуда нельзя перейти. Возможно, это прототип окна браузеронезависимого клиента, возможно, наоборот, остатки от какой-то предыдущей версии клиентского интерфейса.
Требования клиентской программы к мощности компьютера довольно демократичны, и годится практически любая достаточно современная конфигурация (P3-800, память 512 Мб, DirectX 9, видео 32 Мб GPU (GeForce 2 и выше), Flash 9 и выше). Вместе с тем требования к каналу передачи данных достаточно высоки... Впрочем, система на данный момент еще очень сырая, и говорить о причинах торможений и сбоев в работе системы достаточно сложно — бета-версия, она и есть бета-версия.
Виртуальный мир Lively от Google производит впечатление полноценного, но пока не законченного 3D-мира, но, по сути, это всего лишь тестовая площадка, на которой создатели ресурса пытаются нащупать пути реализации будущей системы с попутной отладкой сервисов и компонентов на реальных пользователях. Впечатление полноценности вызвано масштабностью эксперимента, которую может позволить себе такой гигант, как Google. С большой долей уверенности можно сказать, что при реальном запуске системы (если он, конечно, состоится) поменяется практически все — и клиентская часть, и принципы взаимодействия пользователей, и построение объектов виртуального мира.
Ссылки по теме
Разделы:
Социальные сети
23.08.2008
Habbo. Виртуальный мир для тинейджеров
уникальный проект виртуального общения, ориентированный на подростков — уже не детей, но еще не взрослых
О проекте
В Habbo используется изометрическая псевдотрехмерная пиксельная графика на основе флеш-технологии с текстовым чатом (сообщения всплывают в «пузырях» над головами персонажей, как в комиксах).
В качестве основной аудитории нового виртуального мира избраны именно тинейджеры, расстающиеся с детством и входящие во взрослый мир. Создатели проекта использовали тягу подростков к личному пространству и созданию групп единомышленников.
В виртуальном отеле каждый посетитель может выбрать себе комнату, поселиться в ней в качестве полного и безраздельного ее хозяина, обставить комнату по своему вкусу и приглашать в нее интересных ему других постояльцев отеля. Причем вход может быть как полностью свободным, так и только по разрешению хозяина.
Кроме личных пространств посетителям предоставлены и общественные места — бассейн, концертный зал, игровые комнаты и так далее. Создатели проекта привлекают для виртуальных концертов звезд шоу-бизнеса, организуют праздники и «народные гулянья».
Сейчас население отелей Habbo составляет уже более ста миллионов, отделения отелей открыты более чем в тридцати странах (в России отель открыл свое представительство в 2006 году).
Создатели сервиса не пускают общение тинейджеров на самотек. Ведется постоянный автоматический мониторинг всех диалогов. Все текстовые ругательства заменяются автоцензором на слово bobba. Кроме того, за порядком следят и живые модераторы, выглядящие, как обычные аватары посетителей, но наделенные правами удаления из игры особо распоясавшихся посетителей.
Правда, участники этих действий категорически против названия «флешмоб» и настаивают именно на «набеге». Они считают, что таким образом выражают протест против гламурной пасторальности мира виртуальных отелей, взрывая прилизанно-тоскливое течение жизни виртуального мирка.
Основным аватаром «бандитов» является традиционный киношный агент ФБР из фильмов 1980-х годов — негр с прической «афро» в черном костюме и белой рубашке с галстуком. Толпа «агентов» врывается в отель и начинает заранее спланированное действо. Это может быть построение в виде свастики с криками «Нет расизму!», блокирование входов в бассейн с объяснениями того, что бассейн заражен СПИДом и наполнен смертельно опасными электрическими скатами, создание всевозможных помех посетителям, скандалы с модераторами и прочее.
Такие набеги действительно шокируют население детских отелей. Посетители теряются, не зная, как реагировать, — поддерживать антирасистские выступления или протестовать против явного хулиганства.
Правда, посетители российского отеля отличаются нестандартным поведением. При начале набега обычные посетители массово «переодеваются» в негров и пытаются поучаствовать в развлечении. Тут уже приходят в растерянность «хулиганы». Они пытаются объяснить «примазавшимся», что это не просто баловство, а акция с глубоким смыслом, но праздник антигламура обычно оказывается безнадежно испорченным — в этой каше ни свастику толком не построишь, ни свои нестандартность и вольнодумство не продемонстрируешь (все одинаковые). Поэтому даже российские «борцы» предпочитают «хулиганить» на заграничных серверах — там посетители ведут себя более правильно.
Экономическая модель
Первоначально посетители отеля приобретали все услуги, предоставляемые в отеле, непосредственно путем платных SMS с мобильных телефонов, но, когда отделение отеля было открыто в Великобритании, выяснилось, что у очень немногих английских подростков имеются личные мобильные телефоны. Вследствие этого в модель расчетов была добавлена внутренняя валюта игры — хаббо-монеты. Игроки приобретают нужное количество хаббо-монет через те же SMS или перечислением через банк либо электронную платежную систему, а затем приобретают мебель, аксессуары и прочее, уже используя монеты со своего внутреннего счета.
После введения в обиход хаббо-монет были добавлены и возможности торговли между игроками. Теперь игроки могут покупать вещи не только в системе, но и друг у друга. Возник такой важный элемент реальной жизни, как коммерческая деятельность. Многие комнаты теперь представляют собой настоящие блошиные рынки, заставленные рядами мебели и аксессуаров, — здесь купить вещи можно дешевле, чем в «официальном магазине» непосредственно у хозяина комнаты.
Вместе с тем, легальных вариантов вывода денег из системы нет, причем создатели игры пошли на это сознательно. Если даже в такой предельно виртуальной экономике, какая есть в игре сейчас, происходят кражи и мошенничества, то возможность конвертировать виртуальные монеты в реальные деньги неизбежно подстегнет волну виртуального криминала, а против этого владельцы системы возражают безоговорочно — все-таки детский мир должен оставаться детским, и этому уделяется особое внимание.
Когда вы приобретаете хаббо-монеты, то получаете уведомление в формате «При покупке Habbo-монет ВСЕГДА спрашивай разрешения у родителей. Если ты не сделаешь этого и платеж будет отменен, ты будешь заблокирован навсегда». Если пытаетесь подарить кому-нибудь вещь, продав ее за ноль хаббо-монет, то высветится предупреждение о том, что, возможно, вы становитесь жертвой мошенничества и что следует как следует обдумать решение о согласии на такую сделку. И так в самых разных вариантах экономического взаимодействия — владельцы системы пекутся не только о моральной, но и об экономической корректности взаимоотношений в детском виртуальном мире.
Предоставление рекламных площадей в виртуальных отелях находится пока в зачаточном состоянии и используется преимущественно для рекламы собственных сервисов. Здесь владельцы ресурса предпочитают перестраховаться, чтобы, пытаясь получить дополнительный доход, не потерять то, что есть.
Техническая реализация
Клиентская часть игры работает в любом браузере через плагин Adobe Shockwave, поэтому особых требований к клиентскому компьютеру не предъявляется. Если в других трехмерных онлайн-играх необходимо скачивать и настраивать тяжеловесное клиентское программное обеспечение, то отель Habbo очень легок и удобен в использовании. Конечно, плагин браузера не позволяет реализовать полноценный трехмерный мир, но облегченная модель мира позволяет работать через более медленные каналы на более простых компьютерах, что способствует большей населенности мира и большей его популярности.
Выводы
Ссылки по теме
Разделы:
Социальные сети
Сообщения
