Thursday, September 6, 2012

Как поставить виджеты(кнопки) соц.сетей.

Здравствуй Мой Читатель!

При построении блога я наткнулась на проблему где найти коды кнопок соц сетей. Вы же понимаете что ни один сайт или блог не должен существовать без связи с с вашей страничкой на Facebook или Twitter.

Скажу вам честно, что поиск был мучителен и долог. Ведь нам надо не только вставить эти виджеты, нам ещё надо чтобы они привлекательно выглядели и занимали мало места.

Я испробовала несколько вариантов, которые находила на разных сайтах. Но больше всего мне понравился мой последний вариант. Вы можете видеть его в колонке с левой стороны. Здесь всего 3 кнопки, но на мой взгляд самые основные. Основные, потому что дают возможность попасть на самые распространённые соц сети.


Вот вам и код этих виджетов.


<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:1 4px;
float:left;
background:transparent

url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}

.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}

</style>

<div class='touchme'>

<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/u/0/116139239521905954003/posts"

rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="http://www.facebook.com/irene.alfiya" rel='external nofollow'

target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/#!/irenalf" rel='external nofollow' target='_blank'

></a></div>

Если вас нет в какой либо из этих сетей, то просто сотрите код этой сети. Текст, выделенный голубым цветом, замените на ссылку на свою страницу в сетях.
Вот и весь фокус.

Желаю вам успехов и удачи
irenbusiness@yahoo.com

1 comment: