Yo galera, varias pessoas me pediram para trazer a como colocar as paginas numeradas no blogger. Então vamos lá.
Retirar a mensagem "Postado por"
Yo galera, venho trazer a maneira de retirar a mensagem "Postado por", que muitos gostariam de retirar então vamos lá.
Box Shadow em Outer-wrapper no Template!
Olá,pessoal aqui é o Daniel e hoje vou ensinar um tutorial bem básico que tem um efeito bem legal!Caso,não conheça o efeito é só testa-lo!
Estatísticas do Blog!
Neste tutorial,vocês estarão aprendendo a como colocar estatísticas no seu blog.Não sabe como funciona?Então veja uma demo no meu antigo blog: Blog Naruto Design!
Vamos começar!
1 - Painel do Blogger » Design » Adicionar um Gadget HTML/JavaScript
2 - Cole o código abaixo dentro dele e vá alterando...
<ul>
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<li><a href="#">Comentários: <script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> </a></li>
<li><a href="#">Postagens: <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></a></li>
</ul>
Dúvidas?Comente agora mesmo!
Vamos começar!
1 - Painel do Blogger » Design » Adicionar um Gadget HTML/JavaScript
2 - Cole o código abaixo dentro dele e vá alterando...
<ul>
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<li><a href="#">Comentários: <script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> </a></li>
<li><a href="#">Postagens: <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></a></li>
</ul>
Dúvidas?Comente agora mesmo!
Sistema de avatar
Yo galera, hoje trago um tutorial que muitos me pedem queé colocar o sistema de avatar para os autores do site. Então vamos lá.
Numerando Comentários do Blogger
Yo galera, hoje venho trazer um tutorial de como numerar os comentários do blogger. Então vamos lá.
Background nos títulos dos Gadgets
Yo galera, vou ensinar como colocar um Background nos títulos dos Gadgets.
Vá em >>Layout>>Editar HTML>> e procure pela seguinte tag:
Vá em >>Layout>>Editar HTML>> e procure pela seguinte tag:
.sidebar h2 {
margin: 0px;
padding-left:12px;
height:47px;/* Altura da Imagem */
background: #000 url("URL_DA_IMAGEM")no-repeat;/* Coloque uma imagem ou uma cor */
text-align: left;/* Posicione o titulo */
font: Arial black;
padding-top:13px;
color:#fff;
text-shadow: #000 0px 1px 2px;
margin-bottom:-19px;
}
Padding-top ou padding-lef você posiciona o texto em relação aos lados.
Color: cor do texto.
como exibir somente o titulo dos marcadores
yo ensinarei como exibir somente os titulos dos marcadores
exemplo:
exemplo:
Primeiro passo vai em design >editar html e clique em expandir modelos de widgets e procure por:
<b:include data='post' name='post'/>
Agora subistitua essa linha por esse codigo:
<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div id='marcadores'><ul><li> <a expr:href='data:post.url'><data:post.title/></a> </li></ul> </div> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>
Após fazer isso, procure pela seguinte linha:
]]></b:skin>
E acima dela cole o seguinte codigo:
#marcadores{ background:#CCCCCC; /*--cor de fundo--*/
border:1px solid #333333; /*--estilo e cor da borda--*/
margin:5px;
padding:15px; }
#marcadores ul{ list-style-type:none;
padding:0px;
margin:0px;
}
#marcadores li{
font-size:15px; /*--tamanho da fonte dos links--*/ padding:5px;
}
border:1px solid #333333; /*--estilo e cor da borda--*/
margin:5px;
padding:15px; }
#marcadores ul{ list-style-type:none;
padding:0px;
margin:0px;
}
#marcadores li{
font-size:15px; /*--tamanho da fonte dos links--*/ padding:5px;
}
Areá do postagem separada (Exclusivo)
Yo galera, venho ensinar a vocês a como colocar a área da postagem separada. Como assim Ô sábio Ulquiorra ? kkk
Bem galerinha é bem simples, quando vocês entram em algum site a maioria está como a parte da postagem separada assim como o do Designer Project.
Primeiro passo.
Vai, no blogger, vá em Design, Editar HTML, procure por:
Post
Vai estar meio que assim:
/* Posts -------------------------------------------- */
Após encontrar, substitua todo o código que faz parte desta área. E coloque a que está logo abaixo mas lembrando em editar as devidas partes:
/* Posts -------------------------------------------- */
h2.date-header {
margin-top:-25px;
margin-right:0px;
margin-bottom:0;
margin-left:329px;
text-align: left;
font-size:70%;
line-height:2em;
text-transform:none;
letter-spacing:1px;
color:#fff;
}
.post {
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
background:url() repeat;
font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#000;
text-shadow: 0px 0px 7px #CD5C5C;
}
.post h3 {
margin:0;
line-height:1.5em;
width: 554px;
height: 115px;
background:url("IMAGEM DO TOP")no-repeat 0px .0em;
display:block;
border:1px;
border-width:0 1px 1px;
padding:12px 07px 25px 20px;
font:16px Verdana, Arial, Helvetica, sans-serif;
}
.post h3 a, .post h3 a:visited {
text-decoration:none;
color: #000;
text-shadow: 0px 0px 7px #CD5C5C;
}
a.title-link:hover {
background-color: #ffffff;
color: #ffffff;
}
.post-body {
border:1px ;
background:url("") repeat;
border-width:0 1px 1px;
border-bottom-color:#ffffff;
padding:0px 5px 0px 9px;
}
html>body .post-body {
border-bottom-width: 0;
background:transparent url(IMAGEM DO MEIO) repeat scroll 0 0;
}
.post p {
margin: 0px;
}
.post-footer {
background:transparent url(IMAGEM DO RODAPÉ) no-repeat scroll 0 0;
width:554px;
height:176px;
padding-left:390px;
padding-top:25px;
color:#000000;
display:block;
text-transform:uppercase;
font: normal normal 60% 'Haettenscweiler', Trebuchet, Verdana, Sans-serif;
}
.comment-link {
margin-left:.6em;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
margin-top:10px;
margin-left:5px;
}
#blog-pager-older-link {
float: right;
margin-top:10px;
margin-right:5px;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
display:none;
}
Agora vamos as dúvidas:
float:left : é o lado que vc quer que fique.
left é o lado esquerdo, se quiser que fique a direita troque por right
margin: 0px 0px 0px 0px : são as posições que vc irá colocar, no caso são pros lados inferior, pra superior e pros lados, esquerdo e direito.
Que pode estar assim:
margin-top:-25px;
margin-right:0px;
margin-bottom:0;
margin-left:329px;
O text-align é a posição que vc quer que fique o texto.
A color:#00000, que é a cor. Vou deixar abaixo a tabela de cores, daí é só escolher:
O text-align é a posição que vc quer que fique o texto.
A color:#00000, que é a cor. Vou deixar abaixo a tabela de cores, daí é só escolher:
O font-size:10px : É simplesmente o tamanho da letra.
O text-shadow é o efeito que dá abaixo da letra.
E por fim width e height é a largura e a altura da imagem.
Espero que tenha ajudado, qualquer dúvida deixa um comentário.
Titulo do blog em movimento
1. Abra “Design” e clique em “Editar HTML”. Não precisa clicar em “Expandir modelo de widget”.
2. Ache a linha “</head>”.
3. Abaixo dela cole o seguinte script somente modificando o que está em Laranja:
<script language='JavaScript'>
var txt=" Título do Blog ";
var espera=90;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</script>
É isso, Não esquece de comentar !
Link Nick do Autor
E ai pessoal! Um dia desses um cara veio me procurando para saber como colocar link no nick name do autor... e é isso que irei mostrar a vocês hoje. ~Galera do Xat, me desculpem mas não irei entrar toda vida no chat por causa da facul...
Obs: Esse código é legal para quem entende um pouco de imagem avatar.
Primeiramente vamos abrir o Blogger > Design > HTML > Expandir modelos de Widget
Agora é só substituir.
Obs: Esse código é legal para quem entende um pouco de imagem avatar.
Primeiramente vamos abrir o Blogger > Design > HTML > Expandir modelos de Widget
Agora vamos procurar por:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
E então substituir esse código por esse:
<span class='post-author vcard'>
<b:if cond='data:post.author == "AUTOR1"'>
<a href='LINK-DO-AUTOR1' target='_blank'><data:post.author/></a>
<b:else/>
<b:if cond='data:post.author == "AUTOR2"'>
<a href='LINK-DO-AUTOR2' target='_blank'><data:post.author/></a>
<b:else/>
<b:if cond='data:post.author == "AUTOR3"'>
<a href='LINK-DO-AUTOR3' target='_blank'><data:post.author/></a>
<b:else/>
<a href='LINK-DO-BLOG' target='_blank'><data:post.author/></a>
</b:if>
</b:if>
</b:if>
</span>
<b:if cond='data:post.author == "AUTOR1"'>
<a href='LINK-DO-AUTOR1' target='_blank'><data:post.author/></a>
<b:else/>
<b:if cond='data:post.author == "AUTOR2"'>
<a href='LINK-DO-AUTOR2' target='_blank'><data:post.author/></a>
<b:else/>
<b:if cond='data:post.author == "AUTOR3"'>
<a href='LINK-DO-AUTOR3' target='_blank'><data:post.author/></a>
<b:else/>
<a href='LINK-DO-BLOG' target='_blank'><data:post.author/></a>
</b:if>
</b:if>
</b:if>
</span>
Agora é só substituir.
 |
