вРазные полезности

Кнопки рейтинга (социальных сетей) в одну строку

Кнопки рейтинга (социальных сетей) в одну строку

Для начала укажу ссылки на официальные страницы социальных сетей где описано как устанавливать их кнопки:

Mail.ru и Одноклассники

Twitter

ВКонтакте

Facebook

Google+

Яндекс

ЖЖ (LiveJournal):

<a onclick=»window.open(‘http://www.livejournal.com/update.bml?event=&amp;subject=’, ‘lj’, ‘width=626, height=436’); return false;» rel=»nofollow» href=»http://www.livejournal.com/update.bml?event=&amp;subject=» title=»Опубликовать в своем блоге livejournal.com»><img src=»/i/social/livejournal.gif» alt=»Опубликовать в своем блоге livejournal.com» width=»100″ height=»21″></a>

А теперь покажу Вам, как можно выставить кнопки рейтинга (статистики) сайта в одну строку при помощи нескольких тегов HTML. Данная штука применима к любым сайтам и любому контенту: тексту, картинкам, видео и прочему. При необходимости, Вы можете использовать данный код в статьях и записях. На примере моего сайта Вы увидите, как можно выставить в «подвале» сайта в одну строку текст, счетчик Mail.ru и счетчик посещений от LiveInternet.

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

Прежде всего, перед тем, как приступить к практической части, не забывайте делать резервную копию файлов с которыми будете работать.

Для тех, кто еще не понял о чем пойдет речь, я сделал скриншот (клик для увеличения):

Данная конструкция находится в самом низу сайта mojwp.ru. Здесь мы видим слева текст, а справа 2 счетчика (Mail.ru и LiveInternet). Все находится на одном уровне и не занимает много места. К тому же это более красиво, чем несколько кнопок друг под другом с большими промежутками между ними.

Чтобы подобное сделать, потребуются некоторые знания html, либо мои подсказки. Для наглядности, я покажу 2 способа, как можно сделать так же, как на данном сайте.

 

Способ №1: используем div.

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

<div style=»float:left; padding: 0 0 5px 5px;»>текст с названием сайта и почтой</div>

<div style=»float:right; padding: 0 0 5px 0;»>счетчик от LiveInternet</div>

<div style=»float:right; padding: 0 0 5px 0;»>Счетчик от Mail.ru</div>

Все это записано в одну строку в файле footer.php (так называемый «подвал» сайта).

float:left — выравнивание по левому краю.

padding: 0 0 5px 5px — внутренний отступ: сверху слева снизу справа

float:right — выравнивание по правому краю

Если у Вас количество кнопок больше, то достаточно добавить необходимое количество контейнеров div. Так же можете поэкспериментировать с отступами, т.е. значениями. Вместо нулей достаточно записать количество пикселей и добавить их обозначение px.

 

Способ №2: при помощи HTML

Если Вы собираетесь развиваться в области «блоггинга», то просто необходимо знать азы HTML. Для этого погуглите и почитайте соответствующую литературу. Могу Вас уверить, что все успешные блоггеры начинали именно так. Я так же периодически заглядываю в справочник http://htmlbook.ru/html/, когда необходимо освежить память.

Чтобы сделать аналогичное тому, как было показано в первом способе, но уже на HTML, нам потребуется следующая конструкция (таблица), которую так же помещаем в нужно место:

<table>

  <tr>

    <td>текст с названием сайта и почтой</td>

    <td>счетчик от LiveInternet</td>

    <td>Счетчик от Mail.ru</td>

  </tr>

</table>

Теперь все будет выстроено в одну строку. Однако при таком коде, ячейки будет идти друг за другом, т.е. без отступов. Чтобы привести все в немного красивый вид, необходимо добавить следующее:

<table width=»100%»>

  <tr>

    <td>текст с названием сайта и почтой</td>

    <td width=»88px»>счетчик от LiveInternet</td>

    <td width=»88px»>Счетчик от Mail.ru</td>

  </tr>

</table>

В данном коде был добавлен параметр ширины (width) как для всей таблицы, так и для двух ячеек, куда помещены мои счетчики.

tablе width=100% обозначает, что таблица займет всю ширину области (в данном случае «подвала»). Если Вам нужно разместить лишь на какой-то части области, то выставляем необходимый процент.

td width=88px обозначает, что данная ячейка будет шириной 88px. Почему именно эта цифра? Если посмотреть ширину картинки, то она будет именно такой. Т.е. указывая цифру 88 мы ограничиваем ячейку, что в купе с шириной таблицы 100% и оставшимися ячейками, прижмет необходимую мне к правому краю.

Как Вы заметили, ширину (width), можно указывать в % и в пикселях (px). Вы сами выбираете, как будет лучше смотреться.

Применять данные способы можно не только для описанного случая, но для других целей. Просто помните о нем и Вы всегда найдете то, что нужно выставить в одну строку (банеры, блоки текстов, видеоролики, контекстные ссылки и прочее).

К примеру: Ваш сайт принимают в Rotaban — биржа баннерной рекламы. Чтобы разместить 2 банера 468*60 пикселей в один ряд в шапке сайта (или над ней), Вам просто необходимы будут подобные знания, изложенные в статье. А размещая два блока рекламы — Вы увеличиваете свою прибыль и не сильно «напрягаете» посетителя сайта слишком длинным рекламным блоком.

Ещё вы можете прочесть как поставить кнопки социальных сетей на свой сайт за 2 минуты.

Похожие посты