Недавно я решил, что хочу добавить немного крутости к значку RSS на Blog.SpoonGraphics , отображая текущее число подписчиков. Посмотрев множество примеров всплывающих подсказок javascript в Интернете, я решил, что это будет лучшим решением с отображением соответствующей информации. когда пользователь наводит курсор на область значков. Используя комбинацию чрезвычайно простого скрипта jQuery и фрагмента PHP, следуйте этому пошаговому руководству о том, как отобразить счетчик RSS в своей собственной всплывающей подсказке.
Уже использовав jQuery в Blog.SpoonGraphics в виде области свертываемых комментариев, я решил найти готовый скрипт всплывающей подсказки, который можно легко реализовать.
Изучение jQuery — это то, что я запланировал на ближайшее будущее, но, к счастью, для нас, новичков javascript, доступны готовые загрузки, такие как Simplest jQuery Tooltip Ever от CSS Globe .
Загрузите пакет из CSS Globe или создайте новый файл javascript из исходного кода, представленного в демоверсии.
Вам также нужно будет загрузить последнюю версию jQuery .
Поместите два файла в соответствующую директорию в структуре вашего сайта, используя WordPress. Я сохраняю файлы в папке моей темы в их собственной директории ‘js’. Обращайтесь к двум файлам в разделе
вашего сайта, пользователи WordPress изменяют Файл header.php выглядит так:
Также вставьте стили CSS, предоставленные CSS Globe, в свою таблицу стилей.
Далее следует сгенерировать счетчик фидов с помощью API Feedburners, если вы еще не используете Feedburner для управления своими RSS- фидами, просто зайдите и создайте учетную запись . Используя отличный учебник с 45n5.com , мы можем скопировать код PHP и вставьте его в заголовок нашей веб-страницы, указав свой собственный идентификатор Feedburner в разделе «uri =».
Измените ссылку на RSS-канал, добавив ее class="tooltip"для интеграции со сценарием jQuery. Фактический текст, представленный во всплывающей подсказке, помещается в тег заголовка, выводит количество каналов, за которым следует слово «Подписчики» или «Читатели», например:
title=" Subscribers"
Общая ссылка теперь должна выглядеть так:
Subscribers">
Добавьте последний штрих к всплывающей подсказке, создав полупрозрачный фон, который позволит нижнему сайту просвечивать. В Adobe Photoshop создайте документ размером 178×46 пикселей, нарисуйте прямоугольник со скругленными углами, залейте цветом по вашему выбору и уменьшите непрозрачность до 60%. оставив изображение, показывающее клетчатый шаблон прозрачности в Photoshop. Выберите «Файл»> «Сохранить как» и выберите PNG в раскрывающемся списке.
Измените стиль текста, чтобы он соответствовал содержанию ваших сайтов, и укажите ссылку на фон PNG в CSS. В моем случае CSS выглядит следующим образом:
#tooltip {
position: absolute;
padding: 10px;
display: none;
font-family: "Times New Roman", Times, serif;
font-size: 22px;
font-style: italic;
font-weight: bold;
color: #707070;
background: url(images/tooltip-bg.png) no-repeat;
}
Загрузите файлы и протестируйте. Теперь мы все знаем, что IE6 не любит файлы PNG с прозрачностью Alpha, если вам нужно обслуживать доисторические браузеры, не забудьте добавить исправление IE6 PNG .
Не стесняйтесь проверить живой пример здесь на Blog.SpoonGraphics, наведя курсор мыши на кнопку RSS в заголовке. Пока вы там, вы можете пойти дальше и подписаться 😉
 (Пока оценок нет) Загрузка... |
