Mostrando postagens com marcador Tutorial Blog. Mostrar todas as postagens
teste do eddy
Para retirar é bem simples, veja:
1º Procure por:
1º Procure por:
]]></b:skin>2º Antes dela Coloque o código abaixo:
.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {
display: none;
}
display: none;
}
Salve e pronto
Vamos ao Tutorial:
1º - Acesse o painel do seu Blog e clique na Guia Modelo.
2º - Depois clique no Botão Editar Modelo.
3º - Em seguida segure as teclas CTRL+F e procure por:
4º - E ACIMA dele cole o seguinte código:
1º - Acesse o painel do seu Blog e clique na Guia Modelo.
2º - Depois clique no Botão Editar Modelo.
3º - Em seguida segure as teclas CTRL+F e procure por:
</head>
4º - E ACIMA dele cole o seguinte código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
- Se você já possuir a versão 1.6.1 do Jquery no seu blog, não adicione mais este código.
- 5º - Depois clique em Salvar Modelo.
- 6º - Em seguida clique na guia Layout.
- 7º - Agora clique em Adicionar Gadget.
- 8º - Selecione o Gadget HTML/Javascript.
- 9º - Não adicione título, dentro do conteúdo do gadget cole o seguinte código:
<script type="text/javascript"> //<!-- $(document).ready(function() {$(".box-curtir-flutuante").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .box-curtir-flutuante{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5dcc0iDQAY60GIFl4PrsWTo98yyvDXRRfKWWCOG5ll5wLDqEhumXCaRxxgeUNwOVKs60rWwcIh4tphKd-WpWdBPP_y8WVC-Ng5M5R0IQhP584L18tB7F_5OyPvwRs67Cf1gMy-VmYQ1E/s1600/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .box-curtir-flutuante div{border:none;position:relative;display:block;} .box-curtir-flutuante span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .box-curtir-flutuante span a{color: #808080;text-decoration:none;} .box-curtir-flutuante span a:hover{text-decoration:underline;} </style><div class="box-curtir-flutuante" style=""><div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=URL DA SUA PÁGINA NO FACEBOOK&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>
- Lembre-se de alterar o Url da Página do Facebook. 10º - Depois clique em Salvar
<div style="background:#1eff00;color:#fff;
border: #000 5px solid;padding: 10px;border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">COLOQUE O TEXTO AQUI</div>
Alterações
Laranja = A cor que vai ser por dentro
Amarelo = A cor da bordaVerde = A cor do texto
demo
Vamos ver como instalar?
Vá para a aba "Layout", clique em "adicionar um gadget", (pode ser em qualquer lugar: sidebar, footer etc, mas não coloque título), escolha o modo HTML/javascript e cole o seguinte código:
<style type="text/css">
#topbar
{
padding: 5px 5px 5px 5px;
visibility: hidden;
border: black 1px solid;
width: 340px;
font-family: Tahoma;
position: absolute;
background-color: white
}
</style>
<script type="text/javascript">
var persistclose = 0
var startX = 5
var startY = 5
var verticalpos = "frombottom"
function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else
{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<a href="javascript:closebar();"><img border="0" style="float: right;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0JltYtnjWmqq3SLU9kfeOp2-U09bhg8OZKCPZuxgA3x9NZj43yhix1FOKPKPZN1WJnoJPDBEspeKhRli_7feryhULoHax-dq3nEGU4LtY23rVn6O5CWQytcqnsyNf9VfryDKmJHTxrP1/" rel="nofollow" title="Fechar janela" /></a>
<a target="_blank" href="url-do-seu-feed"><img border="0" vspace="4" align="left" title="Assine nosso Feed" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU-nQ_zKZ5kM95MkoeyvkRqykeSkRBw5yXfIxaQ0cuVXSwxL_lMhtGJm7x0Dxq5wuCpJFpJ0I3qc4Iz9TCRyJx1FKxFPUbpViDQrqBtdhSULJ3D6A5sudJ6tzLI-ugHQ_J7WfuWOUEZDy3/" hspace="4" width="48" /></a>
<center><font color="#000000"><b>Fique sempre atualizado! <br />Cadastre-se e receba nossas novidades em seu e-mail.</b> </font><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=nomedoseufeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' ><input name="email" style="WIDTH: 250px" /><input name="uri" type="hidden" value="nomedoseufeed" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" /></form>
</center><span style='font-size: 65%;font color: #000;text-align: right'>Widget by Creation X<a target='_blank' href='http://creation-x.blogspot.com/2012/01/feed-flutuante.html'><font color="#000000"> Instale este widget</font></a></span></div>
<div class='clear'></div>
Na parte destacada em vermelho, coloque o nome do seu Feed.
Se precisar, vá até o site FeedBurner e verifique o seu Feed, copie-o e cole- no local destacado em vermelho.
Lembrando que para este Widget funcionar é necessário que você tenha habilitado a opção "assinatura de feed por email".
E antes que eu me esqueça: Não retire os créditos! E não publique este widget como se fosse seu!
Não esqueça que antes de disponibilizar algo, existe alguém que "ralou" bastante, testando e editando código para ser publicado e disponibilizado para uso, portanto, os créditos devem ser mantidos, ok?
Nessa video-aula vou ensinar a vocês a deixar uma postagem fixa no topo de todas postagens
espero que gostem
espero que gostem
::-webkit-scrollbar {
width: 9px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #dcdcdc;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: #FF8C00;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: #FF8C00;
}
.post p {
margin:0 0 0;
}
Modigicações
Vermelho = A cor do fundo da scroll
Verde = a cor da scroll vertical
Azul = a cor da scroll horizontal
width: 9px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #dcdcdc;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: #FF8C00;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: #FF8C00;
}
.post p {
margin:0 0 0;
}
Modigicações
Vermelho = A cor do fundo da scroll
Verde = a cor da scroll vertical
Azul = a cor da scroll horizontal
Se quer integrar uma mensagem de boas-vindas no seu blog ou dar um aviso aos seus leitores, como o que se vê no exemplo acima faça o seguinte:
1. Entre no Blogger. Dirija-se à aba Design e de seguida à sub-aba Editar HTML.
2. Procure pela tag abaixo:
</body>
3.e coloque esse codigo:
<script language='JavaScript'>
alert("TEXTO_AQUI");</script>
Para muitos esta mensagem é incomodativa, portanto recomendo que só a utilize quando é realmente necessária.
Lembrando que "BODY" é o "corpo do blog".No plano de fundo (background) do blog é possível alterarmos a cor ou colocarmos uma imagem, e para isso você deverá alterar o elemento "body".
Para alterar o seu plano de fundo, procure a tag 'body' no código HTML do Template.
Vá em "design" >> "editar html" e procure pela tag "body" (use ctrl+f se preferir):
body {
background:#000000 ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}Alterar a cor do plano de fundo
Se você quiser alterar somente a cor, troque o código hexadecimal da cor pela cor que você deseja (no exemplo acima a Cor é preta -> código hexadecimal #000000).
Veja tabela de cores.
Se quiser você também poderá aplicar um efeito gradiente ao plano de fundo(background).
Incluindo uma imagem como plano de fundo
Se quiser colocar uma imagem como plano de fundo, acrescente a URL da imagem como no exemplo abaixo:
background:#000000 url(url da imagem) repeat;Você pode estipular o comportamento da imagem do background da maneira que você achar melhor.
Estipulando o comportamento da imagem no background
Você pode optar para que a sua imagem escolhida para o fundo do template, seja fixa no topo do template, ou que ela se repita, ou que ela não se repita e fique fixa á direita, á esquerda, no topo, ou no bottom.
Se você incluiu uma imagem como plano de fundo do template é sempre bom que você informe como esta imagem deverá se apresentar, se ela deve repetir-se ou não.
Veja as maneiras que você pode estipular o comportamento da imagem:
repeat; - se você quiser que a imagem se repita
repeat-y; - a imagem repete na vertical
repeat-x; - a imagem repete na horizontal
no-repeat; - se você não quer que a imagem se repita
top; - Imagem somente no topo
bottom; - imagem somente abaixo
right; - imagem a direita
left; - imagem a esquerda
Se você estipular que a imagem não deve se repetir é necessário informar em que posição ela deverá aparecer.
Exemplo:
background: #000 url(url da imagem) no-repeat top left; -> neste exemplo a imagem não se repete e se apresenta no topo à esquerda.
Para que a imagem fique fixa na tela:
background-attachment: fixed;
Para que a imagem role com a tela:
background-attachment: scroll;
Outra possibilidade é combinar uma cor com imagem, neste caso, se a imagem for menor que a tela do usuário, onde não tiver imagem aparecerá a cor escolhida.
Exemplo:
background: #000000 url(http://url-da-imagem/) no-repeat bottom left; ->Fundo preto e imagem não repete e se apresenta somente abaixo e à esquerda.
O navegador Internet Explorer as vezes não consegue interpretar alguns códigos para imagens usados no blogspot.
Mas existe um truque que dá para corrigimos isso.
Se a sua imagem de fundo não apareceu no IE(ca), basta acrescentar um espaçamento duplo entre cada código.
Por exemplo:
background:++#000000++url(http://endereço-da-imagem)++no-repeat++bottom++left;
No exemplo acima o símbolo + representa o espaçamento. Utilizei este simbolo apenas como forma de demonstração, não é para você incluir simbolo + no seu código ok? é apenas para substituir o + por "espaço".
1. Vá até “Layout” e abra a aba “Editar HTML” e marque “Expandir modelos de widgets”.
2. procure pela seguinte linha: ]]></b:skin>
3. Logo Acima dessa linha cole o seguinte código:
#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
4. O destaque em vermelho é a posição com relação à tela, que pode ser: “left”, “right”, “top”, “buttom”.
5. Agora encontre a linha “<body>” e cole abaixo dela:
<div id="float_corner">
Oque quer que flutue
</div>
Entre essas duas linhas de código, coloque o q vc quiser q flutue na tela. Pode ser uma imagem, um menu, um link ou até publicidades – como já dissemos antes. Cabe a sua criatividade.
6. Salve e veja o resultado.
Faça vários teste e veja como fica.
2. procure pela seguinte linha: ]]></b:skin>
3. Logo Acima dessa linha cole o seguinte código:
#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
4. O destaque em vermelho é a posição com relação à tela, que pode ser: “left”, “right”, “top”, “buttom”.
5. Agora encontre a linha “<body>” e cole abaixo dela:
<div id="float_corner">
Oque quer que flutue
</div>
Entre essas duas linhas de código, coloque o q vc quiser q flutue na tela. Pode ser uma imagem, um menu, um link ou até publicidades – como já dissemos antes. Cabe a sua criatividade.
6. Salve e veja o resultado.
Faça vários teste e veja como fica.
- Edite a imagem que deseja utilizar. Deixe-a nas proporções adequadas e a hospede, por exemplo, no imgur;
- Abra o painel do Blogger e clique em Layout — HTML;
- Marque a opção Expandir modelos de widgets;
- Procure a linha <b:if cond='data:post.title'>;
- Acima dela, digite, após substituir as partes em negrito pelos valores correspondentes a sua figura:
<b:if cond='data:post.author == "seu nome no blog"'><img alt='seu nome no blog' height='124' src='sua imagem aqui' style='float:left;margin:0px 0px 0px 0px' width='124'/></b:if>
adicione suas informações no código e para regular no post mude
o valor do margin q está verde e para descer e subir e mude o valor
margin q está em roxo para ir para direita ou esquerda.
o de vermelho e o lado que vc qr left=esquerda right=direita
o de vermelho e o lado que vc qr left=esquerda right=direita
