0

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

за социалните бутони
Днес няма да намерите нито един блог или сайт без връзка със социалните мрежи. Това са социалните бутони "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(http://4.bp.blogspot.com/-QfnjnEenODg/T_2KaW7lAoI/AAAAAAAACC4/asD98X7USVE/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>
<div id="btrixwidget"><center>
<a href="http://twitter.com/######" target="_blank" wrc_done="true"><img src="http://2.bp.blogspot.com/-MnDV3U4XtYc/UVWk-A2SljI/AAAAAAAAAco/pK4NWaYNX28/s1600/btrix-twitter.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249"></a>
<a href="http://www.facebook.com/######" target="_blank" wrc_done="true"><img src="http://4.bp.blogspot.com/-yh4hQ75YVSE/UVWk9Lu2wnI/AAAAAAAAAcQ/Z68YzzPZhp0/s1600/btrix-facebook.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248"></a>
<a href="http://feeds.feedburner.com/######" target="_blank" wrc_done="true"><img src="http://3.bp.blogspot.com/-sKR8lFv_8Is/UVWk9HX2zfI/AAAAAAAAAcY/vCBJEXl-HhM/s1600/btrix-rss.png" alt="" title="rss" width="62" height="78" class="alignnone size-full wp-image-6251"></a>
<a href="http://au.linkedin.com/######" target="_blank" wrc_done="true"><img src="http://1.bp.blogspot.com/-C5FNB8oQEXU/UVWk9BJoIgI/AAAAAAAAAcU/mbwQ1PZyV8U/s1600/btrix-linkedin.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250"></a>
<div id="btrix-searchbox">
<form id="btrix-searchform" action="/search" method="get">
<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 Код


<center>
<style type="text/css">
#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(http://3.bp.blogspot.com/-thVugJfodHE/T_2KIQRrP0I/AAAAAAAACCw/92aQhyWOPMk/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>
<div id="flipboard_btrix">
<center>
<a href="https://draft.blogger.com/null" style="font-size: 25px;"></a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr/######"><img src="https://4.bp.blogspot.com/-RFXNOXNvtlM/UbSS0UFHh-I/AAAAAAAAAlg/5RweJEBrw3c/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/######"><img src="https://2.bp.blogspot.com/-X-AzrrLMUmU/UbSS0BXsreI/AAAAAAAAAlY/2p0Q547x6V4/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/######"><img src="https://2.bp.blogspot.com/-dkXrjHjFx6s/UbSS0P8YPaI/AAAAAAAAAlc/tSvC9X75cpw/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/######"><img src="https://1.bp.blogspot.com/-jQG7qXLQeG4/UbSS1J2680I/AAAAAAAAAl4/8rm8quxTSWs/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
</ul>
<div id="btrix-searchbox">
<form action="/search" id="btrix-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
        <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
    </form>
</div>
</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 />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.digg.com/######"><img src="https://4.bp.blogspot.com/-PAVd50EOHPA/UWBD5q_7x1I/AAAAAAAAHZg/1ueEAgUwRZE/s1600/btrix-small-digg.png" title="Add to Digg" /></a></li>
<li><a href="http://www.facebook.com/######"><img src="https://4.bp.blogspot.com/-g381zIF6uzM/UWBD5kaIl3I/AAAAAAAAHZw/29PtpbVvQIQ/s1600/btrix-small-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.plus.google.com/######"><img src="https://2.bp.blogspot.com/-OnYnaeXOaoU/UWBD5i2H2kI/AAAAAAAAHZk/-RgdcApFKVs/s1600/btrix-small-google.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/######"><img src="https://1.bp.blogspot.com/-Tl4IF7dvP-Y/UWBD6VR_n6I/AAAAAAAAHZ4/EPlrfOsFwjU/s1600/btrix-small-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/######"><img src="https://3.bp.blogspot.com/-3NsoFJFMszU/UWBD6WKS88I/AAAAAAAAHZ0/Rh28uvbD41o/s1600/btrix-small-rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div>
<br /></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 />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.digg.com/######"><img src="http://4.bp.blogspot.com/-HTc6GQro9Qw/UReqgivr2KI/AAAAAAAAGq0/a-BUwXhRjOw/s1600/bloggertrix-digg.png" title="Add to Digg" /></a></li>
<li><a href="http://www.facebook.com/######"><img src="http://1.bp.blogspot.com/-aIXBJ7IQUec/UReqgz2CzaI/AAAAAAAAGq8/xAH1kcTdgeQ/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/######"><img src="http://2.bp.blogspot.com/-9QMaBxc0M3Q/UReqhZv0TGI/AAAAAAAAGrI/U1N0dzHYnFs/s1600/bloggertrix-stumbleupon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/######"><img src="http://2.bp.blogspot.com/-R4yv8KtUPL8/UReqhsl_i2I/AAAAAAAAGrQ/TYR_YNNTueI/s1600/bloggertrix-twitter_alt.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/######"><img src="http://1.bp.blogspot.com/-B5Xsf-V8qFc/UReqgYhqMbI/AAAAAAAAGqw/83MP_atEIt8/s1600/bloggertrix-RSS.png" title="Add RSS Feed" /></a></li>
</ul>

</center>




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




HTML Код



<center><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></center>
<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.linkedin.com/######"><img src="http://1.bp.blogspot.com/-RnC3BKn17zo/UQaDHOWAovI/AAAAAAAAGhY/dc60NAQQWTw/s1600/bloggertrix_linkedin.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/######"><img src="http://1.bp.blogspot.com/-Y0nktRRy55U/UQaDG9wOkwI/AAAAAAAAGhU/2sieeVzygRQ/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/######"><img src="http://2.bp.blogspot.com/-SHP-koUiNhw/UQaDIH2UqGI/AAAAAAAAGho/snk0w0AHqG8/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/######"><img src="http://2.bp.blogspot.com/-4FqWnTweJKE/UQaDIZPUZ0I/AAAAAAAAGhw/b7t7Xgu9ONY/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/######"><img src="http://2.bp.blogspot.com/-Y1S9_OWv5pE/UQaDG2U9fqI/AAAAAAAAGhQ/qD0e5hQ6Kxs/s1600/bloggertrix_RSS.png" title="Add RSS Feed" /></a></li>
</ul>

</center>


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

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

Публикацията продължава



Няма коментари :

Публикуване на коментар

Ако имате необходимост да вмъкнете HTML код в коментара си, моля използвайте един от инструментите в основното меню - Конвертор на HTML кодове.


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved