Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens

terça-feira, 5 de julho de 2022

Como alterar a cor da seleção de texto do Blogger?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar


Normalmente, a cor da seleção é nesse tom de azul. Mas no Blogger você tem a opção de poder personalizar essa cor e personalizar de acordo com o design do seu template.


Resultado:


Tutorial:
Continue a leitura

sexta-feira, 10 de setembro de 2021

Gadget do YouTube (Vídeo + Inscritos)

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar


Este gadget permite a visualização de um vídeo demonstrativo da sua escolha + opção de inscrever-se no canal! Para adquirir é bem prático e rápido. Orientação do que substituir encontra-se marcado de vermelho. 

Layout > Adicionar Gadget > HTML/JavaScript e cole o código a seguir:

<center>

<iframe allowfullscreen="" frameborder="0" height="194" src="https://www.youtube.com/embed/sTjuFELLE6k" width="340"></iframe>

<br /><div style="margin-top: 15px;"><br /><script src="https://apis.google.com/js/platform.js"></script><br /><br /><div class="g-ytsubscribe" data-channelid="UCLejQ93wjjrSJiNc6XlxlrQ" data-count="default" data-layout="full"></div><br /><br /></div></center>  

Dica: pegue apenas o código em letras. Vejamos:

Referente ao link do vídeo:

Referente ao seu canal:

Até mais!

sexta-feira, 30 de setembro de 2016

Como ocultar o título de um determinado gadget? (Sem códigos dentro do Html)

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Fonte: Sem contesto

Oii!

Agora pouco encontrei um tutorial mara para poder ocultar um título de apenas um gadget aqui do blog. O motivo pelo qual fui pesquisar, é que alguns gadgets são obrigatórios o título do mesmo como não queria ocultar de todos a solução foi ir atrás de um tutorial e encontrei esse help no blog Foi testado. Muito obrigada. 

É muito mais simples do que você pensa. Acesse o gadget que você queira ocultar e  no lugar do título coloque: 
<h2></h2>

Clique em Salvar e pronto!
Seu título foi ocultado para a visualização dos leitores!

Fácil não é mesmo?
Até mais!

quinta-feira, 22 de setembro de 2016

Como colocar espaço entre as postagens?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Imagem de lisa, blackpink lisa, and lalisa love me

Oi gente!

É um bom tutorial para definir o espaço que fica entre as postagens para poder então dizer o início e o fim da mesma e não ficar junto e misturado. Para quem tem banner entre as postagens assim como eu, melhor ainda (mostrado na imagem acima).


Olá! Aqui já foi um post bem atrativo, porem, infelizmente com a perda das imagens hospedadas no Tinypic.com, não tenho mais os prints do design do blog em tempo real.
(Post atualizado em 10/09/2021)


Design > Editar Html > Ctrl+F e pesquise por:

#blog-pager { 

acima desse código coloque esse:

.post {
margin-bottom: 30px;
}

ficando assim:

.post {
margin-bottom: 30px;
}

#blog-pager {
  padding: 15px;
  font-size: 120%;

altere o que está marcado de vermelho caso você queira mais espaço, por um valor maior.


Tutorial encontrado no site On The Fame.
Até mais!

sexta-feira, 22 de julho de 2016

Como ter o widget do YouTube no blog?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Imagem de book, cozy, and autumn

Oi amores!!
Que tal ter mais uma maneira de divulgar seu canal e atrair mais leitores? O que irei mostrar é igual ao meu. Encontrei os mesmos código em 3 sites Henrique Zenny, Cbblogers e Follow Your Dreams. Obrigada :)

<center><br /></center><center><iframe allowfullscreen="" frameborder="0" height="182" src="https://www.youtube.com/embed/ulsxC_E89e4" width="340"></iframe><br /><div style="margin-top: 15px;"><br /><script src="https://apis.google.com/js/platform.js"></script><br /><br /><div class="g-ytsubscribe" data-channelid="UCLejQ93wjjrSJiNc6XlxlrQ" data-count="default" data-layout="full"></div><br /><br /></div></center>

1º código em vermelho você irá pegar o código encontrada na Url do seu vídeo depois do sinal "="
2º código em vinho você irá acessar a página Meu Canal e pegar o código depois da / como indicado na imagem abaixo:

Você também poderá editar:
width="340" - Largura do vídeo
height="182" - Altura do vídeo

Até mais!

quinta-feira, 14 de julho de 2016

Mudando o avatar dos comentários anônimos do blog

Assunto(s):
Postado por: às:
3 Comentário(s)
Compartilhar

Imagem de autumn, edgy, and sweater

Oi amores :)

Hoje finalmente consegui mudar o avatar dos anônimos aqui do blog. De todos que testei, só consegui com o tutorial do blog We Herat HTML. Muito obrigada!

da seguinte forma. 

Acesse Modelo > Editar Html > Ctrl+F ou F3 e pesquise por <body>. 
Antes desse código, insira o código a seguir:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;//img1.blogblog.com/img/blank.gif&#39;]&quot;)
.attr(&#39;src&#39;, &#39;LINK_DA_IMAGEM&#39;)
.ssyby(&#39;blank&#39;)
</script>

altere o que está de vermelho pelo código da sua imagem;
altere o que está de roxo caso o código não funcione por este código 

http://yourjavascript.com/11152551116/jquery-fancybox-1-3-4-patch.js

O que está marcado na imagem você irá substituir pelo código da imagem hospedando nesse site e pegando o seguinte código.

Até mais!

sábado, 9 de julho de 2016

Tutorial: Menu vertical com background e efeito hover

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Imagem de cake, dessert, and food

Olá amores!

O tutorial da vez é um menu vertical simples e com um efeito bacana recomendado pra colocar na barra lateral.

Olá! Aqui já foi um post bem atrativo, porem, infelizmente com a perda das imagens hospedadas no Tinypic.com, não tenho mais os prints em tempo real.

(Post atualizado em 13/09/2021) 

Siga os seguintes passos:
No gadget HTML/Java Script cole o código a seguir nele:

<STYLE type="text/css">
#menuzinho {
display: block;
width: 100%;
height: 19px; /* ALTURA DO MENU /*
width:178px /* LARGURA DO MENU /*
vertical-align: middle;
font-family: Verdana, Arial, sans-serif;
font-size: 10px; /* TAMANHO DA FONTE */
font-weight: bold;
color: #FFB3D7; /* COR DA FONTE */
text-indent: 5px;
line-height: 17px;
margin-bottom: 3px;
margin-left: -1px;
background-color:#FFECF3; /* COR DO FUNDO */
}
#menuzinho:hover {
display: block;
color: #FF80C0; /* COR DA LETRA QUANDO PASSA O MOUSE */
background-color: #FFDFEE; /* COR DO FUNDO QUANDO PASSA O MOUSE */
}
</style>
<a id="menuzinho" href="URLDOLINK">NOME DO LINK DO SEU MENU</a>

Faça as alterações como se pede no código :)
Crédito: Blog Cherry Bomb

sábado, 30 de janeiro de 2016

Backup do Orkut vai até Setembro de 2016

Assunto(s):
Postado por: às:
2 Comentário(s)
Compartilhar

Imagem de apple, motivation, and notes

Oii amores!

Amado Orkut... Quanta saudade❤ Se você não soube a tempo da decisão do Google de tirar o Orkut do ar em 2014 e ficou salvo aquelas suas fotos ~lindxas~, scraps e depoimentos você pode tê-los em dois tempos! Acesse: https://www.google.com/settings/takeout para a realização do Backup de tudo qu está relacionado ao seu Orkut. Servirá pra qualquer outro arquivo que queira fazer backup :)

Até mais!

domingo, 8 de novembro de 2015

