Oi lindonas , tudo ótimo ? Eu estou muito bem ( ninguém pergunto sua enxerida ) bom lindinhas hoje venho trazendo a parte 4 de como fazer seu próprio template , bom esta bem fácil é só prestar bastante atenção ok ?? Bom lindas , recomendo que antes tudo faça uma copia do seu template atual para que se ocorre algum erro , você já tem o seu template salvo e não precisa fazer tudo outra vez , para isso vá em modelo> Fazer Backup/restaurar > Fazer Download do modelo completo e prontinho ! Hoje vamos aprender ;
-Personaliza o leia mais
-Botão topo no blog
-Seleção de texto colorida
-Barra de rolagem colorida
-Caixa de pesquisa personalizada
Personalizando o leia mais das postagens!
O leia mais , é algo muito importante em todo blog , tem muitas que não gostam pois a pessoa tem que espera carregar outra vez a página , mais todos deveriam gostar , pois além de deixar a página inicial do blog mais rápida , ainda ajuda o leitor a comentar no seu post , por que ele vai diretamente para a página da postagem , então vamos la ;
Vá no seu HTML marque a opção expandir modelo de windgets > f3 e procure por ;
<data:post.jumpText/>
Assim que achar , apague e no lugar cole esse ;
<p align='right'><a expr:href='data:post.url'><img src='LINK DA IMAGEM'/></a></p>
Em link da imagem você coloca o link da sua imagem do leia mais , é só clicar com o botão direito do mouse em cima da imagem e copiar o URL da imagem , e no cole no lugar de link da imagem ! tenho algumas para vocês ;
Como colocar botão topo no blog !
É muito fácil e rápido e ajuda muito o leitor !
Editar HTML > Expandir Modelos De Widgets > f3 e procure por ;
</body>
Cole o código abaixo antes da tag procurada
<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>
Copie o URL da imagem e cole em URL DA IMAGEM DA SETA , visualize e salve !
Imagens para voltar ao topo ;
Seleção de testo colorida !
Normalmente é aquele azul , ou ate mesmo , da cor do tema do seu Windows , mais ela colorida fica muito mais bonitinha , então bora la ?
Editar HTML > f3 e procure por ;
]]></b:skin>
E acima da tag procurada cole ;
*::-moz-selection {background:#B22222;
color:#ffffff;
}
*::selection {
background:#B22222;
color:#ffffff;
}
Em rosa é a cor da seleção . E em azul é a cor da letra ..
OBS¹; As mesmas cores que você coloco no primeiro código , coloque no segundo também para da certo
OBS² ; Não funciona no Explorer
Barra de rolagem colorida !
Barra de rolagem é a barrinha do lado da sua página que sobe e desce ( nãooo , jura? ) só que ao em vez de quadrada , cinza e feia , ela vai ser redonda , colorida e linda , vamos la ?
Imagem do jackie dream
Editar HTML > f3 e procure por ;
]]></b:skin>
Antes do código procurado cole ;
::-webkit-scrollbar-thumb:vertical {background: #FF69B4;
height:50px;
border: 2px solid #FFFFFF;
box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #beFbdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: url(URL DO BACKGROUND FIXO) repeat;
box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}
}
Você só vai modificar as partes destacadas de rosa , Background e URL do background fixo , usando essa tabela aqui , e você pode adicionar a imagem que quiser em URL do background Fixo ! Salve
Caixa de pesquisa personalizada !
E agora vamos para a ultima parte , onde com certeza vai ajudar muito mais seu leitor , a procura as coisas em seu blog
Editar HTML > f3 e procure por ;
]]></b:skin>
Acima da tag cole o seguinte código ;
.search{
float: left;
font-family: arial !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*largura da caixa*/
text-align:center;
color:#000000; /* cor da fonte da caixa*/
background:#dcdcdc!important; /* cor de fundo da caixa */
box-shadow: inset 1px 1px 6px #dcdcdc; /* sombra interna*/
font: 11px arial !important; /*fonte do texto*/
border: 2px solid #000000; /* borda */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.searchbut{
background: url('URL DO BOTÃO');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}
Modifique tudo que esta destacado de rosa
Alguns botões para vocês colocarem em URL do botão !
Agora vá em Layout > Adicionar um novo Gadget > HTML/javascript e cole o seguinte código;
<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form>
Agora você já tem mais o menos isso ou melhor que isso ;
Prontinho a parte final sai amanhã , e uma dica , saiba misturar as cores , não tenha medo solte sua imaginação coloque seu coração na hora de organiza seu blog , assim você terá um resultado ótimo , nem que demore dias , mais vai valer a pena ! beijinhos ♥
Bem legal os tutoriais , mais eu n dei conta de fazer o do Menu :/ mais continuar tentando !!!Bjos até mais linda...
ResponderExcluiré ele é meio que difícil tem que prestar bastante atenção :/ qualquer coisa entra em contato que eu te ajudo beijos ♥
ExcluirOooi linda!Obrigada por visitar meu blog,e seguir!Eu tbm ameeei seu blog!Super lindo e interessante!Já estou seguindo-a!
ResponderExcluirmeninasmaniateen.blogspot.com.br
Obrigada fofa beijinhos ♥
ExcluirOii que blog divino. Ameeei o post, estava atrás de uns tutoriais desses pra pôr em meu blog!!!!!
ResponderExcluirHanny, vc é uma fofa, gostei muito de vc tá,?E espero mais vezes a visitinha lá no meu blog
Bjks da mandy♥
http://blogmandy3.blogspot.com.br/
Facebook : Amanda.matos60@hotmail.com
@Matosamanda4
Ooi lindona , Oooun você que é uma fofura lindinha , com certeza sempre vou estar , aiim que bom que gostou , espero que use mesmo , e espero que minha ajuda sirva , se precisar é só chamar beijãão ! ♥
ExcluirQue ótimos seus tutos! Muito úteis ^^
ResponderExcluirachei super ultra mega fofo seu blog, de verdade, tô seguindo linda!
Bjs
srtaindependencia.blogspot.com
Obrigada fofinha , que bom que gostou , espero que use beijinhos ♥ obrigada por seguir
ResponderExcluirAcho super útil esses "bigs tutoriais", ajuda bastante gente. A posto que o resultado ficará lindo. c:
ResponderExcluirHaha :) Eu também acho muito útil , a tomara que sim *-* haha beijinhos
ExcluirMuito útil o tutorial para quem ainda esta começando, beijos!
ResponderExcluirCom certeza haha >.<
Excluir