Отново за социалните бутони

Pepa Tabakova

вторник

Днес няма да намерите нито един блог или сайт без връзка със социалните мрежи. Това са социалните бутони "Share", бърза регистрация чрез социалните мрежи, притурки ( виджети ) за коментари и групи. В днешната публикация отново ще споделя с вас възможностите за прилагане на социални бутони, техните плюсове и минуси и ще ви предложа анимирани социални бутони за блога с различен дизайн.
Знаете, че те са отличен източник на трафик.
Скоро аз обнових дизайна на своя блог и тогава смених и социалните бутони. В стария шаблон те бяха невзрачни и не привличаха вниманието на моите читатели. Накратко казано, не работеха както ми се искаше. Реших да заменя Like - бутоните със Share, защото "хващат" окото, всичките са в един стил и са по-семпли. Обикновено има няколко изисквания към социалните бутони: да са светли, да са в плосък стил, с брояч за всяка социална мрежа. Този вариант за мен окончателно отпадна. Не са в унисон с дизайна на шаблона ми. А ако редактираме сами кода разваляме външния им вид, а това за социалните бутони не е желателно. Реших да използвам услуга от трета страна, макар че това решение има редица съществени недостатъци.
Нека да обсъдим плюсовете и минусите от използването на социалните бутони, предоставени от услуга на трета страна.

Плюсове:

➤Можем да адаптираме социалните бутоните към нашия блог с помощта на визуален конструктор.

➤Има много варианти за социални бутони, вертикални, хоризонтални, фиксирани с брояч и без него.

➤Можем да получим красиви бутони за минимално време.

➤Някои услуги имат свои собствени статистики за кликвания, което е много удобно за анализаторите.

➤Имат много допълнителни детайли. Услугите за генериране на социални бутони стават все повече и всяка от тях се стреми да излезе с нещо ново.

Против:

➤Съмнителна безопасност. В Internet има много спорове относно използването на социални бутони от трета страна. Много хора казват, че поставяйки кода на третата страна в страниците си предоставяте информация, която не бихте искали да споделяте с който ви попадне. Има и слухове за събиране на Cookies и много други.

➤Скорост на работа. Социални бутони от различни онлайн конструктори пречат на зареждането на страниците. Това е безспорен факт. Дори в моя блог те се зареждат със значително закъснение.

➤Параноя. Ами ако утре услугата спре да работи? Това е само една малка беда, защото във всеки един момент можете да замените кода им с друг, получавайки го от конкурентите им.

Недостатъците са много, но като се има предвид, че ще получим качествени социални бутони в рамките на минута, без да правим усилия, ще си затворим очите за всичко това.
Предлагам на вашето внимание селекция от социални бутони за вашия блог. Обединява ги начинът на инсталиране в шаблона на блога. Всичките, с малки изключения, се инсталират като притурки от вида HTML /JavaScript. Изключенията се състоят от добавяне на CSS код, освен HTML кода, в тялото на шаблона. При всичките видове социални бутони е необходимо на мястото на „ ######“ в HTML кода да впишете данните на личните си профили в съответната социална мрежа.
Колекцията, която предлагам включва:

Стилни социални икони с прозорец за търсене в блога

HTML Код

<style>

#btrixwidget{width:307px;

padding:0 0 5px 0;

border:1px solid black;}

#btrix-searchbox {

border-radius: 5px;

background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZPNSASixvgN_Fu_WBPs65nDoqr0Gd9ZsoKCTHSVSzyzzs331t2E7YDFenNXy3BZjsUjKN0vEpEGMUVfnBpTfiTokMix8wGyhLUdqma0Ex6AcxZALjxSl7lwuDvlV1WFPG92Uyd2WY-TV/s1600/blue.png) no-repeat scroll center center transparent;

width: 307px;height: 50px;disaply: block;}

form#btrix-searchform {

display: block;padding: 9px 16px; margin: 0;}

form#btrix-searchform #s {

padding-left: 24px !important;padding: 7.5px;margin: 0;width: 198px;

font-size: 16px;font-family: georgia;font-style: italic;color: #666666;vertical-align: top; border: none;background: transparent;}

form#btrix-searchform

#sbutton {margin: 0;padding: 0;height: 40px;width: 74px;vertical-align: top;

border: none;background: transparent;}

</style>

<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'

onblur='if (this.value == "") {this.value = "Search...";}' />

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"

</form>

</div>

</center>

</div>

Социални икони с въртящ се ефект

HTML Код

#flipboard_btrix{ width:300px;}

ul.flipboard_btrix{

margin:0;

padding:0;

list-style:none;

-webkit-perspective: 10000px;

-moz-perspective: 10000px;

-o-perspective: 10000px;

perspective: 10000px;

}

