Шаблоны для Blogger`а

воскресенье, 27 июля 2008 г.
В одном из предыдущих постов я обещал рассмотреть несколько ресурсов, где можно найти бесплатные шаблоны для движка Blogger. Казалось бы, нет ничего проще – достаточно просто поискать словосочетание "Blogger Templates" в Google, тем не менее, практика показала, что найти шаблон таким образом не очень то и просто. Поэтому приведу несколько ресурсов, где собраны базы с лучшими бесплатными шаблонами для вашего блога. Но перед этим пару слов о представленных в блоге работах. Как вы, наверное, заметили в меню блога также есть раздел под названием Шаблоны где время от времени я буду публиковать различные бесплатные дизайны для персональных и тематических блогов - так что советую следить за обновлениями блога или, если нужны, шаблоны поискать их там в архиве.

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

B-Templates

Шаблоны для Blogger`а - B-TemplatesСодержит наверное самую большую коллекцию шаблонов для Blogger`а. Имеется достаточно много уникальных дизайнов. Все темы разбиты по категориям (цветам, количеству колонок). Для более удобной навигации есть блок облака тегов, а также списки самых скачиваемых, просматриваемых и популярных (по голосованию посетителей) шаблонов.
В общем, настоятельно рекомендую посетить данный сайт в первую очередь.

eBlog Templates

Шаблоны для Blogger - eBlog Templates
Это прямо целый портал! Здесь содержатся не только шаблоны для блоггера, а и множество дополнительных «бонусов» - начиная от регистрации пользователей, заканчивая шаблонами для wordpress и авторскими статьями. Что-то вроде небольшого сообщества. Можно отсортировать файлы в зависимости от количества скачивания и рейтинга голосования от посетителей. Короче говоря, ресурс оставляет достаточно приятное впечатление.

BlogCrowds


Шаблоны для Blogger - BlogCrowds
Проект, как и предыдущий, также в какой-то степени является целым сообществом. Кроме самих шаблонов, которых, кстати, здесь немало, можно найти статьи по блоггингу, пообщаться на форуме и т.д. Шаблоны имеются самые разнообразные – от предельно простых до сложных с большим количеством деталей, есть переделанные макеты из wordpress, а также некоторые совсем уникальные экземпляры.

BTemplate



Также шаблоны для своих блогов на платформе Blogspot в архиве Btemplate. В свете последних обновлений системы и выхода Дизайнера Шаблонов Blogger Template Designer, особенное внимание будут притягивать оригинальные темы со смелыми и нестандартными дизайнерскими решениями. На них бы я и рекомендовал авторам проекта заострить свое внимание, думаю шаблоны в минималистическом стиле блоггеры теперь смогут создавать и сами. При этом, конечно, не следует забывать, что в Btemplate вы найдете русифицированные темы, что для некоторых пользователей немаловажно.

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

При подготовке поста частично использована информация со статьи The Top 10 Blogger Template Resource Sites. Кроме того предлагаю ознакомиться еще с некоторыми постами по шаблонам, очень часто в них можно найти классные макеты.

Понятно, что некоторые экземпляры во всех этих ресурсах/статьях пересекаются, но порой встречаются действительно эксклюзивные работы. Кстати, советую ознакомится с постом - как подключить нестандартный шаблон в Bloogger.

 Конкурс в блоге: установи граватар и получи $50Напоследок хочу анонсировать небольшой конкурс на еще одном своем проекте - Tod’s Blog. Моё видение интернета. Каждый желающий сможет выиграть до $50 практически не прилагая к этому никаких усилий. Кликайте на баннер чтобы узнать больше.
Это первое мероприятие из 3-х, посвященных годовщине блога. Хотите быть в курсе последних тенденций в мире блоггинга и вебмастеринга или просто поучаствовать в конкурсах - подписывайтесь на RSS обновление.

Смотрите film online.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Альтернативная реализация сообщений под катом с визуальным эффектом

суббота, 19 июля 2008 г.
Недавно я уже рассматривал одну из возможностей публикации сообщений под катом для Blogger – после каждого поста добавлялась надпись «Читать далее» со ссылкой на страницу с полным текстом заметки. Сегодня предлагаю рассмотреть второй вариант реализации поставленной задачи. Особенностью этого способа есть то, что при клике на ссылку «Читать далее», переход на другую страницу не производится, продолжение текста отображается сразу после анонса и без обновления страницы в браузере.

1. Заходите в меню «Макет» - «Изменить HTML». Перед тем как производить любые изменения в вашем шаблоне, сохраните его код на локальный компьютер.

2. Найдите в шаблоне тэг </head> и вставьте следующий код перед ним:
<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 &lt; 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 &lt; 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 &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

Вы можете скачать этот код здесь.

3. Поставьте галочку в поле «Расширить шаблоны виджета» в правом верхнем углу над полем шаблона. После этого найдите в коде блок с id='post', у меня эта строка имеет вид:
<b:includable  id='post' var='post'> 
Далее аккуратно вставьте в код часть кода, выделенную красным цветом ниже:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

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

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

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Вы можете скачать этот код здесь.

После этого сохраните шаблон, нажав соответствующую кнопку.
Если возникло сообщение с ошибкой, то восстановите сохраненный ранее исходный код шаблона и попробуйте выполнить шаги 2-3 еще раз.

Добавить код у меня также получилось не сразу, судя по наблюдениям, вставлять первую его часть (шаг 2) требуется без включенной опции «Расширить шаблоны виджета», хотя сказать, что проблема скрывается именно в этом наверняка сказать не могу.

4. Теперь чтобы скрыть часть текста в сообщении нужно использовать следующую конструкцию:

Вступление для поста <span id="fullpost">продолжение текста</span>

5. Если вы хотите добавить визуальный эффект для отображения/скрытия текста сообщения, то добавляете перед тэгом </head> код:
<script type="text/javascript" src="http://anniyalogam.com/scriptaculous/src/prototype.js">
<script type="'text/javascript'" src="'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=">
<script type="'text/javascript'">
var fade = true;
var peekaboo_bgcolor = '#ffffff';
</script>
Причем переменная peekaboo_bgcolor должна совпадать с цветом фона вашего шаблона. Если это не так – укажите вместо используемое значение.

Далее находите в коде похожую конструкцию и удаляете код, выделенный красным:
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
После внесения всех изменений, сохраните шаблон.

При подготовке материала использовались источники:
Читать дальше-2 или внедряем Peekaboo view в Blogger (рус)
Blogger hack: Expandable posts with Peekaboo view (eng)

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

А здесь можете глянуть онлайн фильмы бесплатно.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails