Два дня назад – в среду, я писал пост о том как сделать социальные кнопки на WordPress без плагинов. В комментариях к этой статье некий пользователь yobizo, еще заинтересовался, как сделать панельку как у меня, с социальными кнопками и подпиской на e-mail. Об этом и расскажу сегодня.
В уроке по созданию социальных кнопок без плагинов, я все кнопки объединил в один див social-button. Внутри этого дива создадим новый стиль – social-padding (закрывающийся тег, также стоит в конце всех кнопок), через который мы будем писать отступы самих кнопок. Теперь для того, чтобы сделать рамку в style.css прописываем следующее:

.social-button{
border:#CCC solid 1px; /*сплошная рамка, размером 1 пиксель, цвета ССС (серый)*/
}
.social-padding{
padding:10px;/*отступы кнопки со всех сторон (по 10 пикселей)*/
}

Можете обновить страницу и посмотреть что получилось. У меня так:

Следующий шаг – добавление формы подписки. Если вы зарегистрированы на FeedBurner, то оттуда достаем форму подписки. Для меня она выглядит так:

 <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PisklovAlexandrBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="PisklovAlexandrBlog" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form> 

Ее нужно вставить сразу после кнопок. Рассмотрим на примере программы Dremweaver. Вставьте код, туда где показано красной линией.

После вставки обновляем страницу, получаем результат.

Как видите, получилось не очень. Для начала нужно убрать еще одну рамку, которая автоматически идет с кодом FeedBurner. Самая первая строка

 <form style="border:1px solid #ccc;padding:3px;text-align:center;"

И это

 border:1px solid #ccc;padding:3px;text-align:center;

заменяем на

 padding-top:3px;text-align:left;

Уже получается более похоже на конечный результат.
Дальше нужно убрать лишние слова: Enter your email address, Delivered by FeedBurner и заменить слово на кнопке. Вместо Subscribe на Подписаться!
Чтобы убрать Enter your email address, ищем в коде

 <p>Enter your email address:</p>

и убираем его. Аналогично с Delivered by FeedBurner, ищем

 <p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p>

и убираем. А для замены слова на кнопке, в предпоследней строке кода найдите

 value=»Subscribe»

и слово Subscribe, заменяем на свое. Так, посмотрим на результат.

На картинке видно, что кнопка располагается на другой строке, нам нужно ее поставить на одной с формой ввода email строке.

 <p><input  type=»text» style=»width:140px; border: #333 solid 1px;» name=»email»/></p>

вот этот код нужно исправить: убрать в нем теги

<p></p>

После надо вставить заголовок: Получать обновления на E-mail. Находим окончание тега

 ;return true»>

и сразу же после него добавляем

 <h3>Получать обновления на E-mail</h3>

Обновите страницу. Уже практически все готово. Только одно НО, при нажатии на форму ввода email, слова: Введите ваш E-mail не пропадают, это мы тоже сейчас сделаем. А также отодвинем нашу кнопку правее.
Чтобы сильно не заморачиваться, предлагаю найти

 <input  type="text" style="width:140px; border: #333 solid 1px;" name="email"/>

и заменить на

 <input value="Введите Ваш e-mail" onfocus="if (this.value == 'Введите Ваш e-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваш e-mail';}"  type="text" style="width:140px;border:1px solid #8C8C8C; float:left; font-size:11px; height:22px;" name="email" />

Теперь при нажатии на окно ввода e-mail надпись пропадает. Осталось отодвинуть кнопку. Если вы используете стандартную кнопку, то в коде

 <input type="submit" value="Подписаться!" />

нужно внести некоторые изменения, прописать style и назначить margin.

 <input style="margin-left:10px;" type="submit" value="Подписаться!" />

Посмотрим на конечный результат.

По-моему очень похоже, главное различие в кнопке. Но ее тоже можно сменить, прописав в последнем коде вместо style, к примеру class=»button-soc» и в style.css поставить фон для этого класса, через свойство background.
На этом я заканчиваю эту статью. Надеюсь я помог пользователю yobizo и не только ему.

Толстая ссылка: censor.net.ua (тИЦ=1900, PR=5) — для получения обратной ссылки комментируем новость.

Постовой: Кто не мечтал зарабатывать в интернете? Таких, наверное, нет. Поэтому советую прочитать про заработок в интернете без вложений

Похожие записи:

1. Добавляем поле поиска Joomla! 1.5 в шапку сайта
2. Добавляем кнопку YouTube в панель редактирования записи
3. Создаем логотип для сайта (бесплатно)
4. Создаем карту сайта в Joomla 1.5