Aplicando Borda Interna no CSS - I

Olá, amoras! Como vão vocês? Espero que muito bem ^^

Well, hoje eu trago um tutorial para vocês de como aplicar borda interna no seu CSS, por exemplo: se vocês observarem a minha tooltip verão que ela possui uma borda interna (pode parecer que é externa por minha tooltip ser semi-transparente -q) e é isso que vou lhes ensinar - como aplicá-la onde vocês quiserem.

A aplicação é bem simples, o código é basicamente este:

Negrito, Itálico, Sublinhado e Tachado Personalizados

Hello, amoras! Como estão? Espero que ótimas(os) u-u Bem, hoje trago à vocês um tutorial bem simples de CSS mas que, porém, é um detalhe que faz bastaaaante diferença nas suas postagens; que é a personalização do negrito, itálico, sublinhado e tachado.

Vamos iniciar o tutorial?

Tutorial - Conteúdo Escondido

Hi guys, fiquei muito tempo ausente aqui né? Me perdoem por favor, ando enfrentando muitos problemas em minha vida e estou meio desorientada. Massss não deixarei mais isso interferir aqui ^^

Enfim, estou pensando em colocar uma postadora aqui, o que acham? Ah! Mudei o layout também, gostaram? Eu particularmente gostei bastante, adorei as cores *-*

Enfim², trouxe um tutorial do Sweet Poison que eu tenho salvo aqui no meu computador. Que é quando você clica na imagem/frase e todo o conteúdo aparece.

Entre no seu HTML, tecle ctrl f ou F3 e procure por </head>

Acima dessa tag, cole o seguinte código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/2wl9p6g/G70lj5t0q/animatedcollapse.js"></script><script type="text/javascript">animatedcollapse.addDiv('jason', 'fade=1,height=80px')animatedcollapse.addDiv('kelly', 'fade=1,height=100px')animatedcollapse.addDiv('michael', 'fade=1,height=120px')animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted//$: Access to jQuery//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID//state: "block" or "none", depending on state}animatedcollapse.init()</script>

Agora, vá até o seu layout, adicione um gadget HTML/JavaScript, cole o seguinte código fazendo as devidas modificações e salve.

<a href="javascript:animatedcollapse.toggle('dog')"><img src="URL da imagem"/></a><div id="dog" style="display:none">Conteúdo escondido</div>

Colocando player na postagem do blog - MP3 Player

Bonjour mes amour² u3u

Hoje o tutorial é bem interessante, pelo menos em minha opinião, vou ensiná-los à colocar esse player que eu costumo usar em minhas postagens e que provavelmente vocês já viram por aí. Gosto muito dele porque ele é simplesmente perfeito para usar em postagens, já que, além de simples, ele é pequeno e comporta apenas uma música. Vejam uma preview dele:

 

Retirar fundo semi-transparente da sidebar do modelo Travel

Hi.

Sabe aquela sidebar semi-transparente que tem em alguns dos modelos Travel? Então, fuçando meu HTML eu descobri como retirá-la. É um tutorial meio bobo, eu sei. Porééém, eu pesquisei e não achei nenhum tutorial que ensinasse a tirar a tal semi-transparência da sidebar e.e

Enfim, resolvi ensiná-los à retirá-la e espero que esse tutorial não seja tão inútil assim -.-

Tooltip Transparente

 

Hi :3

Então, repararam no novo layout? Eu preferi manter a mesma paleta de cores porque, particularmente, amo azul e acho linda essa paleta *U* Mas.. O que vocês acharam do layout amores? Espero que tenham gostado *--*

Mas enfim, trouxe um tutorial super fofo da tooltip que eu uso aqui no blog!

A preview da tooltip é essa:

Andei sumida + Tutorial - Tumblr

Olá amores! Dei uma baita sumida daqui né? :s Pois é, eu estava sem muitas idéias para criar algo novo para vocês e também estava enfrentando alguns problemas que até acabei esquecendo desse blog :c

Mas enfim estou de volta, eu acho, e estava pensando em abrir vaga para postadores... Mas não sei ainda, vamos ver.

Como faz tempo que não trago nenhum tutorial para tumblr, hoje resolvi trazer um tutorial bem simples mas muito útil para o seu theme! Que é bloquear o ctrl U, para evitar cópias, vamos ver o tutorial?

Vá até o HTML do seu tumblr, tecle ctrl f e procure por <body>

Quando achar, apague o <body> e substitua-o pelo código abaixo:

<body oncontextmenu=”return false” onselectstart=”return false” onmousedown=”return false” onkeydown=”return false”>

É só salvar e pronto *--*

Estou de Volta + Menu Empire

me adicionem no facebook http://www.facebook.com/becca.ferreira.98 c:

Primeiramente, me perdoem por ter ficado tanto tempo longe do blog! Foi mais de um mês longe daqui e, acreditem, aconteceu muita coisa nesse intervalo!

