Гостевая книга с собственным дизайном

Гостевая книга из стандартного набора услуг предлагаемого хостингом народ.ру многих людей не устраивает тем, что в ней нет возможности создать собственный дизайн, сделать так, чтобы гостевая книга была продолжением страниц сайта. В стандартной гостевой нельзя использовать смайлы, аватарки, в общем, много чего нельзя. Многие даже уходили с народа только потому, что их не устраивала стандартная гостевая книга, которую им любезно предложили разработчики хостинга. Вот уже несколько поколений умельцев создают свои варианты гостевых книг, которые можно использовать на славном хостинге narod.ru, пишут скрипты, пишут css, разрабатывают дизайн.

Мы тоже решили заняться этой проблемой и кое что у нас уже получилось. Чтобы не ходить вокруг да около, приступим к делу.

Для создания гостевой книги со своим дизайном на хостинге Narod.ru необходимо использовать текстовые файлы с расширением ".txt".

Для создания гостевой книги из двух файлов требуется создать два текстовых файла:

1. Файл содержащий HTML код вашей страницы, все пути до картинок, файлов и т.д. с гостевой книги, должны быть абсолютными, то есть, если ваши картинка "paint" лежит в папке images, то путь до нее надо указать так: http://ваш-сайт.narod.ru/images/paint.jpg

2. Файл содержащий описание стиля выводимых сообщений в гостевой книге.

В файл отображающий дизайн гостевой книги (назовем его guest.txt) необходимо вставить между тегами <head> и </head> скрипт:

<SCRIPT language="javascript" type="text/javascript">
function ALZ(s) {
return (s<10?"0":"")+s.toString();
}
function C2UT(s) {
d=new Date(s);
return ALZ(d.getDate())+"."+ALZ(d.getMonth()+1)+"."+d.getFullYear()+" "
+ALZ(d.getHours())+":"+ALZ(d.getMinutes());
}
</SCRIPT>

В то место которое вы выбрали для отображения формы для ввода данных и сообщений оставленных посетителями вашего сайта вставьте:

<form name="form" action="leave_message.xhtml" method="post">
<input type="hidden" name="owner" value="{OWNERID}">
<input type="hidden" name="newlocation" value=
"http://www.narod.ru/guestbook/?owner=Ваш_id&mainhtml=guest.txt&messageshtml=book.txt">
<p><input type="text" size="30" name="your_name"> <label>Ваше имя</label></p>
<p><input type="text" size="30" name="your_email"> <label>Ваш e-mail</label></p>
<p><input type="text" size="30" name="your_url"> <label>Ваш URL</label></p>
<p><label>Ваше сообщение:</label></p>
<p><textarea rows="5" cols="40" name="your_message"></textarea></p>
<p><input type="submit" value="Добавить сообщение"></p>
</form>
<br><br>
{MESSAGES}
<hr>
{PAGEBAR}

Красным цветом веделен кусок кода в форме, который Вам надо поменять на ID своей гостевой. Каждая гостевая на сайтах расположенных на хостинге narod.ru имеет свой уникальный идентификатор ID, узнать ID своей гостевой можно пройдя по ссылке "гостевая" из своей мастерской. В ссылке http://www.narod.ru/guestbook/?owner=234345789 цифры в конце это и есть ID Вашей гостевой книги, вместо цифр можно использовать свой логин на народ.ру.

В том месте где будет находиться {MESSAGES} будут выводиться сообщения посетителей и ваши ответы.

Вместо {PAGEBAR} будут выводиться ссылки на страницы вашей гостевой книги.

Слово script необходимо писать в верхнем регистре, то есть заглавными буквами SCRIPT

В гостевой книге можно пользоваться неполным тегом DOCTYPE, или вообще его не использовать

В результате у вас должно получиться примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title>Гостевая книга</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT language="javascript" type="text/javascript">
function ALZ(s) {
return (s<10?"0":"")+s.toString();
}
function C2UT(s) {
d=new Date(s);
return ALZ(d.getDate())+"."+ALZ(d.getMonth()+1)+"."+d.getFullYear()+" "
+ALZ(d.getHours())+":"+ALZ(d.getMinutes());
}
</SCRIPT>
</head>
<body>
<form name="form" action="leave_message.xhtml" method="post">
<input type="hidden" name="owner" value="{OWNERID}">
<input type="hidden" name="newlocation" value=
"http://www.narod.ru/guestbook/?owner=Ваш_id&mainhtml=guest.txt&messageshtml=book.txt">
<p><input type="text" size="30" name="your_name"> <label>Ваше имя</label></p>
<p><input type="text" size="30" name="your_email"> <label>Ваш e-mail</label></p>
<p><input type="text" size="30" name="your_url"> <label>Ваш URL</label></p>
<p><label>Ваше сообщение:</label></p>
<p><textarea rows="5" cols="40" name="your_message"></textarea></p>
<p><input type="submit" value="Добавить сообщение"></p>
</form>
<br><br>
{MESSAGES}
<br><br>
{PAGEBAR}
</body>
</html>

