Как сделать аннотацию к страницам HTML

15.09.12 NMitra

Выбираем гаджет HTML/JavaScript, куда добавляем код абзаца:

<style>
  .anons dd { margin: 0; }
  .anons dt a { text-decoration: underline; } /* при желании, подчёркивание у ссылок */
</style>

<dl class="anons">
<dt><a  href="http://ваша_ссылка.html">Название_страницы</a></dt>
<dd>аннотация</dd>
<dt><a href="http://ваша_ссылка.html">Название_страницы</a></dt>
<dd>аннотация</dd>
<dt><a href="http://ваша_ссылка.html">Название_страницы</a></dt>
<dd>аннотация</dd> 
</dl>

Результат:

в f t

наверх ↑

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

a.tkachuk: Сделал все как вы сказали, единственное - удалил выделение, подчеркивание и аннотацию. Вопрос а как сделать, чтобы не было такого большого расстояния?? вот картинка:

https://lh4.googleusercontent.com/-Vy1vLBGZ3kQ/TXC1ccQOwyI/AAAAAAAAAFI/WJ190qm5F44/s1600/bolshoerasstojanie.JPG

Чтобы расстояние было как между заголовками статей чуть выше, то есть когда они друг за дружкой идут и все.
NMitra: Не нужно создавать несколько гаджетов HTML/JavaScript, достаточно одного. Тогда расстояние между ссылками будет под вашим контролем.
a.tkachuk: )))))) Гениально.
a.tkachuk: Ох, не все так радужно оказалось. Долго крутил, крутил, крутил, пока не получилось то что получилось:

https://lh6.googleusercontent.com/-4iGnVVOzyFE/TXDJD_1qi6I/AAAAAAAAAFM/xaG_MWIMNw0/s1600/razmer.JPG

Интересно, а чтобы убрать подчеркивание, можно просто выкинуть style="text-decoration:underline", как я это сделал?
NMitra: Насчёт text-decoration:underline вы правы. В предложенном ниже варианте подчёркивания не будет даже при наведении мышки на текст.

Я предлагаю два варианта. Это самые простые решения. Их можно усложнить, если добавить стиля CSS.

1) включить в гаджет HTML/JavaScript:

<ul style="list-style: none;">
    <li><a href="http://forumsmi.blogspot.com/p/kak-osveschali-sobitij.html" style="text-decoration: none;">Как освещали события</a></li>
    <li><a href="http://forumsmi.blogspot.com/p/hitparadstendapov.html" style="text-decoration: none;">Хит-парад стендапов</a></li>
    <li><a href="#">и т.д.</a></li>
</ul>

2) создать гаджет "Список ссылок", добавить необходимые ссылки будет проще и наглядней и правильней с точки зрения верстки. Затем в "Дизайн"-"Изменить HTML" перед ]]></b:skin> добавить нужный стиль, а именно:

#LinkList1 ul {
  list-style: none;
}

#LinkList1 ul a {
  text-decoration: none;
}
a.tkachuk: Отличные решения! Так как считаю, что при наведении мышки черта может появляться (для удобства понимая, что да - действительно мышка навелась туда куда надо), то есть меня она не смущает - пусть остается.

А вот способ добавления ссылок изменил с гаджета HTML/JavaScript на гаджет "Список ссылок". Так удобнее, ведь мне аннотации были не нужны, а про гаджет "Список ссылок" я не знал :)
Вика: Здравствуйте! У Вас аннотации высвечиваются при наведении мышки курсором, я сделала тоже самое, но у меня аннотации прописываются прямо снизу. Подскажите пожалуйста, где я допустила ошибку?

И еще один вопрос, у Вас меню выделено обтекаемыми рамками. Мне тоже хочется сделать так, но другого цвета. Я не могу понять, пробовала по всякому, но что-то не получается.
Спасибо, заранее.
NMitra: Здравствуйте! Дело в том, что раньше мне непременно хотелось чтобы вид был: ссылка, а под ней краткая характеристика пункта. И некоторое время у меня было именно так. Но затем я вторглась в шаблон и несколько изменила дизайн. Аннотация стала не уместной и я убрала её. Взамен прописала тегу а параметр title. Поэтому появляется всплывающая подсказка. См.
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#title

Здесь более сложно: http://shpargalkablog.ru/2011/02/vsplyvayushchiye-podskazki.html.

Про фон можете посмотреть здесь: http://shpargalkablog.ru/2010/12/pomenyat-fon-gadzhetov-blogger.html. При возникновении вопросов, спрашивайте.
Вика: Большое спасибо за быстрый ответ, обязательно попробую. И у меня еще один вопрос, может не по теме, но может быть Вы мне поможите. Скажите пожалуйста, как сделать так, чтобы в правом сайдбаре можно было разместить колонку с минифото и ссылками возле них.
Заранее спасибо. А вобще, я читаю ваш сайт, как настольную книгу, и уже кое-что стала понимать. Спасибо за доходчивые объяснения.
Вика: Огромное спасибо!!! Вы добрая фея! У меня все получилось.
NMitra: Можно воспользоваться гаджетом "Популярные сообщения" (http://shpargalkablog.ru/2011/03/populyarnye-soobshcheniya-blogger.html),

Для того, чтобы самим подбирать интересующую страницу и абсолютно любую картинку, выбираем HTML/JavaScript. Код:
<a href="адрес_страницы"><img alt="текст" src="http://домен/000000000000/00000000000/00000000000/00000000000/s72-c/000000000000.jpg" border="0" height="72" width="72" style="float: left; padding: 0 7px; 5px 0"/>
<strong>Название_страницы</strong></a><br />аннотация<div style="clear: both; margin-bottom: 20px;"></div>

Пример с картинкой из статьи:
<a href="http://shpargalkablog.ru/2010/07/kak-dobavit-annotatio-stranitsam.html"><img alt="Как добавить аннотацию страницам" src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TO-GoA7mRBI/AAAAAAAABCk/Thm3Qp4ee2E/s72-c/Kak-dobavit-annotatsiyu-stranitsam.png" border="0" height="72" width="72" style="float: left; padding: 0 7px; 5px 0"/>
<strong>Аннотация на боковой панели</strong></a><br />Раньше мне непременно хотелось чтобы вид был: ссылка, а под ней краткая характеристика пункта.<div style="clear: both; margin-bottom: 20px;"></div>
NMitra: Мне очень приятно это слышать)))