Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

петък

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

Бутони за споделяне
В тази моя публикация се връщам пак на социалните бутони. По-рано писах за тях и за значението им за блога на 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 потребителско име

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

Успех!

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

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

BGtop



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

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