Widget Box com os dois novos botões do Google + para o Blogger

Alguns widgets disponíveis no blogger são uma parte importante na usabilidade do seu blog, dando assim um clima mas organizado e preenchendo áreas vasias do layout. Gadgets também podem ser usados para acrescentar códigos como HTML/CSS/scripts em pontos diferentes manipulando sua posição em relação ao layout, podendo assim mudar a aparência do mesmo. Tenha muito cuidado na hora de por um widgets no seu blog não saia pondo todos que acha bonitinho pois o mal uso pode prejudicar seu blog, sempre pesquise antes de tal ato.

Como havia prometido no post Promova seu blog no blogger com dois novos botões do google + que ia desenvolver um widgets para o blogger contendo os dois novos botões do Google + tarefa cumprida além desses coloquei outros muito populares para dar uma implementada no widgets.

widget compartilhamento em redes sociais

Para não ter problemas caso faça algo de errado que venha a corromper o funcionamento do seu blog, aconselho que faça o backup completo do modelo do seu blog clicando em, Design - Editar HTML – (Baixar modelo completo), feito isso guarde o aquivo baixado para usar depois caso haja algum erro.

1º Passo – Aplicando o estilo CSS:

Para isso vá em DesignEditar HTML, “não é necessário clicar em expandir modelos de widgets”, e procure pela tag ]]>skin> e acima dela cole o código a seguir:

#wid-geral{
width:300px; /////largura da área total
margin:auto;
padding:0;
}
.wid-googleplus {height: 57px;}
.wid-facebook {
background:#FFFFFF; //// cordo do fundo
border: 1px solid #DCDCDC; /// cor da borda
margin-top: -2px;
padding: 5px 10px;
}
.wid-gplusone {
background-color: #f5fcfe;
border: 1px solid #d8e6eb;
border-top: 1px solid white;
font-size: .87em;
color: black;
padding: 9px 0 0 11px;
line-height: 24px;height:30px;
}
.wid-gplusone span {
display: inline-block;
vertical-align: middle;
height: 20px;
margin-top: -17px;
font-size: 11px;
font-family: "Arial","Helvetica",sans-serif;
}
.wid-twitter {
background-color: #eef9fd;
border: 1px solid #c7dbe2;
border-top: 0;
}
.wid-twitter a.twitter-follow-button {display: block;}
.wid-twitter iframe {margin: 9px 11px;}
.wid-emailbox {
background-color: #E3EDF4;
border: 1px solid #b6d0da;
border-top: 1px solid #eff5f7;
padding: 12px 16px;
overflow: hidden;
}
.wid-emailbox form{
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 0;}
.wid-emailbox input.emailu {
float:left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 0;
color: #999;
padding: 7px 10px 8px;width: 100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;font-size: 13px;
}
.wid-emailbox input.emailu:focus {color: #333;}
.wid-emailbox input.submitu {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: white;
padding: 7px 14px;
font-weight: bold;
font-size: 12px;
float: right;
cursor: pointer;
}
.wid-emailbox input.submitu:hover {text-decoration: none;}
.widDefault {
border: 1px solid #cc7c00;
text-shadow: #d08d00 1px 1px 0;
background-color: #ff9b00;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),
color-stop(1,#ff9b00));
background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);
background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);
background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);
background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);
background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.widDefault:hover {
background-color: #ff9b00;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),
color-stop(1,#ff9b00));
background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);
background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);
background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);
background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);
background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
.w2b-moresubs {
background: none repeat scroll 0 0 #EBEBEB;
border-style: solid;
border-width: 1px;
border-color: #fff #ccc #ccc;
padding: 3px 8px 3px 3px;text-align: right;
font-size: 7px;letter-spacing: 1px;
}

Feito isso visualize e se estiver tudo bem Salve.

2º Passo – Inserir código no modelo:

Para por o código referente aos botões de compartilhamento, vá em – Design – Elementos da página – e clique em – Adicionar um Gadget – na caixa de seleção do gadgets escolha a opção – HTML/JavaScript e cole o código a seguir dentro dela:

<div id="wid-geral">
<div class="wid-googleplus">
<script type="text/javascript">
/*<![CDATA[*/
window.___gcfg = {lang: 'pt_BR'};
(function(){
var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
/*]]>*/
</script>
<div class="g-plus" data-href="https://plus.google.com/seuIDdoGlogge+" data-width="300" data-height="69" data-theme="light">
</div>
</div>
<div class="wid-facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2IDdoFacebook&send=false&layout=standard&width=280&show_faces=true&action=like&colorscheme=light&font=arial&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:30px;" allowtransparency="true"></iframe>
</div>
<div class="wid-gplusone">
<script type="text/javascript">/*<![CDATA[*/
(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();/*]]>*/
</script>
<div class="g-plusone" data-size="medium" data-href="urldoseublog"></div>
<span>Recomende no Google</span>
</div>
<div class="wid-twitter">
<a href="https://twitter.com/querocriarblog" class="twitter-follow-button" data-show-count="true">Follow @IDdotwitter</a>
<script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="wid-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=IDdoFeed', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Digite seu E-mail" type="text"/>
</td>
<td width="64px">
<input class="submitu widDefault" type="submit" value="Subscrever"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="waidblogging"/>
<input name="loc" type="hidden" value="pt_BR"/>
</form>
</div>

    </div>

Vamos intender algumas partes do código acima que precisam ser modificadas de acordo com os dados de cada usuário.

Modifique onde estiver – seuIDdoGlogge+ – para o id do perfil seu ou do seu blog.

Para isso vá na sua conta do Google+ e clique em perfil e na url pague somente os números ex: (115729186372172130779)

O mesmo para os seguintes:

IDdofacebook – de sua página ou perfil do facebook.
urldoseublog – endereço do seu blog.
IDdotwitter – nome usado no twitter.
IDdofeed – nome do feed do seu blog ex: querocriarumblog

É isso ai pessoal, espero que fação bom proveito, e qualquer duvida deixe um comentário.

 

Cansado de procurar por nichos pra ganhar dinheiro?

Thiago Reis

Sou estudante de design estou terminando meu curso de web developer tenho muito interesse em tudo que é relacionado a criação e manutenção de blogs, sites e tecnologia, sou músico gosto de cantar e tocar e nos momentos vagos sair com a família e amigos.

Website: http://querocriarumblog.com.br

8 Comentários

  1. Testei e Esta Funcionando perfeitamente muito obrigado pelo Widget estava querendo um Widget completo assim valeu mesmo em Thiago.
    Jonathan publicou o artigo Contas Premium

  2. Olá, infelizmente não consegui configurar o facebook,e o feed, por ter uma caixa de feed dentro das postagens, isso pode dar algum erro? pode me ajudar.
    obrigado e parabens a todos pelo blog,

  3. Olá Thiago desculpa estar te maçando, pois o post está com uma descrição muito boa, mas há qualquer coisa que me está a faltar pois eu fiz tudo muito certinho só na parte do google+ não consigo que apareça o meu nome, fica sempre o seu!!!!
    O que será que tou fazendo de errado?
    anacosta publicou o artigo Páscoa

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *