Blogger тюнинг - улучшение дизайна блога

Есть люди, которые не хотят платить, покупать хостинг и т.д. для того чтобы просто писать о чем-то своем. Блоггер позволяет менять дизайны как душе угодно, однако использует немного не обычную не HTML систему шаблонов. Трудно сказать есть тут преимущества или нет, однако пока по альтернативам блоггер лучшее решение для блогов. это ИМХО. Бесплатная вордпресс - ставится со ссылкой на дизайнера. Это конечно хорошо но напрягает. Почему мой блог должен быть рекламой кого-то?

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

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

на строки:

<!-- Changing the Blogger Title Tag -->
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
<!-- // Changing the Blogger Title Tag -->

2. Для изменения иконки блога добавьте ниже предыдущего кода еще один:

<link href="XXXXX" rel="shortcut icon" type="image/vnd.microsoft.icon">

Где вместо XXXXX - ссылка на картинку иконки. Кстати, для использования картинки в блоге ее также можно залить в какой-нибудь пост, в конец и потом просто скопировать ссылку на саму иконку и вставить сюда, например так:

<link href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimXQVFadEzTz2Lpi9fLACfMEXJHO_Xc9NpIcWths3ozfEfWOGQdh05NmWpUd6KVpllZiuO1yzE_aYNoam4XsNNBMRC5glLNnHH3-DW7A8KiMwXF27zpz2gn0ihE_NGBc-78yNi4PMlZwo/s1600/favicon.png" rel="shortcut icon" type="image/vnd.microsoft.icon">

3. Есть еще кое что.. Аля новинка. На реализацию ушло примерно пару часов, в связи с поиском картинки и настройкой. Фишка заключается в том что на своем торговом блоге http://a-ba.ru вверху слева есть кнопочка:

Для реализации этого на своем блоге надо в конец шаблона после всех элементов в блоге, перед тегом (</html>) вставить

<noindex><div class='closebutton' onmousedown='changenav()'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsP0g3nt4cseEJLoB2-x9vEzUYChQQxBbrzNS64QV1iUTxSDh1uEgSuSnwNeMy3dVFoPjcgXbOobP1xkIu7Y9rAQWcGjqTBsfpDfVZBpppo0bLNm8OImsPF2WZwVo94H3awCr0iNEeJ78/s1600/arrow_updown.png' title='Скрыть / Показать'/></div></noindex>

Далее в каждом блоге как правило внизу страницы (желательно внизу!!!) есть разметка HTML в которой счетчики и прочая туфта. В элементах страницы просто добавляете гаджет HTML/JavaScript после чего в него вставляете код:

<script type="text/javascript"><!--
function changenav()
{
var navbar = document.getElementById('navbar-iframe');


if(navbar.style.display!="block")
navbar.style.display="block";
else
navbar.style.display="none";
}
//--></script>


<style type="text/css">
#navbar-iframe {
display: none;
}


div.closebutton {
font-size:24px;
color: #0000cc;
background-color:3366cc;
width: 23px;


z-index: 1000;


position: absolute;
left:0px;
top:30px;
opacity: 0.3;
}


div.closebutton:hover {
opacity: 1;
cursor: pointer;
cursor: hand;
}
</style>

Но опять таки акцентирую внимание на том что гаджет ставить в конец страницы! И вообще любые скрипты на сайте лучше пихать в конец страницы чтобы не заставлять пользователей с медленным инетом ждать загрузки. Хотя таких становится все меньше.

Для примера вставил реализацию в этот блог вверху-слева!
Удачного дня! :)