Делаем страницу F.A.Q. для блога

Приветствую всех, кто читает мои шпаргалки. Наверняка, вы видели на некоторых сайтах страницы "часто задаваемые вопросы" или "F.A.Q ". Давно мне хотелось попробовать установить такую . Ну и вот, что из этого получилось, можно посмотреть на тестовом блоге в верхнем меню в разделе F.A.Q.
Эта у меня просто пробная страница. И на её примере разберём весь процесс установки в блог. Не такой уж он и трудоёмкий .

Для начала идём во вкладку шаблон и сделаем резервное копирование. Нажимаем изменить HTML и c помощью комбинации клавиш Ctrl+F находим заветную строку ]]></b:skin>. Прямо над ней вставляем следующий   код




.halamanfaq{ margin:10px auto; border:1px solid #999; padding:30px; background-color: #F0F0F0; width:100%; font-family: Verdana;}.halamanfaq h3{ margin:0; padding:0; font-size:16px; color: #000000; }.tanya{padding-top:20px} .tanya dt{ background:url('http://1.bp.blogspot.com/-yiR_3QfrvH8/Usuk9P5yoII/AAAAAAAACIg/YH84cO5VXNk/s1600/pertanyaan.gif') 0 3px no-repeat; padding:3px 0 15px 30px; position:relative; color: #990000; text-decoration: none; font-size: 14px; text-shadow: 1px 1px 1px #ccc; }.tanya dt:hover{ cursor:pointer; text-decoration: none; color: #000099; }.tanya dd{ background:url('http://4.bp.blogspot.com/-PapgGRI89Fk/Usuk_I4cmvI/AAAAAAAACIo/yxPF7P4PVU4/s1600/jawaban.gif') 0 2px no-repeat; padding:0 0 5px 30px; position:relative; color:#333; margin-left: 20px; font-size: 12px; line-height: 20px; }.tanya .hover{color:#990000;text-decoration:underline}

Далее чуть ниже есть закрывающийся тег </head>. Можете так же найти его с помощью клавиш Ctrl+F. И над ним устанавливаем этот  код.

<script type="text/javascript">$(document).ready(function () {
$('.tanya dd').hide();
$('.tanya dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
$(this).next().slideToggle('normal');
}); });</script>


Сейчас  нужно перейти в админ.панель блога и создать новую страницу. Как это делать прочитайте  в статье о страницах в блоге. Переходим из режима создать в режим HTML


 и сразу вставляем следующее-

<h3>F.A.Q - вопросы-ответы </h3>
<dl class="tanya">
<dt>здесь пишем вопрос 1 ?</dt>
<dd>здесь ответ на вопрос 1 </dd>
<dt>здесь пишем вопрос 2?</dt>
<dd>ответ на вопрос 2</dd>
<dt>здесь пишем вопрос 3 ?</dt>
<dd>ответ на вопрос 3</dd>
</dl>
</div>


Перейдите в режим создать и посмотрите что получилось. Можете в редакторе поменять цвет, размер шрифта. Как обычно. После публикации всё будет выглядеть так, как вы видели у меня на тестовом блоге. Последний код лучше отредактировать для себя, где-нибудь в блокноте или черновике .

Если всё правильно сделали, поздравляю! Теперь у вас есть своя страница F.A.Q. И добавив чуть-чуть фантазии, то применение ей можно найти практически на любом сайте.
источник http://www.rivai.org/
Ещё советую прочитать пост о том,  как сделать подстраницы в блоге.

Удачи нам всем.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

5 комментариев:

  1. Привет, Вика! Хорошая идея, обязательно создам такую страницу. Спасибо!

    ОтветитьУдалить
  2. Привет, Сергей. Очень рада, что пригодилось. Сама сейчас подумываю, чтобы подобное на шпаргалках сделать.

    ОтветитьУдалить
  3. Привет, Виктория. По началу не понял в чем фишка, потом решил по нажимать на все слова и увидел как это работает.

    ОтветитьУдалить
  4. Да отличная штука! Вика читаю Вас и радуюсь! Смог найти решения многих своих задач а еще больше почерпнул фишек о которых и не думал (как эта).
    И спасибо что присматриваете за моим детищем, после ваших последних советов полностью переработал дизайн.

    ОтветитьУдалить
  5. Привет Владимир.Для твоего блога эта страничка тоже может пригодится. У меня уже есть задумка, как и у себя её реализовать. Зайду сегодня посмотрю на дизайн. А то я тут с переездом на домен немного засела.

    ОтветитьУдалить

Пользовательский поиск