20 de dez de 2012

Como fazer seu próprio template parte ||||

             
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 ♥










12 comentários:

  1. Bem legal os tutoriais , mais eu n dei conta de fazer o do Menu :/ mais continuar tentando !!!Bjos até mais linda...

    ResponderExcluir
    Respostas
    1. é ele é meio que difícil tem que prestar bastante atenção :/ qualquer coisa entra em contato que eu te ajudo beijos ♥

      Excluir
  2. Oooi linda!Obrigada por visitar meu blog,e seguir!Eu tbm ameeei seu blog!Super lindo e interessante!Já estou seguindo-a!

    meninasmaniateen.blogspot.com.br

    ResponderExcluir
  3. Oii que blog divino. Ameeei o post, estava atrás de uns tutoriais desses pra pôr em meu blog!!!!!
    Hanny, 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

    ResponderExcluir
    Respostas
    1. 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 ! ♥

      Excluir
  4. Que ótimos seus tutos! Muito úteis ^^
    achei super ultra mega fofo seu blog, de verdade, tô seguindo linda!


    Bjs
    srtaindependencia.blogspot.com

    ResponderExcluir
  5. Obrigada fofinha , que bom que gostou , espero que use beijinhos ♥ obrigada por seguir

    ResponderExcluir
  6. Acho super útil esses "bigs tutoriais", ajuda bastante gente. A posto que o resultado ficará lindo. c:

    ResponderExcluir
    Respostas
    1. Haha :) Eu também acho muito útil , a tomara que sim *-* haha beijinhos

      Excluir
  7. Muito útil o tutorial para quem ainda esta começando, beijos!

    ResponderExcluir