Дизайн для форм подписки на RSS
Заканчивая "причесывать" свой блог, мне оставалось лишь приделать форму подписки на RSS. В итоге это затянулось на несколько часов :) Нет, вы не подумайте, что мне не хватило ума вставить простой код от FeedBurner :) Просто, мне вдруг до безобразия захотелось сделать для этой формы какой-то эффектный дизайн..
Сначала хотелось сделать форму как можно компактнее, без лишних кнопок, заголовков и т.д.
В итоге получилось такое:
Но и этого мне было мало :)
Выглядит компактно, но мне еще нужо было куда-то разместить пару счетчиков с числом подписчикови кнопку Яндекс.Ленты. Тогда, я вспомнила о статье "5 способов увеличить свободное пространство на странице". Не зря же переводила :)
Задача была в том, чтобы реализовать 2 свойства в одном, а именно: компактность + максимум содержания = идеальная форма.
При нажатии на форму, выпадает поле для ввода адреса
И уже как следствие:
Если у вас много разных кнопочек, то можно сделать например так: взять за основу форму с выпадающим полем, но при нажатии будет выезжать не поле, а весь этот блок. И эффектно и компактно :)
P.S. Если вам понравился дизайн, то файл со всеми формами можно скачать тут в формате png.
UPD: скрипт аналогичный тому, что у меня на сайдбаре можно скачать здесь
Dmoz
Очень красиво получилось. Скачаю себе, пожалуй, на будущее:) Спасибо.
TodЦитировать
Замечательная задумка! Чуточку бы мотивации для нажатия по “следствию” вложить и совсем круто будет. Респект. Как на счет использования идеи или это только для себя?
KupuycЦитировать
Привет, выложи плиз готовый скрипт!
delafЦитировать
За ссылку на статью спасибо.
Я мыслил где-то в том же направлении, когда проектировал скрипт для раздвигания блоков меню и подписки на RSS. У меня получилось так:
Ты свой скрипт тоже выстави, мне твоя идея очень понравилась.
СвязистЦитировать
да =)
дизайнерские способности на лицо
у вас новый пч =)
maximЦитировать
Мне понравилось, обязательно сделаю для своего сайто что либо подобное.
ЕвгенийЦитировать
Выложила скрипт аналогичный тому что у меня на сайдбаре теперь. Скачать можно здесь
adminЦитировать
Очень красивые формочки получились. Спасибо за идею! Буду придумывать тоже что-то новенькое :)
Настя МанноЦитировать
То, что делал на отдельной странице, сделал теперь на главной (). Как полагаете, нормально получилось?
СвязистЦитировать
Очень интересно смотрится :) Наверное минус будет только в том, что не векторная картинка, а растровая, поэтому при уменьшении видны все неровные края. Но в целом очень эффектно выглядит :)
АвторЦитировать
Добрый день.
Я не профессиональный веб-разработчик, так что комментарий дилетанта :)
Дизайнерское решение очень понравилось! Две вещи, на которых “зацепился”:
1. Читаю rss с помощью Omea, вследствие этого привык просто наводить курсор на кнопку, выбирать “Копировать ссылку” и вставлять ее в читалку. Тут у меня не получилось это сделать. Как бы сделать чуть-чуть более интуитивное решение, чтобы на кнопку требовалось именно нажать?
2. Хорошо бы сделать закрытие меню нажатием по заголовку повторно? Маленькую надпись “скрыть” нашел только тогда, когда стал цленаправленно ее искать, потому что не верил в такой грубый баг, как незакрытие меню.
GwynbleiddЦитировать
Спасибо за комментарий. Отвечу на ваши замечания:
1. Идея понятна, подумаю как реализовать. наверное сделаю пиктограммку “скопировать ссылку”
2. Надпись “скрыть” сделала именно потому что вначале не каждому было понятно, что можно щелкнуть на верхушку rss еще раз, чтобы закрыть. Наверное просто сделаю надпись побольше.
АвторЦитировать
Симпотно, правда я не сторонник такого нагромождения все-в-одном
DaddyЦитировать
Здравствуйте, а могли бы объяснить если вам не сложно, как этот скрипт заставить работать
ЮрийЦитировать
Здравствуйте. Собственно, заставлять работать ничего не нужно :) Скачиваете, прописываете свои ссылки на RSS и все готово. Единственное еще нужно каждый png файл наложить на фон и сохранить картинку заново, иначе некорректно будет смотреться. Я специально сделала png файлы, чтобы каждый мог сделать под свой фон.
АвторЦитировать
А сам скрипт в какую папку помещается в корневую или в папку с темой? я просто в этих делах профан=)
ЮрийЦитировать
В папку с темой, главное чтобы пути в CSS файле для картинок совпадали
АвторЦитировать
Это я понял, а как собственно подлючить форму, что то же надо прописать в sidebar, что-бы она там появилась-)?
ЮрийЦитировать
1. Вам нужно скопировать в папку вашей темы все картинки
2. В файл сайдбара скопировать код из файла rss.htm (то что между <body> естественно).
3.В файл стилей (styles.css) вашей темы в самый конец записать все что между тегом <style> и изменить пути к картинкам на те где у вас лежит картинки.
4. В файле header.php перед закрытием тега </head> записать все, начиная от <script> до </script>
АвторЦитировать
Тоже озадачился дизайном кнопки rss. Хочу что-то оригинальное придумать
grymaksЦитировать