Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
teste do eddy
Primeiro vá no HTML do seu blog e clique em Expandir modelos de widgets
Depois da um Ctrl+f e procure por:<b:if cond='data:post.title'> Cole em cima dessa tag esse codigo a baixo:
<b:if cond='data:post.author == "Nome do Postador"'><img alt='Link do avatar' height='altura' src='link da imagem do avatar' width='largura' style="float:left;margin:0 5px 5px 0" /></b:if>
Nome do postador: vc coloca seu nome(Tem que ser o nome exato)
Link do avatar:Vc coloca o seu avatar
Para fazer uns ajustes vc procura esse codigo abaixo
style="float:left;margin:0 5px 5px 0" /></b:if>
Em left vc escolhe se quer que o avatar fique do lado esquerdo ou direito.
Caso vc tenha mais de uma pessoa na equipe basta adicionar o codigo conforme a sua necessidade.
Qualquer duvida é só comentar!!!
1° ABRE AS STYLES EM PSD NO PHOTOSHOP
2° COM O BOTÃO DIREITO DO MAUSE CLICK NA STYLE
3° DEPOIS CLICK EM COPY LAYER STYLE !
4° DEPOIS DE COPIADO VA ATE SUAS STYLES
5° NOS ESPAÇO EM BRANCO VOCÊ COLA A STYLE
6° E PRONTO SUA STYLE JA TA ESTALADA COM SOCESSO !
»»» Botão de Subir ao topo com Efeito jQuary e CSS3 Para Blogger «««
Como funciona: O funcionamento é simples. O botão ficará localizado na parte inferior do blog ao canto direito. Quando posicionamos o mouse sobre ele, o mesmo faz um efeito de transição, deixando maior e automaticamente exibe a palavra subir. Ao clica-lo ele nos leva até o topo da página com um efeito bem bacana.
Agora vamos acrescentar ao seu blog.
1º- Acesse o painel principal do seu blog e clique em "Layout" -> "Editar HTML".
2º- Aperte CTRL + F e procure por <body>
3º- Abaixo dessa tag cole o seguinte código: CÓDIGO AQUI!
4º- Pronto. Agora salve.
DOWNLOAD CÓDIGO:
Creditos a Rhay_Fither Xtreme Evolition
1º Entre no Site Click Aqui!´
2º Click em "CREATE!" Logo no Topo do Site
3º Escolha "Boneco" e "Boneca" Para Selecionar o Sexo
4º Crie Seu Avatar Com seus Gosto
5º Apos Ter Criado Click em SALVE "Salve"
6º Preencha os Dados Pedidos
7º Coloke o Email que vc quer que envie o avatar para vc
8º Entre no Hotmail Click Aqui!
9º Coloke o Email que vc colokou para enviar seu Avatar e de um Enter
10º Vai na sua Caixe de Entrada e clique em lixo.. ta la o avatar
11º So clikar no link la
Prooonto
Avatar que criei
Tutorial Exclusivo
Dae galerinha venho trazer um tutorial bem interessante
pra facilitar a vida de v6 quando da aquele certo bug nos seguidores
que tal colocarem um botão para seguir flutuante e uma boa né?
Então vou lhe ensinar como fazer isso!
basta v6 irem em Design > Elementos da página > Adicionar um Gadget> HTML/JavaScript.
E coloque o seguinte código:
Faça as alterações necessárias;
Laranjado: o ID do seu blog que e encontrado na barra de endereço.
Verde: nome do seu site quer que aparaça quando passar o mouse por cima.
* CÓDIGO
<a href="http://www.blogger.com/follow-blog.g?blogID=SEU ID" style="display:scroll;position:fixed;top:10px;left:12px;" target="_blank" title="Clique Para Seguir NOME DO SEU SITE">
<img src="http://th1010.photobucket.com/albums/af230/daianepiva/th_seguir.png" /></a>
Baixe o codigo do feed download depois va em adicionar widget, HTML/JavaScript.
Comente...
Informações:
Plataforma: Blogger
Tamanho: 1.3 KB
Formato do arquivo: .HTML/JavaScript
Procure Por #main
Troque o texto “float:left;” por “float:right;” (se a sidebar estiver Direita Para Passar Para Esquerda).
ou
troque “float:right;” por “float:left;” (se a sidebar estiver na esquerda para passar para a direita).
Agora Procure #sidebar
Troque o texto “float:left;” por “float:right;” (se a sidebar estiver Direita Para Passar Para Esquerda).
ou
troque “float:right;” por “float:left;” (se a sidebar estiver na esquerda para passar para a direita).
Marque a caixa expandir modelos de widgets e procure por: <data:post.body/>
Substitua por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>
Agora procure por ]]></b:skin> cole este código antes dela:
.rmlink {
font-size: 100%;
float: right;
margin-right: 30px;
margin-top: 10px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/
font-size: 100%;
float: right;
margin-right: 30px;
margin-top: 10px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/
Procure então por </head> e cole este código embaixo dela:
<!-- JavaScript Posts Resumidos-->
<!--
/*****************************************************
Auto-readmore link script, version 4.0 (for blogspot)
(C)2009 by Anhvo
Homepage: http://vietwebguide.com
Please dont remove this copyright or change it into your own
******************************************************/
-->
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}
function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)
for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
}
else {
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
summ = summary_img;
} else {
imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script><!-- Fim JavaScript Posts Resumidos-->
<!--
/*****************************************************
Auto-readmore link script, version 4.0 (for blogspot)
(C)2009 by Anhvo
Homepage: http://vietwebguide.com
Please dont remove this copyright or change it into your own
******************************************************/
-->
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}
function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)
for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
}
else {
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
summ = summary_img;
} else {
imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script><!-- Fim JavaScript Posts Resumidos-->
Para Trocar o leia mais por uma imagem procure por leia mais e subistitua por:
<img border='0' src=' Link da Imagem Aqui '/>
Parar aumentar o tamanho da imagem que vai aparecer procure por:
Altere os valores 150 e 120 para aumentar e diminuir a imagem
Eae pessoal Hoje Toshy trás para vocês como por Botão Subir ao TopoBOM ESTE TUTORIAL É GRANDE ENTÃO CLIQUE NO TITULO PARA VER ELE COMPLETO
Primeiramente va no painel do seu blog e click em DESIGN depois em EDITAR HTML
dae vocês dao um CTRL+F e procurem pela tag ]]></b:skin>
e colem esse codigo antes dela
/* to top */
#toTop {
width:50px; /* Largura do botão * /
background: #FF0000; /* Cor do botão*/
border:1px solid #000; /* Cor da borda */
text-align:center; /* Alinhamento do texto */
padding:5px; /* Distancia entre texto e borda */
position:fixed; /* Posição que faz com que ele corra por toda a página*/
bottom:5px;
right:5px;
cursor:pointer;
color:#eee; /* Cor da letra */
text-decoration:none;
font-weight:700; /* Tamanho da letra */
-moz-border-radius:5px; /* Definições para o angulo do botão */
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
procurem esse outra tag </body>
e cole esse codigo antes dela
<a href='#' id='toTop'>▲ Topo</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
Bom vou ensinar uma Tecnica usada por muitos é adicionar um avatar que muda as imagens de acordo com o Autor! é Muito Simples Fazer Isso!
Para Isso Vá em Design>Editar HTML EXPANDIR WINDGETS Do Seu Blog Feito Isso Vá em <*a expr:name='data:post.id'/*> a Cima dessa tag Cole O Seguinte Codigo:
<*b:if cond='data:post.author == "Seu-Nick"'*>
<*img src='http://WWW.URLDAIMAGEM.COM' alt='Avatar'/*>
<*/b:if*>
<*b:if cond='data:post.author == "Seu-Nick"'*>
<*img src='http://WWW.URLDAIMAGEM.COM' alt='Avatar'/*>
<*/b:if*>
Isso Fará Que Essa Imagem Seja Exibida Apenas Para o Autor Que Fez a Postagem ;) Simples Não????
ATENÇÃO: Coloque O Seu Nick Correspondente ao Seu No Blogger Ex:
Meu Profile Blogger: [̲̅↓̲̅w̲̅i̲̅l̲̅k̲̅є̲̅я̲̅↑̲̅]
No Codigo: [̲̅↓̲̅w̲̅i̲̅l̲̅k̲̅є̲̅я̲̅↑̲̅] (Certo)