В файл в котором будут отображаться сообщения в гостевой книге (назовем его book.txt), можно использовать (необязательно) {JSDATE}, {AUTHOREMAIL} и {URL} .

Скрипт {JSDATE} покажет время, когда была сделана запись в гостевой книге.

<SCRIPT type="text/javascript">
document.write(C2UT({JSDATE}));
</SCRIPT><NOSCRIPT>{DATE}</NOSCRIPT>

{AUTHORNAME} - укажет на почтовый ящик оставившего сообщение

<a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a>

{URL} - укажет на адрес сайта оставившего сообщение

<a href={URL}>{URL}</a>

Вместо {MESSAGE} будут выводиться сообщения посетителей

Вместо {OWNERREPLY} будут выводиться ваши ответы на сообщения посетителей

В общем, файл book.txt может выглядеть так:

<hr>
<SCRIPT type="text/javascript">
document.write(C2UT({JSDATE}));
</SCRIPT><NOSCRIPT>{DATE}</NOSCRIPT> 
<a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a> 
<a href={URL}>{URL}</a>
<p><i>{MESSAGE}</i></p>
<p><b>{OWNERREPLY}</b></p>

Если вы будете использовать предложенные нами имена файлов, тогда адрес гостевой будет таким:

http://www.narod.ru/guestbook/?owner=Ваш_id&mainhtml=guest.txt&messageshtml=book.txt

Незабудьте заменить Ваш_id на ваш идентификатор или логин

И последнее, чтобы валидатор не ругался, ссылка на гостевую должна быть такой:

http://www.narod.ru/guestbook/?owner=Ваш_id&mainhtml=guest.txt&messageshtml=book.txt

Почему нельзя просто писать "&"?

Все дело в HTML сущностях, или как их ещё называют, мнемониках (" < > € ...). Мнемоники начинаются с символа амперсанд "&", который зарезервирован специально для мнемоник. Поэтому, когда встречается амперсанд, то это должно быть началом мнемоники. Хотя браузеры, конечно, не раздувают из этого проблему, и в большинстве случаев вы получите то, что ожидали. Но это не повод делать НЕПРАВИЛЬНО.

Также учтите, что заменять амперсанд "&" на мнемонику "&" следует только в HTML документах, где он является специальным символом (также как и "<" и ">"). Когда же вы набираете URL в адресной строке браузера или указываете ссылку в письме, которое представлено как простой текст (plain text), то писать нужно именно "&".

И на последок. Когда вы кликаете ссылку в HTML документе, то браузер преобразует "&" в "&" и сервер получит строку запроса с символом "&".

Гостевая книга готова, посмотреть на нее можно здесь

Чтобы сделать гостевую книгу на народ.ру со всеми возможными прибамбахами (смайлы, BB-коды, аватары, ICQ, и т.д.) используйте вот эти заготовки:

Текстовый файл g.txt
Текстовый файл b.txt

Скрипты можете взять отсюда:

Смайлы smile.js
BB-коды bb_code.js
Аватарки avat.js
Аватарки adm_av.js
Аська add_icq.js
Слайдер slider.js
Разбивка длинных слов maxlength.js

Саму гостевую книгу я разместил здесь.

Если же вам не до разбирательств, что и как тут работает, можете просто скачать небольшой архив (84kb) и загрузить его содержимое в корневую папку своего сайта.

Перед загрузкой содержимого архива на сайт, откройте в блокноте текстовый файл avat.js и вместо слов ваш-сайт впишите свой логин народ.ру.

Загрузите в папку avatar свою фотку размером 80х80 под именем my_avatar1.jpg.

Установите на страницы сайта ссылку на свою новую гостевую книгу:

http://www.narod.ru/guestbook/?owner=ваш-логин&mainhtml=g.txt&messageshtml=b.txt

заменив слова ваш-логин на ваш логин на народ.ру

Прокомментировать

При нажатии на эту ссылку в «фоновом» режиме (без перехода на страницу гостевой книги) отобразится форма для добавления сообщений. Сделано это с помощью технологии AJAX для того чтобы можно было быстро и удобно оставлять сообщения владельцу сайта.

Тем, кого заинтесовала возможность использования такого всплывающего окна на собственном сайте, должны проследовать на страницу с описанием работы скрипта GreyBox, который поможет вам сделать красивые всплывающие окна для отображения информации сайта, изображений и других материалов.

HTML-pedia
Веб-строительство

Сообщество
Веб-потребителей

Навигация

Гостевая книга с собственным дизайном

Почему нельзя просто писать "&"?

HTML-pedia Веб-строительство

Сообщество Веб-потребителей

Навигация

Гостевая книга с собственным дизайном

Почему нельзя просто писать "&"?

HTML-pedia
Веб-строительство

Сообщество
Веб-потребителей