Juro que eu mesma não sei o porquê de ter ficado todo esse tempo longe daqui, pois bem, nesse tempo pensei um pouco sobre esse blog e vi que os tutoriais estão muito comuns... Por isso, pretendo me dedicar mais ao HTML para trazer tutoriais exclusivos para vocês!

Enfim, trouxe o tutorial do menu que uso aqui no blog, que haviam me pedido o tutorial uma vez (não lembro quem), é um menu meio simples mas aí vai o tutorial:

Menu em Abas

Hi.

Trouxe um tutorial do menu em abas, só que esse tutorial é beeeem mais simples que os outros!

Esse tutorial eu achei no blog Sweet Girl, então créditos à ele ;)

Bem, vocês podem estar vizualizando o menu clicando aqui.

"Leia Mais" personalizado

Pelos comentários vi que gostaram mesmo do novo theme, fico muito feliz por isso *U*

Bem, trouxe um tutorial bem útil para quem gosta do theme personalizado nos mínimos detalhes! Vamos aprender à personalizar o link leia mais ou continue lendo como vocês quiserem, vamos ao tutorial?

Rolagem Infinita no Theme

Uffa! Faz um tempão que não passo por aqui né? -.- Sorry .-.

Bem, ontem foi meu aniversário! Happy birthday to me z/ Agora tenho oficialmente 13 anos -v-

Também mudei o theme do blog, achei que o cabeçalho ficou muito divo diga-se de passagem porém, a área dos posts e a sidebar ficaram ruins :c Mas vou tentar melhorar.. 

Como a opinião de vocês é a que vale, o que acharam do layout? sejam sinceros

Ok, como o que vós interessa é o tutorial, vamos vê-lo  logo né?

O tutorial é bem simples, é só colar o código abaixo antes de </head> e salvar!

<script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script>

Letra do Post Destacada

Hi.

Então, gostaram do novo layout? Bem, eu gostei só que sei lá, tem alguma  coisa estranha nele... Só não descobri ainda o que achei estranho talvez tudo .-.

Fiquei um pouco "decepcionada" digamos assim, com esse layout pois ele não saiu como eu esperava :\

Enfim, trouxe um tutorial bem fácil para vocês,para destacar a primeira letra do post!

Preview aqui ;)

Menu Simple

Hi. 

Hoje trago à vocês um menuzinho bem simples porém lindo pelo menos eu acho que fica legal tanto na sidebar quanto no cabeçalho!

A Preview dele é aqui :)

Tutorial:

Tecle F3 e procure por ]]></b:skin>

Acima dessa tag, cole o seguinte código:

.menusimple{

text-align: center; 

}

.menusimple a{

text-transform: uppercase!important; 

padding: 1px 1px 1px 1px; 

display: inline-block; 

 margin-top: 5px; 

font-size: 8px; 

color: #DCDCDC; 

font-family: tahoma; 

-webkit-transition: all 0.6s ease-out; 

-moz-transition: all 0.6s ease-out; 

font-weight: bold;

}

.menusimple a:hover{

color: #000000;

}

Edite as partes em negrito e salve!

Agora vá até a área de editar o layout, adicione um gadget HTML/JavaScript e cole o seguinte código fazendo as devidas alterações:

<center><div class="menusimple">

<a href="/">Home</a>

<a href="URL">Nome do Link</a>

<a href="URL">Nome do Link</a>

<a href="URL">Nome do Link</a>

</div></center>

Menu de Links Simples

Quero avisá-los que minha internet tá uma merda ruim, e por isso vai ser mais dificíl de eu postar e moderar comentários. Então, por favor não se aborreçam se eu demorar um pouquinho à responde-los ok? :s
Trouxe um menu de links simples para o tumblr. Não sei vocês mas eu prefiro assim por ficar bonito visualmente e ocupar menos espaço.

Preview:

Dentro do seu CSS cole o seguinte código:

.menu{text-align: center; text-decoration: none;}
.menu a{text-transform:uppercase!important; padding: 5px 5px 5px 5px; display: inline-block; background:#cor do fundo; margin-top: 5px; font-size: 8px; color: #cor da fonte; font-family: tahoma; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; font-weight: bold;} .menu a:hover{background: #cor do fundo quando tu passar o mouse; color: #cor da fonte;}

Agora, dentro do seu HTML (depois de <body>) cole este código e salve:

<div class="menu">
<a href="URL">Nome do link</a>
<a href="URL">Nome do link</a>
<a href="URL">Nome do link</a>
</div>

Esse menu também funciona no blogger, só que ao invés de colar a última parte antes de <body>, você cola num gadget HTML/JavaScript.

Créditos do tutorial: things-to-help-you | tumblr.com

Menu Shade

     Olá bebês :3 Hoje não estava conseguindo dormir e então passei parte da madrugada acordada. Como ainda não tinha preparado nenhum post para cá, resolvi criar algo para primeiro tutorial do blog. Enfim, criei um menu hover com o efeito shadow, espero que gostem e se usar credite !

Preview aqui