Бутони за споделяне в социалните мрежи

Pepa Tabakova

петък

В тази моя публикация се връщам пак на социалните бутони. По-рано писах за тях и за значението им за блога на Blogger. Представих ви и различни варианти на тази притурка по отношение на дизайна. Причината да пиша за тях пак е голямото им разнообразие от външен вид, цветови решения и ефекти. Нека да имаме възможността да изберем, ако още не сме инсталирали тази притурка в блога си, или да заменим вече съществуващата, ако не ни допада.
Няма да обяснявам подробно как и къде да добавите това приспособление. Само ще ви посоча схематично пътя, по който да вървите. Някои от вариантите включват хубаво заглавие и въртящ се ефект. Така с помощта му можете да споделяте във вашите социални мрежи само с едно кликване. Просто разгледайте тези притурки за социално споделяне. Пътят за инсталирането им е един и същ.
Идете в админ панел ➔ изберете оформление ➔ добавяне на притурка ➔ изберете HTML/Javascript и в нея сложете съответния код.

Социални икони – 1

#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>

<a style="font-size:25px;" >Свържете се с нас </a>

</center>

<br />

</ul>

</form>

</div>

Социални икони – 2

<style>

#socialmenu_btrix {

margin:0;

padding:0;

width: 30em;

height: 4.5em;

overflow:hidden;

}

#socialmenu_btrix li {

display:inline;

list-style-type:none;

}

#socialmenu_btrix li a {

display:block;

float:left;

text-decoration:none;

margin:0;

}

#socialmenu_btrix li a img {

opacity:0.7;

margin:0.5em;

border:0;

float:left;

}

#socialmenu_btrix li a span {

display:none;

}

#socialmenu_btrix li a:hover {

background:transparent;

}

#socialmenu_btrix li a:hover span {

width:7em;

color:#aaa;

display:block;

cursor:pointer;

float:left;

}

#socialmenu_btrix .h2 {

margin:0 5px;

padding:0;

color:#fc0;

font-variant:small-caps;

font-size:1em;

border:0;

}

</style>

<li>

<b class="h2">Facebook</b><br />

Add to facebook

</span>

</a>

</li>

<li>

<span>

<br />

<b class="h2">Twitter</b><br />

Add to twitter

</span>

</a>

</li>

<li>

</span>

</a>

</li>

<li>

<b class="h2">Stumbleupon </b><br />

add to stumble

</span>

</a>

</li>

<li>

<b class="h2">Twitter</b><br />

add to twitter

</span>

</a>

</li>

</ul>

Социални икони – 3

<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>

Социални икони – 4

<style>

.fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEGuFA3EZsFky-Wg9QrD2OlmtuJt8omXjq3z5zD-6bw2pwzIjNtecYlm0aB-qt_keJXyxdE4dr6X4KOOdsBgDe91qxSrxORaoXNmvEerUx44gtRCjPQm_PVP2hur1Yn-99yS_GWt74tv4/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}

.fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBGzpqWXwna65nxFuPH2yOG0t0C-NR19S5_QkckI4-FfbWXmFmO-dvfinXKkaqCqruCGETfYk1vPBADuOUEmfJpipj_-sJxEzeMAnatq59NmJCFBpjrfCwhUNCkVcYJ6zYteKNGKkZXWc/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}

.fixedmenu_1{margin:0px 0 0 43px}

.fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55UMevKqTOctsinlVlOkdpY0NHeAWmgvhyphenhyphenf1IRhPXw85brraplClYpmRDI7qEMkc8KK5Bty9KMzX7BOBPzlSYxRjvTJFXncErJWaE4Azi9FQ4McRw3NbKs3IgCVHyWcwyyCNE0IewW0c/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}

.fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqCYOo-WdLrkJNU-qedqEZu5E8bCo1-N8sI9oG66oW2ShyBUpGhdUtyKeSJClK1PwylETOrOGsNRP76ad6azJqh_h0tXB4wpm6WjM0X_tzn9sm4qA4LaMoJCIU_PHxwQxoywNRJmbGlwE/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}

.fixedmenutw_1{margin:0px 0 0 43px}

.fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnpXxyS_gbzMTFn9aq2PVCmJ82pgg3AcwSkzDtsrWIq7C8ymGkorKwhUt8phUR4hNztUqOPpWPGPfnfJdbsT1iuJ0kFhbA60AQTsFKDMZ6SerN9VDicW81-cY0CYLW1aKjaKy1lySTq7Q/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}

.fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ywvVAcFEHY2heV23ea9ReNk4Vek_AKr7duKjOy0SQuBlUAmZguccjezXzI4BjkdqKYFrVJdULEXSkpxQOWtF57Cgw5bx75bjClIxBRJXgQyulfaycQZx8cCZ7y8JkQKFBkbQDpxNJ1E/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}

.fixedmenufb_1{margin:0px 0 0 43px}

.fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEnvsYEJ56r6-sgcEz9njq0gi09O0tikpfe-Ofr9YoVvag4Dv1o5Ph4-0GBoxICte3UXyt9LD4TAo2Ttrc1QGO8lnIzve-vkealOu3O5yGbOuaXotOm-6W16bmZ0X_-sSw65nECxCc8k/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}

.fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw8tD09MqKYerET6QMlwLKW7HvWOV9BOyA1hIYGY5YPjUYvNCS8McJ3Z5V86L_3FTt3MmadavgevZOSDQghJiJL73KH56z5t6a7lZFsLYqeIHGEbQwYOBLHSheg2hGv2_k_VT7ohiQuwo/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}

.fixedmenurss_1{margin:0px 0 0 43px}

</style>

</div></div><div class='fixedmenutw' onmouseout='this.className='fixedmenutw'' onmouseover='this.className='fixedmenutw1''><div class='fixedmenutw_1'>

</div></div><div class='fixedmenufb' onmouseout='this.className='fixedmenufb'' onmouseover='this.className='fixedmenufb1''><div class='fixedmenufb_1'>

</div></div><div class='fixedmenurss' onmouseout='this.className='fixedmenurss'' onmouseover='this.className='fixedmenurss1''><div class='fixedmenurss_1'>

</div></div>

Всичките предложени ви четири кода сложете в HTML редактор от главното меню и проверете как изглеждат. И ако изберете код, вградете го по посочения по-горе начин.
След като вградите кодовете, а може и преди това, направете в тях малка редакция.

➤Заменете ###### с вашето Facebook потребителско име

➤Заменете ###### с вашето Twitter потребителско име

➤Заменете ###### с вашето Google плюс ID

➤Заменете ###### с вашето FeedBurner потребителско име

➤Заменете ###### с вашето Pinterest потребителско име

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

Успех!

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

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

Cancel

Социални икони – 1

Социални икони – 2

Социални икони – 3

Социални икони – 4

PEPA TABAKOVA