Для того, чтобы это было запоминающе (элемент постепенно появляется или выезжает), обращаемся к Google библиотеке API, добавив перед:
</head>личный код
<script src="https://www.google.com/jsapi?key=ваш_ключ" type="text/javascript"></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>Для платформы Blogger код будет чуть отличаться:<script src='https://www.google.com/jsapi?key=ваш_ключ' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>
google.load("prototype","1.6.0.3");
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
google.load("scriptaculous", "1.8.2");
</script>Ключ можно получить на странице "Sign-up for an API Key", добавив URL (адрес) вашего сайта/блога. Крайне быстрая процедура.Теперь включаем в HTML страницу ссылку или кнопку:
<a href='#' onclick='эффект("имя","параметры"); return false'>анкор</a>
Эффекты могут быть разными, вот наиболее подходящий данной ситуации:
new Effect.toggle имеет следующие параметры:- slide
Пример: выплывающий блок количества комментариев с большой скоростью - blind
Пример: - appear
Пример: постепенно появляющееся изображение.
Имя - это идентификационный номер, связывающий ссылку с элементом. Должен быть индивидуальным для каждого элемента.
И, последнее, окантовываем фрагмент кода, который должен быть скрыт, в тег DIV.
<div align='center' id='имя' style='display: none;'>фрагмент_кода</div>
Если же, наоборот, первоначально нужен видимый элемент, который в последствии исчезает, убираем style='display: none;'.
Как скрыть показать текст. Образец.
- Шаг 1. Включаем JavaScript перед </head>.
- Шаг 2. При редактировании страницы в HTML, добавляем код.
<a href='#' onclick='new Effect.toggle("pryach","blind"); return false' type='submit'>Пример: исчезающий текст</a><div id='pryach'> Как скрыть/показать текст.</div>
Как скрыть показать текст.
 |
| Добавить код (показать скрыть текст) в сообщение Blogger. |
Появляющиеся комментарии Blogger. Кнопка скрыть/показать.
На примере веб-сервиса Blogger рассмотрим образец добавления кода в блок комментариев. Стоит учитывать, что скрипт неминуемо замедлит загрузку страницы.
- Шаг 1. Переходим на вкладку "Дизайн"-"Изменить HTML". Сохраняем копию шаблона по ссылке "Загрузить весь шаблон".
- Шаг 2. Там же устанавливаем галочку "Расширить шаблоны виджета". Поиск элементов кода осуществляем с помощью комбинаций клавиш Ctrl+F.
- Шаг 3. Добавляем вышеуказанный скрипт перед </head>.
 |
| Добавить JavaScript Google библиотеки API в шаблон Blogger. |
- Шаг 4. Количество комментариев заключаем в ссылку:
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>Окантовываем в BUTTON(оформляем текст кнопкой) или тег <a/>:<button onclick='new Effect.toggle("poyavlyayushchiesya","appear"); return false' type='submit'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4></button>"1 Коммент.:" выглядит не очень презентабельно, поэтому можно заменить его на более соответствующий грамматике русского языка "1 Комментарий". Тогда можно убрать кнопку для варианта "Нет комментариев":<b:if cond='data:post.numComments == 0'>
<h4>Нет комментариев.</h4>
<b:else/><button onclick='new Effect.toggle("poyavlyayushchiesya","appear"); return false' type='submit'><h4>
<b:if cond='data:post.numComments > 20'>
<data:post.numComments/> <script>
if(<data:post.numComments/> / 10 % 10 == 1) document.write("комментариев"); else
switch(<data:post.numComments/> % 10){
case 1: document.write("комментарий"); break;
case 2:
case 3:
case 4: document.write("комментария"); break;
default: document.write("комментариев");
}
</script><noscript><data:commentLabelPlural/></noscript>
<b:else/>
<b:if cond='data:post.numComments == 1'>
<data:post.numComments/> комментарий
<b:else/>
<b:if cond='data:post.numComments < 5'>
<data:post.numComments/> комментария
<b:else/>
<data:post.numComments/> комментариев
</b:if></b:if></b:if></h4></button></b:if>
- Шаг 5. В код отзывов добавляем тег DIV. Включенные фрагменты выделены жирным.
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<div id='poyavlyayushchiesya' style='display: none;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
</div>Можно ещё попробовать одновременное использование с формой отзывов социальных сетей. Полный же цикл перевоплощения и экспериментов с комментариями Blogger вы можете почитать в одноименной статье.
Показать/скрыть содержимое гаджета Blogger.
Шаги с 1 по 3 аналогичны изменению комментариев. Тренироваться будем на гаджете "Архив блога". Результат можно посмотреть в Приложении 1. Добавленные элементы выделю жирным, а важные - курсивом. Нажав Ctrl+F ищу название гаджета, в нашем случае "Архив блога".
<b:widget id='BlogArchive1' locked='false' title='Архив блога ↓↑' type='BlogArchive'>
<b:includable>
...
</b:includable>
<b:includable>
...
</b:includable>
<b:includable>
...
</b:includable>
<b:includable>
...
</b:includable>
<b:includable id='main'><a href='#' onclick='Effect.toggle("arhiv","slide"); return false'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
</a><div align='center' id='arhiv' style='display: none;'>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>Пару пояснений: - Стрелочки я добавила прямо в заголовок гаджета (title='Архив блога ↓↑'), а можно меджу тегами <h2>...</h2>. Обозначить, что возможно скрыть/показать блок позволит и какой-то выбранный небольшой рисунок, включенный в данный участок кода. Можете прочитьть качественную статью про тег IMG.
- изменения производим именно в <b:includable id='main'>.
Не могу сказать почему, но результат меня радует. Это действительно интересное решение и простое в реализации.
Отправить комментарий