0

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

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

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

<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 style="font-size:25px;" >Свържете се с нас </a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr/######"><img src="http://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="http://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="http://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="http://1.bp.blogspot.com/-jQG7qXLQeG4/UbSS1J2680I/AAAAAAAAAl4/8rm8quxTSWs/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/######"><img src="http://1.bp.blogspot.com/-5gm3I3l6uLI/UbSS04dF7NI/AAAAAAAAAlw/5LPPDF8wM68/s1600/btrix_rss.png" title="Add RSS Feed" /></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>

Социални икони – 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>
<ul id="socialmenu_btrix">
<li>
<a href="######"><img src="http://1.bp.blogspot.com/-4jtnfUcKGTs/UX3zAl1-YKI/AAAAAAAAAg0/OKrix7i3Z60/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Add to facebook
</span>
</a>
</li>
<li>
<a href="https://plus.google.com/######"><img src="http://3.bp.blogspot.com/-r2ZOj6CKteQ/UX3zAknXOMI/AAAAAAAAAgw/BbvKkmh1XPs/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" />
<span>
<br />
<b class="h2">Twitter</b><br />
Add to twitter
</span>
</a>
</li>
<li>
<a href="http://feeds.feedburner.com/######"><img src="http://4.bp.blogspot.com/-rPhGZVoCwWM/UX3zArv2-SI/AAAAAAAAAg4/E0Bc9YcNGGg/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" />
<span><br />
<b class="h2">Rss Feed</b><br />
Subscribe
</span>
</a>
</li>
<li>
<a href="http://stumbleupon.com/######"><img src="http://3.bp.blogspot.com/-kw_a3_BIjWM/UX3zBNxOoDI/AAAAAAAAAhA/iuGY6nncFSw/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" />
<span><br />
<b class="h2">Stumbleupon </b><br />
add to stumble
</span>
</a>
</li>
<li>
<a href="https://######">
<img src="http://1.bp.blogspot.com/-WeWbdij6AL4/UX3zBfWhwWI/AAAAAAAAAhE/ooow8EsfxnA/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" />
<span><br />
<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 />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/######"><img src="http://2.bp.blogspot.com/-LffgfsHnAj0/UPwQ23I0QAI/AAAAAAAAGas/-0InJDs-Cew/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="######"><img src="http://2.bp.blogspot.com/-7w_IO2RiuAE/UPwQ2SXEnYI/AAAAAAAAGak/6PxOch3eQ44/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>

<li><a href="######"><img src="http://3.bp.blogspot.com/-1otZEseg04g/UPwUW46qq-I/AAAAAAAAGbk/ycvQIf9iKdI/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li>

<li><a href="######"><img src="http://2.bp.blogspot.com/-3x7cybjuGY0/UPwQ3_mdIKI/AAAAAAAAGa0/2S7L05Wssv4/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href="######"><img src="http://3.bp.blogspot.com/-4JDhfVVlW1U/UPwQ2iEcPtI/AAAAAAAAGao/kDO6rfj_-sg/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li>

</ul></center>

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



<style>
.fixedmenu{ background:url('http://1.bp.blogspot.com/-FaeRKNmFDX8/Ud16d2_PZFI/AAAAAAAAAsM/5xugOK5YAuE/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.fixedmenu1{ background:url('http://3.bp.blogspot.com/-W7Z5XKfLWd8/Ud16eM8AadI/AAAAAAAAAsQ/cv7fgYD5fiE/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('http://1.bp.blogspot.com/-WeUDB_HkbWA/Ud16fP78JoI/AAAAAAAAAsk/1k2WNVRCBvo/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.fixedmenutw1{background:url('http://1.bp.blogspot.com/-AEj1b-df974/Ud16fs5CVkI/AAAAAAAAAss/HYNXT4cJpPI/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('http://1.bp.blogspot.com/-hj1nQIe4NPQ/Ud16cbNkV1I/AAAAAAAAAr0/EswfGA-rVjM/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.fixedmenufb1{background:url('http://4.bp.blogspot.com/-umCgVIZ-wTs/Ud16c1EAICI/AAAAAAAAAr8/5ZSWR05S2B8/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('http://2.bp.blogspot.com/-9KAMTvWkJ4s/Ud16eU7kWyI/AAAAAAAAAsY/OpoARuR5pXY/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.fixedmenurss1{background:url('http://4.bp.blogspot.com/-SDcrlF3MTAU/Ud16dDy_wnI/AAAAAAAAAsE/QjdRXR9BekM/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 class='fixedmenu' onmouseout='this.className=&apos;fixedmenu&apos;' onmouseover='this.className=&apos;fixedmenu1&apos;'><div class='fixedmenu_1'>
<a href='######' target='_blank'><img alt='Like us on Facebook' src='http://3.bp.blogspot.com/-jWaYNYywDf0/Ud1_G7YS7RI/AAAAAAAAAtA/8b40N46byIQ/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='fixedmenutw' onmouseout='this.className=&apos;fixedmenutw&apos;' onmouseover='this.className=&apos;fixedmenutw1&apos;'><div class='fixedmenutw_1'>
<a href='######target='_blank'><img alt='Follow us on Twitter' src='http://3.bp.blogspot.com/-ppQkr4BjSVQ/Ud1_HkD_OBI/AAAAAAAAAtU/xN5krYZPBhY/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='fixedmenufb' onmouseout='this.className=&apos;fixedmenufb&apos;' onmouseover='this.className=&apos;fixedmenufb1&apos;'><div class='fixedmenufb_1'>
<a href='######target='_blank'><img alt='Recommend us on Google Plus' src='http://3.bp.blogspot.com/-fPA1gJ6k9Bk/Ud1_G_aexzI/AAAAAAAAAtI/rcqioslWMN0/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='fixedmenurss' onmouseout='this.className=&apos;fixedmenurss&apos;' onmouseover='this.className=&apos;fixedmenurss1&apos;'><div class='fixedmenurss_1'>
<a href='######target='_blank'><img alt='Subscribe me on RSS' src='http://3.bp.blogspot.com/-1XXERhy9eeQ/Ud1_GgCBHTI/AAAAAAAAAs8/TIB78w-42eg/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>

</div></div>


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

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

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

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

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

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

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

Успех!


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

Винаги се радвам на Вашето мнение


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | Всички права запазени |
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита