Перейти к содержимому


Выбрать шаблон и создать сайт

Каким образом сделать соц. кнопки как тут?

#1 Zlowariy

Zlowariy
  • Пользователь
  • 108 сообщений
  • Репутация: 0
0

Отправлено 06 Май 2015 - 05:34

Добрый день, подскажите как сделать социальные кнопки под анекдотом, как на этом сайте http://kupikota.ru/b...pro-koshek.html ?


 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как сделать кнопки с подсветкой
  2. Выравнивание кнопок соц. сетей
  3. Как сделать кнопку вверх как в вк на блоге Wordpress?
  4. Делаем симпатичные кнопки на CSS3
  5. Как сделать свои кнопки социальных сетей с счетчиком без плагинов. WP

#2 moving

moving
  • Пользователь
  • 420 сообщений
  • Репутация: 27

Отправлено 06 Май 2015 - 05:53

Почитай тут http://for-net.ru/view_post.php?id=48


  • 1

#3 Zlowariy

Zlowariy
    Topic Starter
  • Пользователь
  • 108 сообщений
  • Репутация: 0

Отправлено 06 Май 2015 - 07:13

Ладно, спасибо.

Вот код 

<div class="BlockFunny">

 Кот близнец...  оказался ещё и сиамским!
<a href="https://twitter.com/share" class="twitter-share-button" data-via="CatMen" data-lang="ru" data-dnt="true">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</a>
</div>

Как можно сделать что бы кнопка "твитер" была чуть ниже? Получается, что текст и кнопка вместе слиплись.) Можно было бы сделать кнопку с верху, но даже в контакте с низу... Думаю привычней всего так будет.)

Еще! Самое главное, поделиться надо не полностью статьей, а анекдотом\фразой, но как?)


Сообщение отредактировал Zlowariy: 06 Май 2015 - 07:40

  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 06 Май 2015 - 13:29

Как можно сделать что бы кнопка "твитер" была чуть ниже? Получается, что текст и кнопка вместе слиплись.)
 
Регулировать положение этой кнопки можно примерно так :
.BlockFunny iframe{
position: relative !important;
z-index: 1;
top: 3px;
}

Пояснение: 

Скрипт твиттера вставляет в вашу страницу фрейм через тег iframe. Потому следует сместить его положение по вертикали. Что достигается присвоением относительного позиционирования position: relative (!important - помогает отменить статическое позиционирование от кода твиттера) Значение параметра top: 3px; можно подбирать по вкусу (больше/меньше = положение кнопки ниже/выше).


  • 2

#5 Zlowariy

Zlowariy
    Topic Starter
  • Пользователь
  • 108 сообщений
  • Репутация: 0

Отправлено 07 Май 2015 - 05:43

Хороший ответ, спасибо, все получилось.) Получается для каждого анекдота придется выделять запись, а в коде кнопки прописывать урл этой записи анекдота? Можно ли попроще, да пограмотней сделать?)


  • 0


Оформление форума – IPBSkins.ru