Tutorial: Nivo Slider

Olá pessoal tudo bom com vocês ?

Recebi pedidos no grupo,para fazer o tutorial do Slide que coloquei nesse novo template do ACNK,ele realmente é lindo,e ja vi em diversos blogs.O bacana dele é que da pra editar de varias formas,sendo que ele tem 15 tipos de transição,assim,você evita de ver um igual ao seu em outros blogs.Chega de bla bla bla vamos ao que interessa...

Lembrete: Antes de iniciar o tutorial é bacana fazer uma cópia do seu template {clique aqui para saber como} ,pois se não der certo você pode reverter o processo.

Colocando imagem no rodapé do blog

Olá amores,

Hoje trouxe mais um tutorial de personalização de blog.Bom,eu ja estou terminando de criar um novo layout pro ACNK,e esse tutorial que vou passar pra vocês é super útil e bem fácil de usar.Quando eu instalar o novo layout ( oque não vai demorar muito) vocês vão ver o resultado.Ok,vamos la ?

Cabeçalho com a largura do blog

Ola amores,

Ja estão me pedindo tutoriais pelo grupo no face,e é claro estão todas convidadas a participar dele,para trocarmos idéias e para que eu possa ajudar vocês na criação dos lays.

Esse tutorial é bem longuinho,então vamos logo ao que interessa ok ? Na verdade é bem fácil pode parecer meio confuso mas,é só seguir o passo a passo e ir tentando.Lembrando que as medidas que eu usei no layout do ACNK podem não ser as mesmas do template de vocês,e qualquer duvida já sabem,podem perguntar.

Como retirar a barra transparente do Attribution

Este tutorial serve tanto para retirar o espaço que fica entre o rodapé de postagem e o rodape (total) do blog,quando retiramos a Attibution (Se quiser remover ela clique aqui),quanto para um ajuste,um probleminha que eu cito neste tutorial aqui.Sem mais delongas,bora para os códigos.

Extras tutorias para seu blog

Esse post é para blogueiros que amaaam (assim como eu rsrsrs) ficar arrumando o design do blog pra la e pra ca,afinal,as vezes é bom né ?! Pensando nisso resolvi separar pra vocês tutoriais,que eu super aprovo,sendo que muitos deles eu ja testei :)

Personalizar menu padrão do blogger

Data com efeito hover

Sidebar em forma de accordion 

Opção responder comentários 

Imagem que muda ao clicar 

Personalizar rodapé de postagens

Paleta de cores

Seta para o topo do blog

Hoje em dia virou modinha colocar uma setinha na parte inferior do blog,na verdade é bem versátil,essa setinha ao ser clicada direciona o leitor para o topo do blog.E não é nada difícil coloca-la em seu blog.Vaaamos la :)


01.Vá em 'Design' >> 'Editar HTML', clique na caixinha de 'Expandir modelos de widgets' Copie o código a seguir e cole-o antes dea tag </body> (use F3ou ctrl + F) ;

<div style='float:right;'>
<a href='#'>
<img src='URL DA IMAGEM DA SETA' style='display:scroll; position:fixed; bottom:5px; right:5px;' title='Voltar ao Topo da Página'/>
</a>
</div>

02.Para finalizar substitua o texto onde esta em negrito no código acima,pela url de uma imagem pequena,uma seta ou um mascote (use a criatividade),ou use alguma dessas abaixo.

 

Imagens retiradas da web

03.Visualize e se estiver tudo ok,salve ;

Retirar link Assinar: Postagens (Atom)

Em alguns templates do blogger,no final de cada postagem se observamos, iremos ver a mensagem "Assinar: Postagens (Atom)",maaaaas,como nada é impossível,existe um jeito naaaada complicado que nos ajuda a retira-la.

imagem retirada do blog TW

01.01.Faça login na sua conta blogger;
02.Vá até a aba "Design" > "Editar HTML" > procure a tag ]]></b:skin> 

03.Depois de encontrar,ACIMA dela copie e cole o seguinte código.

.feed-links {


height:0px;
visibility:hidden;
display:none
}

04.Visualize,e se estiver tudo ok,salve !

Estrelas caindo do cursor do blogger

Hooy coraciones,
hoje tem tutorial facil pra vocês,vamos colocar estrelas caindo do cursor do mouse.Bora já aprender !!

01.Faça login na sua conta blogger;
02.Vá até a aba design > Editar HTML > Localize a tag:  </body> (use F3 ou ctrl + f );
03.Depois de encontrar a ta, acima dela cole o seguinte código:

<script type='text/javascript'>
// <![CDATA[
var colour="#FFD700";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

04.Para alterar a cor das estrelas use a paleta de cores e altere o código da linha var colour="#FFD700";  onde no lugar de "#FFD700" coloque o código da cor que você escolheu;


05. Visualize e se estiver tudo certo, SALVE.

  

Retirando linha "Attribution" do blogger

Hooy coraciones,
O tuto de hoje é bem simples,na verdade muito usado no mundo dos blogs.Vamos aprender a tirar a "Attribution" dos templates do blogger.Muitos não recomendam tira-la, porem nunca usamos de fato os verdadeiros modelos do blogger,sempre personalizamos,o que nos da esse direito de colocar nossos nomes nos créditos finais do layout.Eu por exemplo retirei sim minha Attribution,porem eu deixei os créditos do autor do modelo em meu HTML.Agora chega de papo vamos logo ao tuto.

"Não me responsabilizo por danos ao seu template"

01.Faça o login em sua conta blogger;