Como colocar foto no canto do vídeo do youTube (Marca D'gua de branding)?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar


Oii!

O motivo desse título é bem simples, coloquei assim porque creio eu que a maioria das pessoas devem pesquisar dessa maneira quando se trata daquela imagem bem pequena no canto do vídeo em que você já assistiu de algum(a) vlogueiro(a). Na maioria das vezes, a imagem fica durante todo o vídeo apesar de que dá para determinar a quantidade de tempo que você quer que o logo fique visível.

Olá! Aqui já foi um post bem atrativo, porem, infelizmente com a perda das imagens hospedadas no Tinypic.com, não tenho mais os prints em tempo real.

(Post atualizado em 13/09/2021) 

Siga os passos abaixo:

Acesse https://www.youtube.com/features

1. Clique em Canal;
2. Clique em Branding;
3. Clique em Adicionar uma marca d'gua;
4. Clique em Selecionar arquivo e escolha a imagem (não pode ultrapassar o tamanho máximo que é de 1MB e que a imagem esteja com o fundo transparente);
5. Clique em Salvar;
6. Tempo de exibição: clique para escolher dentre uma das opções: ver a partir de quantos segundos, no final do vídeo ou vídeo completo;
7. Clique em Atualizar para finalizar

Eu e minha mania de sempre quando encontro algo, acho que a minha dúvida é a mesma que a de vocês e venho correndo postar aqui no blog é tanto que durante ia configurando em meu canal, já ia escrevendo o post. 

Espero ter ajudado!
Até mais!

terça-feira, 15 de setembro de 2015

Como usar o PagSocial?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Oii!

Já citei aqui no blog sobre PagSocial. Falei o que era e a função dele. Inclusive, já usei para colocar meu primeiro Blog Planner. Dessa vez, irei explicar à vocês da maneira que encontrei mais simples possível de como utiliza-lo.

Acesse PagSocial e siga os passos a seguir. Ah! Estão todos numerados e com uma pequena demonstração de quando usei pra colocar meu Blog Planner;

Olá! Aqui já foi um post bem atrativo, porem, infelizmente com a perda das imagens hospedadas no Tinypic.com, não tenho mais os prints do design do blog em tempo real.
(Post atualizado em 13/09/2021)

1- Coloque seu e-mail;
2- Escolha um nome do arquivo. Lembrando que irá ficar visível como um título de um post;
3- Bom... Nesse caso, você irá guardar seu arquivo zipado em algum servidor. Eu mesma, utilizei o Dropbox. Mas você pode usar também o Mediafire ou 4Shared Faça o download do arquivo em um desses servidores citados anteriormente e logo em seguida copie o endereço (link) do mesmo e cole nesse espaço;
4- Opcional. Escolha uma imagem para demonstração. No tamanho 100x100 pixels;
5- Descrição simples. Agradecimentos ou informações. Fica ao seu critério;
6- Recomendo que você escolha esta opção e coloque o endereço do seu blog ou site no passo 7;
7- Confira o passo 6;
8- Pra finalizar, clique em Criar!

Se você preencheu tudo certinho, logo em seguida irá aparecer uma janela assim:

Muito simples, não?
Espero que tenha ajudado!
Até mais!

domingo, 6 de setembro de 2015

Menu acima do cabeçalho (sem a barra de pesquisa)

Assunto(s):
Postado por: às:
8 Comentário(s)
Compartilhar

Oi amores!♥

Esse tutorial vai ser um pouco diferente com relação aos demais tutoriais já encontrados (ou não) pra você que queira um menu fixo no topo do blog. Pois bem, este aqui, apenas irá colocar o seu menu (páginas) acima do cabeçalho assim como o meu (mostrado na imagem acima). Ele não terá que adicionar gadget com algum código para que você possa criar um menu. E sim, personalizar, ou melhor explicado, alterar a posição de onde se encontra o seu menu atual, colocando o mesmo no topo. Vamos lá?


Modelo > Editar html > Ctrl+F ou F3 e procure por:
/* Tabs
assim que encontrar, apague todo o código que se encontra em /* Tabs (abaixo da linha pontilhada)

/* Tabs
----------------------------------------------- */
.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}

.tabs-inner .section {
  margin: 0;
}

.tabs-inner .widget ul {
  padding: 0;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}

.tabs-inner .widget li {
  border: none;
}

.tabs-inner .widget li a {
  display: inline-block;
  padding: 1em 1.5em;
  color: $(tabs.text.color);
  font: $(tabs.font);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;
  background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
  color: $(tabs.selected.text.color);


}


e coloque esse:
/* Menu personalizado by Elaine Gaspareto (http://www.elainegaspareto.com)
----------------------------------------------- */
.PageList {
text-align:center !important;
margin: 0px 0px 0px 0px;
padding: 20px 0px 20px 0px;
letter-spacing:0.4em;
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
width:100%;
background: $(tabs.background.color);
}
.PageList li {
display:inline !important;
float:none !important;
padding: 0px 0px 0px 0px;
margin: 3px 0px 3px 0px;
text-decoration:none;
font: $(tabs.font);
text-transform:none;
color: $(tabs.text.color);
}
.PageList li a, .PageList li a:visited, PageList li a:hover {
text-transform:none;
text-decoration:none;
padding: 0px 0px 0px 0px;
margin: 0px 15px 0px 25px;
color: $(tabs.text.color);
}
.PageList li a:hover {
color: $(tabs.selected.text.color);
}

