Доброго времени суток, уважаемые читатели. После публикации статьи Кнопки социальных сетей, эта тема не дает мне покоя. Решила поделиться с вами ещё одним интересным решением.
У многих в блогах есть кнопка-счетчик Twitter (или Tweetmeme), которая отображает количество ретвитов, многие уже поставили себе похожую кнопку Like от Facebook.
Сегодня я расскажу вам, как можно эти и другие кнопки расположить, например, слева от статьи, или справа (если у вашего шаблона другая организация).
Как это выглядит, вы можете уже видеть у меня в блоге. Я решила полностью вынести эти кнопки за пределы своих статей. Кому понравилось, как это смотрится, и захотелось сделать так же, читаем дальше.
Так же, вот по этой ссылке, вы можете посмотреть, как могут выглядеть кнопки, про которые я рассказывала в предыдущей статье про кнопки.
Прежде всего, давайте определимся, какие именно кнопки вы хотите разместить в этом месте. Здесь в статье я приведу код только тех кнопок, которые у меня. Это кнопка добавления в Twitter, кнопка Facebook, и пока решила разместить Google Buzz. Хоть этот сервис не особо популярен в русскоязычном интернете, я решила пока его оставить. Я выбрала такие кнопки, которые имеют в себе подсчет пользователей, поделившихся ссылкой на блог. Все эти кнопки имеют более мене одинаковый размер и квадратно-прямоугольный вид.
Я заостряю на этом ваше внимание потому, чтобы вы знали, что поместить на свой блог таким образом можно любые кнопки. Главное понимать, в какое место вставлять код.
Местоположение моего блока кнопок полностью решается с помощью CSS. Для этого нам необходимо в шаблон нашего блога, перед строкой
]]></b:skin>
вставить этот код
Сегодня я расскажу вам, как можно эти и другие кнопки расположить, например, слева от статьи, или справа (если у вашего шаблона другая организация).
Как это выглядит, вы можете уже видеть у меня в блоге. Я решила полностью вынести эти кнопки за пределы своих статей. Кому понравилось, как это смотрится, и захотелось сделать так же, читаем дальше.
Так же, вот по этой ссылке, вы можете посмотреть, как могут выглядеть кнопки, про которые я рассказывала в предыдущей статье про кнопки.
Прежде всего, давайте определимся, какие именно кнопки вы хотите разместить в этом месте. Здесь в статье я приведу код только тех кнопок, которые у меня. Это кнопка добавления в Twitter, кнопка Facebook, и пока решила разместить Google Buzz. Хоть этот сервис не особо популярен в русскоязычном интернете, я решила пока его оставить. Я выбрала такие кнопки, которые имеют в себе подсчет пользователей, поделившихся ссылкой на блог. Все эти кнопки имеют более мене одинаковый размер и квадратно-прямоугольный вид.
Я заостряю на этом ваше внимание потому, чтобы вы знали, что поместить на свой блог таким образом можно любые кнопки. Главное понимать, в какое место вставлять код.
Местоположение моего блока кнопок полностью решается с помощью CSS. Для этого нам необходимо в шаблон нашего блога, перед строкой
]]></b:skin>
вставить этот код
#sharebox {
background-color:#FFFFFF;
border:1px solid #C1CDCD;
left:103px;
top:170px;
margin-top:10px;
position:fixed;
width:64px;
}
#sharebox .float {
margin:7px;
}
А для вставки кода кнопок, необходимо найти этот код в шаблоне, предварительно установив галочку на "расширить шаблоны виджетов":
<div class='post-header'>
и сразу после него вставить этот код:
<div class='post-header'>
и сразу после него вставить этот код:
<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
<div class='float'><script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script></div>
<div class='float'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='verdana' layout='box_count' width='64'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
</div>
</b:if>
В принципе, на этом можно и закончить. Кнопки полностью готовы к использованию.
И если вас устраивает тот вариант, который получился, можете откинуться на спинку кресла и передохнуть. Дальше я немного разъясню, что нужно сделать, чтобы вставить другие кнопки, если возникнет такое желание, а так же расскажу, как изменить внешний вид вертикального бокса с кнопками.
Для начала, вот код, который является неким каркасом, в который мы можем поместить код любых кнопок
И если вас устраивает тот вариант, который получился, можете откинуться на спинку кресла и передохнуть. Дальше я немного разъясню, что нужно сделать, чтобы вставить другие кнопки, если возникнет такое желание, а так же расскажу, как изменить внешний вид вертикального бокса с кнопками.
Для начала, вот код, который является неким каркасом, в который мы можем поместить код любых кнопок
<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
<div class='float'>В этом месте должен располагаться код кнопки 1</div>
<div class='float'>В этом месте должен располагаться код кнопки 2</div>
</div>
</b:if>
Если необходимо поместить больше кнопок, то копируется код
<div class='float'>В этом месте должен располагаться код кнопки</div>
ровно столько раз, сколько вы хотите всего иметь кнопок.
Естественно, что для подобного исполнения, все кнопки должны быть более менее одного размера, и иметь вертикальную ориентацию. Кнопки, которые имеют горизонтальное положение, например, Мой мир или Вконтакте, к сожалению, для этих целей не подойдут.
Теперь вернемся к CSS коду, к внешнему виду бокса, в котором находятся кнопки.
Как вы могли заметить, у меня в блоге кнопки не имеют рамки и заднего фона, по ссылке на демо версию кнопки находятся на белом фоне в рамке.
Все это можно подстраивать на свой вкус и цвет. Давайте вернемся к самому верхнему коду, и разберем основные строчки из него:
Естественно, что для подобного исполнения, все кнопки должны быть более менее одного размера, и иметь вертикальную ориентацию. Кнопки, которые имеют горизонтальное положение, например, Мой мир или Вконтакте, к сожалению, для этих целей не подойдут.
Теперь вернемся к CSS коду, к внешнему виду бокса, в котором находятся кнопки.
Как вы могли заметить, у меня в блоге кнопки не имеют рамки и заднего фона, по ссылке на демо версию кнопки находятся на белом фоне в рамке.
Все это можно подстраивать на свой вкус и цвет. Давайте вернемся к самому верхнему коду, и разберем основные строчки из него:
#sharebox {
background-color:#FFFFFF;
border:1px solid #C1CDCD;
left:100px;
top:170px;
margin-top:10px;
position:fixed;
width:64px;
}
Эта строка
background-color:#FFFFFF;
делает фон. Значение #FFFFFF - белый цвет. Это значение можно менять. Коды разных цветов вы можете посмотреть по этой ссылке. Если вы вообще не хотите, чтобы у кнопок был фон, можно полностью удалить эту строку из кода.
border:1px solid #C1CDCD;
Эта строка задает толщину рамки в пикселях, ее вид, в данном примере обычная линия, и цвет. Если рамка не нужна, можно смело удалять этот код.
Следующая строка
left:100px;
говорит о том, что кнопки должны быть слева, и отстоять от левого края окна браузера на 100 пикселей. Это значение можете смело регулировать в зависимости от вашего шаблона. Если у вашего блога сайдбар находится слева, а кнопки нужно разместить справа, то просто меняем left на right.
top:170px;
Эта строка означает, что блок должен быть на 170 пикселей вниз от верхнего края окна браузера. Вы можете регулировать расстояние, а так же изменить top на bottom, и тогда отсчет расстояния будет вестись от нижнего края окна браузера.
width:64px;
Это значение задает ширину всего бокса. Если вы решите использовать более мелкие кнопки, без подсчета пользователей, тогда это значение можно уменьшить.
Если у вас возникнут какие-то вопросы, то рекомендую обратиться к моим статьям:
Как удалить внешние ссылки из шаблонов Blogspot Blogger, в этой статье рассказывается о расширении для браузера, с помощью которого удобно экспериментировать с шаблоном, не меняя сам шаблон.
Инструменты вебмастера (блоггера) - даны ссылки на ресурсы, где можно подробнее почитать про CSS.
На этом все, дорогие мои читатели. До скорых встреч.
Если у вас возникнут какие-то вопросы, то рекомендую обратиться к моим статьям:
Как удалить внешние ссылки из шаблонов Blogspot Blogger, в этой статье рассказывается о расширении для браузера, с помощью которого удобно экспериментировать с шаблоном, не меняя сам шаблон.
Инструменты вебмастера (блоггера) - даны ссылки на ресурсы, где можно подробнее почитать про CSS.
На этом все, дорогие мои читатели. До скорых встреч.