ul.flipboard_btrix li{

display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial;

text-transform: uppercase;

text-align: center;

cursor: pointer;

}

ul.flipboard_btrix li a{

display:block;

width: 100%;

height: 100%;

color: black;

text-decoration: none;

outline: none;

-webkit-transition:all 300ms ease-out 0.1s;

-moz-transition:all 300ms ease-out 0.1s;

-o-transition:all 300ms ease-out 0.1s;

transition:all 300ms ease-out 0.1s;

}

ul.flipboard_btrix li a span{

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

padding-top: 5px;

display:block;

width: 100%;

height: 100%;

-webkit-transition:all 300ms ease-out 0.1s;

-moz-transition:all 300ms ease-out 0.1s;

-o-transition:all 300ms ease-out 0.1s;

transition:all 300ms ease-out 0.1s;

}

ul.flipboard_btrix li a img{

border-width: 0;

}

ul.flipboard_btrix li:hover a{

-moz-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

background: #cef1ff;

-webkit-border-radius:7px;

-moz-border-radius:7px;

border-radius:7px;

-webkit-box-shadow:0 0 5px #eee inset;

-moz-box-shadow:0 0 5px #eee inset;

box-shadow:0 0 5px #eee inset;

}

ul.flipboard_btrix li:hover a span{

-moz-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

#btrix-searchbox {

border-radius: 5px;

background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFLUgAqY8lbgk1J7YenKNiyQZhTj6GprhSZYTz14otQLsw8SCpZY1Gr4FJJSElrnp5JjrX-ghF0mtjRu1BbYy3mJd4NoyIEFMuXFrO1tol-nY3JKQbxd6XUh0DqmcMPKTUDPK7NzJzGxS/s1600/green.png) no-repeat scroll center center transparent;

width: 290px;

height: 50px;

disaply: block;

}

form#btrix-searchform {

display: block;

padding: 7px 16px;

margin: 0;

}

form#btrix-searchform #s {

padding-left: 24px !important;

padding: 7.5px;

margin: 0;

width: 198px;

font-size: 16px;

font-family: georgia;

font-style: italic;

color: #666666;

vertical-align: top;

border: none;

background: transparent;

}

form#btrix-searchform

#sbutton {

margin: 0;

padding: 0;

height: 40px;

width: 74px;

vertical-align: top;

border: none;

background: transparent;

}

</style>

</center>

<br />

</ul>

</form>

</div>

</center>

Анимирани социални икони за блог с изометрична форма

HTML Код

<style>

/* Bloggertrix */

.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}

.bubblewrap li{

display:inline;

width: 60px;

height:60px;

}

.bubblewrap li img{

width: 50px; /* width of each image.*/

height: 50px; /* height of each image.*/

border:0;

margin-right: 4px; /*spacing between each image*/

-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */

-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */

}

.bubblewrap li img:hover{

-moz-transform:scale(1.8); /*scale up image 1.8x*/

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

}</style>

<br />

<br />

</ul>

<div>

</center>

Анимирани социални икони - балончета

HTML Код

<style>

/* Bloggertrix */

.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}

.bubblewrap li{

display:inline;

width: 60px;

height:60px;

}

.bubblewrap li img{

width: 50px; /* width of each image.*/

height: 50px; /* height of each image.*/

border:0;

margin-right: 4px; /*spacing between each image*/

-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */

-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */

}

.bubblewrap li img:hover{

-moz-transform:scale(1.8); /*scale up image 1.8x*/

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

}</style>

<br />

<br />

</ul>

</center>

Анимирани социални икони - ледени кубчета

HTML Код

/* Bloggertrix */

.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}

.bubblewrap li{

display:inline;

width: 60px;

height:60px;

}

.bubblewrap li img{

width: 50px; /* width of each image.*/

height: 50px; /* height of each image.*/

border:0;

margin-right: 4px; /*spacing between each image*/

-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */

-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */

}

.bubblewrap li img:hover{

-moz-transform:scale(1.8); /*scale up image 1.8x*/

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

}</style></center>

<br />

<br />

</ul>

</center>

Кодовете, които днес ви предложих можете да прегледате с помощта HTML редактор от главното меню. Надявам се, че ще изберете това, което ви харесва.

Успех, приятели!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

ПРОДЪЛЖЕНИЕ

Cancel

Стилни социални икони с прозорец за търсене в блога

Социални икони с въртящ се ефект

Анимирани социални икони за блог с изометрична форма

Анимирани социални икони - балончета

Анимирани социални икони - ледени кубчета

PEPA TABAKOVA