Olá meus amores, hoje trago um tutorial que vocês me pedem muito aqui no blog que é como colocar postagens relacionadas no final do post. Lembrem-se de fazer o backup do seu layout ou testar em um blog de teste, combinado?
Ele ficará assim:
Os créditos do tutorial estão mantidos no código. Então, vamos lá?
Dentro da caixa de codigos HTML do seu blog, procure por: </head>
ACIMA DELE COLE:
<!--Postagens relacionadas para blog by elainegaspareto.com-->
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>
<style type='text/css'>
#related-posts{
float:left;
width:auto;margin-left: 24px;}
#related-posts a{
border-right: 0px dotted #eaeaea;}
#related-posts h4{
margin-top: 10px;
background:none;
font:17px Montserrat;
padding:3px;
color:#000;
text-transform:uppercase;
text-align: center !important;}
#related-posts .related_img {
margin:10px;
border:2px solid #f2f2f2;
object-fit: cover;
width:140px;
height:130px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px; }
#related-title {
color:#222;
text-align:center;
text-transform:none;
padding: 0px 5px 10px;
font-size:13px;
width:150px;
height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAEo3ylHToWj6PhioQu-wFW-plCfgKBT4Te1I5u2f1km6H0UUBysNuP8vIUOoqinQIJnAApyJwdi_GUBxLM87rX4ttXcd3-2zjxjYLWssHBkQoy0zfjEA-EKC96MEecvaKqcX1fkdTOEKc/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<!--Final do script das Postagens relacionadas para blog by elainegaspareto.com-->
Feito isso, PROCURE POR:
<div class='post-footer-line post-footer-line-3'>
Se no seu blog tiver dois desse código, vamos usar a segunda opção.
COLE ABAIXO DELE:
<!-- Postagens relacionadas para blog by elainegaspareto.com- Início do código HTML-->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=4"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle=" Fique mais um pouco! Veja também:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
<!-- Postagens relacionadas para blog by elainegaspareto.com- Final do código HTML-->
Salve, e confira se esta ok!
Eu fiz o teste em dois blogs de teste no MODELO VIAGEM do Blogger.
Espero que vocês tenham gostado.
Olá meus amoreeees, hoje trago um post com tutorial simples, porem precisa de atençao já que iramos trabalhar com varias url de imagens.
Para quem não viu o TUTORIAL #1 : PERFIL COM IMAGEM ARREDONDADA E ÍCONES DAS REDES SOCIAIS vale a pena conferir!!!
No TUTORIAL #2: Vamos aprender a colocar icones das redes sociais em hover com a descricao da Blogueira e a opcao de "Leia mais" para saber mais sobre a blogueira.
como na demonstracao abaixo:
Descrição da Blogueira vem aqui,
com nome, idade, profissao e etc." Saiba Mais...
com nome, idade, profissao e etc." Saiba Mais...
Espero que voces gostem, para que o HOVER funcione, é necessario que voce tenha duas imagens IGUAIS porem de CORES DIFERENTES.
Precisa hospedar as imagens para ter a URL de todas elas, inclusive a foto do PERFIL.
Os creditos do codigo vão para o Blog Ó a Blogueira da minha querida amiga Jaque Ferreira <3
Então vamos lá:
Copie esse codigo e cole na gadget lateral do layout:
<div id='perfil'>
<div class='foto'>
<img src='LINK_FOTO_PERFIL'/>
</div>
<center>
<div class='descricao'>
DESCRIÇAO DA BLOGUEIRA"
<a href='LINK_DA_PAGINA_SOBRE'> Saber Mais...</a>
</div>
<center>
<div class='redes'>
<a href=" LINK_DO_FACEBOOK " target="_blank">
<img src=" LINK_IMAGEM_FACEBOOK_NORMAL " onmouseout="this.src=' LINK_IMAGEM_FACEBOOK_NORMAL ';" onmouseover="this.src='LINK_IMAGEM_FACEBOOK_HOVER';" />
</a>
<a href=" LINK_DO_TWITTER " target="_blank">
<img src=" LINK_IMAGEM_TT_NORMAL " onmouseout="this.src=' LINK_IMAGEM_TT_NORMAL ';" onmouseover="this.src='LINK_IMAGEM_TT_HOVER';" />
</a>
<a href=" LINK_DO_INSTAGRAM " target="_blank">
<img src=" LINK_IMAGEM_INSTA_NORMAL " onmouseout="this.src=' LINK_IMAGEM_INSTA_NORMAL ';" onmouseover="this.src='LINK_IMAGEM_INSTA_HOVER';" />
</a>
</div>
</center></center></div>
Notem que para que o HOVER funcione, a imagem NORMAL usa-se duas vezes, e a HOVER apenas uma para cada icone, OK?
Caso voce tenha mais redes sociais, basta adicionar esse codigo para cada rede social:
<a href=" LINK_DA_REDE_SOCIAL " target="_blank"><img src=" LINK_IMAGEM_NORMAL " onmouseout="this.src=' LINK_IMAGEM_NORMAL ';" onmouseover="this.src='LINK_IMAGEM_HOVER';" /></a>Abaixo da descricao da blogueira, onde esta escrito LINK_DA_PAGINA_SOBRE voce substitue pelo link da sua pagina que fala mais sobre você e seu blog.
Bom pessoal espero que voces tenham gostado, deixe seus comentarios, e não esquecam de se inscrever no meu canal:
Um forte abraço, e até o proximo post se Deus quiser!
Olá meus amoreees,
hoje eu trouxe um tutorial em video de como colocar a assinatura com imagem no final do post.
Os codigos você encontra nesse post >> AQUI <<
Acompanhem passo a passo no video, e confiram como é bem simples.
Olá meus amores, hoje trago para voces um tutorial super simples + 10 Imagens personalizadas para colocar no titulo da sidebar. Essa imagens eu mesma criei, por tanto se forem reblogar por gentileza dêem os CRÉDITOS! #Obrigada!
Bom, para começar, va na Opcao Modelo do seu blog e clique em EDITAR HTML > Dê Ctrl+F e procure por: /* Headings , abaixo desse codigo terá .sidebar h2 { selecione essa linha até o fechamento da chave } e SUBSTITUA por:
.sidebar h2 {font-family: 'Bromello', sans-serif; /*Estilo da fonte*/font-size: 28px; /*Tamanho da fonte*/color: #000; /*Cor da fonte*/background:url("LINK_DA_IMAGEM") top center no-repeat;
margin-top: 10px;
padding: 15px; /*Diminua o numero se quiser a Fonte mais pra cima */-webkit-border-top-right-radius: 40px;
height: 45px;/*Altura da imagem nao alterar*/width: 290px; /*Largura da imagem nao alterar*/ text-align: center; /*Alinhamento do texto*/}
ENTENDENDO OS CODIGOS:
font-family: 'Bromello', sans-serif; /*Estilo da fonte*/ Voce substitue o BROMELLO por qualquer outra fonte desejada.
Onde tem escrito (LINK_DA_IMAGEM) substitua pelo link de uma das imagens logo abaixo, basta clicar com o botão esquerdo em cima da imagem e clicar em COPIAR URL DA IMAGEM.
padding: 15px; /*Numeros altos a fonte desce // Numero baixos ela sobe */
A altura e largura da imagem nao precisa alterar, pois as imagens estao todas personalizadas com 290 px por 45px.
Veja alguns RESULTADOS:
Imagens pronta para usar:
Espero que tenham gostado, curtam e compartilhem.
Olá meus amores, hoje eu trouxe para voces um TUTORIAL muito simples, de como personalizar a BARRA DE PESQUISA do Blog.
O codigo será o mesmo para todos os modelos, pórem já vou disponibilizar cada um com o link das imagens de cada modelo. Personalizei 04 MODELOS diferentes
Para esse tutorial, não existe segredo...
Basta você ir no LAYOUT, clicar em ADICIONAR UMA GADGET
(HTML/ Java Script)
MODELO 1
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrL25Ggt0HTZMKEHrb7vMrwQ33OrG90Y_sMt7yABe_MUNVIuD6jJxwrEkhxZZOAA8fXONl9Y9WX70atvQR1stwVhyL1uAZModRkw7cNlpRJqnWuFyXzcRneGxAKPl6vRv5poRxXVOVK0/s1600/%252C%252C2.png) no-repeat;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #fff !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url("") no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url("");
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>
MODELO 2
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx0np55GvtJc9NCeR0dg5nbYBX8Q1MQogQ_fYEjZHQV97krdN5YGdEFNR3Rxqlrf2_cERLX72JlcotklcDwVGVO4KzC5GVaLVSgbZMVD7HEjuSuDmVji7Y135O6y-_k4jdB73GachkMKs/s1600/%252C%252C1.png) no-repeat;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #fff !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url("") no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url("");
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>
MODELO 3
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi91XZg6EVMxTRikqpnY8M4ieQEaYU90uYkZByqewVIPbL2B9hxYU2_NDb0IQGrAIEIRpQTiSuYDJCqva2jC_rcxLbe2Y1uxRTkAGfGSdFg3MXF0Sk32H4vl04cbb1EwWcrT1PEyUrIuJ4/s1600/..2..png) no-repeat;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #999!important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #999;
}
#button-submit{
background: url("") no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url("");
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>
MODELO 4
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsETZ_QPuVER5GePmHA-2jEKSMlh9JsB6PRwWvUCv01AgqM8ftoGakmv-kMhMecMmNJFS0mnd6TPUgxei4hn4BvBUGavbtqy0IriTh1MD-9QdKTkrYhBdTWbYqyUgx82o-LnaY6LcoKc/s1600/..2.png) no-repeat;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #fff !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url("") no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url("");
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>
Espero que vocês tenham gostado, nao esqueça de deixar seu comentario!
Um forte abraço e até o próximo post, se Deus quiser!
Como criar Botão Compartilhar no Whatsapp
com imagem no Blog?
É exatamente isso que vim trazer para vocês no post de hoje, uma dica super útil, e que eu sempre quiz aprender, depois de alguns testes trouxe um codigo que funcionou bem no blogspot, lembrando que a funcionalidade do codigo depende muito da codificaçao do seu layout, se voce tiver alguma noçao saberá edita-lo caso dê algum erro... enfim, ja editei com os botoes do FACEBOOK, GOOGLE+, TWITTER e claro o WHATSAPP.Ficará no final de cada postagem assim:
ATENÇAO:
Os ícones aparecerão normalmente em qualquer dispositivo, mas a opção de COMPARTILHAR no WHATSAPP funcionará apenas no dispositivo que tem o APLICATIVO instalado.
Veja também: GANHE DINHEIRO COM SEU BLOG
Vamos começar?
Vá no HTML do seu Blog, dê Ctrl+F e procure por:
<div class='post-footer-line post-footer-line-2'>
A depender do seu layout, aparecerá duas vezes, é a segunda opçao que estamos procurando. Abaixo dessa linha (antes do fechamento da </div> Cole o seguinte codigo:
<span class='compartilhamento'><img alt='' class='compartilhe-amor' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1EC_PfYFJLSmhzkzBGHTkpS73qnqrw6N_bcRXEt0XlYVSOhS3XXTu0sbwS5yyXGItfxfJcJ_kXkgGNkAAmHyDHHZJV8TdIlFIYZB97KY2w4h2S_JL8YXSZE6Ajiv0Kpqx4L4Z8vm8C5uG/s1600/compartilhe2.png' width='149'/>
<!-- share buttons -->
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPVPQUO1TjdMFjyo7r0mVNxuUp0TSS7HCq_EODBOmxkUxe-1_HpOtbpGUh50_vRtw5I9jq4mVg699B0__qSKuwhyphenhyphenlejnH3AHGuJG2luNclQJ73Mt1Gzma0xwqShnpaJ7Q3uX-twmiST1H/s1600/fb.png' title='Facebook'/></a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2_xkkD9rgsdLNcAS-7QBnFJAY1XgNpBjZdJUERMXqnw2aMgBGXr9pZYRhnxXT2ZNHP0xHG_kRLDmG1FPU_jhsluBqsjB72xI_sf-lLjrzz9sv1bo5MyOWNDl9b9Z4t6R5iCwCS3EGqYLZ/s1600/tw.png' title='Twitter'/></a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1D3AevumNPOLsaVg9q86u9YF_KVEzi4cRKnuGYbMWrrIcZxGIMuPYdJJm-rdWAmlcuied_F4cMg7IWGYD7-vnVfkLwUDeJ3h6krFuovHX9Yo0Su0V5deS3zokbixM2bO6ESP6PUVslf07/s1600/g%252B.png' title='G+'/></a>
<a expr:href='"whatsapp://send?text=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO4gxloNpHsWilfJ3qbbq-Z-_VMo9zaU4kJgnzD8V_bzVC4Iy9uGgbcpuJUEXKtGo8NjGj7YvkX2BG4x2hdtboQOXbGvCG1QcGCil3skZeqBkHggm3qXjUXjQ6IFRR49XD0KY1NdXS_hUn/s1600/wts.png' title='Whatsapp'/> </a>
<!-- share buttons -->
</span>
Feito isso, é só salvar!
Os LINKS em VERMELHO são das imagens que podem ser trocadas, basta hospedar e copiar a URL para substituir.
A imagem COMPARTILHAR tem 150x50 px de dimensão
E os BOTÕES tem 32x32 px
Se esse post foi útil para você me ajude compartilhando, se for reblogar ultilize apenas os codigos (
Um forte abraço a todos vcs e até o próximo post se Deus quiser!
Olá meus amores, hoje vim ensinar para vocês uma forma simples de personalizar o título dos posts.
Os creditos desse post vao para Nah e Cherry <3
Para quem nao sabe existem 3 codigos que personalizam (tres formas do post), sao eles:
O título do post normal, quando está na página inicial do blog que é determinado pelo codigo:
h3.post-title a {
O título do post em estado houver, quando o mouse está sobre ele que é determinado pelo codigo:
h3.post-title a:hover {
E o título do post depois que você clicou e já está na página do post, determinado pelo codigo:
h3.post-title {
Todos esses tres codigos estao abaixo desse codigo geral de Post:
/* Posts
Basta colocar a personalizacao a seguir abaixo das tres opcoes na personalização do título:
font-family: Arial; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #000000; /* cor do título*/
border-bottom: 1px dashed#0000; /* cor, tamanho e tipo de borda */
Uma dica especial, vc coloca abaixo da opcao em HOVER de uma forma diferenciada, ou seja, altera a cor (para quando passar o mause a cor seja diferenciada) e se quiser um EFEITO HOVER com SOMBRA, basta adicionar esse codigo abaixo:
text-shadow: 1px 2px 3px #6a6a6a; /* tamanho e cor do efeito */
O codigo ficará assim:
font-family: Arial; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #000000; /* cor do título*/
border-bottom: 1px dashed#0000; /* cor, tamanho e tipo de borda */
text-shadow: 1px 2px 3px #6a6a6a; /* tamanho e cor do efeito */
Para quem nao entende muito bem onde colocar os codigos, basta procurar por /* Posts e adicionar o codigo completo (substituindo apenas as tres opcoes que citei ai acima por:
/* Posts
h3.post-title a {
font-family: MamaeQueNosFaz; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #FF82AB; /* cor do título*/
border-bottom: 1px dashed#8B5742; /* cor, tamanho e tipo de borda */
h3.post-title {
font-family: MamaeQueNosFaz; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #FF82AB; /* cor do título*/
border-bottom: 1px dashed#8B5742; /* cor, tamanho e tipo de borda */
h3.post-title a:hover {
font-family: MamaeQueNosFaz; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #FF82AB; /* cor do título*/
border-bottom: 1px dashed#8B5742; /* cor, tamanho e tipo de borda */
text-shadow: 1px 2px 3px #6a6a6a; /* tamanho e cor do efeito */
Espero que vocês tenham gostado!
Nao esquecam de deixar seus comentarios para eu saber se foi util para vocês.
Um forte abraco e até o proximo post se Deus quiser!
Olá meus amores, tudo belezinha com vocês? Espero que sim... hoje vim trazer um tutorial simples e que na verdade você pode ultilizar com o link que preferir!
Sabemos que para colocar os Plugins do Facebook, é necessario que você tenha um app criado no site Developers e como nao é tao facil para iniciantes, vou postar um codigo simples que vc pode associar ao link geral do seu blog ou link da sua fanpage para seus leitores curtir ou entao compartilhar em seus respectivos perfis.
No HTML do seu blog, procure por: <div class='post-footer-line post-footer-line-1
Você provavelmente irá encontrar esse codigo duas vezes. A principal sera o primeiro a ser encontrado, mas por via das duvidas pode colocar abaixo dos dois codigos que vc encontrar (ja que sao o mesmo) rs e cole o codigo abaixo:
<div class="fb-like" data-href="LINK_DO_BLOG_OU_FANPAGE" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
Substitua pelo link desejado onde tem escrito: LINK_DO_BLOG_OU_FANPAGE
Pronto, ali vc coloca por exemplo o link do seu blog e automaticamente as pessoas vao curtir, e se compartilharem, compartilharão o seu blog em seus perfis pessoais.
Espero que tenham gostado da dica de hoje, foi bem simples e diferente dos botoes tradicionais que compartilham o post, em breve trago esse para voces! Bjus.
Olá meus amores, antes de tudo quero agradecer pelo imenso carinho que tenho recebido por mensagens, emails, e comentarios aqui no blog, infelizmente nao tem como eu responder a todos devido ao pouco tempo e muito trabalho, mas sempre quando posso respondo os email com pedido de tutoriais e afins. E é a pedido de uma leitora aqui do blog que trago o tutorial de hoje: MENU FIXO NO TOPO COM ÍCONES DAS REDES SOCIAIS. É bem simples e espero que ajude a todos vocês. Os creditos desse tutorial vai para Elaine Gaspareto, lembrando que fiz algumas mudanças nos codigos, por isso adcionei mais créditos, mas mantive o dela, uma vez que ela que criou os codigos permanentes.
O Menu ficará desse jeito como voçê pode conferir na Imagem > Amostra Menu <
Bom, inicialmente será necessario ir no HTML do seu Blog e procurar por /* Tabs e substituir todo o codigo abaixo dele até /* Headings por:
/* Menu fixo no topo do blog by Elaine Gaspareto Editado por Renata Massa www.renatamassa.com
--------------------------- */
#menufixo {
width: 100%;
color: #FFF;/*--cor da fonte--*/
padding-left: 80px;
font-weight: none;
margin: 0;
height: 38px; /* altura do menu */
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #000; /* cor de fundo do menu */
font-family: 'calibri', cursive;
font-size: 17px; /* tamanho da fonte */
text-transform: none;
}
#menufixo li {
list-style-type: none;
display: inline;
float: left; /* posicionamento do menu */
padding: 0px;
}
#menufixo li a {
color: #fff;
text-decoration: none;
padding-right: 26px;
line-height: 42px;
}
#menufixo a:hover {
color: #FF69B4; /* cor do link da fonte em hover */
}
#menufixo ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul,
#mymenu li:hover ul ul ul,
#mymenu li.sfhover ul ul,
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul,
#mymenu li li:hover ul,
#mymenu li li li:hover ul,
#mymenu li.sfhover ul,
#mymenu li li.sfhover ul,
#mymenu li li li.sfhover ul {
left: auto;
}
#menufixoleft {
width: 100%;
float: left;
margin: 0px;
padding: 0px;
}
#menufixo {
margin: 0;
padding: 0;
}
#menufixo ul {
float: left;
list-style: none;
margin: 0; padding: 0;
}
#menufixo li {
list-style: none; margin: 0; padding: 0; }
#menufixo li { float: left; padding: 0; }
#menufixo li ul a { width: 140px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#menufixo li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #menufixo li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#menufixo li:hover, #nav li.sfhover { position: static; }
#menufixoright {
width: 200px;
font-size: 11px;
float: right;
margin-top: -35px;
text-align: right;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
Salve, depois vá no layout do blog e adcione uma gadget HTML/JavaScript:
Dentro dela adcione esse codigo:
<div id="menufixo">
<div id="menufixo">
<li><table border="0" cellpadding="0" cellspacing="0" style="text-align: left; width: 200px;padding-left: -55px;">
<tbody>
<tr>
<td style="text-align: left;" valign="undefined"><a href="ENDEREÇO DE SEU GOOGLE+/"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4MWAyxHZeD95La9tlFbkGvNH90uy8t4RMO8_Z0cBYkO1GaVbVWeB9PcMEBxamYjrZ_LXApiQX4gtvH9_iEfOTALCoyrBCC40pPXZyojqMz77vjM3wYOMKTpC72J3MEu8_UIunUGCVJunh/s1600/google-plus-logo-button.png" style="border: 0px solid; height: 32px; width: 32px;" title="Google+" /></a></td>
<td style="text-align: left;" valign="undefined"><a href="ENDEREÇO DE SEU INSTAGRAM/"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6p8MepYTJaHh_KUiSWi7H2fOCia-3rA3hrsdTaYWW_ntOEPml_u1YWYOMh2GPgo4J5xGkopnU76o1ZV3wy9Qev9zt_wNkyGwjYZ6lYmwQVrjAplniwXAJc0U8Di1EBKV98xplGq0_tsls/s1600/instagram-logo.png" style="border: 0px solid; height: 32px; width: 32px;" title="Pinterest" /></a></td>
<td style="text-align: left;" valign="undefined"><a href="ENDEREÇO DE SEU FACEBOOK/"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VgKTkWhlvy3BNaru4aoeH86dVPQUiqbk1Sbj6Ot5tuPf-eaf3G_WyO3P_UKZaivACJQziO2r_d0zkWf1Bko7B7966ZAdinrJjUNdzZe68LANofw4BvbaMZNOuEZ_TFVZU-gUnFk8Scx6/s1600/facebook-logo-button.png" style="border: 0px solid; height: 32px; width: 32px;" title="Facebook" /></a></td>
<td style="text-align: left;" valign="undefined"><a href="ENDEREÇO DE SEU TWITTER/"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6A8erKdcnnM8_BmKlxSvsKMiu4x9VLsdykHM5YXHdIk4QRu5larP7oI1Gl51OhkcDfhp2DVf0Dn0stn1otLWPXGE8Yxm0XlPOJ2Vu9338hIInX-UOneiBlnOy4gX2n8s8UlVlm9737st/s1600/twitter-logo-button.png" style="border: 0px solid; height: 32px; width: 32px;" title="Twitter" /></a></td>
</tr>
</tbody>
</table></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
</div>
</div>
Salve, (caso nao funcione , prove colocar o primeiro codigo acima do ]]></b:skin> ao invez de abaixo do /* tabs )
Bom, entao é isso ai... espero que seja útil, me conte o que voces acharam!
Ola meus amore, tudo bem com vocês?
Aproveitando que o clima esta otimo aqui na italia
Ela disponibilizou um tutorial do menu com imagens, porem eram tipo separador... dai eu dei uma modificada e no lugar dos coracoes que serviam de separador coloquei uma imagem para cada categoria: Home / Sobre / Dicas ou Look / Contato
Bom, entao vamos aos codigos...
Va em Modelo > Editar HTML , dê Ctrl+F e procure por /* Tabs
Feito isso selecione todo o codigo abaixo dele até /* Headings
E substitua por:
/* Menu Fixo - Por Jaque Ferreira www.oablogueira.com
-------------------------------------------------------------------------------------*/
#menufixo {
background: url('http://static.tumblr.com/wlnblxn/gHNo41ioh/menufixo.png') repeat; /* Imagem do menu fixo */
padding-left: 200px;
padding-top: 10px;
width: 100%;
height: 47px; /*Altura do menu fixo */
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#menu {
font-family:'Open Sans Condensed'; /* Fonte */
font-size: 19px; /* Tamanho da Fonte */
text-transform: none;
margin-top: -3px;
}
#menu li {
list-style-type: none;
display: inline;
float: left;
padding: 0em 1.0em;
}
#menu li a {
color: #979797; /* Cor da fonte */
text-transform: uppercase;
padding-right: -2px;
line-height: 15px;
}
#menu a:hover {
color: #000; /* Cor da Fonte quando passar o mouse */
text-transform: uppercase;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 100%;
padding-left: -40px;
}
#menu li ul a {
font-size: 12px;
line-height: 24px;
}
#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfhover ul ul,
#menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul,
#menu li li:hover ul,
#menu li li li:hover ul,
#menu li.sfhover ul,
#menu li li.sfhover ul,
#menu li li li.sfhover ul {
left: auto;
}
#menuright {
float: right;
color: #fff;
}
.search{
float: left;
font-family: 'Open Sans Condensed'; /* Fonte da Barra de pesquisa */
margin-top: -13px;
}
.searchbar{
height: 28px;
width: 210px;
border: 0px solid #fff;
margin: 12px;
background: url('http://static.tumblr.com/wlnblxn/B7Fo41ir1/barra_de_pesquisa.png'); /* Imagem da barra de pesquisa */
text-align:center;
font-size: 12px;
}
.searchbut{
background: url('http://static.tumblr.com/wlnblxn/3xao41iqv/search.png') no-repeat;
width:24px;
height:24px;
border: 0;
padding: 17px;
margin-left: -42px;
}
/* Fim Menu Fixo - Criado Por Jaque Ferreira www.oablogueira.com */
Feito isso, vá em Layout > no crosscol clique em Adicionar um Gadget > HTML/JavaScript e cole o seguinte codigo:
<div id='menufixo'>
<div id='menu'>
<li><a><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulBlwNjdjBupQ4xxqVn6tkCcUKJlFbai05pV4-z2Vcy20wF1OfQsmFsYZHq5FNvJ6Xh9ukTyCnX_rwKmA5yTx2JLIWWMP4yF9Qmkl1QVpvjcH71LcKFf83J5dCW-VqUEp1Q98tYtTu44/s1600/house-outline+%25282%2529..png'/></a></li><li><a href='/'>INÍCIO</a></li>
<li><a><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCIuWsJyU58kyvOnoqQOOyLW36mgv6_ubTBqrh3yKKFoFN4ESnD51K3hyphenhyphenGOIA0P1bRwufyMqn_VYORJBTk0ZpmzAyasP-cd7CZTg3FFynYFvAvJ0xc1WaeQMAVcIxRfJW-vT-0Hh1nEw/s1600/chat+%25282%2529..png'/></a></li>
<li><a href='LINK DA PÁGINA_SOBRE'> Sobre </a></li>
<li><a><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvEIk7XqDuLkZGC3qeemR5Jjpy39g9i8l_dtPr1SGVy1UJCMxEgeJyDXWGp_W_jJhmG-0loX8DFewaQq3crLAc3uYy7kZZXZqJnTFcOueBzl2iYjYUU7na58rnihhX1pjEsLEI6pePaI/s1600/high-heel+%25282%2529..png'/></a></li>
<li><a href='LINK DA PÁGINA_DICAS'> Dicas </a></li>
<li><a><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-kkUs46Dy9TDiA4ZRc56Ww0psWaDjnax0LjKaDr0qGiioNurmn9Hk5if0rjQfMcoYUajuFHEMhSYkpxfECHwFCDUym3-am6SzIym7ZSlxhqYf5ZHI9rgIuCv8r0ySek-2YxiGx_UwZ8/s1600/envelope+%25282%2529..png'/></a></li>
<li><a href='LINK DA PÁGINA_CONTATO'> Contato </a></li>
</div>
<form action='/search' class='search' method='get'>
<input class='searchbar' id='s' name='q' placeholder='Pesquisar' type='text' value=''/>
<input class='searchbut' type='submit' value=''/>
</form>
<div id='menuright'>
</div></div>
Onde está com a font VERMELHO você substitue pelo link de suas respectivas páginas!
Bom, espero que voces tenham gostado, nao esqueçam de deixar um comentario ok?
Se porventura, nao funcionar no seu blog, faça um teste ao invez de colocar o codigo abaixo de /* tabs , tente colocalo acima de ]]></b:skin>
Um forte abraço !!!
Olá meus amores, depois que postei ontem o Tutorial de como personalizar o Footer do post a pedido de uma leitora, recebi varios pedidos de novos tutoriais...
E a pedidos de algumas leitoras, vim trazer para voces um tutorial bem simples, os creditos vao para Dicas para Blogs.
Confiram como ficou no blog de teste: DEMONSTRAÇÃO
Entre na pagina layout > adicionar gadget > html/javascript e cole o código completo.
<style type="text/css">
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
color: #FFF; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #9F0;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform:capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px
solid #FFF;
border-right: 1px solid #FFF;
background-color: #555;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
background-color: #FC6;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:
0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover
ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='endereço do blog'>Home</a></li>
<li>
<a href='url da pagina'>LINK</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK2</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK3</a>
<ul>
<li><a href='url da pagina'>Nome do Link </a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div>
Procure por:
/* Tabs
E Abaixo dele selecione todo codigo até antes de /* Headings e substitua por
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
Altere as cores de acordo com o tema do seu blog, confira aqui uma Tabela de cores Online
Cores dos Botões do Sub-Menu
#nav li a:hover, #nav li a:active - cor do menu quando abre o sub menu.
#nav li a, #nav li a:link, #nav li a:visited - Cores dos botões do sub menu
#nav li a:hover, #nav li a:active - Cores dos botões do submenu quando o mouse está sobre eles.
Colocar ou Alterar os links do Sub-Menu
<li><a href='#'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
Na primeira linha você deve somente alterar o texto LINK1. Esse é o texto que aparece no MENU e onde tem LINK sao as abas do submenu.
Onde tem escrito: url da pagina substitual pelo link da pagina determina.
Bom, espero que voces tenham gostado!
Se voce deseja um layout personalizado para seu blog contrate meu serviço!
Confira AQUI meu portifólio.