Tombol Share Popup social responsive Blogger

tombol share popup social responsive blogger


Tombol share social responsive blogger é elegante esse wiget por tejasukmana traz um beneficio pairando sobre o Blogger juntamente com a caixa para assinaturas de subscrição o que pode alavancar ainda mais o trafego do Blog então para adicionar isso a seu Template siga os passos abaixo:

Como adicionar o widget no Blogger


Faça login no Blogger então va no menu tema editar HTML com as teclas combinadas CTRL+F busque por </head>e adicione o seguinte código antes disso:


<style type="text/css">
.sosmed{padding:0;margin:0;position:fixed;right:-119px;top:20%;width:200px}
.sosmed input#hideshare,.sosmed input#openall{display:none}
.sosmed ul,.sosmed ul li{list-style:none;list-style-type:none}
.sticky li.openall{margin:0;padding:0}
.sticky li.share{background-color:#333;color:#efefef;height:43px;padding:0;margin:0 0 1px 0;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;cursor:pointer}
.sticky li.share:hover{margin-left:-10px;-webkit-transform:translateX(-115px);-moz-transform:translateX(-115px);-o-transform:translateX(-115px);-ms-transform:translateX(-115px);transform:translateX(-115px)}
.sticky li.share i{float:left;margin:11px;margin-right:15px;color:white;font-size:20px}
.sticky li.share b{padding:0;margin:0;text-transform:uppercase;line-height:43px}
.sticky li a{text-decoration:none;color:white}
.sosmed li.facebook{background:#3b5999}
.sosmed li.twitter{background:#55acee}
.sosmed li.google{background:#dd4b39}
input:checked#hideshare ~ li.share,input:checked#hideshare ~ li.openall{display:none}
label span.show,.sosmed li.openall label{position:relative;cursor:pointer;display:block;width:43px;font-size:20px}
.sosmed li.openall label{text-align:center;background:#bbb;color:white}
input:checked#hideshare ~ label span.show{padding:5px;text-align:center}
label span.show:after{content:'\f105';font-family:FontAwesome}
input:checked#hideshare ~ label span.show:after{content:'\f104'}
/*Popup*/
input:checked#openall ~ .allsosmed{position:fixed;top:20%;left:20%;right:20%;background:#fafafa;transition:opacity 500ms;width:50%;margin:0 auto;padding:2%;box-sizing:border-box;-webkit-transition:width 2s;/* Safari */
    transition:width 2s;z-index:999;box-shadow:0 0 15px rgba(0,0,0,.1);overflow:auto;max-width:500px}
@media screen and (max-width:700px){input:checked#openall ~ .allsosmed{left:10%;right:10%;width:70%}}
@media screen and (max-width:500px){input:checked#openall ~ .allsosmed{left:5%;right:5%;width:80%}.allsosmed li a{font-size:12px}}
@media screen and (max-width:300px){input:checked#openall ~ .allsosmed{top:5%}.openall .allsosmed li a{width:100%}}
.allsosmed{width:0%;-webkit-transition:width 2s;/* Safari */
    transition:width 2s;position:absolute;z-index:-99}
.allsosmed li a{float:left;position:relative;margin:2px;overflow:hidden;line-height:0;width:48%;padding:10px;box-sizing:border-box;border-radius:3px}
.allsosmed li a i{margin-right:5px}
.allsosmed li.pinterest a{background:#b8191c}
.allsosmed li.digg a{background:#546b9f}
.allsosmed li.linkedin a{background:#007ab8}
.allsosmed li.stumbleupon a{background:#ed4a13}
.allsosmed li.delicious a{background:#3398fc}
.allsosmed li.tumblr a{background:#32506d}
.allsosmed .login{display:inline-block;position:relative;width:100%;text-align:center}
.allsosmed .login p{margin:10px 0;padding:0}
.allsosmed .login form input{border:none;padding:15px 5px;background-color:#b1b6bd;font-weight:600;color:rgba(0,0,0,0.5);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px;color:#fafafa;margin:3px}
.allsosmed .login form input.email{width:75%}
.allsosmed .login form input.signin{width:20%;min-width:80px;cursor:pointer}
</style>


Agora procure por </body> e acima disso copie e cole o seguinte código: 


<div class="sosmed">
    <ul class="sticky">
        <input id='hideshare' type="checkbox" />
        <li class="share facebook"><span><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url'><i class="fa fa-facebook-square" aria-hidden="true"></i> <b>Facebook</b></a></span></li>
        <li class="share twitter"><span><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;'><i class="fa fa-twitter-square" aria-hidden="true"></i> <b>Twitter</b></a></span></li>
        <li class="share google"><span><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url'><i class="fa fa-google-plus-square" aria-hidden="true"></i> <b>Google+</b></a></span></li>
        <li class="openall"><input id='openall' type="checkbox" /><label for="openall" class="switch"><span><i class="fa fa-plus" aria-hidden="true"></i></span></label>
            <ul class="allsosmed">
<script type="text/javascript">
//<![CDATA[
var siteurl = window.location.href;
document.write('<li class="pinterest"><a href="javascript:pinIt();"><i class="fa fa-pinterest-square" aria-hidden="true"></i> <span>Pinterest</span></a></li>\
    <li class="digg"><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg"><i class="fa fa-digg" aria-hidden="true"></i> <span>Digg</span></a></li> \
    <li class="linkedin"><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin"><i class="fa fa-linkedin-square" aria-hidden="true"></i> <span>Linkedin</span></a></li> \
    <li class="stumbleupon"><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title=' + encodeURIComponent(document.title) + '" target="_blank" title="Share This On Stumbleupon"><i class="fa fa-stumbleupon" aria-hidden="true"></i> <span>Stumbleupon</span></a></li> \
    <li class="delicious"><a href="//delicious.com/post?url=' + siteurl + '&amp;title=' + encodeURIComponent(document.title) + '" target="_blank" title="Share This On Delicious"><i class="fa fa-delicious" aria-hidden="true"></i> <span>Delicious</span></a></li> \
    <li class="tumblr"><a href="https://www.tumblr.com/share/link?url=' + siteurl + '&name=' + encodeURIComponent(document.title) + '&description=' + encodeURIComponent(document.title) + '" target="_blank" title="Share This On Tumblr"><i class="fa fa-tumblr-square" aria-hidden="true"></i> <span>Tumblr</span></a></li> \
');

function pinIt() {
    var t = document.createElement("script");
    t.setAttribute("type", "text/javascript"), t.setAttribute("charset", "UTF-8"), t.setAttribute("src", "https://assets.pinterest.com/js/pinmarklet.js?r=" + 99999999 * Math.random()), document.body.appendChild(t)
};
//]]>
</script>
                <div class="login">
                    <p>Login</p>
                    <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=IDFEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
                        <input class="email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}" onfocus="if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}" value="Email" type="text" />
                        <input name="uri" value="MasTamvan" type="hidden" />
                        <input name="loc" value="en_US" type="hidden" />
                        <input class="signin" value="Sign In" type="submit" />
                    </form>
                </div>
            </ul>
        </li>
        <label for="hideshare" class="switch"><span class="show"></span></label>
    </ul>
</div>

Substitua o Idfeedburner em amarelo pelo seu ID do feedburner

Obs se não estiver mostrando os icones pode adicionar o seguinte código acima de </head>


<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

Salve e pronto.


Click to comment