| Olha como o Marcos fica na cadeira kkkkkkkkkkk |
Publicidade abaixo da postagem
Yo, me pediram esse tutorial, de como colocar publicidade abaixo da postagem. Espero que seja útil.
Esse é o código do banner, troque com o link do seu site e a imagem do banner e edite a altura e largura:
<div><a href='LINK DO SITE'><img border='0' height='60' src='LINK DO BANNER' width='468' /></a></div>
Agora marque a opção "Expandir modelos de widgets"
pressione "ctrl + f" do teclado para abrir a pesquisa.
Cole o código do banner acima do código abaixo:
<div class='post-footer'>
Autor e data abaixo do titulo
Neste tutorial ensinarei como colocar o nome do autor e a data abaixo do titulo do post , o que torna mais fácil aos leitores saber por quem e quando o artigo foi escrito logo no início das postagens. Acompanhe!
Tutorial
Acesse o painel do blogger.
Vá em Design / Editar HTML e marque a opção Expandir modelos de widgets.
Utilizando as teclas CTRL+F procure pelo seguinte trecho:
Modelos novos do Blogger
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Ou modelos antigos:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Novamente vá em Editar HTML, clique em Expandir modelos de widgets e procure pelo trecho:
Modelos novos do Blogger:
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
Modelos antigos:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<span><data:post.dateHeader/></span></h2>
</b:if>
Selecione e apague o trecho destacado em vermelho. Salve o modelo novamente!
No ultimo passo, ainda na opção Editar HTML marque a opção Expandir modelos de widgets e procure pelo trecho:
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
Logo abaixo da seguinte linha...
<div class='post-header'>
Cole todo este código:
<!--Autor e data-->
<div style='display:inline;width:auto;color:#999;font:normal 10px Arial;'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<b:if cond='data:post.dateHeader'>-
<data:post.dateHeader/>
</b:if>
</div><p/>
<!--Fim -->
Salve o modelo e pronto!
Nome do autor abaixo do titulo
Yo, trago um tutorial bem bacana pra quem está começando agora a criar templates, e quer dar uma melhorada do blog ... enfim vamos ao tutorial de como colocar o nome do autor abaixo do titulo, espero que ajude. ^^
Vá em design >> Editar HTML >> Expandir modelos de widgets, e procure por:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Quando encontrar você deve:
1) Copiá-lo
2) Salvá-lo em um bloco de notas
3) Apagar ele do seu template.
Depois disso procure por:
<div class='post-header-line-1'/>
E cole logo abaixo desta linha o código que você copiou antes e passou para no bloco de notas, e salve as modificações, devendo ficar parecido com esse:
<div class='post-header-line-1'/>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Agora vamos aplicar os estilo CSS, ou seja aumentar, trocar a cor e posicionar o nome do autor.
Volte na edição HTML, e acrescente a linha abaixo, incluindo os estilo de acordo com seu gosto, logo ACIMA da tag ]]></b:skin>
Volte na edição HTML, e acrescente a linha abaixo, incluindo os estilo de acordo com seu gosto, logo ACIMA da tag ]]></b:skin>
.post-author
{
float:left;
margin:0px 0px 0px 0px;
font-family:calibri, arial;
font-size:xxpx;
}
.post-author- a
{
color:#xxxx; t
ext-decoration:none;
}
.post-author- a:hover
{ text-decoration:underline;
}
Bem essa parte de código logo acima deve esta complicado pra você, então vou dar uma pequena ajuda.
color:#XXXXXX >>> É a cor do nome do autor, isso varia de acordo com o seu gosto. Veja a tabela de cores.
font-size: XXpx >>> é o tamanho da letra.
margin: 0px 0px 0px 0px >>> Essa parte serve para posicionar o nome, pra direita,esquerda e top, se você quer descer ou inverter o lado, você deve colocar o sinal de menos antes do numero.
Dividir conteúdo
Coluna A - AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
Coluna B - BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
Yo, achei esse tutorial bem bacana de dividir o conteúdo da postagem em colunas, espero que gostem. ^^
Esta Dica é bem fácil e você ainda tem a liberdade de usar a divisão das postagens em colunas apenas em determinadas trechos de suas postagens.
Se quiser dividir o conteúdo de uma postagem em colunas, siga as instruções a seguir.
Basta inserir em sua postagem o código abaixo mas lembrando, cole este código apenas nas postagens que você desejar dividir o conteúdo.
<div style="float: left; width: 45%">Aqui o Texto da Coluna da Esquerda</div>
<div style="float: right; width: 45%">Aqui o Texto da Coluna da Direita</div>
<div style="clear: both"></div>
Avatar simples no blogger
Vai em Design > Editar HTML > Expandir modelos do widget
ctrl+f é procura:
<a expr:name='data:post.id'/>
Agora cole o código abaixo acima:
<a expr:name='data:post.id'/> meta esse codigo :
<b:if cond='data:post.author == "NOMEDOPERFIL"'><img alt='NOME' height='100' src='IMAGEM DO AVATAR[TAMANHO 550X100]' style='float:left;margin:8px 0px 0px 10px' width='550'/></b:if>
Em caso de dúvidas poste um comentario ou me chame no chat !
Assinar:
Postagens (Atom)
Siga-nos no Twitter:
Tweetar