четверг, 18 августа 2011 г.

Как я сделал кнопки RSS и Twitter



Как я сделал кнопки RSS и Twitter
Заимствуем в интернете 2 изображения для RSS и Twitter и делаем себе красиво оформленные кнопки с текстом, используя HTML. Сегодня я расскажу о том, как я сделал себе 2 кнопки для прочтения RSS и Twitter, читайте и ставьте себе, если есть желание.

Ничего сложного, а главное - красиво выглядит, мне лично очень нравится. Так вот, я использовал 2 изображения одного размера, у нас это 128px на 128px, одно для ссылки на прочтение RSS Одной Монетки, а другое для ссылки на Twitter, так же, блога Одной Монетки. Я так же ставил себе Кнопку плюс один от Google.

Изображения можете взять мои. Я их нашел на просторах интернета, так что не плюйтесь попусту. Вы, конечно же, можете пофантазировать и сделать свои, но для начала, так сказать на пробу, можно использовать вот эти, просто сохраните к себе на компьютер.

RSS Блога Одной Монетки     Twitter Блога Одной Монетки

После чего я использовал <table>, то-есть таблицу с одной строкой и двумя ячейками. Так же решил добавить выше картинок надписи для тех, кто думает что картинки попросту украшают блог. В конечном итоге у меня вышел вот такой вот код.

<table width="300" height="128px" border="2" cellpadding="0" cellspacing="2">

<tr>
<td width="150px" align="center" border="2">
Читай RSS
<a rel="nofollow" href="http://feeds.feedburner.com/1monetka" title="Читай Блог Одной Монетки по RSS" target="_blank"><img title="RSS Блога Одной Монетки" width="128px" height="128px" src="/-4FsImZochfc/Tkwrn9udUcI/AAAAAAAAAVg/pGJVzGbr0eo/s400/RSS-1monetka.ru.png" alt="RSS Блога Одной Монетки" /></a>
</td>

<td width="150px" align="center" border="2">
Читай в Twitter
<a rel="nofollow" href="http://twitter.com/1monetka_" title="Читай Блог Одной Монетки на Twitter" target="_blank"><img title="Twitter Блога Одной Монетки" width="128px" height="128px" src="/-hxQIfHEUAsI/Tkwk1hMywZI/AAAAAAAAAVQ/Bl4Z4yT5In4/s400/twitter-1monetka.ru.png" alt="Twitter Блога Одной Монетки" /></a>
</td>
</tr>

</table>

Вместо /-4FsImZochfc/Tkwrn9udUcI/AAAAAAAAAVg/pGJVzGbr0eo/s400/RSS-1monetka.ru.png вставляем ссылку на свою картинку RSS.

Вместо /-hxQIfHEUAsI/Tkwk1hMywZI/AAAAAAAAAVQ/Bl4Z4yT5In4/s400/twitter-1monetka.ru.png вставляем ссылку на свою картинку Twitter.

Меняем http://feeds.feedburner.com/1monetka на ссылку своего RSS канала.
Меняем http://twitter.com/1monetka_ на ссылку своего аккаунта Twitter.

Так же меняем Title и Alt на все что вам будет угодно.

Если не знаете HTML, то копируйте просто и вставляйте в шаблон своего блога. А так попытаюсь расписать для новичков что и к чему.

width="300" - ширина нашей таблицы
height="128px" - высота нашей таблицы

После чего я поделил таблицу на 2 части сделав 2 ячейки и вставив туда картинки с текстом.

Конечный результат:


Напоследок хотел бы сказать, что HTML и Blogger - хорошие друзья, так что чаще используйте это преимущество, которое помогает делать из простого кода красивые кнопки на Twitter и RSS подписку.

1 коммент.:

Анна комментирует...

Спасибо за статью. Никак не получалось выстроить в ряд эти две кнопки в сайдбар , пока не воспользовалась вашим методом.

Отправить комментарий