Social plugin blogger template keren

Social plugin blogger template keren

Social media plugin é muito legal compartilhado por cb blog por isso resolvemos mostrar isso tem um layout bonito e pode ser colocado em qualquer parte do blog, você escolhe qual o melhor lugar tem cores diferenciadas e o que é melhor tem muitas conexões incluindo pinterest então se deseja adicionar no seu template siga os passos abaixo

Adicionando social plugin keren widget no blogger 

Faça login no Blogger então va no menu layout então procure por add new gadget na sidebar do Blogger procure por Java/Script enttão adicione o seguinte código:


<style>#social_profiles-wrap{background:rgba(255,255,255,0.3);width:94%;height:auto;float:left;margin:10px 0 10px 0;padding:20px;text-align:center;border-radius:4px;font-family:'Open Sans Condensed',Verdana;border:1px solid #f2f2f2;-webkit-border-radius:4px;-moz-border-radius:4px;-webkit-box-shadow:1px 0 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:1px 0 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:1px 0 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);text-decoration:none}
#social_profiles-wrap p{color:#446cb3;font-size:16px;font-weight:700;text-align:center;text-decoration:none!important}
.social_profiles{display:inline-block;padding:5px 0}
ul.social_profiles{background:0;float:none;margin:0 37px;text-decoration:none}
ul.social_profiles li{background:none!important;padding:0!important}
.social_profiles li{display:inline;margin-top:40px;list-style-type:none}
.social_profiles li a{display:inline-block;list-style-type:none;width:40px;height:40px;outline:0;margin-right:7px;position:relative;vertical-align:middle;z-index:3;text-decoration:none}
.social_profiles li a>:last-child{margin-right:0!important}
.social_profiles li .facebook{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat}
.social_profiles li .twitter{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -45px}
.social_profiles li .gplus{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -90px}
.social_profiles li .pinterest{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -135px}
.social_profiles li .rss{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -180px}
.social_profiles li .linkedin{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -225px}
.social_profiles li .tumblr{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -270px}
.social_profiles li .youtube{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -315px}
.social_profiles li .mail{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -360px}
.social_profiles li a span{width:60px;height:auto;padding:2px;left:50%;margin-left:-38px;font-family:"Open Sans Condensed",sans-serif;font-weight:400;font-size:12px;color:#fff;text-align:center;border:5px solid #446cb3;background:#446cb3;text-indent:0;position:absolute;pointer-events:none;border-radius:5%;opacity:0;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.social_profiles li a span:before,.social_profiles li a span:after{content:'';position:absolute;bottom:-15px;left:50%;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent}
.social_profiles li a span:after{bottom:-15px;margin-top:6px;margin-left:-10px;border-top:10px solid #446cb3}
.social_profiles li a:hover span{opacity:.9;bottom:50px}
</style>
<div id='social_profiles-wrap'>
<p>Don&#39;t Miss Any Update, Join Us on Social Networks.</p>
<ul class='social_profiles'>
<li><a class='facebook' href='https://www.facebook.com/' target='_blank'><span>Facebook</span></a></li>
<li><a class='twitter' href='https://twitter.com/' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='https://plus.google.com' target='_blank'><span>Googl+</span></a></li>
<li><a class='pinterest' href='https://www.pinterest.com/' target='_blank'><span>Pinterest</span></a></li>
<li><a class='rss' href='https://feeds.feedburner.com/' target='_blank'><span>RSS</span></a></li>
<li><a class='linkedin' href='https://www.linkedin.com/' target='_blank'><span>LinkedIn</span></a></li>
<li><a class='youtube' href='https://www.youtube.com/' target='_blank'><span>Youtube</span></a></li>
</ul>
</div>

Salve e pronto.
Nota não esqueça de modificar os links pelos seus links das redes sociais.


Click to comment