02.Vá em Design > Editar HTML (não marque “Expandir modelos de widgets”);

03.Em seguida localize a linha abaixo,usando os atalhos (F3 ou Ctrl + F);

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

04.Agora você tem duas opções, ou você apaga a linha acima por inteiro ou apenas altera o código como explico abaixo.Lembre-se: se você excluir ela por completo e em seguida salvar,futuramente se quiser reverter o processo fica mais difícil,mas se você escolher por somente alterar o código ,tudo fica mais fácil se caso depois mudar de ideia.


Para aprender a alterar o código clique aqui,caso contrario continue seguindo os passos abaixo.

05.Se você escolheu por apagar a linha,continue por aqui.Clique em salvar e logo em seguida a mensagem de confirmação (como na imagem abaixo) poderá aparecer,se aparecer clique em "Excluir Widgets".

06.Pronto ! sua Attribution foi retirada com sucesso :)

Alterando linha "Attribution" do blogger

Para alterar o codigo siga os passos abaixo:

Quando encontrar a linha citada no outro tutorial procure pela palavra "True" e substitua por "False" e procure a palavra "yes" e substitua por "No" e salve seu código.

05.Vá até "Design" > "Elementos da pagina" procure pela gadget de "Attribution";

06.Abra ela e em seguida será possivel excluir ja que no processo de alteração do codigo,simplesmente debloqueamos o botão de exclusão de gadget (como na imagem abaixo) > clique em "Excluir",feito isso salve e pronto !

Retirar mensagem ‘Mostrar todas as postagens’

Quando fazemos tags ou marcadores,automaticamente quando são clicados no topo da postagem ele mostram a mensagem "Mostrar todas as postagens",para retirar essa mensagem siga os seguintes passos.

01.Entre na sua conta blogger;
02: Vá até Design > Editar HTML > Encontre a tag abaixo (use F3 ou CTRL + F);

]]></b:skin>

03.Logo a ACIMA da tag encontrada,cole o seguinte código:

.status-msg-wrap{display: none;}

04.Salve !

Retirando Navbar do blog

Nós blogueiros sabemos a importancia de um design bacana no blog,não é mesmo ? porem se observarmos,os templates padroes do Blogger,tem caracteristicas iguais,como por exemplo essa barrinha que fica no topo da pagina,o Navbar.Para quem quiser retirar basta seguir o passo a passo abaixo.

01.Faça login na sua conta blogger;
02: Vá até Design > Editar HTML e localize (usando F3 ou CTRL + F):

]]></b:skin>

03.Feito isso,copie o código a seguir,e cole ACIMA,da tag encontrada anteriormente;

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

04.Visualize se estiver tudo ok,Salve .

Mudando cor de seleção de texto

Olá coraciones,
Pra quem assim como eu adoooora personalizar o template,esse tutorial é ideal.Na verdade ele é super simples,mas que  faz a diferença,pois as seleções de texto padrões são sempre aquele azul cansativo,e enjoativo por isso saia já da mesmisse.

01.Faça login na sua conta blogger;
02.Vá até Design > Editar HTML e localize o trecho a seguir (use F3 ou CTRL+f);

]]></b:skin>

03.Feito isso,cole logo ACIMA da tag encontrada,o código a seguir;

*::-moz-selection {
background: #COR DA SELEÇÃO;
color: #Cor da Fonte;
}
*::selection {
background: #COR DA SELEÇÃO;
color: #Cor da fonte;}

04.Agora altere os textos em destaque no código com as cores que deseja use a paleta de cores se for necessário;


Lembrete: O código ainda não funciona no Internet Explore. 

Personalizando a paginação do blog

Nada melhor do que personalizar a paginação do blog,deixando-o cada vez mais lindo.Neste tutorial a paginação ira ter fundo colorido e ao colocar o mouse sobre o link dele será em degrade,logicamente que o degrade é opcional e é editável.Sem mais delongas vamos ao código.

01.Primeiramente,entre em sua conta do blog;

02.Vá na aba design > Editar HTML > ache a tag  #blog-pager { ,ela esta localizada dentro de /* Posts,e para facilitar use o atalho F3 ou Ctrl+F.

03.Feito isso,copie o código a seguir,e cole ACIMA da tag encontrada;

/*Paginação com efeito hover degradê */

#blog-pager {

clear:both;

text-align: center;

margin:0px auto;

padding:10px;

}

#blog-pager a:link, #blog-pager a:visited{

color: #COR DA FONTE; 

font-size: 16px; /* tamanho da fonte */ 

padding:5px;

background-color: #COR1; /* cor do fundo */ 

-moz-border-radius:10px; /* bordas arredondas, apague até } se não quiser */ 

-khtml-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

#blog-pager a:hover{

color: #COR2; /* cor da fonte hover,(mouse em cima)*/ 

padding:5px;

background: ; /* fundo hover, apague o código abaixo até } se não quiser degradê */ 

background: -webkit-gradient(linear, left top, left bottom, from(#COR1), to(#COR2));/* webkit browsers */

background: -moz-linear-gradient(top, #COR1, #COR2);/* firefox3.6+ */

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#COR1', EndColorStr=' #COR2');/* IE */

}

#blog-pager-newer-link {

float: left;

}

#blog-pager-older-link {

float: right;

}

04.  Agora altere as cores usando a paleta,e altere os tamanhos também como preferir,e salve;

Se der algum erro,ou tiver alguma duvida não exite em perguntar ou por comentário ou pela pagina de contato.