tag:blogger.com,1999:blog-5531709328063402502024-03-05T07:09:45.633-08:00Empire CSS luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.comBlogger36125tag:blogger.com,1999:blog-553170932806340250.post-57117099290285868122017-12-29T08:57:00.000-08:002017-12-29T08:57:59.592-08:00Tooltip Simple<div style="text-align: center;">
<img alt="Imagem de christmas and grinch" src="https://data.whicdn.com/images/273373390/large.jpg" width="430" /></div>
<div style="text-align: center;">
Hello, guys! Já faz mais de um ano que não apareço por aqui, né?! Me perdoem essa ausência toda, minha vida anda uma loucura desde que eu entrei no ensino médio ç.ç e, bem, eu já saí né auhuah agora estou mais tranquila <strike>não sei por quanto tempo</strike> pois já acabei a escola e já passou a temporada de vestibulares</div>
<div style="text-align: center;">
<i> ~agora sou mais uma na fila do desemprego \o/~</i></div>
<div style="text-align: center;">
Mas enfimmmmm, voltei trazendo o código para aplicar essa tooltip que eu uso aqui no blog <i>que inclusive não dá para visualizar direito por causa do background do meu blog grr</i></div>
<div style="text-align: center;">
<br />
<a name='more'></a><br /></div>
<div style="text-align: center;">
Eu criei essa em cima da <a href="http://empirecss.blogspot.com.br/2013/04/tooltip-transparente.html" target="_blank">tooltip transparente</a> que eu postei anteriormente, então o código é bem parecido.</div>
<br />
<img src="https://i122.photobucket.com/albums/o260/mhilka/iconesagenda/Seta.gif" /> Para aplicá-la basta abrir o <b>HTML</b> do seu blog<br />
<img src="https://i122.photobucket.com/albums/o260/mhilka/iconesagenda/Seta.gif" /> Teclar <i>CTRL + F</i> e procurar por <span style="font-family: inherit;"><b>]]></b:skin></b></span><br />
<img src="https://i122.photobucket.com/albums/o260/mhilka/iconesagenda/Seta.gif" /> E logo <u>acima</u> dessa tag colar o seguinte código:<br />
<blockquote class="tr_bq">
div#qTip {<br /> padding: 6px;<br /> display: none;<br /> background-color: #fff rgba(0,0,0,0.5);<br /> outline-offset: -3px;<br /> outline: 1px solid #fff;<br /> color: #FFFFFF; /* Cor do texto */<br /> font-family: Century Gothic; /* Fonte */<br /> font-size: 8px;<br /> text-align: left; /* Alinhamento do texto */<br /> position: absolute;<br /> z-index: 1000;<br />}</blockquote>
<div style="text-align: center;">
Vocês podem alterar a cor se quiserem também! Espero que tenham gostado e qualquer dúvida ou sugestão é só deixar nos comentários <img src="https://i11.photobucket.com/albums/a168/evelynregly/minigifs/hearticon.gif" /></div>
<br />
<div style="text-align: right;">
XOXO <img src="https://i11.photobucket.com/albums/a168/evelynregly/minigifs/coracao_roxo.gif" /></div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com0tag:blogger.com,1999:blog-553170932806340250.post-17560872291345721722016-07-05T14:11:00.000-07:002016-07-05T14:12:37.646-07:00PNG's e backgrounds minimalist<div style="text-align: center;">
<img alt="Imagem de lana del rey, blue jeans, and homer" src="https://data.whicdn.com/images/186195558/large.jpg" width="430" /></div>
<div style="text-align: center;">
Hello, amoras! Como vocês estão? Espero que bem! Bom, eu dei uma sumidinha aqui do Empire CSS né? Me perdoem essa pequena ausência :( Estava pensando em alguns super tutoriais pra cá, em breve os trarei para vocês!</div>
<div style="text-align: center;">
E, de qualquer forma, eu tenho andado mais presente no meu outro blog o <a href="http://b-rainflower.blogspot.com/">Brain Flower</a> <strike>dêem uma olhadinha depois hihi :3</strike> Pois eu me sinto muuuuuito à vontade lá.</div>
<div style="text-align: center;">
Mas enfim, eu trouxe para vocês alguns <u>PNG's</u> e <u>backgrounds</u> no estilo dos que eu uso no <i>BF</i> e no <i>tumblr</i>;</div>
<div style="text-align: center;">
Em breve trarei mais, esses são apenas os que já tenho salvo no meu computador!</div>
<blockquote class="tr_bq">
<b>P.S.: </b>Caso queiram algum tutorial ou material específico, pode pedir nos comentários que no dia seguinte já posto <b><3</b></blockquote>
<br />
<a name='more'></a><br /><br />
<div style="text-align: center;">
<b><span style="font-size: large;">(clique para ver em tamanho real) </span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVX3gVrzgnaJpf625osmFbBrCShkhFohPyeLadJk6Nw2Gvno3NBBjRrkO4juBJ7TYMPAfpTHhQhTFPmgS0PTrHfeHmfoRWxm7pdgcRBkQQlTLKCLCttKUSTHxqLyQSPIkUwLZ-2otmJxo/s1600/4db8cb09a50e28bb04b7b24d1e3276c1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" width="490"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVX3gVrzgnaJpf625osmFbBrCShkhFohPyeLadJk6Nw2Gvno3NBBjRrkO4juBJ7TYMPAfpTHhQhTFPmgS0PTrHfeHmfoRWxm7pdgcRBkQQlTLKCLCttKUSTHxqLyQSPIkUwLZ-2otmJxo/s200/4db8cb09a50e28bb04b7b24d1e3276c1.jpg" width="100" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqDg1jvc7YjjLiaBImkS5C0_N3X45lxfm6s-H8ytH4X7UMgKjTAKafj0ohPBbTQk8PKhH6lVR5221Cp1JHQKGa2HeFvvml20k9gCIBueREu8kqfHfTHZDWwpMwxDCNj3mpfuNxh3HP8K8/s1600/base_tt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqDg1jvc7YjjLiaBImkS5C0_N3X45lxfm6s-H8ytH4X7UMgKjTAKafj0ohPBbTQk8PKhH6lVR5221Cp1JHQKGa2HeFvvml20k9gCIBueREu8kqfHfTHZDWwpMwxDCNj3mpfuNxh3HP8K8/s200/base_tt.png" width="100" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXUT24eAWHFB-61NPlzGLF066XA7xLk8MRlkTkUZsnruJJe38bGqK-fDi4WPkDsBwVP5RH4TmvfrkZCEVHzSnI88mbEhmFl-8o4ydiCp1NyEzjf8dadGWJlcGLElJpjyMwj2bNBpR9l9E/s1600/do_you_want_to_be_the_pizza_king__by_kol98-d63sduo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXUT24eAWHFB-61NPlzGLF066XA7xLk8MRlkTkUZsnruJJe38bGqK-fDi4WPkDsBwVP5RH4TmvfrkZCEVHzSnI88mbEhmFl-8o4ydiCp1NyEzjf8dadGWJlcGLElJpjyMwj2bNBpR9l9E/s200/do_you_want_to_be_the_pizza_king__by_kol98-d63sduo.png" width="100" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Z1ZZESaGqqW0pebWyBOrbhVEBCRpac1EjN3dJ8VCc-0OfFSEzijnpS9R-FYy3uWFyuUVctxrHn_3_ttA-OEiqg_X6Vn-BwxrxJ3sOJL9EK_WOzMMOScFgSpAauTwUzK0m3YRXpzDREg/s1600/tumblr_mlp4z2p8If1r6avhdo1_r2_500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Z1ZZESaGqqW0pebWyBOrbhVEBCRpac1EjN3dJ8VCc-0OfFSEzijnpS9R-FYy3uWFyuUVctxrHn_3_ttA-OEiqg_X6Vn-BwxrxJ3sOJL9EK_WOzMMOScFgSpAauTwUzK0m3YRXpzDREg/s200/tumblr_mlp4z2p8If1r6avhdo1_r2_500.png" width="100" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwaZovXBbcMG1FC0-A6bgxu2J-Zkw632ON5slhyRNd0xfp3VHKN36aYAVQ325gl_3c4GqH1N9TqA1eqcxHnKv_G8Sa5Z3TNIGPRbzp5xk06Mkl_MYXI1fhAsnr45N4qgPt1_ZbBBMKRxQ/s1600/tumblr_mp8d7wxQLu1s6gwljo1_500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwaZovXBbcMG1FC0-A6bgxu2J-Zkw632ON5slhyRNd0xfp3VHKN36aYAVQ325gl_3c4GqH1N9TqA1eqcxHnKv_G8Sa5Z3TNIGPRbzp5xk06Mkl_MYXI1fhAsnr45N4qgPt1_ZbBBMKRxQ/s200/tumblr_mp8d7wxQLu1s6gwljo1_500.png" width="100" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BFhvXSPt-mz6f6epxcsUsfxkM_Ml7jss47xI30RLVvo7J3gDAQbP1tpoOI_AH3zQRy5qSrbEqSVJEJE3K6jSvqPZ7BBbTs8C2dSZKLyCc0FLyFmxlW1FCrMgeco9Bhu3sqNuFgsq4-I/s1600/tumblr_mz1k9v6JWM1sqtm8yo1_500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BFhvXSPt-mz6f6epxcsUsfxkM_Ml7jss47xI30RLVvo7J3gDAQbP1tpoOI_AH3zQRy5qSrbEqSVJEJE3K6jSvqPZ7BBbTs8C2dSZKLyCc0FLyFmxlW1FCrMgeco9Bhu3sqNuFgsq4-I/s200/tumblr_mz1k9v6JWM1sqtm8yo1_500.png" width="100" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW8xKmJPT-Fxm1O_jWUGQ5BkZ98YJPGb-pPC7u2yvrkjL5WGXosFxxIwoFySReod35Vir1h1iboTCzM5viZnEXWHC76-lhLPru-2MMqE157Dj_ilBLl42_02M6R7vspn2XZ0GBx97PxwU/s1600/tumblr_o6ge1vACuJ1tkab56o1_400.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW8xKmJPT-Fxm1O_jWUGQ5BkZ98YJPGb-pPC7u2yvrkjL5WGXosFxxIwoFySReod35Vir1h1iboTCzM5viZnEXWHC76-lhLPru-2MMqE157Dj_ilBLl42_02M6R7vspn2XZ0GBx97PxwU/s200/tumblr_o6ge1vACuJ1tkab56o1_400.png" width="100" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG78GYQlhajq54d_OByUrsJXAHnHbIc4Md8NRMcuZjtars-CzbsS3yepzVMt-0izXDoN3IF_0b8L8Ir-jPIu_KGlDC5vPSOmWsqddH0TvcgBYIOhoFR-0YQa-PcBGJgukCh0QUgi6Muyw/s1600/tumblr_static_cmyylfb2wpsg0sckkow8gg8ow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG78GYQlhajq54d_OByUrsJXAHnHbIc4Md8NRMcuZjtars-CzbsS3yepzVMt-0izXDoN3IF_0b8L8Ir-jPIu_KGlDC5vPSOmWsqddH0TvcgBYIOhoFR-0YQa-PcBGJgukCh0QUgi6Muyw/s200/tumblr_static_cmyylfb2wpsg0sckkow8gg8ow.png" width="100" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8AgtfvMJgoSqHqKJ1hG1yQrdHO_OEU8CikCO9Vnm6yx7ukWtUjWwd9iY8NE_k-Ac6Q34c92Uib5Gx_tkW7VLAFd5JoNvIOOcP0bhWK9kZRdpYWW_DL9RawSWL-wuBz5WQaU_kVWuY7Hw/s1600/background-backgrounds-pattern-tumblr-background-wood-Favim.com-260514_large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8AgtfvMJgoSqHqKJ1hG1yQrdHO_OEU8CikCO9Vnm6yx7ukWtUjWwd9iY8NE_k-Ac6Q34c92Uib5Gx_tkW7VLAFd5JoNvIOOcP0bhWK9kZRdpYWW_DL9RawSWL-wuBz5WQaU_kVWuY7Hw/s200/background-backgrounds-pattern-tumblr-background-wood-Favim.com-260514_large.jpg" width="150" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhENYvKaEBBnjyP_yoJoE5zKKC_b7gDydymSW_Gt-lYzzJyUWN2lDbsxd5WFRN7CG1x6n8i9kr4Jhjxt0OpSBAfMikeWUHsRrHXLB1YbpKs79SOQsTheng2r_tIhyU-ByvbgzBjfJyodHY/s1600/background-listas-cinza-e-branco2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhENYvKaEBBnjyP_yoJoE5zKKC_b7gDydymSW_Gt-lYzzJyUWN2lDbsxd5WFRN7CG1x6n8i9kr4Jhjxt0OpSBAfMikeWUHsRrHXLB1YbpKs79SOQsTheng2r_tIhyU-ByvbgzBjfJyodHY/s200/background-listas-cinza-e-branco2.jpg" width="150" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtPZkB2fji0WAxk0nw_i8VLxuQDBnnHwTjRW9YbPygdA80hEMN2yuI__wWVbCag9u1HpMZbKRCPaaC1lHMwl8PxiuZt36xJWLvbgoZs9CCi2hL6CPw5oWulm4TawHX3CnO7J38HnUo2tc/s1600/hex_41619_lg.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtPZkB2fji0WAxk0nw_i8VLxuQDBnnHwTjRW9YbPygdA80hEMN2yuI__wWVbCag9u1HpMZbKRCPaaC1lHMwl8PxiuZt36xJWLvbgoZs9CCi2hL6CPw5oWulm4TawHX3CnO7J38HnUo2tc/s200/hex_41619_lg.gif" width="140" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqbX2SJ623NCJCxDnkgLXwoIhBoZcABrtuQ5-KjJk9X3TX3HdGSU_EdSXJbcw9Bfao0x4BSIOb3wEYA6fzHC4VBVQboOx2thGrC_65wH99q4gbwx7WGPhjMGpY4JR-hZ4f8D3GrZ0a6LY/s1600/minimal-background-pattern-wordpress-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqbX2SJ623NCJCxDnkgLXwoIhBoZcABrtuQ5-KjJk9X3TX3HdGSU_EdSXJbcw9Bfao0x4BSIOb3wEYA6fzHC4VBVQboOx2thGrC_65wH99q4gbwx7WGPhjMGpY4JR-hZ4f8D3GrZ0a6LY/s200/minimal-background-pattern-wordpress-2.jpg" width="150" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaGoE3exbPCi2FRaDH1MlgqZJEMhiEo44Bmkmr87QXsuSxOqpvnvwmrFesBgkyj2gQgftM_XnvrMZQmvy6QaXBlKMMYz8oggrZnbFnJN92lkwi11W_j3W-NBajCDQsnOebteHUe3BIIy4/s1600/pattern-dots-square-grid-01_xxl.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaGoE3exbPCi2FRaDH1MlgqZJEMhiEo44Bmkmr87QXsuSxOqpvnvwmrFesBgkyj2gQgftM_XnvrMZQmvy6QaXBlKMMYz8oggrZnbFnJN92lkwi11W_j3W-NBajCDQsnOebteHUe3BIIy4/s1600/pattern-dots-square-grid-01_xxl.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_YbrORTeKwV8I8u_fQfR5fYrgel2BfdmKq34g9KuFuuYYolAcI2tuDM671ovkabH6XlrXHMj1yhufkJYxkKN1URPWraLlmsEb3jWmmdK3u0dKCosgRuF_qBnHnZFeCrL1-qlrZ3kSho/s1600/pontinhos.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_YbrORTeKwV8I8u_fQfR5fYrgel2BfdmKq34g9KuFuuYYolAcI2tuDM671ovkabH6XlrXHMj1yhufkJYxkKN1URPWraLlmsEb3jWmmdK3u0dKCosgRuF_qBnHnZFeCrL1-qlrZ3kSho/s200/pontinhos.png" width="150" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoVp5XD1QiLDBr2GbINSDJB4t0AYnZoPHUPm-o0x0fWBZXQ6om5mptKBNxZwOYfZ1iILSdT43ZCnkY6COeOGaAUQ9UWulJUMESPMyiDR9g9s4-TI8FTZ55GClm4aeEHfeX0U83jbj1mvo/s1600/Simple-Horizontal-Seamless-Pattern-For-Website-Background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoVp5XD1QiLDBr2GbINSDJB4t0AYnZoPHUPm-o0x0fWBZXQ6om5mptKBNxZwOYfZ1iILSdT43ZCnkY6COeOGaAUQ9UWulJUMESPMyiDR9g9s4-TI8FTZ55GClm4aeEHfeX0U83jbj1mvo/s200/Simple-Horizontal-Seamless-Pattern-For-Website-Background.jpg" width="150" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq1g5JPoomaevo_ePST1tz6LWKkmuqHGJQaDDEJJAkV2iM8OPgWMm661nTKumg-61veaCbVOTYG4Xlp1grhbN1RkqWN8yPGef4XA3SXkes3pAJJGblpP2ITMQc7USAvGkucDps31Wgw0Q/s1600/tumblr_mex6puJpuZ1rbvno1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq1g5JPoomaevo_ePST1tz6LWKkmuqHGJQaDDEJJAkV2iM8OPgWMm661nTKumg-61veaCbVOTYG4Xlp1grhbN1RkqWN8yPGef4XA3SXkes3pAJJGblpP2ITMQc7USAvGkucDps31Wgw0Q/s200/tumblr_mex6puJpuZ1rbvno1.png" width="150" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOzFwdt16I8b_gt7xXO0SDe8N8eWsUDjlxJrdvp4NAN00Dzc1DSMH3GfX1ieVhn7iUh-ZnXVi3a6yFZvQTBBA8ujtH7wPKDT3BQPyuOUZV3MdteSZ3A7m_JIphiLBLTKHqFloxhOpQD0/s1600/tumblr_static_tumblr_static_dm0oc1iqtlskw8g44c8cwks0g_640.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOzFwdt16I8b_gt7xXO0SDe8N8eWsUDjlxJrdvp4NAN00Dzc1DSMH3GfX1ieVhn7iUh-ZnXVi3a6yFZvQTBBA8ujtH7wPKDT3BQPyuOUZV3MdteSZ3A7m_JIphiLBLTKHqFloxhOpQD0/s200/tumblr_static_tumblr_static_dm0oc1iqtlskw8g44c8cwks0g_640.png" width="150" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com6tag:blogger.com,1999:blog-553170932806340250.post-53190929377231831682016-06-18T06:24:00.000-07:002016-06-19T14:45:32.953-07:00Aplicando Borda Interna no CSS - I<div style="text-align: center;">
<img alt="Imagem de paramore, hayley williams, and ramones" src="https://data.whicdn.com/images/44239626/large.jpg" width="430px" /></div>
<div style="text-align: center;">
Olá, amoras! Como vão vocês? Espero que muito bem ^^</div>
<div style="text-align: center;">
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 <strike>(pode parecer que é externa por minha tooltip ser semi-transparente -q)</strike> e é isso que vou lhes ensinar - como aplicá-la onde vocês quiserem.</div>
<div style="text-align: center;">
A aplicação é bem simples, o código é basicamente este:<br />
<br />
<a name='more'></a><br /></div>
<div style="text-align: center;">
<blockquote class="tr_bq" style="text-align: left;">
outline-offset: <b>-3px</b>;<br />
outline: <b>1px solid #fff</b>;</blockquote>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Agora, vamos entendê-lo:</div>
<div style="text-align: center;">
Na primeira linha do código <i>(outline-offset) </i>é que é definida a distância da margem externa até a borda; quanto maior o valor, maior a distância. Logo, se desejar que a borda fique bem distante da margem, deve aumentar o valor, se deseja mais próxima, deve diminuir.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
A segunda linha do código <i>(outline)</i> é onde você personaliza a sua margem, inserindo as seguintes informações respectivamente: espessura da borda/linha (px), tipo de linha e a cor da linha.</div>
<div style="text-align: center;">
Existem 8 opções de tipos de linha que você pode utilizar, são elas:</div>
<br />
<ol>
<li><b>dotted</b> - é uma linha pontilhada;</li>
<li><b>dashed</b> - é uma linha descontínua (semelhante ao dotted);</li>
<li><b>double</b> - é uma linha dupla;</li>
<li><b>solid</b> - é uma linha sólida;</li>
<li><b>groove</b> - é uma linha especial, possui um tipo de relevo;</li>
<li><b>ridge</b> - é semelhante ao groove, porém, seu efeito é invertido;</li>
<li><b>inset</b> - uma espécie de relevo para dentro;</li>
<li><b>outset</b> - uma espécie de relevo para fora;</li>
</ol>
<br />
<br />
<div style="text-align: center;">
Bom, o código é basicamente esse. Bem simples, né?</div>
<div style="text-align: center;">
E para aplicá-lo é mais fácil ainda! Basta você acrescentá-lo ao código de qualquer lugar que vocês desejem que detenha da borda interna.</div>
<div style="text-align: right;">
<br /></div>
<div style="text-align: right;">
É isso, espero que tenham gostado do tutorial e que dê para compreender bem. Qualquer dúvida, vocês podem deixar aí nos comentários!</div>
<div style="text-align: right;">
XOXO <b>❤</b><br />
<b><br /></b>
<b>P.S.: Amoras, abri vagas para afiliados! Quem quiser se afiliar é só avisar aí nos comentários que eu adiciono aos meus afiliados.</b></div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com3tag:blogger.com,1999:blog-553170932806340250.post-62039568969918307132016-06-11T10:12:00.000-07:002016-06-14T17:29:53.931-07:00Negrito, Itálico, Sublinhado e Tachado Personalizados <div style="text-align: center;">
<img alt="Imagem de vans, shoes, and flowers" height="330" src="https://data.whicdn.com/images/42125615/large.jpg" width="430" /></div>
<div style="text-align: center;">
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 <b>negrito</b>, <i>itálico</i>, <u>sublinhado</u> e <strike>tachado</strike>.</div>
<div style="text-align: center;">
Vamos iniciar o tutorial?<br />
<a name='more'></a></div>
<b>1.</b> Primeiramente, entre no seu HTML e tecle <i>ctrl f </i>ou <i>F3</i> e pesquise por<b> ]]></b:skin></b><br />
<br />
<b>2. </b><u>Acima</u> dessa tag, cole o seguinte código:<br />
<br />
<blockquote class="tr_bq">
b { color: <b>#cordonegrito</b>; }<br />
i { color: <b>#cordoitálico</b>; }<br />
u { border-bottom: 1px solid <b>#cordosublinhado</b>; text-decoration:none; }<br />
s, strike { color: <b>#cordotachado</b>; }</blockquote>
<br />
<b>3. </b>Substitua onde está em <b>negrito</b> pela cor desejada, visualize para verificar se está tudo ok e salve!<br />
<br />
<div style="text-align: center;">
Vou deixar um link aqui com uma tabela de cores CSS para vocês: <a href="http://www.flextool.com.br/tabela_cores.html">www.flextool.com.br/tabela_cores.html</a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: right;">
É isso, espero que tenham gostado e seja útil para vocês!</div>
<div style="text-align: right;">
XOXO <b style="color: firebrick; font-family: arial, sans-serif; font-size: x-small; line-height: 18.2px; text-align: right;">❤</b></div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com2tag:blogger.com,1999:blog-553170932806340250.post-64008186681519539172016-05-26T15:29:00.000-07:002017-01-06T15:10:49.903-08:00I'm back! + Nomes para Blog<div style="text-align: center;">
<img src="https://data.whicdn.com/images/35924962/large.jpg" width="430" /></div>
<div style="text-align: center;">
Hello, amores! Yeah, estou de voltaaaaa \o/ após séculos distante do blog, finalmente consegui voltar definitivamente para esse mundinho que tanto amo <span style="background-color: white; color: #545454; font-family: "arial" , sans-serif; font-size: x-small; line-height: 18.2px; text-align: right;"><b>❤</b></span></div>
<div style="text-align: center;">
E, junto à mim, trouxe esse novo layout - é simples, eu sei, mas expressa um pouco dessa minha fase minimalista; falando em minimalista, gostaria de apresentá-las(os) ao meu blog pessoal: o <a href="http://b-rainflower.blogspot.com/">Brain Flower</a>, o qual eu reativei com um layout bem à esse estilo; ficaria imensamente feliz com a visitinha de vocês! O link é esse aqui: <a href="http://b-rainflower.blogspot.com/">b-rainflower.blogspot.com</a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Deixando o papo de lado... eu não podia voltar de mãos vazias né? Então, resolvi trazer para vocês algumas sugestões de nomes para blog! Espero que gostem e se usarem, por favor, deem os devidos créditos.</div>
<br />
<b>Cosmic Blues - <a href="http://c-osmicblues.blogspot.com.br/">c-osmicblues.blogspot.com.br</a></b><br />
<b>Land Of HTML - <a href="http://landofhtml.blogspot.com.br/">landofhtml.blogspot.com.br</a></b><br />
<b>Cravo e Canela - <a href="http://c-ravoecanela.blogspot.com.br/">c-ravoecanela.blogspot.com.br</a> ou <a href="http://c-ravoecanel-a.blogspot.com.br/">c-ravoecanel-a.blogspot.com.br</a></b><br />
<b>One Minute - <a href="http://oneminut-e.blogspot.com.br/">oneminut-e.blogspot.com.br</a></b><br />
<b>Meus 13 Porquês - <a href="http://meus13porques.blogspot.com.br/">meus13porques.blogspot.com.br</a></b><br />
<b>Unicorn Parade - <a href="http://u-nicornparade.blogspot.com.br/">u-nicornparade.blogspot.com.br</a></b><br />
<b>Unicorns of Plush - <a href="http://unicornsofplush.blogspot.com.br/">unicornsofplush.blogspot.com.br</a></b><br />
<b>Flor de Lótus - <a href="http://florde-lotus.blogspot.com.br/"><strike>florde-lotus.blogspot.com.br</strike></a></b><br />
<b>Pink Paradise - <a href="http://p-inkparadise.blogspot.com.br/">p-inkparadise.blogspot.com.br</a></b><br />
<b>Agridoce - <a href="http://a-g-r-i-d-o-c-e.blogspot.com.br/">a-g-r-i-d-o-c-e.blogspot.com.br</a></b><br />
<b>Cereja Agridoce - <a href="http://cereja-agridoce.blogspot.com.br/">cereja-agridoce.blogspot.com.br</a></b><br />
<div style="text-align: right;">
<br /></div>
<div style="text-align: right;">
É isso amores, amanhã volto com um tutorial bacana pra vocês!</div>
<div style="text-align: right;">
XOXO <span style="background-color: white; color: #545454; font-family: "arial" , sans-serif; font-size: x-small; line-height: 18.2px;"><b>❤</b></span></div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com0tag:blogger.com,1999:blog-553170932806340250.post-65857823043142110952014-11-15T11:05:00.000-08:002016-05-26T07:55:09.735-07:00Avatares Katy Perry + Vaga Para Postadora<div style="text-align: center;">
Galerinha, estou de volta e <i><strike>it's been a long, long time</strike></i> resolvi abrir vaga(s) para postadora(s). Ainda não decidi quantas serão as vagas, mas creio que seja no mínimo 2!</div>
<div style="text-align: center;">
Quem tiver interesse é só deixar um comentário ou mandar um e-mail para <i>hellenffranca@outlook.com</i> com as seguintes informações:</div>
<blockquote class="tr_bq" style="text-align: center;">
<b><span style="font-size: large;">nome, idade, blog, tempo/dias disponível para postar e facebook (opcional)</span></b></blockquote>
<div style="text-align: center;">
Bem, é isso! Espero que se animem com idéia..</div>
<div style="text-align: center;">
Pro post não ficar muito "informativo", digamos assim, eu trouxe uns avatares do <i>Tumblr</i> <a href="http://katyperryavatars.tumblr.com/">Katy Perry Avatars</a> para vocês! Espero que gostem.</div>
<a name='more'></a><br />
<div style="text-align: center;">
<img src="http://36.media.tumblr.com/tumblr_lxwrvl22n31rntqxho1_250.png" /><img src="http://40.media.tumblr.com/tumblr_lxwrvl22n31rntqxho2_250.png" /><img src="http://40.media.tumblr.com/tumblr_lxwrvl22n31rntqxho4_250.png" /><img src="http://41.media.tumblr.com/tumblr_lxwrvl22n31rntqxho6_250.png" /><img src="http://40.media.tumblr.com/tumblr_lxwrvl22n31rntqxho5_250.png" /><img src="http://41.media.tumblr.com/tumblr_lxwrvl22n31rntqxho7_250.png" /><img src="http://40.media.tumblr.com/tumblr_lxwrvl22n31rntqxho8_250.png" /><img src="http://41.media.tumblr.com/tumblr_lxwrvl22n31rntqxho3_250.png" /><img src="http://40.media.tumblr.com/tumblr_lxwrvl22n31rntqxho9_250.png" /></div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com2tag:blogger.com,1999:blog-553170932806340250.post-41436774472316372032013-10-14T13:21:00.000-07:002016-06-14T17:31:24.068-07:00Menu Fluid<div style="text-align: center;">
<img src="https://data1.whicdn.com/images/81819162/large.jpg" width="430" alt="" class="alignnone"/></div>
<div style="text-align: center;">
Hi guys, hoje trouxe um menu mega lindinho para vocês! Ele é simples porém acho que fica ótimo no topo do cabeçalho.</div>
<div style="text-align: center;">
Achei esse menu no blog Senhorita Independência, portanto, créditos à ele e, aqui tem uma <a href="http://previewbyempirecss.blogspot.com.br/2013/10/blog-post.html"><b>preview</b></a> do menu.<br />
<a name='more'></a></div>
<div style="text-align: center;">
<br />
Bem, primeiramente vá até o HTML do seu blog e procure por <i></head></i>. Após achar a tag, cole o seguinte código acima dela:</div>
<blockquote class="tr_bq">
<script src="http://static.tumblr.com/03fwsqk/gM4m4lzm0/menu_jquery.min.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function()<br />
{<br />
$('#menufluid li').click(function()<br />
{<br />
var url = $(this).find('a').attr('href');<br />
document.location.href = url;<br />
});<br />
$('#menufluid li').hover(function()<br />
{<br />
$(this).find('.fluid').slideDown();<br />
},<br />
function()<br />
{<br />
$(this).find('.fluid').slideUp();<br />
});<br />
});<br />
</script></blockquote>
<br />
<div style="text-align: center;">
Agora, procure por ]]></b:skin> e depois de achar cole o seguinte código acima dessa tag fazendo as devidas alterações (<a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm">aqui</a> tem uma tabela de cores para ajudar):</div>
<blockquote class="tr_bq">
@font-face {font-family: "Alterebro Pixel Font"; src: url('http://static.tumblr.com/rzkfpnf/WFNm33qbe/font.ttf');}<br />
#menudisplay ul{list-style-type:none; display:block;}<br />
#menufluid li{font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 22px; background: <b>#COR_DO_BACKGROUND</b>; float:left; padding: 0px 0 5px 0; height:22px; width: 80px; text-align: center; margin: 5px; border-radius: 5px; text-transform: uppercase;}<br />
#menufluid li a{color:<b>#COR_DA_FONTE</b>; text-decoration:none; list-style-type: none;}<br />
.fluid {cursor:hand; background: <b>#COR_DO_BACKGROUND</b>; color:<b>#COR_DA_FONTE</b>; width:70px; font-family: Alterebro Pixel Font; font-size:8px; height:15px; vertical-align: middle; text-align: center; text-transform: uppercase; padding:5px; display:none; position:absolute; margin-left: 0px; margin-top:-25px; border-radius: 5px;}</center></blockquote>
<br />
<div style="text-align: center;">
Por fim, salve seu HTML e vá para o seu layout. Lá, adicione um gadget <u>HTML/JavaScript</u>, nele cole o seguinte código e salve:</div>
<blockquote class="tr_bq">
<div id="menudisplay"><br /><ul id="menufluid"><br /><li><a href="#">link</a><div class="fluid">descricao do link</div></li><br /><li><a href="#">link</a><div class="fluid">descricao do link</div></li><br /><li><a href="#">link</a><div class="fluid">descricao do link</div></li><br /></ul><br /></div>
</blockquote> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com3tag:blogger.com,1999:blog-553170932806340250.post-411279647647340722013-10-13T10:06:00.001-07:002016-06-14T17:31:43.358-07:00Tutorial - Conteúdo Escondido<div style="text-align: center;">
<img alt="Tumblr" src="https://data1.whicdn.com/images/81497872/large.jpg" width="430"></div>
<div style="text-align: center;">
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 ^^</div>
<div style="text-align: center;">
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 *-*</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Enfim², trouxe um tutorial do <b>Sweet Poison</b> que eu tenho salvo aqui no meu computador. Que é quando você clica na imagem/frase e todo o conteúdo aparece.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Entre no seu HTML, tecle <i>ctrl f</i> ou <i>F3</i> e procure por <b></head></b></div>
<div style="text-align: center;">
Acima dessa tag, cole o seguinte código:</div>
<div style="text-align: center;">
<blockquote class="tr_bq">
<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></blockquote>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Agora, vá até o seu layout, adicione um gadget <b>HTML/JavaScript</b>, cole o seguinte código fazendo as devidas modificações e salve.</div>
<blockquote class="tr_bq">
<a href="javascript:animatedcollapse.toggle('dog')"><img src="<b>URL da imagem</b>"/></a><div id="dog" style="display:none"><b>Conteúdo escondido</b></div></blockquote>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com1tag:blogger.com,1999:blog-553170932806340250.post-48412767925628714272013-08-31T11:41:00.000-07:002016-06-14T17:32:06.639-07:00Olá + Efeito Crooble<div style="text-align: center;">
<img alt="(14) Tumblr" src="https://data.whicdn.com/images/66976492/large.jpg" width="430" class="efeitoimagem"></div>
<div style="text-align: center;">
Hi. Tempos que não venho aqui né? Acho que vocês devem estar querendo me matar! Ok, ok, admito que mandei mal mesmo com esse sumiço. Pois bem, <i>estoy</i> aqui! Acho que vou trocar esse layout do blog, o que vocês acham, eu fico com ele por mais um tempo ou faço outro? </div>
<div style="text-align: center;">
Enfim, de ínicio não vou poder ficar criando novos efeitos e tutoriais para vocês então a maioria dos tutos serão reblogados. Mas não se preocupem, vou tentar trazer coisas diferentes e/ou pouco comuns para vocês.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
No tutorial de hoje, vou ensinar o <b>Efeito Crooble</b>! Eu particularmente amei esse efeito, ele é mega fofo e lindinho. Vocês podem ver a <a href="http://static.tumblr.com/txcr9gf/kiumdfpq0/preview_crooble.html">preview</a> dele clicando <a href="http://static.tumblr.com/txcr9gf/kiumdfpq0/preview_crooble.html">aqui</a>. E os créditos vão ao <a href="http://land-of-designs.com/">Land Of Designs</a> e o blog <a href="http://chovendodiamantes.blogspot.com.br/">Chovendo Diamantes</a> c;</div>
<a name='more'></a><br />
<h2 style="text-align: center;">
<b>Tutorial</b></h2>
<br />
<div style="text-align: center;">
Primeiramente, vá até o seu HTML e procure pela tag <b>]]></b:skin></b></div>
<div style="text-align: center;">
Depois de achá-la, acima dela você vai colar o seguinte código:</div>
<blockquote class="tr_bq">
.imgholder{<br />position:relative;<br />width: <u>50px</u>;/* largura */<br />height:<u>50px</u>;/* altura */<br />float:left;<br />margin:60px 20px;<br />border-radius:100px;<br />-moz-border-radius:100px;<br />-webkit-border-radius:100px;<br />}<br />/* thumbnails style */<br />.imgholder figure{<br />position:absolute;<br />left:0;<br />top:0;<br />width:<u>50px</u>;/* largura */<br />height:<u>50px</u>;/* altura */<br />margin:0;<br />overflow:hidden;<br />border-radius:100px;<br />-moz-border-radius:100px;<br />-webkit-border-radius:100px;<br />}<br />.imgholder img{<br />position:absolute;<br />left:0;<br />top:0px;<br />width:<u>50px</u>;/* largura */<br />height:<u>50px</u>;/* altura */<br />z-index:5;<br />border-radius:100px;<br />-moz-border-radius:100px;<br />-webkit-border-radius:100px;<br />opacity:0;<br />filter: alpha(opacity = 0);<br />transform: scale(1.5,1.5);<br />-ms-transform: scale(1.5,1.5);<br />-moz-transform: scale(1.5,1.5);<br />-webkit-transform: scale(1.5,1.5);<br />transition:<br />opacity 1s ease-in,<br />transform 1.5s;<br />-moz-transition:<br />opacity 1s ease-in,<br />-moz-transform 1.5s;<br />-webkit-transition:<br />opacity 1s ease-in,<br />-webkit-transform 1.5s;<br />}<br />.imgholder:hover img{<br />opacity:1;<br />filter: alpha(opacity = 100);<br />transform: scale(1,1);<br />-ms-transform: scale(1,1);<br />-moz-transform: scale(1,1);<br />-webkit-transform: scale(1,1);<br />}<br />.imgholder figcaption{<br />position:absolute;<br />left: -15px;<br />top:30%;<br />width:<u>80px</u>;<br />opacity:1;<br />filter: alpha(opacity = 100);<br />color:<b>#fff;</b>/* cor da letra */<br />font: normal 11px 'Yanone Kaffeesatz';<br />text-align: center;/* tamanho e nome da fonte */<br />text-trasnform: uppercase;<br />text-shadow:<b>#767676</b> 1px 1px 5px;/* sombra da letra */<br />z-index: 10;<br />transform: scale(1,1);<br />-ms-transform: scale(1,1);<br />-moz-transform: scale(1,1);<br />-webkit-transform: scale(1,1);<br />transition:<br />opacity 1s,<br />transform 1s ease;<br />-moz-transition:<br />opacity 1s,<br />-moz-transform 1s ease;<br />-webkit-transition:<br />opacity 1s,<br />-webkit-transform 1s ease;<br />}<br />.imgholder:hover figcaption{<br />opacity:0;<br />filter: alpha(opacity = 0);<br />transform: scale(1.5,1.5);<br />-ms-transform: scale(1.5,1.5);<br />-moz-transform: scale(1.5,1.5);<br />-webkit-transform: scale(1.5,1.5);<br />font: normal 10px 'Yanone Kaffeesatz'; /* tamanho e nome da fonte quando passa o mouse */<br />text-trasnform: uppercase;<br />color: #fff;/* cor da letra quando passa o mouse */<br />left: 5px;<br />top:15%;<br />width:130px;<br />}<br />/* decoration style */<br />.imgholder .circle{<br />position:absolute;<br />border-radius:100px;<br />-moz-border-radius:100px;<br />-webkit-border-radius:100px;<br />}<br />.imgholder .outer1{<br />top:-5px;<br />left:-5px;<br />width:<u>50px</u>;/* largura */<br />height:<u>50px</u>;/* altura */<br />z-index:2;<br />border:6px solid;/* tamanho da primeira borda */<br />border-color:<b>#71D4D9</b>;/* cor da primeira borda */<br />box-shadow:0 0 3px <b>#4CC5CE</b>;/* sombra da primeira borda */<br />-moz-box-shadow:0 0 3px <b>#4CC5CE</b>;/* sombra da primeira borda */<br />-webkit-box-shadow:0 0 3px <b>#4CC5CE</b>;/* sombra da primeira borda */<br />background: <b>#E2F1F2</b>;/* cor da bolinha do meio */<br />background: -moz-radial-gradient(center, ellipse cover, <b>#79D1D7</b> 0%, <b>#79D1D7</b> 100%);/* sombra interna da bolinha */<br />background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,<b>#79D1D7</b>), color-stop(100%,<b>#79D1D7</b>));/* sombra interna da bolinha */<br />background: -webkit-radial-gradient(center, ellipse cover,<b> #E2F1F2</b> 0%,<b>#79D1D7</b> 100%);/* sombra interna da bolinha */<br />background: -o-radial-gradient(center, ellipse cover, <b>#E2F1F2</b> 0%,<b>#79D1D7</b> 100%);<br />background: -ms-radial-gradient(center, ellipse cover, <b>#E2F1F2</b> 0%,<b>#79D1D7</b> 100%);/* sombra interna da bolinha */<br />background: radial-gradient(center, ellipse cover, <b>#E2F1F2</b> 0%,<b>#79D1D7</b> 100%);/* sombra interna da bolinha */<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='<b>#E2F1F2</b>', endColorstr='#79D1D7',GradientType=1 );<br />transition:<br />box-shadow 1s ease-out,<br />border-color 1.5s;<br />-moz-transition:<br />-moz-box-shadow 1s ease-out,<br />border-color 1.5s;<br />-webkit-transition:<br />-webkit-box-shadow 1s ease-out,<br />border-color 1.5s;<br />}<br />.imgholder:hover .outer1{<br />border-color:<b>#89DFE4</b>;/* cor da primeira borda quando passa o mouse*/<br />box-shadow:0 0 10px <b>#4CC5CE</b>;/* sombra da primeira borda quando passa o mouse*/<br />-moz-box-shadow:0 0 10px <b>#4CC5CE</b>;/* sombra da primeira borda quando passa o mouse*/<br />-webkit-box-shadow:0 0 10px <b>#4CC5CE</b>;/* sombra da primeira borda quando passa o mouse*/<br />}<br />.imgholder .outer2{<br />top:-12px;<br />left:-12px;<br />width:<u>64px</u>;<br />height:<u>64px</u>;<br />z-index:1;<br />border:6px solid;/* tamanho da segunda borda */<br />border-color: <b>#67D5DD</b>;/* cor da segunda borda */<br />box-shadow:0 0 20px <b>#4CC5CE</b>;/* sombra da segunda borda */<br />-moz-box-shadow:0 0 20px <b>#4CC5CE</b>;/* sombra da segunda borda */<br />-webkit-box-shadow:0 0 20px <b>#4CC5CE</b>;/* sombra da segunda borda */<br />opacity:0;<br />filter: alpha(opacity = 0);<br />transform: scale(1.3,1.3);<br />-ms-transform: scale(1.3,1.3);<br />-moz-transform: scale(1.3,1.3);<br />-webkit-transform: scale(1.3,1.3);<br />transition:<br />opacity 1s ease 0.3s,<br />transform 1s ease-out 0.3s;<br />-moz-transition:<br />opacity 1s ease 0.3s,<br />-moz-transform 1s ease-out 0.3s;<br />-webkit-transition:<br />opacity 1s ease 0.3s,<br />-webkit-transform 1s ease-out 0.3s;<br />}<br />.imgholder:hover .outer2{<br />opacity:1;<br />filter: alpha(opacity = 100);<br />transform: scale(1,1);<br />-ms-transform: scale(1,1);<br />-moz-transform: scale(1,1);<br />-webkit-transform: scale(1,1);<br />}</blockquote>
<div style="text-align: center;">
Uffa, que código enorme! Para facilitar, destaquei algumas coisas que quem já conhece um pouco de CSS já até sabe. Pois bem, o que está em <b>negrito</b> são as cores e o que está <u>sublinhado</u> são os tamanhos que vocês podem editar como bem entenderem.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Depois de editar o código salve e vá para o seu Layout.</div>
<div style="text-align: center;">
Lá você adiciona um gadget HTML/JavaScript e cola o seguinte código:</div>
<blockquote class="tr_bq">
<div class="imgholder"><div class="outer1 circle"></div> <div class="outer2 circle"></div><figure> <img src="<b>http://24.media.tumblr.com/tumblr_m837c8VA0T1r6uvzso3_250.png</b>" /><figcaption class="caption"><u>Título</u></figcaption></figure></div><br /><div class="imgholder"><div class="outer1 circle"></div><div class="outer2 circle"></div><figure> <img src="<b>http://25.media.tumblr.com/tumblr_m837c8VA0T1r6uvzso5_250.png</b>" /><figcaption class="caption"><u>Título</u></figcaption></figure></div><br /><div class="imgholder"><div class="outer1 circle"></div><div class="outer2 circle"></div><figure> <img src="<b>http://25.media.tumblr.com/tumblr_m837c8VA0T1r6uvzso2_250.png</b>" /><figcaption class="caption"> <u>Título</u></figcaption></figure></div></blockquote>
<div style="text-align: center;">
O que está destacado em <b>negrito</b> são as url/endereço das imagens, que você pode editar como quiser assim como pode editar também onde está escrito<b> "Título"</b>.</div>
<div style="text-align: center;">
Depois disso é só salvar (:</div>
<br />
<div style="text-align: right;">
Tentei explicar da melhor forma possível, espero que tenham gostado do tutorial ^^</div>
<div style="text-align: right;">
Aliás, vocês querem que eu faça uns "styles" desse efeito? Com, obviamente, cores diferentes. Assim facilitaria a vida de vocês...</div>
<div style="text-align: right;">
bjs ;*</div> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com1tag:blogger.com,1999:blog-553170932806340250.post-32781927504701187972013-06-30T13:49:00.001-07:002016-06-14T17:32:25.006-07:00Colocando player na postagem do blog - MP3 Player<div style="text-align: center;">
<img alt="November. | via Tumblr" class="efeitoimagem" src="https://data.whicdn.com/images/64457938/large.png" width="430"></div>
<div style="text-align: center;">
<i>Bonjour mes amour</i>² u3u</div>
<div style="text-align: center;">
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 <u>preview</u> dele:</div>
<br />
<div style="text-align: center;">
<object data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" height="20" type="application/x-shockwave-flash" width="200">
<param name="movie" value="https://flash-mp3-player.net/medias/player_mp3_mini.swf">
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="mp3=http%3A//tegos.ru/mp3_rus/club/Lana_Del_Rey_-_Summertime_Sadness.mp3" />
</object> </div>
<a name='more'></a><br />
<div style="text-align: center;">
Vamos ver como se faz? Pode parecer complicado mas é simples de fazer:</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
O player só funciona se a música estiver no formato MP3 (a terminação deverá ser .mp3). Eu demorei um pouco mas achei um site com músicas nesse formato, portanto entre no site <a href="http://www.musicaddict.com/">http://www.musicaddict.com/</a> e na barra de pesquisa digite o nome da música desejada e dê enter. Eu, por exemplo, procurei pela música <b>Summertime Sadness da Lana Del Rey</b>, como mostra na imagem abaixo:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSxwy3K9ex30xwhnsgy0dXNi3re14KtrsNuZNCLxMpcG_HkEcJq02rsToBKPEVeurGxtASWnZdqdOHU6mcNmRxsib2tToLh-5j08cQk3cfq8-WJRc2bWzdHnyj7tSjMjDK3CQzkfgjbHo/s967/tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="efeitoimagem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSxwy3K9ex30xwhnsgy0dXNi3re14KtrsNuZNCLxMpcG_HkEcJq02rsToBKPEVeurGxtASWnZdqdOHU6mcNmRxsib2tToLh-5j08cQk3cfq8-WJRc2bWzdHnyj7tSjMjDK3CQzkfgjbHo/s1600/tutorial.jpg"></a></div>
<div style="text-align: center;">
Daí vai abrir uma página com vários arquivos com o nome da música pesquisada, você pode ouvi-lás para ver se o audio está bom, antes de colocá-la no player.</div>
<div style="text-align: center;">
Enfim, clique no nome da música e depois copie o link que vaí estar logo abaixo. Como na imagem à seguir:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJzNpfbNNPTXfrsgqeD5diJdi1tEtNWm6ZuYxStQvjEJ37wpDupZNdd9YuXNQlhE4lkQjoAtSR2oUoASyd7FICwy2BnmtErcREk8gbF9WNVWJWuXHg-52nCYayLrePekYVSKoPP6Hhc0/s963/tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="efeitoimagem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJzNpfbNNPTXfrsgqeD5diJdi1tEtNWm6ZuYxStQvjEJ37wpDupZNdd9YuXNQlhE4lkQjoAtSR2oUoASyd7FICwy2BnmtErcREk8gbF9WNVWJWuXHg-52nCYayLrePekYVSKoPP6Hhc0/s1600/tutorial.jpg"></a></div>
<div style="text-align: center;">
Depois disso, entre no site do player (<a href="http://flash-mp3-player.net/players/mini/generator/">http://flash-mp3-player.net/players/mini/generator/</a>), <u>apague </u>o link que está ao lado de mp3 e cole o link da sua música. Como mostra à seguir:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3XUjQQBZQ4eKjdhZUBj5iqBvjNaylneQIE8JEOhpeSKpw3e4pOSwpmzpl0LJZbwCvZNR7HGXs79V3z06OjX25v8jxNkgPZifYXM3LGdZHQQZnmyP4Uv3QH1deHUWxnlvSdGQgo1shNEs/s792/tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="efeitoimagem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3XUjQQBZQ4eKjdhZUBj5iqBvjNaylneQIE8JEOhpeSKpw3e4pOSwpmzpl0LJZbwCvZNR7HGXs79V3z06OjX25v8jxNkgPZifYXM3LGdZHQQZnmyP4Uv3QH1deHUWxnlvSdGQgo1shNEs/s1600/tutorial.jpg"></a></div>
<div style="text-align: center;">
Você pode editar a cor se quiser, é só clicar em <b>General</b> e depois em <b>Colors</b>.</div>
<div style="text-align: center;">
Depois disso é só copiar o código que está dentro da caixinha HTML e <b>colar na parte HTML</b> da sua postagem/gadget (:</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: right;">
<div style="text-align: center;">
Bem, é isso! Tentei explicar da forma mais detalhada que pude, espero que tenham compreendido bem ^^</div>
</div>
<div style="text-align: right;">
<div style="text-align: center;">
Gostaram do tutorial?</div>
</div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com11tag:blogger.com,1999:blog-553170932806340250.post-30961086156378721702013-06-29T09:44:00.002-07:002016-06-14T17:32:43.117-07:00Férias, projetos e blábláblá<div class="separator" style="clear: both; text-align: center;">
<img alt="1994 | via Tumblr" class="efeitoimagem" src="https://data.whicdn.com/images/65080950/large.jpg" width="430"></div>
<div style="text-align: center;">
Bonjouuuuuuuuuuuuur mes amours <3</div>
<div style="text-align: center;">
Vocês não fazem ideia do quanto eu estava com saudades daqui :c Bem, além de eu andar atolada em trabalhos, provas, atividades e de quebra ainda estar ruinzinha em matemática, no pouco tempo que entro aqui aproveito para conversar com meus amigos.</div>
<div style="text-align: center;">
Mas enfim estou de férias e vou poder voltar à postar aqui normalmente, mas primeiro vou ter que me organizar melhor. Tenho alguns projetos e quero compartilhar com vocês:</div>
<br />
<b>Criar uma agenda</b> - bem, acho que essa é minha saída porque eu ando muito desorganizada e sem tempo para fazer as coisas. Com essa agenda vou separar um tempo especial para minhas atividades na blogosfera e minhas atividades da escola.<br />
<br />
<b>Blog de themes/layouts</b> - Na verdade eu já o criei, é o <a href="http://inside-themes.blogspot.com/">Inside Themes</a> (podem visitar). Eu ainda estou arrumando o layout de lá mas já vou colocar um link para vocês encomendarem. Todas as encomendas seram <u>GRÁTIS</u>, além disso o blog irá disponibilizar themes/layouts free para vocês e como a ideia inicial é essa, não serão feitas tantas encomendas assim ok?<br />
<br />
<b>Novos tutoriais</b> - Eu estou cheeeeeeeeeeeeeeeeeeeeia de tutoriais louca para ensinar vocês, o que não falta é postagem aqui como rascunho. É que eu realmente estava sem tempo para explicar tudo detalhadamente, com imagens, passa-a-passo e tal...<br />
<br />
<b>Novos efeitos</b> - Também estou louca para mostrar novos efeitos para vocês, porém, estava sem tempo para sentar e testar códigos no HTML para criar algo novo.<br />
<br />
<b>Um novo layout</b> - Quero muito criar um novo layout só que quero fugir um pouco da cor azul que acredito que vocês já estão de saco cheio disso - desculpem, eu tenho essa obcessão bizarra pela cor azul -qq - por isso quero criar um layout com cores diferentes e com um estilo diferente do habitual, afinal, mudanças são sempre bem-vindas.<br />
<br />
Enfim, é isso. Já estou de férias e vou ver se começo com o novo layout hoje mesmo. Bjos ;* luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com2tag:blogger.com,1999:blog-553170932806340250.post-77670630770052383822013-05-24T14:29:00.002-07:002016-06-14T17:51:21.613-07:00Retirar fundo semi-transparente da sidebar do modelo Travel<div style="text-align: center;">
<img src="https://data.whicdn.com/images/35193454/large.jpg" width="430"><br />
Hi.</div>
<div style="text-align: center;">
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</div>
<div style="text-align: center;">
Enfim, resolvi ensiná-los à retirá-la e espero que esse tutorial não seja tão inútil assim -.-<br />
<a name='more'></a></div>
<div style="text-align: center;">
Vá até o seu HTML, clique na caixa HTML e dê <b>ctrl f</b> ou <b>F3</b>.</div>
<div style="text-align: center;">
Agora procure por: <b>Sidebar Gradient</b></div>
<div style="text-align: center;">
Você deve achar um código assim:<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8THzW97akxWqEzYtLxf5_5tOjTpHvPAP_Z_KRgAkUITaf32cp4SmbCA6waxnUpx9YLELM0bU6tKmpA1B35USMGPCD5qOBk1KIT8HDkpzfOnU3ejXWB99foI6bkn_epccyEdGVMmQdvsc/s640/tutorial+empire+css.jpg" width="430" /><br />
<br /></div>
<div style="text-align: center;">
<img src="https://static.tumblr.com/rltvkjt/9lnlmr41u/th_k_atencao.gif" /> <b>Atenção!</b> <img src="https://static.tumblr.com/rltvkjt/9lnlmr41u/th_k_atencao.gif" /></div>
<div style="text-align: center;">
Você vai <u>apagar</u> somente o que está destacado em <span style="background-color: #d0e0e3; color: #20124d;">azul</span> e <u>sublinhado</u> de <span style="color: red;">vermelho</span> na imagem abaixo:<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixa1rPU6Xn5WZLOc-g8C5NMHEtIfP4bv7iDUAQ0wndh9KGyEPGnj8O2Y17jY5BOtZUHPchfFusE8CTLcb_zuEr5myV9EqVsMLIiAa_niE14GmRSih9M8fQy3ADXTvbS-vN4IDBg0v9R30/s640/cats.jpg" width="430" /><br />
<br /></div>
<div style="text-align: center;">
Depois disso é só salvar (:</div>
<div style="text-align: center;">
Não sei se o tutorial está bem explicado, mas vocês entenderam? Enfim, qualquer dúvida é só me perguntar <img src="https://lh4.ggpht.com/_NZJzdRm10Y0/TTSXvIWTG0I/AAAAAAAAAFo/C0tuQJJUwV0/s800/gif19.gif" /></div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com17tag:blogger.com,1999:blog-553170932806340250.post-4540996169565983812013-05-20T15:17:00.000-07:002013-05-20T15:17:12.265-07:00Thank you for 100 ♥<div style="text-align: center;">
Enfim, alcancei os 100 seguidores, dos quais eu nem sonhava quando comecei o blog e.e</div>
<div style="text-align: center;">
Mas enfim, gostaria de presenteá-los com um layout free e/ou um sorteio de um layout exclusivo do jeitinho que vocês quiserem, o que acham?</div>
<div style="text-align: center;">
<b>Qual vai ser o tema do layout free?</b></div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com6tag:blogger.com,1999:blog-553170932806340250.post-78603419271835824522013-05-17T08:03:00.001-07:002016-06-14T17:35:22.717-07:00Nomes para Blog<div style="text-align: center;">
<img class="efeitoimagem" src="https://data.whicdn.com/images/61677446/large.jpg" width="430"></div>
<div style="text-align: center;">
<b>Hi.</b><br />
Acho que nunca postei algo assim aqui no Empire CSS, né? Então, trouxe alguns nomes e url's para vocês.</div>
<div style="text-align: center;">
Como não faço a mínima idéia do que falar, vamos vê-las:</div>
<br />
<strike>Nescau com Nutella - <a href="http://nescaucomnutella.blogspot.com.br/">http://nescaucomnutella.blogspot.com.br/</a></strike><br />
<strike>On The Summer Breeze - <a href="http://onthesummerbreeze.blogspot.com.br/">http://onthesummerbreeze.blogspot.com.br/</a></strike><br />
<strike>Elementar - <a href="http://e-l-e-m-e-n-t-a-r.blogspot.com.br/">http://e-l-e-m-e-n-t-a-r.blogspot.com.br/</a></strike><br />
<strike>Rebelde sem Causa - <a href="http://rebelde-sem-causa.blogspot.com.br/">http://rebelde-sem-causa.blogspot.com.br/</a></strike><br />
<strike>Rainha Queen - <a href="http://rainha-queen.blogspot.com.br/">http://rainha-queen.blogspot.com.br/</a></strike><br />
<strike>Pônei Maldito - <a href="http://p-oneimaldito.blogspot.com.br/">http://p-oneimaldito.blogspot.com.br/</a></strike><br />
<strike>Fucking Unicorn - <a href="http://f-uckingunicorn.blogspot.com.br/">http://f-uckingunicorn.blogspot.com.br/</a></strike><br />
<br />
<div style="text-align: center;">
Esses nomes estão meio zuados masok-</div>
<div style="text-align: center;">
O que acharam? kk</div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com14tag:blogger.com,1999:blog-553170932806340250.post-88028321811681111002013-05-13T18:47:00.002-07:002016-06-14T17:35:51.805-07:00Estilo simples para footer<div style="text-align: center;">
<img class="efeitoimagem" src="https://data.whicdn.com/images/60970719/large.jpg" width="430"> </div>
<div style="text-align: center;">
Hi.</div>
<div style="text-align: center;">
Resolvi criar uma ask exclusivamente para o blog. Lá vocês poderam fazer pedidos e etc., acho que assim fica mais fácil para vocês principalmente de vizualizar as respostas né?</div>
<div style="text-align: center;">
O endereço é esse: <a href="http://ask.fm/EmpireCSS">http://ask.fm/EmpireCSS</a>.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Bem, hoje o tutorial é super fácil, rápido e simples.</div>
<div style="text-align: center;">
O tutorial é para personalizar a footer das postagens, e o tutorial vai deixar sua footer igual à que eu uso em meus layouts! <b>Tutorial:</b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Vá até o seu HTML, clique na caixa html e procure por .post-footer (tecle ctrl f ou F3 para facilitar).</div>
<div style="text-align: center;">
Quando achar, é só colar o código a seguir e salvar!:</div>
<blockquote class="tr_bq">
.post-footer-line-1{ font-size:8px; /* Tamanho da fonte de letra */<br />
}<br />
.post-footer-line-1{<br />
font-size:8px; /* Tamanho da fonte de letra */<br />
}<br />
.post-footer-line-2{ <br />
font-size:8px; /* Tamanho da fonte de letra */<br />
}</blockquote>
<br />
*não edite o código caso queira um resultado igual ao meu.<br />
<br /> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com9tag:blogger.com,1999:blog-553170932806340250.post-14349118491443660342013-05-12T15:24:00.000-07:002013-05-12T15:24:48.381-07:00Querem algo? - Façam pedidos, atenderei todos (:<center><iframe src="http://ask.fm/widget/2aadd4733c4aa633928d220c20b0b6df4efaef8c?stylesheet=large&fgcolor=%23000000&bgcolor=%23f8f8ff&lang=21" frameborder="0" scrolling="no" width="400" height="275" style="border:none;"></iframe></center> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.comtag:blogger.com,1999:blog-553170932806340250.post-70058997708618910692013-04-28T15:28:00.001-07:002016-06-14T17:36:20.044-07:00Tooltip Transparente<div style="text-align: center;">
<img class="efeitoimagem" src="https://data.whicdn.com/images/59216851/large.png" width="430"> </div>
<div style="text-align: center;">
Hi :3</div>
<div style="text-align: center;">
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 *--*</div>
<div style="text-align: center;">
Mas enfim, trouxe um tutorial super fofo da tooltip que eu uso aqui no blog!</div>
<div style="text-align: center;">
A preview da tooltip é essa:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PnHidtKJ5-FPjN58uOg-Z1yyt-S7vZgosJIq-zZvUWe3yTpiTz66wIL7hldMFuzFO308Oi9Tanpd8dB8DynbZ0RXF8YkVTS2WBKUjiVNnFAIJh7jpfwRWJdSyn9ZEgHx1bMipQ13WG0/s1600/Empire+css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PnHidtKJ5-FPjN58uOg-Z1yyt-S7vZgosJIq-zZvUWe3yTpiTz66wIL7hldMFuzFO308Oi9Tanpd8dB8DynbZ0RXF8YkVTS2WBKUjiVNnFAIJh7jpfwRWJdSyn9ZEgHx1bMipQ13WG0/s1600/Empire+css.jpg"></a></div>
<a name='more'></a><br />
<div style="text-align: center;">
<b>Tutorial:</b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Vá até o HTML do seu blog e procure por <b></head></b> (clique <u>dentro</u> da caixa HTML e aperte <i>F3</i> para facilitar sua busca)</div>
<div style="text-align: center;">
<u>Abaixo</u> da tag destacada, cole o seguinte código:</div>
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/></blockquote>
<br />
<div style="text-align: center;">
Agora procure por <b>]]></b:skin></b> e quando achar cole o seguinte código <u>acima</u> da tag pesquisada:</div>
<br />
<blockquote class="tr_bq">
div#qTip {<br />
padding: <b>6px</b>;<br />
display: none;<br />
background-color: rgba(0,0,0,0.5);<br />
color: <b>#FFFFFF</b>; /* Cor do texto */<br />
font-family: <b>Century Gothic</b>; /* Fonte */<br />
font-size: <b>8</b>px;<br />
text-align: <b>left</b>; /* Alinhamento do texto */<br />
position: absolute;<br />
z-index: 1000;<br />
}</blockquote>
<br />
<b>Obs.:</b> Faça as alterações de acordo com o que está entre /* */; Edite somente o que está em negrito, se não o código não funcionará.<br />
<br /> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com9tag:blogger.com,1999:blog-553170932806340250.post-84976638079532826982013-04-21T11:35:00.000-07:002016-06-14T17:36:37.941-07:00Andei sumida + Tutorial - Tumblr<div style="text-align: center;">
<img class="efeitoimagem" src="https://data.whicdn.com/images/58644860/2d42275750773c39a022fd1a937b8363_large.jpg" width="430"></div>
<div style="text-align: center;">
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</div>
<div style="text-align: center;">
Mas enfim estou de volta, eu acho, e estava pensando em abrir vaga para postadores... Mas não sei ainda, vamos ver.</div>
<div style="text-align: center;">
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 <b>ctrl U</b>, para evitar cópias, vamos ver o tutorial?</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Vá até o <u>HTML</u> do seu tumblr, tecle <i>ctrl f</i> e procure por <b><body></b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Quando achar, apague o <b><body></b> e <u>substitua-o</u> pelo código abaixo:</div>
<blockquote class="tr_bq" style="text-align: center;">
<body oncontextmenu=”return false” onselectstart=”return false” onmousedown=”return false” onkeydown=”return false”></blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
É só salvar e pronto *--*</div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com2tag:blogger.com,1999:blog-553170932806340250.post-43536068773746038272013-03-29T17:42:00.001-07:002016-06-14T17:37:42.535-07:00Imagens Editadas - Cotton Candy<div style="text-align: center;">
<img class="efeitoimagem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0Oq7CHCjunJx862qx7deeOXmgaUzbEThZIWnb39NorCp9M7ZlGV6S7HavDB2924umtg9q1BBz3fimwzG1ACqZmmSknJVfYvOIEMG00q5TaVui4Md1ycsUpHybWlqFY8H01f-CsFCCCQ/s1600/6+Empire+CSS.jpg" width="430"><br />
Hi.</div>
<div style="text-align: center;">
Agooora que eu estou tomando vergonha na cara e aprendendo à manuzear o Photoshop, vou estar fazendo materiais melhores para vocês :D</div>
<div style="text-align: center;">
E eu que não gostava do Photoshop e, além de não entender, achava difícil ç.ç Estou vendo que não é nada disso, até que é fácil rs</div>
<div style="text-align: center;">
Ok, estão todos nem ai pra isso mas é que eu não tenho muito o que falar nessa introdução .-.</div>
<div style="text-align: center;">
Bem, vamos ao que vos interessa né!<br />
<a name='more'></a></div>
<div style="text-align: center;">
<img class="efeitoimagem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjraS8kcopQSjpAj1oB3bgwMG4_I-DCh9OY7qpJocPM_VzIeOmmVYGHn9UeY3WLgXMaIgX-ogfnU-_iog_Gp8QR6OlfXU6TtAb6zS2prs40B4rjmZR_hvQImTIfFqUdqvw678G_xwXgMMM/s1600/2+Empire+CSS.JPG" width="430">
<img class="efeitoimagem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTALcW0ajcNpdOq83DLzUD8QEBFAa5cn6RCzu8X-EOvGe_1Mc2d_kDfLJObAY0HsW6DnVDudVwVCv8NHKLDKnqnzTS33g5sqT4qTQ1DUzeUUkOumVsHB_Qn_LiMjPJybLXRl-Ysl_3_3Y/s1600/3+Empire+CSS.jpg" width="430">
<img class="efeitoimagem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilitreenFt91Wup3DTVsr3YcqU8zesx5EJQH_yyShCaFZ7Tej7AQ90neqyJi1Pu2yGTTiXjFsUddWZG0WeBJx25DfrSuKybRvav-NkxMypgICJlb-FYMtjHKc2j2qCczMUb_mAfhQ2lPY/s1600/5+Empire+CSS.jpg" width="430"></div>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com8tag:blogger.com,1999:blog-553170932806340250.post-22283875581716336352013-03-28T11:40:00.000-07:002016-06-14T17:38:49.388-07:00Avatares Miley Cyrus - 200x300<div class="entrada"><div style="text-align: center;">
Hi.</div>
<div style="text-align: center;">
Hoje fiz seis avatares da Miley Cyrus para vocês com alguns efeitos! São meus primeiros avatares e eu espero que gostem c:</div>
<div style="text-align: center;">
Se estiverem grandes de mais podem me avisar que faço menores ok?</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6z7UrW9keU7kKVt7xuzigwhEqXPDtyZaQzG28tAgHGEnBec3INorKQmu1rKtXALFHVquXrRjAI3UKMUhonmGurnXHHqDE9Hia3-okwMayj3iNxrOQtHmfkp1j-ReZMrTgPGZa8BvYkw/s1600/tumblr_m8ykvx6xWF1r9ykhlo1_250_large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6z7UrW9keU7kKVt7xuzigwhEqXPDtyZaQzG28tAgHGEnBec3INorKQmu1rKtXALFHVquXrRjAI3UKMUhonmGurnXHHqDE9Hia3-okwMayj3iNxrOQtHmfkp1j-ReZMrTgPGZa8BvYkw/s200/tumblr_m8ykvx6xWF1r9ykhlo1_250_large.jpg" width="133"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz-DuNs5X3rbf-yVegXYEngG2zpgbYMdpXAm25cT9fA_TBk6kT1MGiWjaz9l8sP-SZAse-zbYijED3tQ6XiSFbZqioPP818BTIpErOK8NBqOcFVipAUpCWjV3jOIKaoAcuT9iie-Sn8ZU/s1600/tumblr_m8ykvx6xWF1r9ykhlo2_250_large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz-DuNs5X3rbf-yVegXYEngG2zpgbYMdpXAm25cT9fA_TBk6kT1MGiWjaz9l8sP-SZAse-zbYijED3tQ6XiSFbZqioPP818BTIpErOK8NBqOcFVipAUpCWjV3jOIKaoAcuT9iie-Sn8ZU/s200/tumblr_m8ykvx6xWF1r9ykhlo2_250_large.jpg" width="133"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5fhp1O35tpE3DVYr9PrvH3TeMUUvXCX39h7AiSpxrwImGsZCc2d8qqcRc0HNCPak6wfZ3PJu1TQg3EKvmjdrcYCETG9B8rVRrwXoEeP6xnRzIg7Eh1mDFaM1yE-R94rGHK20JrL2ckI4/s1600/540751_625102577507284_1330150329_n_large.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5fhp1O35tpE3DVYr9PrvH3TeMUUvXCX39h7AiSpxrwImGsZCc2d8qqcRc0HNCPak6wfZ3PJu1TQg3EKvmjdrcYCETG9B8rVRrwXoEeP6xnRzIg7Eh1mDFaM1yE-R94rGHK20JrL2ckI4/s200/540751_625102577507284_1330150329_n_large.png" width="133"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgeXxdLPZDvPPj-dXa2nb7PMO2RCxo8QOVBg-UkeBwLZqdtZthN64WzQBswrbHotqmIH0iksD7Ewe_8NCAFiNudMAKT2JJSim_Lu5QlMKy6LEW2UcDtzLJgq-gyz-j7KizWZvfQ0YAWY/s1600/tumblr_mkc8pvkjkL1s78s8fo1_500_large.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgeXxdLPZDvPPj-dXa2nb7PMO2RCxo8QOVBg-UkeBwLZqdtZthN64WzQBswrbHotqmIH0iksD7Ewe_8NCAFiNudMAKT2JJSim_Lu5QlMKy6LEW2UcDtzLJgq-gyz-j7KizWZvfQ0YAWY/s200/tumblr_mkc8pvkjkL1s78s8fo1_500_large.png" width="133"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHePyatIs3t5ygI3njRGy_xeusUwwVtqsDFDiV8s0FrRgX-6ILo9uOso3Tcnog5Cj6_2M5nlsqDLTi_i72KtfJiYubFRX5ikWJxOjLYqmJSbWjMZvYPOH9xg3kRB1iW8M66ys7IodowV4/s1600/empire+css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHePyatIs3t5ygI3njRGy_xeusUwwVtqsDFDiV8s0FrRgX-6ILo9uOso3Tcnog5Cj6_2M5nlsqDLTi_i72KtfJiYubFRX5ikWJxOjLYqmJSbWjMZvYPOH9xg3kRB1iW8M66ys7IodowV4/s200/empire+css.png" width="133"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqHacJc7HQ2FNy2-RzKPJUrVbskBtF_KZkTuUOPd_8TwFS_0vFIspxQGrtelvMKEaRQ_fZSRYV51YR_QjHzJ9nRaSgoO-86939JoOnZ9avYn7ISgaCbxUCEabp6RePfoIrILYOkPkQ0c/s1600/tumblr_mkdtv3v69u1rbexvwo1_500_large+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqHacJc7HQ2FNy2-RzKPJUrVbskBtF_KZkTuUOPd_8TwFS_0vFIspxQGrtelvMKEaRQ_fZSRYV51YR_QjHzJ9nRaSgoO-86939JoOnZ9avYn7ISgaCbxUCEabp6RePfoIrILYOkPkQ0c/s200/tumblr_mkdtv3v69u1rbexvwo1_500_large+(1).png" width="133"></a></div>
<div class="separator" style="clear: both; text-align: center;">
(clique nas imagens para vê-las no tamanho original)</div></div> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com8tag:blogger.com,1999:blog-553170932806340250.post-7650530203621800982013-03-23T16:17:00.001-07:002016-06-14T17:39:13.251-07:00Estou de Volta + Menu Empire<div style="text-align: center;">
<img class="efeitoimagem" src="https://data.whicdn.com/images/54670975/tumblr_mjcye8V3Id1r52kfeo1_500_large.gif" width="430"><br />
<span style="font-size: x-small;">me adicionem no facebook <a href="http://www.facebook.com/becca.ferreira.98">http://www.facebook.com/becca.ferreira.98</a> c:</span></div>
<div style="text-align: center;">
Primeiramente, me perdoem por ter ficado tanto tempo longe do blog! Foi mais de um <u>mês</u> longe daqui e, acreditem, aconteceu muita coisa nesse intervalo!</div>
<div style="text-align: center;">
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 <i>HTML</i> para trazer tutoriais exclusivos para vocês!</div>
<div style="text-align: center;">
Enfim, trouxe o tutorial do menu que uso aqui no blog, que haviam me pedido o tutorial uma vez <i>(não lembro quem)</i>, é um menu meio simples mas aí vai o tutorial:<br />
<br />
<a name='more'></a></div>
<b>1.</b> Aperte <u>F3</u> e procure por <i>]]></b:skin></i><br />
<br />
<b>2.</b> Acima dessa tag, cole o seguinte código:<br />
<blockquote class="tr_bq">
#empire {<br />
font-family: 'Iceland';<br />
font-size: 40px; /*Tamanho da Fonte, fique à vontade para mudá-lo*/<br />
width: 100%;<br />
text-align: center;<br />
margin: 20px 0;<br />
}<br />
#empire:first-of-type {<br />
margin: 5px 0;<br />
}<br />
#empire a {<br />
text-decoration: none;<br />
font-weight: bold;<br />
color: #ffffff; /*Cor da Fonte*/<br />
position: relative; top: 0;<br />
-webkit-transition: all 0.1s ease-in;<br />
-moz-transition: top 0.1s ease-in, text-shadow 0.1s ease-in;<br />
-ms-transition: top 0.1s ease-in, text-shadow 0.1s ease-in;<br />
}<br />
#empire a:hover {<br />
text-shadow:5px 8px 1px #F8F8FF, 10px -15px 1px #B0C4DE;<br />
}</blockquote>
<b><br /></b><b>3. </b>Se quiserem usar a mesma fonte que eu uso aqui no blog, é só colar o código a seguir <u>acima</u> de <i><head></i><br />
<blockquote class="tr_bq">
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'/></blockquote>
<br />
<b>4.</b> Depois de salvar o seu HTML, vá no seu layout, adicione um gadget HTML/JavaScript e cole o seguinte código fazendo, óbviamente, as devidas alterações:<br />
<blockquote class="tr_bq">
<div style="position: absolute; margin-top: -230px;right: -100px;"><div id="empire"><br /><a href="/">Home</a> <a href="URL DO LINK 2">Link 2</a> <a href="URL DO LINK 3">Link 3</a> <a href="URL DO LINK 4">Link 4</a> <a href="URL DO LINK 5">Link 5</a> </div></blockquote>
luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com17tag:blogger.com,1999:blog-553170932806340250.post-47966207567762225992013-02-21T15:56:00.000-08:002016-06-14T17:39:32.392-07:00Efeito arco-íris nos links<div style="text-align: center;">
<img class="efeitoimagem" src="https://data.whicdn.com/images/52113843/tumblr_mi3a5cWohB1r2t4iqo1_500_large.jpg" width="430"></div>
<div style="text-align: center;">
Hi.</div>
<div style="text-align: center;">
Dei uma sumida né? É que o fio do carregador do meu notebook quebrou daí tive que usar o cel, mas enfim meu pai fez uma gambiarra aqui para eu poder carregar o notebook enquanto não compramos outro.</div>
<div style="text-align: center;">
Trouxe um tutorial para personalizar os links do blog, deixando um hover colorido e o tutorial é bem simples!<br />
<a name='more'></a></div>
<div style="text-align: center;">
<br />
É só adicionar um gadget <b>HTML/JavaScript</b> e colar o seguinte código nele.</div>
<div style="text-align: center;">
Depois é só salvar!</div>
<blockquote class="tr_bq">
<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js'/></blockquote>
<br /> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com5tag:blogger.com,1999:blog-553170932806340250.post-89867392507319106222013-02-15T16:13:00.000-08:002016-06-14T17:39:50.453-07:00Menu em Abas<div class="entrada">
<div style="text-align: center;">
<img class="efeitoimagem" src="https://data.whicdn.com/images/52480227/tumblr_miabscfJgD1rmm9r2o1_500_large.png" width="430"></div>
<div style="text-align: center;">
Hi.</div>
<div style="text-align: center;">
Trouxe um tutorial do menu em abas, só que esse tutorial é beeeem mais simples que os outros!</div>
<div style="text-align: center;">
Esse tutorial eu achei no blog <a href="http://space-sweet-girl.blogspot.com.br/">Sweet Girl</a>, então créditos à ele ;)</div>
<div style="text-align: center;">
Bem, vocês podem estar vizualizando o menu clicando aqui.<br />
<a name='more'></a></div>
<div style="text-align: center;">
Para obter o menu, basta ir no seu layout, adicionar um gadget <u>HTML/JavaScript</u> e colar o seguinte código:</div>
<blockquote class="tr_bq">
<script type="text/javascript"><br />
document.write('<style type="text/css">.tabber{display:none;}< \/style>');<br />
</style></script><br />
<script type="text/javascript" src="http://static.tumblr.com/dlelfro/DZqmha795/javascriptkw.js"></script><br />
<link rel="stylesheet" href="http://static.tumblr.com/dlelfro/Ic9mha75p/abas.css" type="text/css" media="screen" /><br />
<br /><br />
<div class="tabber"><br />
<div class="tabbertab" title="<b>Aba 1</b>"><b>Coisas da aba 1</b></div><br />
<div class="tabbertab" title="<b>Aba 2</b>"><b>Coisas da aba 2</b></div><br />
<div class="tabbertab" title="<b>Aba 3</b>"><b>Coisas da aba 3</b></div><br />
<div class="tabbertab" title="<b>Aba 4</b>"><b>Coisas da aba 4</b></div><br />
<div class="tabbertab" title="<b>Aba 5</b>"><b>Coisas da aba 5</b></div><br />
</div><br /></blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Pronto! Agora é só editar o que está em <b>negrito</b> e salvar :)</div>
<div style="text-align: center;">
<span style="font-size: x-small;">P.S.: Estou aceitando pedidos de tutoriais e demais utilidades para vocês! Quem quiser pedir algo é só clicar aqui e pedir lá o que quiser, só não esqueça de se identificar colocando seu nome e o url do seu blog (a url do blog fica tipo assim: "empirecss|blogspot")</span></div>
</div> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com6tag:blogger.com,1999:blog-553170932806340250.post-5811989335926717152013-02-13T07:51:00.002-08:002016-06-14T17:40:07.591-07:00"Leia Mais" personalizado<div class="entrada"><div style="text-align: center;">
<img class="efeitoimagem" src="https://data.whicdn.com/images/35080205/417689_476030952409677_902401326_n_large.jpg" width="430"></div>
<div style="text-align: center;">
Pelos comentários vi que gostaram mesmo do novo theme, fico muito feliz por isso *U*</div>
<div style="text-align: center;">
Bem, trouxe um tutorial bem útil para quem gosta do theme personalizado nos mínimos detalhes! Vamos aprender à personalizar o link <b>leia mais</b> ou <b>continue lendo</b> <strike>como vocês quiserem</strike>, vamos ao tutorial?<br />
<a name='more'></a></div>
<div style="text-align: center;">
Aperte <b>F3</b> e procure por <b>]]></b:skin></b></div>
<div style="text-align: center;">
Quando achar, cole o seguinte código <u>acima</u> da tag pesquisada fazendo as devidas alterações :)</div>
<blockquote class="tr_bq">
.jump-link {<br />
text-align: right; /* posicionamento do leia mais */<br />
margin-top: 5px; /* espaço que fica entre o leia mais e a postagem */<br />
font: normal 30px "Fjalla One";<br />
}<br />
.jump-link a {<br />
padding: 4px; /*acolchoamento entre o fundo e o texto */<br />
color: #000000; /* cor do texto */<br />
}</blockquote>
<br />
<div style="text-align: center;">
<i>"Fjalla One"</i> é o nome da fonte que eu costumo usar no continue lendo, se quiserem usá-la é só colar o código abaixo <u>acima</u> de <b><head></b></div>
<blockquote class="tr_bq">
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/></blockquote>
<br /></div> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com7tag:blogger.com,1999:blog-553170932806340250.post-27485637391310464282013-02-11T20:21:00.000-08:002016-06-14T17:40:29.679-07:00Rolagem Infinita no Theme<div class="entrada"><div style="text-align: center;">
<img src="https://data.whicdn.com/images/36622897/577360_339642372777692_1120106777_n_large.jpg" width="430"></div>
<div style="text-align: center;">
Uffa! Faz um tempão que não passo por aqui né? -.- Sorry .-.</div>
<div style="text-align: center;">
Bem, ontem foi meu aniversário! Happy birthday to me z/ Agora tenho oficialmente 13 anos -v-</div>
<div style="text-align: center;">
Também mudei o theme do blog, achei que o cabeçalho ficou muito divo <strike>diga-se de passagem</strike> porém, a área dos posts e a sidebar ficaram ruins :c Mas vou tentar melhorar.. </div>
<div style="text-align: center;">
Como a opinião de vocês é a que vale, o que acharam do layout? <strike>sejam sinceros</strike></div>
<div style="text-align: center;">
Ok, como o que vós interessa é o tutorial, vamos vê-lo logo né?</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
O tutorial é bem simples, é só colar o código abaixo antes de <u></head></u> e salvar!</div>
<div>
<blockquote class="tr_bq">
<span style="font-family: inherit;"><script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script></span></blockquote>
</div>
<br /></div> luce .http://www.blogger.com/profile/17094823317695359781noreply@blogger.com8