edite como preferir. O que esta marcado de azul, você poderá colocar cor alterando para:
background: #fff; 
o que está marcado de roxo você irá colocar a cor que preferir. Confira algumas tabelas de cores.
ou um background em imagem, alterando para:

background: url('url da imagem'); 
o que está marcado de vermelho você irá colocar o endereço da imagem

Na minha opinião em relação ao meu blog, achei um resultado maravilhoso. Uma vez que, já coloquei vários tutoriais mas nenhum deixou como eu queria.

Até mais!

sábado, 29 de agosto de 2015

Como colocar o widget sob um background?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Oii♥

An?? Como assim? Widget é tipo: fan box do facebook ou twitter, player de youtube, gadget de seguidores e por ai vai... O widget do exemplo abaixo é o código da caixinha de mensagem C-box do blog Cherry Bomb.

Layout > adicionar gadget > Html/JavaScript > e cole o seguinte código a seguir:

Código:

<div style="background:url(endereço da imagem) left no-repeat; height: 100px; width: 256px;"><div style='float:left; padding-top:68px; padding-left:155px;'>código do contador de visitas</div></div>

Vermelho endereço da imagem a ficar como fundo 
Roxo código do widget (fan box do facebook ou twitter, player de youtube, gadget de seguidores...)
Azul altura da imagem que você vai usar
Laranja largura da imagem que você vai usar
Verde direção que ele irá ficar

Exemplo: left (esquerda)  right (direita)

Azul turquesa distância em que o objeto que vai ficar sobre a imagem em relação ao topo. Lembrando que existem números positivos 0 1 2 3 4... e negativos -1 -2  -3 -4...
Lilás é a distância que o objeto vai ficar sobre a imagem em relação ao lado esquerdo. O mesmo será feito com o exemplo citado anteriormente.
Crédito do tutorial Trashy Girl
Beijos!

domingo, 23 de agosto de 2015

Como colocar gadget de dados (informações) do meu blog?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Oii!

Que tal colocar a exposição seus dados do blog tais como: qual o navegador tem a melhor visualização do seu design, visitantes onlines e dizer a sua meta.

Código:

<img src="http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/mini-icone.gif" / />Blog: Phanny Teen<br /><img src="http://lh6.ggpht.com/_NZJzdRm10Y0/TTSXwE0xJ-I/AAAAAAAAAF4/tVS6pzI4UJE/s800/gif23.gif" / /> Google Chrome e Firefox.<br /><img src="http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/girl-1.gif" / /><img src="http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/boy-1.gif" / /> <script src="http://fastwebcounter.com/secure.php?s=LINK_DO_SEU_BLOG_AQUI"></script>  visitas<br /><img alt="MSN" src="http://i205.photobucket.com/albums/bb186/mhilkas/Currently/msn.gif" / /> <script src="http://www.usuarios-online.com/usuarios.php?v=LINK_DO_SEU_BLOG_AQUI" type="text/javascript"></script> visitantes online<br /><img src="http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/mini-icone5.gif" / /> Meta: reconhecimento<br /><img src="http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/Mouse-1.gif" / /> Tecnologia do <a href="http://blogger.com/">Blogger</a>

Azul turquesa: coloque o que preferir.
Dica: nome do seu blog ou o seu nome
Lilás: diga qual é o navegador que melhor mostra a visualização do seu design
Vermelho: coloque o link do seu blog
Rosa: diga qual é a sua meta

Para os mini gisfs confira:

Mini Gifs
Mini Gifs 2


Layout > Adicionar gadget > Html/Java Script e cole o código.


Crédito do tutorial: Extra Place Fame

terça-feira, 4 de agosto de 2015

Como ocultar o título da postagem de dentro da página?

Assunto(s):
Postado por: às:
2 Comentário(s)
Compartilhar


Oii amores!

Hoje trouxe pra vocês um tutorial bem simples. Mas... Pra quem se senti incomodada(o) assim como eu, irá ser mais do que simples e passará a ser necessário! Enfim... Este tutorial, aprendi no blog Meu caderno de anotações. Obrigada! Apesar de já ter visto num outro blog, não encontrei mais.

RECOMENDO QUE FAÇA BACK UP DO TEMPLATE DO BLOG.
CASO NÃO SAIBA, CONFIRA ESTE POST

Modelo > editar html > pressione as teclas Ctrl+F e pesquise por:
</head>
acima dele coloque o código abaixo:

Código:

<b:if cond='data:blog.pageType == "static_page"'> 
    <style type="text/css">  
 h3.post-title { 
    display: none; 
    visibility: hidden; 
}
    </style> 
