*Minha birulinha
Yo pessoal, como vão? Hoje vou ensinar como personalizar um Layout! (Sabe, botar gadget, seleção colorida, efeitos, menu... etc, tudo mais!) Querem saber como fazer tudo isso? Clique em Continue Lendo. :)
Bem, vamos começar com as tags. (Iguais aqui a do Choco).
OBS: Créditos vão para ToKawaii ♥
Antes de </body> Cole:
<script type="text/javascript" charset="utf-8" src="http://static.tumblr.com/7bcdfh6/zOfmhr0bq/jquery-1.6.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="http://static.tumblr.com/7bcdfh6/crdmhr0al/jquery.easing.1.3.js"></script> <script type="text/javascript" charset="utf-8" src="http://static.tumblr.com/7bcdfh6/9Zqmhr07y/functions.js"></script>
Agora cole depois de </head>:
<link rel="stylesheet" media="screen" href="http://static.tumblr.com/7bcdfh6/kY2mhr0cc/reset.css">
Se dêr erro linha não sei oque, não se desespere! Já estará salvo, é só você da F5.
Agora cole ANTES de ]]></b:skin>:
/* CSS SLIDING TAGS - POR TOO KAWAII - NÃO RETIRE OS CRÉDITOS-------------------------------------------------------------*/.tag { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 0 0; color: #868686; display: none; float: left; height: 25px; line-height: 1; margin: 5px; padding: 0 5px 0 8px; position: relative; text-decoration: none; font-size:10px;text-transform:uppercase; font-family: 'Trebuchet MS', Trebuchet, Sans-serif; }.tag:hover { cursor: pointer; }.tag:active { top: 1px; }.tag span { display: block; float: left; }.tag_name { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -25px; height: 19px; padding: 6px 10px 0 0; position: relative; text-shadow: 0 1px 1px #fff; z-index: 10; }.tag_name a { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -25px; height: 19px; padding: 6px 10px 0 0; position: relative; text-shadow: 0 1px 1px #fff; z-index: 10; }.tag_count { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -50px; color: #fff; height: 19px; padding: 5px 10px 0; position: absolute; right: 0; text-shadow: 1px 1px 0px#bf9a9a; top: 1px; z-index: 5; }.tag_count a { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -50px; color: #fff; height: 19px; padding: 5px 10px 0; position: absolute; right: 0; text-shadow: 1px 1px 0px#bf9a9a; top: 1px; z-index: 5; }
Para modificar a imagem Substitua as url's de "http://s20.postimage.org/b9zsk1t25/tag.png" Pela a imagem modificada, Molde:
Dica: Quer editar as cores? Vai no Photoshop e aperte Ctrl + U . ♥
Para aperecer o efeito das tags claro, cole em um HTML/Javascript (Aqueles que só aceitam códigos *-*)
<ul><li> <a href="#" class="tag"> <span class="tag_name"># tag aqui</span> <span class="tag_count">veja</span> </a> </li><li> <a href="#" class="tag"> <span class="tag_name"># tag aqui</span> <span class="tag_count">veja</span> </a> </li><li> <a href="#" class="tag"> <span class="tag_name"># tag aqui</span> <span class="tag_count">veja</span> </a> </li><li> <a href="#" class="tag"> <span class="tag_name"># tag aqui</span> <span class="tag_count">veja</span> </a> </li><a href="#" class="tag"> <span class="tag_name"># tag aqui</span> <span class="tag_count">veja</span> </a> <li> <a href="#" class="tag"> <span class="tag_name"># tag aqui</span> <span class="tag_count">veja</span> </a> </li><li> <a href="#" class="tag"> <span class="tag_name"># tag aqui</span> <span class="tag_count">veja</span> </a> </li></ul>
Bem, onde está #Tag aqui é onde você irá botar o nome da tag, Ok? ♥
Agora vamos a
Barra de rolagem personalizada
Igual aqui do C.T ok?
Vá em Designer > Editar HTML e dentro de qual quer lugar do HTML aperte Ctrl + F e procure por: ]]></b:skin>
Acima da tag encontrada cole o código abaixo:
::-webkit-scrollbar-thumb:vertical {background: #e7b3c2;height:50px;border: 2px solid #fff;
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 #bebdbd;-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(endereço da imagem) 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;}
Fácil né?
OBS: onde está de rosa é onde você botará a url da imagem ok? :)
• O Código que está em azul é a cor da barra redondinha
• O código em verde é a cor da sua barra
Vamos continuar, agora é sobre a seleção colorida ok?
Créditos VIIH'S DESIGN
Ok? ♥ Vamos lá!
Para começar vá em Modelo > Editar HTML > aperte em qual quer lugar do código e aperte Ctrl + F e pesquise por: ]]></b:skin>
Acima da tag encontrada cole o seguinte código:
::-moz-selection { background:#FFC1C1; /*Cor do fundo*/ color:#CD8162; /*Cor da fonte*/ text-shadow:#fff 0px 1px 1px; /* Cor da Sombra */ } ::selection { background:#FFC1C1;/*Cor do fundo*/ color:#CD8162; /*Cor da fonte*/ text-shadow:#fff 0px 1px 1px; /* Cor da Sombra */ }
♥ As instruções já estão explicadas no código... Se você quiser mudar, mude ok? :)
Lembrando que para mudar, tem que mudar nos dois lugares ok? c:
Bem é isso, vou pesquisar mais ai faço a parte 2 ok? ♥
Nenhum comentário:
Postar um comentário