Как отобразить количество RSS в крутой подсказке (видео)

Недавно я решил, что хочу добавить немного крутости к значку 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 в заголовке. Пока вы там, вы можете пойти дальше и подписаться 😉



Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.