</b:if>

Apenas será nos títulos que estão dentro das páginas (vulgo, menu/paginação) do seu blog! 

Beijos!

segunda-feira, 3 de agosto de 2015

Como colocar dois background no blog?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar



Oii!

Que tal deixar seu blog mais interessante colocando dois background diferentes? Vamos lá?

Olá! Aqui já foi um post bem atrativo, porem, infelizmente com a perda das imagens hospedadas no Tinypic.com, não tenho mais os prints do design do blog em tempo real.
(Post atualizado em 14/09/2021)

Procure por:
body }
irá aparecer assim:

 body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

Código completo:

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

html body .region-inner {
  min-width: 0;
  max-width: 100%;
  width: auto;
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
}

.content-outer .content-cap-top {
  height: ;
  background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}

.content-outer {
  margin: 0 auto;
  padding-top: $(content.margin);
}

.content-inner {
  background:  ;
  background-position: left -$(content.imageBorder.top.space);
  background-color: $(content.background.color);
  padding: $(content.padding);
}

.main-inner .date-outer {
  margin-bottom: 2em;
}

e o que estiver marcado de roxo substitua por este código:

body, html {
height: 670px;
margin: 0;
padding: 0;  }
body {
font: $(body.font);
color: $(body.text.color);
background:#efefef url("url da imagem") no-repeat  scroll top; }
html {
background:#efefef url("url da imagem") repeat scroll; }
html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}

ficando assim:

/* Content
----------------------------------------------- */
body, html {
height: 670px;
margin: 0;
padding: 0;  }
body {
font: $(body.font);
color: $(body.text.color);
background:#efefef url("url da imagem") no-repeat  scroll top; }
html {
background:#efefef url("url da imagem") repeat scroll; }
html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}

o que está marcado de rosa fucsia será o tamanho da altura do banner (confira o valor da altura do seu banner e coloque o mesmo pra poder ficar adequado)
o que está marcado de azul será a cor do fundo
o que está marcado de vermelho, você irá colocar a url da imagem.


Créditos á Cherry Bomb

Obrigada!
Beijos

Código Html para "Nenhum comentário" e "0 comentário(s)"

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Imagem de aesthetic, Cookies, and archive

Oii!

Não sei se vocês já perceberam, mas há dois códigos html dos nomes comentários do seu blog. Ou seja, de "nenhum comentário:" e de "0 comentário(s)".


Código:
<span class='post-comment-link'>
        <b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                          and data:post.allowComments' data='post' name='comment_count_picker'/>
      </span>


Código:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>


caso você tenha um e queira o outro, é só procurar pelo que você já tem e inverter. Se quiser você pode ter os dois. É só colocar em lugares diferentes abaixo de alguns destes códigos:

Confira:

<div class='post-header-line-1'/>
</div> 

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer-line post-footer-line-3'>

Procure pelo que está marcado de vermelho e coloque o código abaixo =)
Beijos!

terça-feira, 28 de julho de 2015

Como colocar imagem no Postagens mais recente, postagens mais antiga e página inicial?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar


Oii!

Estou trazendo um tutorial bem simples. Aprendi há alguns anos atrás com o Blog Trechy Teen.


Postagem mais recente:
Procure por:
<data:newerPageTitle/>
Confira:
<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

Substitua o vermelho por: <img src='Url da imagem'/>

Postagem mais antiga:
Procure por:
<data:olderPageTitle/>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

Substitua o vermelho por: <img src='Url da imagem'/>

Página inicial ou Início:
Procure por:
<data:homeMsg/>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

Substitua o vermelho por: <img src='Url da imagem'/>

Beijos!

Como colocar imagens do post com o mesmo tamanho? - Modelo Travel e Modelo Espetacular Ltda. (Blogspot)

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Imagem de ⚜️Luna de Antiguedades⚜️

Bom gente.... Mudei o modelo do meu blog e vou vê se me acostumo com ele. Porem, tive uns probleminhas com o tamanho de todo o layout e principalmente nas imagens iniciais que coloco no post. Quando determinei uma largura digamos "pequena" as imagens iniciais não se adequaram. Elas ficaram passando.

Antes quando eu tinha o Modelo Travel era tudo mais simples e fácil. É recomodadíssimo para quem é iniciante ter esse modelo e você irá encontrar tutoriais a bessa. 


Modelo Travel/Viagem
Tentativa 1

Modelo> Editar Html > Ctrl+F e procurre por:
.main-inner .column-center-outer {
acima dele coloque o código:

.post img {
max-width: 520px;
height: auto;
}

altere o vermelho até ficar num tamanho adequado



Modelo Travel/Viagem
Tentativa 2

Modelo> Editar Html > Ctrl+F e procurre por:

/* Posts
----------------------------------------------- */

abaixo dele coloque o código:

.post img {
max-width: 520px;
height: auto;
}

altere o vermelho até ficar num tamanho adequado


Modelo Travel/Viagem
Tentativa 3

Modelo> Editar Html > Ctrl+F e procurre por:
]]></b:skin>
 acima dele coloque o código:

.post img {
max-width: 520px;
height: auto;
}

altere o vermelho até ficar num tamanho adequado


Modelo Espetaular Ltda
Tentativa 1

Modelo> Editar Html > Ctrl+F e procurre por:
.post-body img {

e abaixo de todo o código:

.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);

   -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);

   -moz-border-radius: $(image.border.radius);
  -webkit-border-radius: $(image.border.radius);
  border-radius: $(image.border.radius);
} 

coloque este código:

.post img {
max-width: 520px;
height: auto;
}

altere o vermelho até ficar num tamanho adequado.


Dependendo do código, neste modelo nem sempre funciona quando é colocado abaixo de
/* Posts
----------------------------------------------- */
é arriscado aumentar todaaas as imagens. Quando coloquei por essa tentativa que mostrei acima, deu super certo. É tanto que vim logo correndo fazer este post. Espero que com você também!

Beijos!

sábado, 25 de julho de 2015

Como ocultar e mostrar um conteúdo numa imagem?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Imagem de aesthetic, aquarium, and fish

Oii!

Esse tutorial será de uma imagem que ao ser clicado mostrará links. Tais quais o que você quiser. De preferência links pra outros blogs ou páginas. Conheço esse tutorial há alguns anos. Inclusive já usei muito aqui no PH e resolvi voltar a tê-lo. Aprendi no blog Trechy Teen. 

No gadget HTML/Java Script cole o código a seguir:


<div class="divspoiler"><img src="URL DA IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" /></div><div><div class="spoiler" style="display: none;">Aqui o código dos links</div></div>

Vermelho: código da imagem a ser usada (Url)
Violeta: adicione os links

Dica: organize seus links numa postagem em rascunho. De preferência que os mesmos estejam alinhados no meio (centro). Você também poderá colocar Play list. É só adicionar no Aqui o código dos links o código da Play list que você salvou.

Outras opções: Blog Passo a Passo

Como colocar meu Link-me na barra lateral (sidebar) do meu blog?

Assunto(s):
Postado por: às:
0 Comentário(s)
Compartilhar

Imagem de aesthetic, motivation, and notes

Oii!

Apesar de ser simples. Nem sempre funciona. Eu mesmo tenho vários "link-me" mas quando a questão é colocar na barra lateral o código da caixinha some. Doido não? Pois é. Mas já encontrei a solução!

Layout > Adicionar um Gadget > Java Script/Html e cole o seguinte código:

Código 1
<a href="http://www.phannyteen.com.br/ target="_blank"><img alt="PHANNY TEEN - BLOG DE ENTRETENIMENTO" title="PHANNY TEEN - BLOG DE ENTRETENIMENTO" src="http://i62.tinypic.com/8y9r0p.png" border="0" width="279" height="134"/></a>

 Vermelho - será o link do seu blog
Roxo - coloque o nome do seu blog e do que fala nele (será visto quando for colocado o mouse em cima do link-me)
Azul - código da imagem (url)
Verde - largura da imagem
Laranja - altura

Código 2
<div align="center"><img src="URL_DA_IMAGEM"/><br/>
<textarea cols="15" rows="3" onfocus="this.select()" onmouseover="this.focus()" name="textarea" style="width:80%;">
&lt;a href="URL_DO_BLOG" target="_blank">&lt;img src="URL_DA_IMAGEM" title="NOME_DO_BLOG" alt="URL_DO_BLOG" style="border:0;"/&gt;&lt;/a&gt;
</textarea>
</div>
NOME_DO_BLOG: Coloque o nome do seu blog;
URL_DO_BLOG: Coloque o domínio do seu blog (fique atento que são dois campos no código);
URL_DA_IMAGEM: Coloque o link da imagem hospedada.

Veja também: Crie seu banner

Beijos
Assinar: Postagens (Atom)
Subir