tag:blogger.com,1999:blog-9937635114116054532024-02-19T08:24:57.193-03:00My Fluffy RainbowJéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.comBlogger25125tag:blogger.com,1999:blog-993763511411605453.post-43017516260973994422015-08-10T12:00:00.000-03:002015-08-10T12:00:00.857-03:00Como usar Skins<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI6yjlKK7m4vLLezHLP34799ndf6dMTPPmImGPkz2h0zSNJfT2JPRD7_Ij9JIRygI8p8yRXGFL5m9upZyCds8GD1lD9IOu9oLyimy9tPlWZYxT6PMJgGJHpkAuRf3cms2xJzLyf1Ucs9w/s1600/11.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI6yjlKK7m4vLLezHLP34799ndf6dMTPPmImGPkz2h0zSNJfT2JPRD7_Ij9JIRygI8p8yRXGFL5m9upZyCds8GD1lD9IOu9oLyimy9tPlWZYxT6PMJgGJHpkAuRf3cms2xJzLyf1Ucs9w/s1600/11.png" /></a></div>
<div style="text-align: justify;">
<b><span style="color: #93c47d;">Bom Dia!!</span></b> Hoje eu resolvi trazer um tutorial de como usar Skins do <i><span style="color: #93c47d;">www.blogskins.com</span></i>, eu já usei vários de lá e exite muitos que são muito fofos e a unica coisa ruim deles e que tudo é pelo HTML, ou seja, se você for mexer no conteúdo de um Gadget seu vai ter que mexer no HTML, mas fora isso é super fácil de usar.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então se você nunca soube como usa-lo e sempre desejou usar aquele layout super fofinho que você viu lá essa é sua chance de aprender como.</div>
<div style="text-align: justify;">
<a name='more'></a><br /></div>
<div style="text-align: center;">
<b><span style="color: #93c47d;">Tutorial</span></b></div>
<div style="text-align: justify;">
<i><span style="color: #b6d7a8;">1° Passo:</span></i> Escolha a Skin que você mais gostou no <i><span style="color: #93c47d;">www.blogskins.com</span></i></div>
<div style="text-align: justify;">
<i><span style="color: #b6d7a8;">2° Passo:</span></i> Baixe ela na opção Blogger Main</div>
<div style="text-align: justify;">
<span style="color: #93c47d;"><i>3° Passo:</i> </span>Você irar baixar um bloco de notas, abra-o.</div>
<div style="text-align: justify;">
<i><span style="color: #93c47d;">4° Passo: </span></i>Na pagina do seu blog no blogger vá em "<i><span style="color: #93c47d;">Modelo</span></i>" e no final da pagina clique em "<span style="color: #93c47d;"><i>Reverter para os modelos clássicos</i></span>".</div>
<div style="text-align: justify;">
<i><span style="color: #6aa84f;">5° Passo:</span></i> Vai perguntar se você realmente deseja reverte-lo para o modelo antigo você deve clicar na primeira opção "<span style="color: #6aa84f;"><i>Reverter para o modelo clássico</i></span>".</div>
<div style="text-align: justify;">
<i><span style="color: #6aa84f;">6° Passo:</span></i> A pagina ira atualizar e descendo um pouco terá uma área com código abaixo do nome "<span style="color: #6aa84f;"><i>Editar HTML do modelo</i></span>".</div>
<div style="text-align: justify;">
<span style="color: #38761d;"><i>7° Passo:</i> </span>Cole nesta área o código que esta no bloco de nota que você baixou.</div>
<div>
<span style="color: #38761d;"><i>8° Passo:</i> </span>A partir dai toda alteração do layout do blog deve ser feito neste código, inclusive as alterações nos textos e links dos Gadgets.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #93c47d;">Alguns Modelos que eu acho bem legais:</span></b></div>
<a href="http://www.blogskins.com/screenshot/401698" target="_blank"><img src="http://d2wss9bif9q3el.cloudfront.net/401/698/screenshots/4016981380486304.jpg" height="94" width="195" /></a><a href="http://www.blogskins.com/screenshot/393819" target="_blank"><img src="http://d2wss9bif9q3el.cloudfront.net/393/819/screenshots/3938191363124391.jpg" height="94" width="195" /></a><a href="http://www.blogskins.com/info/397414/" target="_blank"><img src="http://d2wss9bif9q3el.cloudfront.net/397/414/screenshots/3974141370964693.jpg" height="94" width="195" /></a></div>
<div>
<br />
<div style="text-align: center;">
<b><span style="color: #93c47d;">Se tiverem qualquer problemas na instalação da skin comentem que eu farei o máximo para ajuda-los.</span></b></div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com4tag:blogger.com,1999:blog-993763511411605453.post-66185111754252166872015-08-08T12:00:00.000-03:002015-08-08T12:00:04.115-03:00Menu Cute Simples<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYssRtV7H_skClG_rZN3MECywBCh40V3bLlVlAo3umudVYbX0-IApgyoql5PpjLjdKPtia_D1jZZBNokUcgpdUBulDDJJOBqzZvl5AugfwB1xOvN6kAdNsh5CvavC4_OVuv4hDjcKixeM/s1600/12.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #e06666;">Boa Tarde!!</span></b> Como esta sendo a volta a aulas de vocês? eu to tranquila, minhas aulas de verdade só começaram faz alguns dias e começo de semestre é sempre tranquilo, porque entra novas aulas e novos professores que se apresentam e falam sobre sua matéria, enfim só mais para o fim do semestre vou começar a ter trabalhos e provas então essa época é sempre tranquila.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hoje temos mais um menu, dessa vez eu crie ele então é exclusivo do blog \o/ Ele é bem simples, mas ao mesmo tempo fofo e alterando as cores fica bom com qualquer layout. Se quiserem conferir o Preview <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2015/07/teste.html" target="_blank">clique aqui</a>.</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><br />
<div style="text-align: center;">
<b><span style="color: #ea9999;">Vamos ao Tutorial:</span></b></div>
<div style="text-align: justify;">
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #e06666;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<i><span style="color: #cc0000;">3° Passo:</span></i> Cole acima de "]]></b:skin>" o código:<br />
<blockquote class="tr_bq">
/*-----Início do Menu Cute Simples por myfluffyrainbow.blogspot.com -----*/<br />
.cutes {<br />
width: 228px; /*----- Largura -----*/<br />
text-align:center;<br />
margin-bottom:1px;<br />
padding:1px; font-size: 8pt;<br />
display:inline-block;<br />
color: #fff; /*----- Cor da Fonte -----*/<br />
text-transform: uppercase;<br />
background-color:#F9CDAD; /*----- Cor do Fundo -----*/<br />
letter-spacing:1px;<br />
-webkit-transition-duration: .80s;<br />
}<br />
.cutes:hover{<br />
color: #fff; /*----- Cor da Fonte Hover -----*/<br />
background-color:#FC9D9A; /*----- Cor do Fundo Hover -----*/<br />
border-radius: 5px;<br />
-webkit-transition-duration: .80s;<br />
}<br />
/** FIM Menu Cute Simples **/</blockquote>
</div>
<div style="text-align: justify;">
<div>
<i><span style="color: #cc0000;">5° Passo:</span><span style="color: #a2c4c9;"> </span></i>Edite o código conforme seu gosto e preferencia.</div>
<div>
<i><span style="color: #990000;">6° Passo:</span></i> Cole em um Gadget Java/Script o seguinte código:<br />
<blockquote class="tr_bq">
<a class="cutes" href="http://www.blogger.com/Link" target="_blank">Nome</a><br />
<a class="cutes" href="http://www.blogger.com/Link" target="_blank">Nome</a><br />
<a class="cutes" href="http://www.blogger.com/Link" target="_blank">Nome</a></blockquote>
</div>
<div>
<i><span style="color: #660000;">7° Passo:</span></i> Altere o código colocando o link e o nome do link.</div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: center;">
<b><span style="color: #ea9999;">Espero que tenham gostado do tutorial e do menu e se usarem deem os devidos créditos <3</span></b></div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com0tag:blogger.com,1999:blog-993763511411605453.post-25149937148517147462015-08-06T12:00:00.001-03:002015-08-06T12:00:00.637-03:00Gadget de Seguidores Personalizado<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4DrencH5AdGFKvlvqPXM6MBXAdmVH7fdaebYHreaLeCM4htiAK5hiVkJ_8lcZS4rGwweF5-tsy-miateDi-g0Y_bLcaotzUeEjk4sUn49AJKbWb4XR8qhSQxGxD96tTQttaj4kZzizUI/s1600/10.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #76a5af;">Bom Dia!!</span></b> Minha ferias infelizmente já chegou ao fim Ç.Ç Mas como ainda não estou estagiando eu ainda tenho bastante tempo para postar e fazer tudo que eu gosto, como passar a tarde inteira assistindo series <3 Vocês costumam acompanhar alguma série especifica? Eu atualmente acompanho mais de 20 séries diferente ao mesmo tempo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hoje o tutorial é de como personalizar o Gadget de Seguidores, alterar o tamanho das fotinhas, fonte, cor do link, enfim deixa-lo mais a cara do seu blog, eu atualmente uso essa forma de Gadget no blog e alterei seu tamanho para ele se encaixar perfeitamente no blog. </div>
<div style="text-align: justify;">
</div>
<a name='more'></a><br />
<div style="text-align: center;">
<b><span style="color: #45818e;">Tutorial</span></b></div>
<div style="text-align: justify;">
<i><span style="color: #a2c4c9;">1° Passo:</span></i> Abra seu blog normalmente no seu navegador e aperte Ctrl + U.</div>
<div style="text-align: justify;">
<span style="color: #a2c4c9;"><i>2° Passo:</i></span> Vai abrir sozinho uma pagina com o código fonte do seu blog, aperte Ctrl + F.</div>
<div style="text-align: justify;">
<span style="color: #76a5af;"><i>3° Passo:</i></span> Na caixinha que vai abrir na parte superior direita do blog cole: <i><span style="color: #76a5af;"><div id='Followers1-wrapper'></span></i></div>
<div style="text-align: justify;">
<i><span style="color: #76a5af;">4° Passo:</span></i> Depois de apertar "Enter" você será direcionado a linha onde o código esta.</div>
<div style="text-align: justify;">
<span style="color: #45818e;"><i>5° Passo:</i></span> Copie da linha <span style="color: #45818e;"><i><div id='Followers1-wrapper'></i></span> até a linha anterior a <i><span style="color: #45818e;"><div class='clear'></div></span></i></div>
<div style="text-align: justify;">
<span style="color: #45818e;"><i>6° Passo:</i></span> Apague seu Gadget de Seguidor.</div>
<div style="text-align: justify;">
<span style="color: #134f5c;"><i>7° Passo:</i></span> Crie um Gadget Java/Script e cole o código que você copiou.</div>
<div style="text-align: justify;">
<i><span style="color: #134f5c;">8° Passo:</span></i> Personalize conforme sua paleta e layout, personalize a parte do código abaixo:</div>
<div style="text-align: justify;">
<blockquote class="tr_bq">
skin['FACE_SIZE'] = '20'; /*-----Tamanho da Foto dos Seguidores-----*/<br />
skin['HEIGHT'] = "260"; /*-----Altura do Gadget-----*/<br />
skin['TITLE'] = "Seguidores";<br />
skin['BORDER_COLOR'] = "transparent";<br />
skin['ENDCAP_BG_COLOR'] = "transparent";<br />
skin['ENDCAP_TEXT_COLOR'] = "#777777"; /*-----Cor ds Fonte-----*/<br />
skin['ENDCAP_LINK_COLOR'] = "#f7b0bf"; /*-----Cor do Link-----*/<br />
skin['ALTERNATE_BG_COLOR'] = "transparent";<br />
<br />
skin['CONTENT_BG_COLOR'] = "transparent";<br />
skin['CONTENT_LINK_COLOR'] = "#f7b0bf";<br />
skin['CONTENT_TEXT_COLOR'] = "#777777";<br />
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#3778cd";<br />
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#777777";<br />
skin['CONTENT_HEADLINE_COLOR'] = "#444444";<br />
skin['FONT_FACE'] = "normal normal 13px \x27Trebuchet MS\x27, Trebuchet, sans-serif";<br />
google.friendconnect.container.setParentUrl("/");<br />
google.friendconnect.container["renderMembersGadget"](<br />
{id: "div-1lh2satn1f2lm",<br />
height: 260, /*-----Altura do Gadget-----*/</blockquote>
<div>
<i><span style="color: #0c343d;">9° Passo:</span></i> Pronto, salve as alterações do Gadget.</div>
<div>
<br /></div>
<div style="text-align: center;">
<b><span style="color: #76a5af;">Se tiverem qualquer dificuldade para usar o tutorial e precisarem de ajuda é só pedir *-*</span></b></div>
<div style="text-align: center;">
<b><span style="color: #76a5af;">Espero que tenham gostado do tutorial.</span></b></div>
<div>
<br /></div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com1tag:blogger.com,1999:blog-993763511411605453.post-10911891167400119952015-08-04T12:00:00.001-03:002015-08-04T12:00:01.445-03:00Efeito Tree<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihgYfxeF9RfP4ElTtD-kShnpF2iguATfz_r1-sG5300_DNq6KUs2kVz92gIUn6euoFBEMumimaHGuJ6aCk7FFK434VQfSS6GJrY8BEMhA9u1rVEcZUsbKVvK12QinMFzCaWBcXFAJvzNg/s1600/09.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #6fa8dc;">Boa Noite!!</span></b> Para fujir um pouco dos menus de marcadores resolvi trazer o efeito super legal que encontrei no Kawaii World, prometo que esse é o ultimo tutorial de lá que eu reposto, o efeito da para usar como menu de marcadores ou elite de afiliados e você pode usar imagens que vão se combinando ao invés de todas iguais.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Esse tutorial é outro super fácil onde não é necessário mexer no HTML do blog e você só precisa colar o código no Gagdget desejado. <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2015/07/efeito-tree.html" target="_blank">Preview</a>.</div>
<div style="text-align: justify;">
<a name='more'></a><br /></div>
<div style="text-align: justify;">
<div style="text-align: center;">
<b><span style="color: #6fa8dc;">Tutorial</span></b></div>
<div>
<i><span style="color: #9fc5e8;">1° Passo:</span></i> Cole em um Gadget Java/Script em que deseja o menu o seguinte código:</div>
<div>
<blockquote class="tr_bq">
<style><br />
#comida a img{<br />
width:auto;<br />
height:auto;<br />
display:inline;<br />
margin-right:2px;<br />
margin-left:1px;<br />
margin-top:1px;<br />
margin-bottom:1px;<br />
padding: 3px;<br />
background: #ffe8ed;<br />
border: 1px solid #ffd1dc;<br />
outline: solid 1px #fff;<br />
outline-offset: -5px;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}<br />
#comida a:hover img{<br />
outline: solid 3px transparent;<br />
opacity: 0.5;<br />
outline-offset: -20px;<br />
}<br />
</style><br />
<div id="comida"><br />
<center><br />
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://static.tumblr.com/0xqvkot/XWpmsgcou/1850.png" /></a><br />
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://static.tumblr.com/0xqvkot/Oixmsgcpe/1854.png" /></a><br />
</center><br />
</div></blockquote>
<span style="color: #6fa8dc;">2° Passo:</span> Altere o código com os dados do seu blog e da imagem desejada.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #6fa8dc;">Bom Espero que tenha Gostado <3</span></b></div>
</div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com1tag:blogger.com,1999:blog-993763511411605453.post-25443961560431126172015-08-02T12:00:00.001-03:002015-08-02T12:00:01.005-03:00Imagens na Largura Total da Postagem<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYssRtV7H_skClG_rZN3MECywBCh40V3bLlVlAo3umudVYbX0-IApgyoql5PpjLjdKPtia_D1jZZBNokUcgpdUBulDDJJOBqzZvl5AugfwB1xOvN6kAdNsh5CvavC4_OVuv4hDjcKixeM/s1600/12.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #ea9999;">Bom Dia!!</span></b> Hoje vim trazer o pedido da Fujioka Haruhi de um tutorial em que a imagem ficasse do tamanho total da postagem, resolvi trazer duas formas de fazer isso, porque uma deixa todas as imagens de todas as postagens com a mesma largura que deve ser ajustada a largura da área de postagem, já a outra forma você usa apenas nas imagens que desejar, assim você pode usar só na primeira e deixar as outras imagens do tamanho normal.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Lembrando que caso você deseje um tutorial especifico é só fazer um pedido por comentário que assim que possível eu estarei preparando ele e postando aqui para que você use.</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><div style="text-align: center;">
<b><span style="color: #ea9999;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="color: #ea9999;">1° Tutorial: Deixando todas as imagens do post com a largura total da área de postagem</span></b></div>
<div style="text-align: justify;">
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div>
<i><span style="color: #e06666;">2° Passo:</span></i> Procure por(Usando Ctrl+F): <span style="font-size: x-small;">(Procure pela primeira linha, mas cole abaixo das duas linhas o código do próximo passo)</span></div>
</div>
<div style="text-align: justify;">
<blockquote class="tr_bq">
/* Posts<br />
----------------------------------------------- */</blockquote>
</div>
<div style="text-align: justify;">
<i><span style="color: #cc0000;">3° Passo:</span></i> Cole abaixo do código procurado :<br />
<blockquote class="tr_bq">
.post img{<br />
border: 0; /* borda na imagem em zero, não altere */<br />
padding: 0; /* espaço entre margens e imagem, não altere */<br />
margin: -10px;<br />
width: <b><span style="color: #ea9999;">935px;</span></b> /* tamanho máximo da imagem, pode e deve ser alterado */<br />
}</blockquote>
</div>
<div style="text-align: justify;">
<div>
<i><span style="color: #cc0000;">4° Passo:</span><span style="color: #a2c4c9;"> </span></i>Edite o numero que esta em negrito deixando do tamanho da área de postagem.<span style="font-size: x-small;">(Dica edite o numero e visualize como as imagens vai ficando no blog, assim você poderá deixar do tamanho exato da área de postagem)</span></div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<b><span style="color: #ea9999;">2° Tutorial: Deixando apenas imagens desejadas com a largura total da área de postagem</span></b></div>
<div style="text-align: justify;">
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá no HTML do post</div>
<div style="text-align: justify;">
<i><span style="color: #e06666;">2° Passo:</span></i> Cole aonde deseja a imagem com a largura total da área de postagem.<br />
<blockquote class="tr_bq">
<img height="<b><span style="color: #ea9999;">299</span></b>" src="<b><span style="color: #ea9999;">URL da Imagem</span></b>" width="<b><span style="color: #ea9999;">640</span></b>" /></blockquote>
</div>
<div style="text-align: justify;">
<i><span style="color: #cc0000;">3° Passo:</span></i> Edite as areas em negritos, o primeiro numero é a altura da imagem e o segundo a largura que deve ser a largura total da área da postagem.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #ea9999;">Espero que essas duas formas ajudem vocês a deixar as suas postagens arrumadinhas *--*</span></b></div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com2tag:blogger.com,1999:blog-993763511411605453.post-69758753065497698522015-07-30T12:00:00.000-03:002015-07-30T12:00:01.675-03:00Menu Para Marcadores #4<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJDigdG_MxZFo__zW9PAkIhGrNOwAv4925jRShyb1CXlr2HgSjM9XpMnTYVLqBYfhfG1ZnwREWBilJtDSeM9rTLv7FzEPT6P6uFq-7FOF6Mry-doANIO8OZJJPyOLjVH5c-y4lcnLDms4/s1600/08.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #45818e;">Boa Noite!!!</span></b> Hoje temos mais um modelo de menu para marcadores com algumas cores diferentes para que vocês escolham o que melhor se adapta ao seu layout ou ao projeto que você esta criando. Esse menus são sempre uteis e essencial para fazer um layout personalizado bem legal, então espero que vocês aproveite esses menus.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Como os menus anteriores esses também foram retirados do blog Kawaii World, que esta sem ser atualizado faz um bom tempo, mas mesmo assim seus tutoriais ainda são bem uteis e legais. Para conferir o Preview <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2015/07/menu-para-marcadores-4.html" target="_blank">clique aqui</a>.<br />
<a name='more'></a></div>
<br />
<div>
<div style="text-align: center;">
<b><span style="color: #76a5af;">Tutorial</span></b></div>
<div style="text-align: justify;">
<i><span style="color: #d0e0e3;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #a2c4c9;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<span style="color: #76a5af;"><i><span style="background-color: white;">3° Passo:</span></i> </span>Cole acima de "]]></b:skin>" o código do modelo escolhido:<br />
Modelo 1:<br />
<blockquote class="tr_bq">
#tags3{<br />
background-color: #ffeef3;<br />
width: 54px;<br />
height: 11px;<br />
float: left;<br />
font-family: verdana;<br />
font-size: 11px;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
border: 1px dashed #eab5c5;<br />
margin-bottom: 3px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 10px #fbe6ed;<br />
-moz-box-shadow: inset 0 0 10px #fbe6ed;<br />
box-shadow: inset 0 0 10px #fbe6ed;<br />
color: #f7b0bf;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}</blockquote>
Modelo 2:<br />
<blockquote class="tr_bq">
#tags3{<br />
background-color: #dbe4ee;<br />
width: 54px;<br />
height: 11px;<br />
float: left;<br />
font-family: verdana;<br />
font-size: 11px;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
border: 1px dashed #afbdcd;<br />
margin-bottom: 3px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 10px #d2dce7;<br />
-moz-box-shadow: inset 0 0 10px #d2dce7;<br />
box-shadow: inset 0 0 10px #d2dce7;<br />
color: #a5b3c2;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}</blockquote>
Modelo 3:<br />
<blockquote class="tr_bq">
#tags3{<br />
background-color: #f7f0de;<br />
width: 54px;<br />
height: 11px;<br />
float: left;<br />
font-family: verdana;<br />
font-size: 11px;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
border: 1px dashed #dbcea9;<br />
margin-bottom: 3px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 10px #f5eed9;<br />
-moz-box-shadow: inset 0 0 10px #f5eed9;<br />
box-shadow: inset 0 0 10px #f5eed9;<br />
color: #d8c899;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}</blockquote>
</div>
<div style="text-align: justify;">
</div>
<div>
<div style="text-align: justify;">
Modelo 4:</div>
<blockquote class="tr_bq" style="text-align: justify;">
#tags3{<br />
background-color: #fae7d1;<br />
width: 54px;<br />
height: 11px;<br />
float: left;<br />
font-family: verdana;<br />
font-size: 11px;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
border: 1px dashed #f2c692;<br />
margin-bottom: 3px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 10px #f9e4cc;<br />
-moz-box-shadow: inset 0 0 10px #f9e4cc;<br />
box-shadow: inset 0 0 10px #f9e4cc;<br />
color: #e2b179;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}</blockquote>
<div style="text-align: justify;">
Modelo 5:</div>
<blockquote class="tr_bq" style="text-align: justify;">
#tags3{<br />
background-color: #eceede;<br />
width: 54px;<br />
height: 11px;<br />
float: left;<br />
font-family: verdana;<br />
font-size: 11px;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
border: 1px dashed #d3d7af;<br />
margin-bottom: 3px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 10px #ebeddb;<br />
-moz-box-shadow: inset 0 0 10px #ebeddb;<br />
box-shadow: inset 0 0 10px #ebeddb;<br />
color: #c5ca94;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}</blockquote>
<div style="text-align: justify;">
Modelo 6:</div>
<blockquote class="tr_bq" style="text-align: justify;">
#tags3{<br />
background-color: #e7e1eb;<br />
width: 54px;<br />
height: 11px;<br />
float: left;<br />
font-family: verdana;<br />
font-size: 11px;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
border: 1px dashed #c8b8d0;<br />
margin-bottom: 3px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 10px #e4dde8;<br />
-moz-box-shadow: inset 0 0 10px #e4dde8;<br />
box-shadow: inset 0 0 10px #e4dde8;<br />
color: #b6a1c1;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}</blockquote>
<i><span style="color: #45818e;">4° Passo:</span></i> Salve as Alterações.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: start;">
<div style="text-align: start;">
<div style="text-align: start;">
<div style="text-align: start;">
<i><span style="color: #134f5c;">5° Passo:</span></i> Coloque nos Gadgets em que deseja colocar o menu:</div>
<blockquote class="tr_bq" style="text-align: start;">
<a href="seu link" id="tags3">Texto</a><br />
<a href="seu link" id="tags3">Texto</a><br />
<a href="seu link" id="tags3">Texto</a></blockquote>
<div style="text-align: start;">
<i><span style="color: #0c343d;">6° Passo:</span></i> Altere os locais indicados e salve.</div>
<div style="text-align: start;">
<br /></div>
<div style="text-align: center;">
<span style="color: #76a5af;"><b>Espero que tenham gostado desse modelo de menu para marcadores *-*</b></span></div>
<div style="text-align: center;">
<span style="color: #76a5af;"><b>Lembrando que todos eles são do Kawaii World.</b></span></div>
</div>
</div>
</div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com2tag:blogger.com,1999:blog-993763511411605453.post-23497106733963886202015-07-28T12:00:00.001-03:002015-07-28T12:00:02.331-03:00Menu Para Marcadores #3<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUh7fOvQOJ7ORMppLufA8nyPtOH_Llgz-hBkNe0lBhoRQHloGo4b-i5G9mFYbI3r_DuEaDsqQxKNiwZ_8XHGopQ4e4i8jkkbNOKoOooarfrAGQzMPTW192jwNhCAPHncvXaMyqKpf5gp8/s1600/07.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #6fa8dc;">Bom Dia!!!</span></b> Essa semana teremos uma maratona com menu para marcadores, no total estou programando essa e mais duas postagens com esse menus sem contar com a postagem anterior que tivemos 6 tipos de menus para marcadores diferentes, então se tiver procurando esse tipo de menu é bem provável que encontre pelo menos um que você goste.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Os menus de hoje como os da postagem anterior também foram retirados do blog Kawaii World, mesmo ele não sendo mais atualizado ele tem bons tutorias. <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2015/07/menu-para-marcadores-3.html" target="_blank">Previews</a>.</div>
<a name='more'></a><div>
<div style="text-align: center;">
<b><span style="color: #e06666;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="color: #76a5af;">Tutorial</span></b></div>
<div style="text-align: justify;">
<i><span style="color: #d0e0e3;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #a2c4c9;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<span style="color: #76a5af;"><i><span style="background-color: white;">3° Passo:</span></i> </span>Cole acima de "]]></b:skin>" o código do modelo escolhido:<br />
Modelo 1:<br />
<blockquote class="tr_bq">
#tags{<br />
background-color: #e5e1e7;<br />
width: 56px;<br />
height: 12px;<br />
font-family: verdana;<br />
font-size: 11px;<br />
float: left;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
margin-bottom: 3px;<br />
color: #b2a1ad;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 5px #dcd5df;<br />
-moz-box-shadow: inset 0 0 5px #dcd5df;<br />
box-shadow: inset 0 0 5px #dcd5df;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}<br />
#tags2{<br />
background-color: #ffe4ea;<br />
width: 56px;<br />
height: 12px;<br />
float: left;<br />
font-family: verdana;<br />
font-size: 11px;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
margin-bottom: 3px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 5px #fdd7df;<br />
-moz-box-shadow: inset 0 0 5px #fdd7df;<br />
box-shadow: inset 0 0 5px #fdd7df;<br />
color: #f7b0bf;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;</blockquote>
Modelo 2:<br />
<blockquote class="tr_bq">
#tags{<br />
background-color: #edeccf;<br />
width: 56px;<br />
height: 12px;<br />
font-family: verdana;<br />
font-size: 11px;<br />
float: left;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
margin-bottom: 3px;<br />
color: #c9c79a;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 5px #dfddb5;<br />
-moz-box-shadow: inset 0 0 5px #dfddb5;<br />
box-shadow: inset 0 0 5px #dfddb5;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}<br />
#tags2{<br />
background-color: #ffe4ea;<br />
width: 56px;<br />
height: 12px;<br />
float: left;<br />
font-family: verdana;<br />
font-size: 11px;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
margin-bottom: 3px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 5px #fdd7df;<br />
-moz-box-shadow: inset 0 0 5px #fdd7df;<br />
box-shadow: inset 0 0 5px #fdd7df;<br />
color: #f7b0bf;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}</blockquote>
Modelo 3:<br />
<blockquote class="tr_bq">
#tags{<br />
background-color: #ffecdb;<br />
width: 56px;<br />
height: 12px;<br />
font-family: verdana;<br />
font-size: 11px;<br />
float: left;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
margin-bottom: 3px;<br />
color: #f4b985;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 5px #f9e3cf;<br />
-moz-box-shadow: inset 0 0 5px #f9e3cf;<br />
box-shadow: inset 0 0 5px #f9e3cf;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}<br />
#tags2{<br />
background-color: #e3dbdf;<br />
width: 56px;<br />
height: 12px;<br />
float: left;<br />
font-family: verdana;<br />
font-size: 11px;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 3px;<br />
margin-bottom: 3px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-webkit-box-shadow: inset 0 0 5px #e2d6de;<br />
-moz-box-shadow: inset 0 0 5px #e2d6de;<br />
box-shadow: inset 0 0 5px #e2d6de;<br />
color: #b3999a;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}</blockquote>
</div>
<div style="text-align: justify;">
</div>
<div>
<i><span style="color: #45818e;">4° Passo:</span></i> Salve as Alterações.</div>
</div>
<div style="text-align: justify;">
<div style="text-align: start;">
<div style="text-align: start;">
<div style="text-align: start;">
<div style="text-align: start;">
<i><span style="color: #134f5c;">5° Passo:</span></i> Coloque nos Gadgets em que deseja colocar o menu:</div>
<blockquote class="tr_bq" style="text-align: start;">
<a href="seu link" id="tags">Texto</a><br />
<a href="seu link" id="tags2">Texto</a><br />
<a href="seu link" id="tags">Texto</a><br />
<a href="seu link" id="tags2">Texto</a><br />
<a href="seu link" id="tags">Texto</a><br />
<a href="seu link" id="tags2">Texto</a></blockquote>
<div style="text-align: start;">
<i><span style="color: #0c343d;">6° Passo:</span></i> Altere os locais indicados e salve.</div>
<div style="text-align: start;">
<br /></div>
<div style="text-align: center;">
<b><span style="color: #76a5af;">Espero que tenham gostado desse modelo de menu para marcadores *-*</span></b></div>
<div style="text-align: center;">
<b><span style="color: #76a5af;">Lembrando que todos eles são do Kawaii World.</span></b></div>
<div style="text-align: center;">
</div>
</div>
</div>
</div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com0tag:blogger.com,1999:blog-993763511411605453.post-43239111920868158042015-07-28T12:00:00.000-03:002015-07-28T12:00:03.853-03:00Menu Para Marcadores #2 (6 Menus)<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGFWfHcpUC-koT1YvBqC3XX01wEC8626QLNUgm4uRjbLkUOmZxH-2OMDMn6hjgqs6X7RbQVUkxqjoQJTHucN79ND5z66XnzYU__08Y_xD0baLGCFpqjM4WHLjZc0M16u8LbYOsA5Tn1ro/s1600/05.png" /><br />
<div style="text-align: justify;">
<b><span style="color: #e06666;">Boa Tarde!!!</span></b> Hoje eu venho trazer alguns menus para marcadores/tags, eles foram feitos pela Kaorii do blog Kawaii World, que não esta mais sendo atualizado, eu já usei alguns e acho todos bem legais e combinam com qualquer layout que você planeje criar e por isso resolvi trazer eles para vocês, tem para todos os gostos <3</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Como disse são menus para marcadores do KW, no total são 6 modelos e são super fácil de usar já que não é necessário mexer no HTML do blog, pois só precisa colocar o código no gadget que você deseja ele e editar. <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2015/07/menu-para-marcadores-2.html" target="_blank">Previews</a>.</div>
<a name='more'></a><br />
<div>
<div>
<b><span style="color: #e06666;">Modelo 1</span></b></div>
<div style="text-align: justify;">
<div>
<i><span style="color: #f4cccc;">1° Passo:</span></i> Cole em um Gadget Java/Script em que deseja o menu o seguinte código:</div>
<div style="text-align: start;">
<blockquote class="tr_bq">
<style><br />
.direita { float:right; width:49%; text-align:justify; }<br />
.esquerda { float:left; width:49%; text-align:justify; }<br />
#menutags20{<br />
background-color: #ffeaee;<br />
width: 98%;<br />
height: 11px;<br />
float: left;<br />
font: 11px arial;<br />
color: #e6adb9;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin: 1px;<br />
margin-bottom: 4px;<br />
border-top: 1px solid #f7d0d8;<br />
border-bottom: 1px solid #f7d0d8;<br />
border-left: 3px solid #f7d0d8;<br />
border-right: 3px solid #f7d0d8;<br />
text-shadow: 1px 1px 0 #fff2f4;<br />
} </style><br />
<div class="esquerda"><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
</div><br />
<div class="direita"><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
</div><br />
<div>
<br /></div>
</blockquote>
<span style="color: #ea9999;">2° Passo:</span> Altere o código com os dados do seu blog.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #e06666;"><br /></span></b>
<b><span style="color: #e06666;">Modelo 2</span></b></div>
<div style="text-align: justify;">
<div>
<i><span style="color: #f4cccc;">1° Passo:</span></i> Cole em um Gadget Java/Script em que deseja o menu o seguinte código:</div>
<div style="text-align: start;">
<blockquote class="tr_bq">
<style><br />
.direita { float:right; width:49%; text-align:justify; }<br />
.esquerda { float:left; width:49%; text-align:justify; }<br />
#menutags20{<br />
background-color: #e9e9e9;<br />
width: 98%;<br />
height: 11px;<br />
float: left;<br />
font: 10px arial;<br />
color: #a2a2a2;<br />
padding: 1px 0 4px 0;<br />
letter-spacing: 2px;<br />
text-align: center;<br />
margin: 1px;<br />
text-transform: lowercase;<br />
margin-bottom: 4px;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}<br />
#menutags20:hover{<br />
background-color: #525252;<br />
width: 98%;<br />
height: 11px;<br />
float: left;<br />
font: 10px arial;<br />
color: #dad7d7;<br />
padding: 1px 0 4px 0;<br />
letter-spacing: 2px;<br />
text-align: center;<br />
margin: 1px;<br />
text-transform: lowercase;<br />
margin-bottom: 4px;<br />
}<br />
</style><br />
<div class="esquerda"><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
</div><br />
<div class="direita"><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
</div><br />
<div>
<br /></div>
</blockquote>
<span style="color: #ea9999;">2° Passo:</span> Altere o código com os dados do seu blog.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #e06666;"><br /></span></b>
<b><span style="color: #e06666;">Modelo 3</span></b></div>
<div style="text-align: justify;">
<div>
<i><span style="color: #f4cccc;">1° Passo:</span></i> Cole em um Gadget Java/Script em que deseja o menu o seguinte código:</div>
<div style="text-align: start;">
<blockquote class="tr_bq">
<style><br />
.direita { float:right; width:49%; text-align:justify; }<br />
.esquerda { float:left; width:49%; text-align:justify; }<br />
#menutags20{<br />
background-color: #e9eef3;<br />
width: 98%;<br />
height: 11px;<br />
float: left;<br />
font: 11px trebuchet ms;<br />
color: #b2bfcb;<br />
padding: 1px 0 6px 0;<br />
letter-spacing: 1px;<br />
border-left: 1px solid #dae0e6;<br />
border-top: 1px solid #dae0e6;<br />
border-right: 1px solid #dae0e6;<br />
border-bottom: 3px solid #ced5db;<br />
text-align: center;<br />
margin: 1px;<br />
margin-bottom: 4px;<br />
-webkit-border-radius: 2px;<br />
-moz-border-radius: 2px;<br />
border-radius: 2px;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}<br />
<br />
<br />
</style><br />
<div class="esquerda"><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
</div><br />
<div class="direita"><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
<a href="SEU LINK AQUI" id="menutags20">Nome</a><br />
</div><br />
<div>
<br /></div>
</blockquote>
<span style="color: #ea9999;">2° Passo:</span> Altere o código com os dados do seu blog.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #e06666;"><br /></span></b>
<b><span style="color: #e06666;">Modelo 4</span></b></div>
<div style="text-align: justify;">
<div>
<i><span style="color: #f4cccc;">1° Passo:</span></i> Cole em um Gadget Java/Script em que deseja o menu o seguinte código:</div>
<div style="text-align: start;">
<blockquote class="tr_bq">
<style><br />
@font-face { font-family: "wish"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }<br />
#afiliados5{<br />
background-color: #fbf6fc;<br />
width: 23px;<br />
height: 10px;<br />
font-family: wish;<br />
font-size: 8px;<br />
float: left;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 5px;<br />
margin-bottom: 4px;<br />
color: #cac2ce;<br />
line-height: 13px;<br />
border: 1px solid #e8ddee;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
return: false;<br />
}<br />
</style><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<div>
<br /></div>
</blockquote>
<span style="color: #ea9999;">2° Passo:</span> Altere o código com os dados do seu blog.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #e06666;"><br /></span></b>
<b><span style="color: #e06666;">Modelo 5</span></b></div>
<div style="text-align: justify;">
<div>
<i><span style="color: #f4cccc;">1° Passo:</span></i> Cole em um Gadget Java/Script em que deseja o menu o seguinte código:</div>
<div style="text-align: start;">
<blockquote class="tr_bq">
<style><br />
@font-face { font-family: "wish"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }<br />
#afiliados5{<br />
background-color: #fff5f7;<br />
width: 23px;<br />
height: 10px;<br />
font-family: wish;<br />
font-size: 8px;<br />
float: left;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 5px;<br />
margin-bottom: 4px;<br />
color: #f8c0cd;<br />
line-height: 13px;<br />
border: 1px solid #fcd7e0;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
return: false;<br />
}<br />
</style><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<div>
<br /></div>
</blockquote>
<span style="color: #ea9999;">2° Passo:</span> Altere o código com os dados do seu blog.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #e06666;"><br /></span></b>
<b><span style="color: #e06666;">Modelo 6</span></b></div>
<div style="text-align: justify;">
<div>
<i><span style="color: #f4cccc;">1° Passo:</span></i> Cole em um Gadget Java/Script em que deseja o menu o seguinte código:</div>
<div style="text-align: start;">
<blockquote class="tr_bq">
<style><br />
@font-face { font-family: "wish"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }<br />
#afiliados5{<br />
background-color: #e9eef3;<br />
width: 23px;<br />
height: 10px;<br />
font-family: wish;<br />
font-size: 8px;<br />
float: left;<br />
padding: 2px 0 6px 0;<br />
text-align: center;<br />
margin-left: 5px;<br />
margin-bottom: 4px;<br />
color: #b2bfcb;<br />
line-height: 13px;<br />
border: 1px solid #dae0e6;<br />
-moz-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
return: false;<br />
}<br />
</style><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a><br />
<div>
<br /></div>
</blockquote>
<span style="color: #ea9999;">2° Passo:</span> Altere o código com os dados do seu blog.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #e06666;">Espero que tenham gostado dessa seleção de menus para marcadores *-*</span></b></div>
<div style="text-align: center;">
<b><span style="color: #e06666;">Lembrando que todos eles são do Kawaii World.</span></b></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com0tag:blogger.com,1999:blog-993763511411605453.post-4761753671762948212015-07-26T12:00:00.000-03:002015-08-03T15:27:24.097-03:00Menu Polaroid<div>
<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7fYArQ-obmrjH_P4enteJpnMJtxbbHffP7VHRAkomPS53UGn1oT7VLOiv1-iB_yjbVUfS9CUNdMMd8hMJbfCF1zj8tK-kkXOIc6pB0sIoMgbJnEjwgtiKsWPgOA-dP1bDU7j_lkRrDp4/s1600/06.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #ea9999;">Bom Dia!</span></b> Hoje eu venho trazer para vocês um menu exclusivo aqui do blog que eu crie há puco tempo e uso atualmente nas tags, são essas fotinhas nas laterais do blog que quado você passa o mouse ficam retinhas e você pode clicar no menu. Além de fofinhas você pode usa-las para menu principal do seu blog, para menu de equipe do blog, afiliados ou como eu uso de tags.</div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O tutorial desse menu foi pedido pela Bunny *--* Caso você também queira fazer um pedido de tutorial é só deixar um comentário em qualquer postagem falando qual tutorial você gostaria de ver que assim que possível eu vou preparar e postar o tutorial aqui no blog, lembrando que temos postagens todos os dias pares, ou seja, um dia sim e outro não.</div>
<div style="text-align: justify;">
<a name='more'></a><br /></div>
<div style="text-align: center;">
<b><span style="color: #ea9999;"><a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2015/07/teste_19.html" target="_blank">Preview do Menu</a></span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<b><span style="color: #ea9999;">Vamos ao Tutorial:</span></b></div>
<div style="text-align: justify;">
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #e06666;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<i><span style="color: #cc0000;">3° Passo:</span></i> Cole acima de "]]></b:skin>" o código:<br />
<blockquote class="tr_bq">
/** Menu Polaroid por myfluffyrainbow.blogspot.com.br **/<br />
#pic1 {<br />
font-family:trebuchet ms;<br />
font-size:10px;<br />
position:fixed;<br />
<b><span style="color: #e06666;">top:20px;</span></b><br />
left:30px;<br />
width:118px;<br />
height:130px;<br />
transition: all 0.8s ease-out;<br />
-webkit-transition: all 0.8s ease-out;<br />
-webkit-transform: scale( 0.7) rotate( 0deg);<br />
-moz-transform: scale( 0.7) rotate( 0deg);<br />
background:#fff;<br />
text-align:center;<br />
font-size: 12px;<br />
box-shadow: 0 0 10px #D3D3D3;<br />
box-shadow: inset 0 0 10px #D3D3D3;<br />
padding:2px 2px 10px 2px;<br />
-webkit-transform: scale( 0.7) rotate( 8deg);<br />
-moz-transform: scale( 0.7) rotate( 8deg);<br />
}<br />
<br />
#pic1:hover {<br />
-webkit-transform: scale( 0.9) rotate( 0deg);<br />
-moz-transform: scale( 0.9) rotate( 0deg);<br />
}<br />
<br />
#pic2 {<br />
font-family:trebuchet ms;<br />
font-size:10px;<br />
position:fixed;<br />
<span style="color: #e06666;"><b>top:140px;</b></span><br />
left:30px;<br />
width:118px;<br />
height:130px;<br />
transition: all 0.8s ease-out;<br />
-webkit-transition: all 0.8s ease-out;<br />
-webkit-transform: scale( 0.7) rotate( 0deg);<br />
-moz-transform: scale( 0.7) rotate( 0deg);<br />
background:#fff;<br />
text-align:center;<br />
font-size: 12px;<br />
box-shadow: 0 0 10px #D3D3D3;<br />
box-shadow: inset 0 0 10px #D3D3D3;<br />
padding:2px 2px 10px 2px;<br />
-webkit-transform: scale( 0.7) rotate( -8deg);<br />
-moz-transform: scale( 0.7) rotate( -8deg);<br />
}<br />
<br />
#pic2:hover {<br />
-webkit-transform: scale( 0.9) rotate( 0deg);<br />
-moz-transform: scale( 0.9) rotate( 0deg);<br />
}<br />
<br />
#pic3 {<br />
font-family:trebuchet ms;<br />
font-size:10px;<br />
position:fixed;<br />
<b><span style="color: #e06666;">top:260px;</span></b><br />
left:30px;<br />
width:118px;<br />
height:130px;<br />
transition: all 0.8s ease-out;<br />
-webkit-transition: all 0.8s ease-out;<br />
-webkit-transform: scale( 0.7) rotate( 0deg);<br />
-moz-transform: scale( 0.7) rotate( 0deg);<br />
background:#fff;<br />
text-align:center;<br />
font-size: 12px;<br />
box-shadow: 0 0 10px #D3D3D3;<br />
box-shadow: inset 0 0 10px #D3D3D3;<br />
padding:2px 2px 10px 2px;<br />
-webkit-transform: scale( 0.7) rotate( 8deg);<br />
-moz-transform: scale( 0.7) rotate( 8deg);<br />
}<br />
<br />
#pic3:hover {<br />
-webkit-transform: scale( 0.9) rotate( 0deg);<br />
-moz-transform: scale( 0.9) rotate( 0deg);<br />
}<br />
<br />
#pic4 {<br />
font-family:trebuchet ms;<br />
font-size:10px;<br />
position:fixed;<br />
<b><span style="color: #e06666;">top:380px;</span></b><br />
left:30px;<br />
width:118px;<br />
height:130px;<br />
transition: all 0.8s ease-out;<br />
-webkit-transition: all 0.8s ease-out;<br />
-webkit-transform: scale( 0.7) rotate( 0deg);<br />
-moz-transform: scale( 0.7) rotate( 0deg);<br />
background:#fff;<br />
text-align:center;<br />
font-size: 12px;<br />
box-shadow: 0 0 10px #D3D3D3;<br />
box-shadow: inset 0 0 10px #D3D3D3;<br />
padding:2px 2px 10px 2px;<br />
-webkit-transform: scale( 0.7) rotate( -8deg);<br />
-moz-transform: scale( 0.7) rotate( -8deg);<br />
}<br />
<br />
#pic4:hover {<br />
-webkit-transform: scale( 0.9) rotate( 0deg);<br />
-moz-transform: scale( 0.9) rotate( 0deg);<br />
}<br />
<br />
/** FIM Menu Polaroid por myfluffyrainbow.blogspot.com.br **/</blockquote>
</div>
<div style="text-align: justify;">
<div>
<i><span style="color: #cc0000;">5° Passo:</span><span style="color: #a2c4c9;"> </span></i>Edite a parte destacada para que fique na altura que deseja, cada um dos codigos equivale a uma das fotinhas, de preferencia faça o próximo passo e depois edite para que fique na altura desejada</div>
<div>
<i><span style="color: #990000;">6° Passo:</span></i> Cole em um Gadget Java/Script o seguinte código:<br />
<blockquote class="tr_bq">
<<div id="pic1"><br />
<img src="URL DA IMAGEM" id="inimg4" width="100px" /><br />
<br /><br />
<a href="http://www.blogger.com/Link" id="navi4"><span style="color: black;"><br />
Em Breve</span></a></div><br />
<div id="pic2"><br />
<img src="URL DA IMAGEM" id="inimg4" width="100px" /><br />
<br /><br />
<a href="http://www.blogger.com/Link" id="navi4"><span style="color: black;"><br />
Em Breve</span></a></div><br />
<br />
<div id="pic6"><br />
<img src="URL DA IMAGEM" id="inimg4" width="100px" /><br />
<br /><br />
<a href="http://www.blogger.com/Link" id="navi4"><span style="color: black;"><br />
Em Breve</span></a></div><br />
<br />
<div id="pic4"><br />
<img src="URL DA IMAGEM" id="inimg4" width="100px" /><br />
<br /><br />
<a href="http://www.blogger.com/Link" id="navi4"><span style="color: black;"><br />
Em Breve</span></a></div></blockquote>
</div>
<div>
<i><span style="color: #660000;">7° Passo:</span></i> Altere o código colocando o link e o nome do link.</div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div style="text-align: center;">
<b><span style="color: #ea9999;">Espero que tenham gostado do tutorial e do menu e se usarem deem os devidos créditos <3</span></b><br />
<b><span style="color: #ea9999;">Caso tenham qualquer duvida comentem que farei o máximo para ajuda-los.</span></b></div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com4tag:blogger.com,1999:blog-993763511411605453.post-53481262658519149122015-07-24T12:00:00.000-03:002015-07-24T12:00:07.776-03:00Fazendo um Link-Me<div>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGFWfHcpUC-koT1YvBqC3XX01wEC8626QLNUgm4uRjbLkUOmZxH-2OMDMn6hjgqs6X7RbQVUkxqjoQJTHucN79ND5z66XnzYU__08Y_xD0baLGCFpqjM4WHLjZc0M16u8LbYOsA5Tn1ro/s1600/05.png" /><br />
<div style="text-align: justify;">
<b><span style="color: #ea9999;">Bom Dia!!</span></b> Hoje eu vim trazer um tutorial super fácil com apenas dois passo de como colocar um Link-Me em um gadget ou postagem do seu blog. Sei que a maioria de vocês já usam ou conhece esse tutorial, mas achei super valido traze-lo para quem ainda não conhece <3 Veja o <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/link-me.html" target="_blank">Preview</a>.<br />
<br />
O próximo tutorial vai ser do menu que uso nas laterais do blog(esse que parece uma foto polaroid) ele é super fácil de usar e da um charme a mais ao seu blog, vai ser um tutorial exclusivo já que crie esse menus esse dias para essa nova versão do layout do blog. lembrando que caso você queira algum tutorial/dicas/postagem é só pedir por comentário que terei o prazer de fazer.</div>
</div>
<a name='more'></a><br />
<div style="text-align: center;">
<b><span style="color: #ea9999;">Tutorial</span></b></div>
<div style="text-align: justify;">
<i><span style="color: #f4cccc;">1° Passo:</span></i> Cole em um Gadget Java/Script em que deseja o link-me o seguinte código:</div>
<div>
<blockquote class="tr_bq">
<center><br />
<div align="CENTER"><br />
<a href="http://meumundo-meuestilo.blogspot.com.br/" title="TITULO"><img alt="SEU BLOG" height="83" src="URL DA IMAGEM" width="210" /></a><br /><br />
<div onmouseover="THIS.SELECT()" style="background-color: white; border: SOLID 1PX #000; height: 83PX; overflow: AUTO; width: 210PX;"><br />
&lt;A HREF='LINK' TITLE='TITULO&gt;&lt;IMG SRC='URL DA IMAGEM' ALT='Meu Mundo, Meu Estilo' WIDTH="210" HEIGHT="83"&gt;&lt;/A&gt;</div><br />
</div><br />
</center><br />
<div>
<br /></div>
</blockquote>
<span style="color: #ea9999;">2° Passo:</span> Altere o código com os dados do seu blog.</div>
<div>
<br /></div>
<div style="text-align: center;">
<b><span style="color: #ea9999;">Bom Espero que tenha Gostado <3</span></b></div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com4tag:blogger.com,1999:blog-993763511411605453.post-91897324575262129732015-07-22T12:00:00.000-03:002015-08-03T15:27:24.101-03:00Alinhando o "Leia Mais"<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlUCCQkOotN5jW6Eg57RWkf4yiy76SjqNaChD3QXCQ1gSfwGZIwVxNKQDzZYsMOB5O3v4dEc0Ct_QlEFGv3LFuodauEHzBw8_SmjZKTeJ5yoviOpUdLMuaZ-8QFo_in0Et3cz9monL864/s1600/14.png" /><br />
<div>
<div style="text-align: justify;">
<b><span style="color: #76a5af;">Bom Dia!!</span> </b>Hoje eu vim trazer um dica, não chega ser um tutorial porque é bem simples, de como alinhar o "Leia Mais" do seu blog, esse pode não ser o código que todos usam, mas eu uso ele e é bem mais fácil alinhar qualquer elemento com ele *--* Ahh essa código foi pedido pela <i><span style="color: #a2c4c9;">Bunny</span></i> na postagem anterior, se quiserem qualquer outro tutorial/dica/postagem é só pedirem por comentário.<br />
<br />
Reparem na imagem abaixo que o botão "Continue" esta dentro do "rodapé" do post e é isso que eu vou ensinar como fazer hoje, eu não vou colocar nenhum modelo de "Leia Mais" hoje, mas pretendo trazem alguns basicos em uma proxima postagem.<br />
<a name='more'></a></div>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7FwRDcJYKhc1y-zkrvH4Rb3KizVz1WfxbDuWipNbTcQ2wvpVrhTzqnmFcpPYeO0L5Z1GIPP_pFoJGFQWZRv6_293jJnO4TrRcIny3BlN47pT_V0GiopRsx189pxSGC0NKp6ByRcrCXuE/s1600/02.png" /><br />
<br />
<div style="text-align: justify;">
<i><span style="color: #76a5af;">1° Passo:</span></i> Vá em "<i style="color: #a2c4c9;">Modelo</i>" e encontre o código do seu "Leia Mais"; </div>
<div style="text-align: justify;">
<i>(o codigo sempre começa com</i><i> </i><i> <span style="color: #76a5af;">.jump-link {</span> se você já o personalizou se ainda não o personalizou você tem que procurar/criar um modelo para depois então alinha-lo)</i></div>
<div style="text-align: justify;">
<i><span style="color: #45818e;">2° Passo:</span></i> Cole abaixo de .jump-link { o seguinte código: <i><span style="color: #45818e;">margin-bottom: -10px;</span></i></div>
<div style="text-align: justify;">
<i>(Quanto mais você aumentar o numero no código menor será a margem inferior do botam assim fazendo ele entrar no rodapé da postagem, )</i></div>
<div>
<br /></div>
Você pode mudar qualquer uma das margens do botão(direita, esquerda, superior e inferir) para alinhar melhor ele conforme seu layout, os códigos para fazer essa alteração são:</div>
<div>
margin-bottom: 00px; /* Superior */</div>
<div>
margin-top: 00px; /* Inferior */</div>
<div>
margin-right: 00px; /* Direita */</div>
<div>
margin-esquerda: 00px; /* Esquerda */<br />
<i>(Lembrem números negativos são validos para esse código, então a sequencia decresceste é ...5,4,3,2,1,0,-1,-2,-3,-4,-5...)</i><br />
<br />
<div style="text-align: center;">
<b><span style="color: #76a5af;">Espero que ter ajudado e se tiverem qualquer duvida é só perguntar pelos comentários.</span></b></div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com2tag:blogger.com,1999:blog-993763511411605453.post-66425375504838293462015-07-19T20:17:00.000-03:002015-07-19T20:17:03.661-03:00Novo Layout + Postagens Programadas<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihTxerCUWyfTJ3wJW9nKaFNKxvjiUCUSQFnzBjz-n8VdsOW8EWGgstuja0Khf7bTe9UH2sDCiy2Py1qlyUyq58b8a5Qm3_TxA8J9h3RRewq0O6FNlOzyvxNERop9MDjtd0eQooZJBk64w/s1600/03.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #f9cb9c;">Boa Tarde!!</span><span style="color: #f6b26b;"> </span></b>O que acharam dessa nova paleta do blog? Ficou menos enjoativa do que todo aquele rosa de antes. Também aproveite para alinhar melhor algumas partes que provavelmente ninguém notara a diferença Ç.Ç Também coloquei um novo menu onde colocarei as tag's do blog, sabe essa fotinhas na lateral do blog, não elas não são enfeites e sim esse novo menu U.U Passe o mouse por elas e veja o efeito. Ficou legal neh? Se quiserem posso até fazer um tutorial de como usar esse menu, só precisam pedir por comentário <3</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Fora isso eu programei mais de 20 tutoriais para vocês, pelo menos por um mês teremos postagens a cada dois dias assim o blog ficara mais atualizado.<br />
<a name='more'></a></div>
<div style="text-align: justify;">
<br />
Bom então comentem o que acharam do layout e se gostaram do novo menu para as tags? Ahh e se quiserem algum tutorial ou postagem especifica podem pedir por comentário que terei o prazer de faze-las, principalmente agora nas minhas ferias.</div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-P-J0dhRuK-c%2FVEauryIG2EI%2FAAAAAAAAY_M%2FafADrvR2pNA%2Fs1600%2F03.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihTxerCUWyfTJ3wJW9nKaFNKxvjiUCUSQFnzBjz-n8VdsOW8EWGgstuja0Khf7bTe9UH2sDCiy2Py1qlyUyq58b8a5Qm3_TxA8J9h3RRewq0O6FNlOzyvxNERop9MDjtd0eQooZJBk64w/s1600/03.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com5tag:blogger.com,1999:blog-993763511411605453.post-15941957509695422582015-07-18T10:00:00.000-03:002015-07-19T20:32:01.945-03:00Menu Flutuante<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDsThhFH8Rj4jXYBdnM1O3ovQotZjtHo5bqJJGJrgl6_p57NG1_86o0ZhPlUlNfLe_Bk-yylGFhwlFRkk52tzfsu9OX38OgNdIA3YvzC04TowEjC70-b7LiFkr4MHlRunjbBdkKsvmgM/s1600/04.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #e06666;">Bom Dia!!</span> </b>Como vocês estão aproveitando as suas ferias? Eu to aproveitando para descansar bastante, ler muito e colocar todas as minhas series em dia e são muitas *--* Além é claro de estar aproveitando para blogar mais, tanto neste como no meu outro blog literário onde estou cada vez mais colocando novas resenhas <3</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O tutorial de hoje é de um menu que eu criei e usei muito e ainda gosto bastante dele, ele é simples, mas da um charme a mais para o layout além de ser pratico porque fica flutuando ao lado do blog. Confira a <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/home.html" target="_blank">Preview</a>.</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><div style="text-align: center;">
<b><span style="color: #e06666;"><br /></span></b>
<b><span style="color: #e06666;">Tutorial</span></b></div>
<div style="text-align: justify;">
<i><span style="color: #f4cccc;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #ea9999;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<i><span style="background-color: white; color: #e06666;">3° Passo:</span></i><span style="color: #76a5af;"> </span>Cole acima de "]]></b:skin>" o código abaixo:<br />
<blockquote class="tr_bq">
/*-----Início do Menu flutuante por myfluffyrainbow.blogspot.com-----*/<br />
a.menusimplesss{<br />
font: 10px yanone kaffeesatz; /*-----Fonte-----*/<br />
background-color: #ffb4c4; /*-----Cor do Fundo-----*/<br />
padding-bottom: 10px;<br />
padding: 10px;<br />
text-align: center;<br />
margin:10px;<br />
color:#fff; /*-----Cor da Fonte-----*/<br />
}<br />
a.menusimplesss:hover{<br />
background-color: #FFE4E1; /*-----Cor do Fundo Hover-----*/<br />
-webkit-transition-duration: .80s;<br />
}<br />
a.menusimplessss{<br />
font: 14px yanone kaffeesatz; /*-----Fonte-----*/<br />
background-color: #ffb4c4; /*-----Cor do Fundo-----*/<br />
padding-bottom: 10px;<br />
padding-right: 20px;<br />
padding-left: 19px; <br />
padding-top: 10px; <br />
text-align: center;<br />
margin:10px;<br />
color:#fff; /*-----Cor da Fonte-----*/<br />
}<br />
a.menusimplessss:hover{<br />
background-color: #FFE4E1; /*-----Cor do Fundo Hover-----*/<br />
-webkit-transition-duration: .80s;<br />
}<br />
/*-----FIM do Menu flutuante por myfluffyrainbow.blogspot.com-----*/</blockquote>
</div>
<div style="text-align: justify;">
</div>
<div>
<i><span style="color: #cc0000;">4° Passo:</span></i> Altere os códigos das cores e fonte se achar necessário.<br />
<span style="color: #660000;">5° Passo:</span> Cole em um Gadget Java/Script o seguinte código:<br />
<blockquote class="tr_bq">
<div style="left: 10px; position: fixed; top: 20%;"><br />
<ul id="navigationMenu"><br />
<li style="text-align: center;"><br />
<a class="menusimplesss" target="_blank">Menu: </a></li><br />
<li style="text-align: center;"><br />
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Home"> 1</a><br />
</li><br />
<li style="text-align: center;"><br />
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="About">2 </a><br />
</li><br />
<li style="text-align: center;"><br />
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Avaliações">3 </a><br />
</li><br />
<li style="text-align: center;"><br />
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Contato">4 </a><br />
</li><br />
<li style="text-align: center;"><br />
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Crédito">5 </a><br />
</li><br />
<li style="text-align: center;"><br />
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Goodies">6 </a><br />
</li><br />
</ul><br />
</div></blockquote>
<span style="color: #660000;">6° Passo:</span> Altere o código colocando o link e o nome do link.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #e06666;">Espero que gostem desse menu e se usarem coloque os devidos créditos *--*</span></b></div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com1tag:blogger.com,1999:blog-993763511411605453.post-56279712741554837892015-07-15T16:43:00.001-03:002015-07-18T21:25:52.957-03:00Tutoriais Básicos #2<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWU7PolRBSY1dP6KyBnfRbtOn-Hzr8qPqIKa3mZIfRrh4jz00alQI16g5D-tYIF3OzcPZ1A-kZkVEmWe8iGHid0rsIWDRLA-O7x68SjbeD_QI4V4csCnluCeF2hy4B9VJUONwKweR0u8/s1600/03.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #e06666;">Bom Dia!!!</span></b> As postagem esta com um bom intervalo de tempo entre uma e outra, mas mesmo que demore eu vou estar sempre postando tutoriais por aqui <3 Então se você viu algum menu/efeito em algum lugar e não sabe como fazer você pode pedir por comentário um tutorial que eu vou ter o prazer de faze-lo o mais breve possível.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hoje temos mais dois tutoriais básicos que ajudam na hora de você preparar o seu layout, são bem simples de fazer e dão um toque especial ao seu lay.</div>
<div>
<a name='more'></a><br />
<div style="text-align: center;">
<b><span style="color: #e06666;">1. Seleção de Texto Personalizada</span></b></div>
<div style="text-align: justify;">
<i><span style="color: #f4cccc;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #ea9999;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<i><span style="background-color: white; color: #e06666;">3° Passo:</span></i><span style="color: #76a5af;"> </span>Cole acima de "]]></b:skin>" o código abaixo:<br />
<blockquote class="tr_bq">
/**Seleção de Texto Personalizada por myfluffyrainbow.blogspot.com **/<br />
::-moz-selection {<br />
background: #00000; /* Cor do Fundo */<br />
color: #fff; /* Cor do Texto */<br />
}<br />
::selection {<br />
background: #00000; /* Cor do Fundo */<br />
color: #fff; /* Cor do Texto */<br />
}<br />
/**Seleção de Texto Personalizada Fim por myfluffyrainbow.blogspot.com **/</blockquote>
</div>
<div style="text-align: justify;">
</div>
<div>
<i><span style="color: #cc0000;">4° Passo:</span></i> Salve as Alterações e Pronto sua Seleção de Texto esta Personalizada.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #e06666;">2. Barra de Rolagem Personalizada</span></b></div>
<div style="text-align: justify;">
<i><span style="color: #f4cccc;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #ea9999;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<i><span style="background-color: white; color: #e06666;">3° Passo:</span></i><span style="color: #76a5af;"> </span>Cole acima de "]]></b:skin>" o código abaixo:<br />
<blockquote class="tr_bq">
/**Barra de Rolagem Personalizada por myfluffyrainbow.blogspot.com **/<br />
::-webkit-scrollbar { /**barra de rolagem vertical**/<br />
width:10px; /**largura**/<br />
height:auto;<br />
background: #00000; /**cor de fundo**/<br />
height:5px; /**altura**/<br />
}<br />
::-webkit-scrollbar-thumb{ /**barra de rolagem horizontal**/<br />
background:#00000;/**Cor da barra**/<br />
border-radius:5px;/**arredondar**/<br />
height:5px;/**altura**/<br />
}<br />
/**Barra de Rolagem Personalizada Fim por myfluffyrainbow.blogspot.com **/</blockquote>
</div>
<div style="text-align: justify;">
</div>
<div>
<i><span style="color: #cc0000;">4° Passo:</span></i> Salve as Alterações e Pronto sua Seleção de Texto esta Personalizada.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #e06666;">Bom espero que tenham gostado e que usem bastante *--*</span></b></div>
</div>
</div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com1tag:blogger.com,1999:blog-993763511411605453.post-6296552755041529942015-06-29T16:28:00.000-03:002015-07-18T21:25:59.557-03:00Efeito Suddenly Cloudy<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpV_uQfL0M3_Ri8fbT9Qu3Zykjq7b5S387byoKGX9iqKyhuE1cYDOZVdIIh4hhvBCk4PtdH-zTlRIYUEvILp950oSGX2dva2HQ42HAfbCTxFX95MUPUDb87ixxP7r1LLe6-k40boL3fm0/s1600/02.png" /></div>
<div style="text-align: justify;">
<span style="color: #76a5af;"><b>Bom Dia!!</b></span> Hoje temos mais uma postagem programada para você, eu tenho dez tutoriais preparados para postar e deles eu trarei postagens com tutoriais mais novos ,coisas diversas, goodies e qualquer outra coisa que seja útil na hora de criar seu próprio layout. Então se quiser algum tutorial ou material especifico é só pedir por comentários que todos os pedidos serão feitos.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hoje temos mais um efeito que você podem usar tanto em afiliados com em imagens em geral nos gadgets, o nome do efeito é <i><span style="color: #76a5af;">Suddenly Cloudy</span></i> e vocês podem ver um Preview <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/efeito-suddenly-cloudy.html" target="_blank">clicando aqui</a>. Se usarem não esqueçam de colocar os devidos créditos.</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><div style="text-align: justify;">
<div style="text-align: center;">
<span style="color: #d0e0e3;"><i><b><br /></b></i></span></div>
<div style="text-align: center;">
<span style="color: #d0e0e3;"><i><b>Tutorial:</b></i></span></div>
<i><span style="color: #d0e0e3;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #a2c4c9;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<span style="color: #76a5af;"><i><span style="background-color: white;">3° Passo:</span></i> </span>Cole acima de "]]></b:skin>" o código abaixo:<br />
<blockquote class="tr_bq">
/**Efeito Afiliados por meumundo-meuestilo.blogspot.com.br **/<br />
.efeitoafiliados {<br />
text-decoration: none !important;<br />
-webkit-filter: grayscale(100%);<br />
border:1px solid #828282;<br />
border-offset: 1px;<br />
}<br />
.efeitoafiliados:hover {<br />
text-decoration: none !important;<br />
-webkit-filter: grayscale(0%);<br />
-webkit-filter: blur(5px);<br />
}<br />
/**Efeito Afiliados Fim por meumundo-meuestilo.blogspot.com.br-----*/</blockquote>
</div>
<div style="text-align: justify;">
</div>
<div>
<i><span style="color: #45818e;">4° Passo:</span></i> Salve as Alterações.<br />
<i><span style="color: #134f5c;">5° Passo:</span></i> Coloque nos Gadgets em que deseja colocar os afiliados:<br />
<blockquote class="tr_bq">
<a href="http://www.blogger.com/LINK" title="Nome"><img class="efeitoafiliados" src="IMAGEM" /></a></blockquote>
<i><span style="color: #0c343d;">6° Passo:</span></i> Altere os locais indicados e salve.<br />
<br />
<div style="text-align: center;">
<b><span style="color: #d0e0e3;">Espero que tenham gostado do efeito *--*</span></b></div>
<div style="text-align: center;">
<b><span style="color: #d0e0e3;">Nessa semana teremos mais postagens programadas <3</span></b></div>
</div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com0tag:blogger.com,1999:blog-993763511411605453.post-80779545518678328002015-06-26T16:13:00.000-03:002015-06-26T16:14:50.504-03:004 Efeitos Para Afiliados<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko-H44BFtdBeNF4i_oHelTkkxuzW03_sSudCrRsyTTGvf0G4pkYVSmlbKJDOcN4gs1rp2wFvfFVy9-0jjMHex7KqUBnEtjLXH4-UbZB-E2ffzmK5NfRFnAQIiJ7-Efblv_e-nRUN8wSM/s1600/01.png" /><br />
<div style="text-align: justify;">
<b><span style="color: #76a5af;">Bom Dia!!!</span></b> Depois de meses sem atualizar o blog eu resolvi voltar a trazer alguns tutoriais para vocês *-* Eu comecei a fazer faculdade e o primeiro semestre mesmo não sendo tão corrido me deixou com menos tempo que o habitual e só agora resolvi dedicar um tempinho para atualizar o <i><span style="color: #a2c4c9;">My Fluffy Rainbow</span></i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O tutorial de hoje são 4 efeitos para serem usados nos afiliados do blog ou mesmos em um menu com imagens. São efeitos feitos por mim então se usar coloque os devidos créditos.</div>
<a name='more'></a><br />
<div style="text-align: center;">
<span style="color: #45818e;"><b>1° Efeito (<a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/titulo.html" target="_blank">Preview</a></b></span><b style="color: #45818e;">)</b><b style="color: #45818e;">:</b></div>
<div style="text-align: justify;">
<i><span style="color: #d0e0e3;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #a2c4c9;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<span style="color: #76a5af;"><i><span style="background-color: white;">3° Passo:</span></i> </span>Cole acima de "]]></b:skin>" o código abaixo:<br />
<blockquote class="tr_bq">
<span style="text-align: start;">/*-----Inicio do Efeito Para Afiliados por meumundo-meuestilo.blogspot.com.br-----*/</span><br />
<span style="text-align: start;">.afiliados{</span><br />
<span style="text-align: start;">-webkit-transition-duration: 1.20s;</span><br />
<span style="text-align: start;">}</span><br />
<span style="text-align: start;">.afiliados:hover{</span><br />
<span style="text-align: start;">-webkit-transform: rotate(360deg);</span><br />
<span style="text-align: start;">-webkit-border-radius: 50px; </span><br />
<span style="text-align: start;">-moz-border-radius: 50px; </span><br />
<span style="text-align: start;">border-radius: 50px;</span><br />
<span style="text-align: start;">}</span><br />
<span style="text-align: start;">/*-----FIM do Efeito Para Afiliados por meumundo-meuestilo.blogspot.com.br-----*/</span></blockquote>
</div>
<div style="text-align: justify;">
</div>
<div>
<i><span style="color: #45818e;">4° Passo:</span></i> Salve as Alterações.<br />
<i><span style="color: #134f5c;">5° Passo:</span></i> Coloque nos Gadgets em que deseja colocar os afiliados:<br />
<blockquote class="tr_bq">
<a href="http://www.blogger.com/LINK" title="TITULO"><img class="afiliados" src="IMAGEM" /></a></blockquote>
<i><span style="color: #0c343d;">6° Passo:</span></i> Altere os locais indicados e salve.<br />
<div style="text-align: center;">
<b><span style="color: #45818e;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="color: #45818e;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="color: #45818e;">2° Efeito (<a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/efeito-para-afiliados-2.html" target="_blank">Preview</a>):</span></b></div>
<div style="text-align: center;">
<div style="text-align: justify;">
<i><span style="color: #d0e0e3;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #a2c4c9;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<span style="color: #76a5af;"><i><span style="background-color: white;">3° Passo:</span></i> </span>Cole acima de "]]></b:skin>" o código abaixo:<br />
<blockquote class="tr_bq">
<div style="text-align: start;">
/*-----Inicio do Efeito Para Afiliados 2 por meumundo-meuestilo.blogspot.com.br-----*/</div>
<div style="text-align: start;">
.afiliadoss{</div>
<div style="text-align: start;">
-webkit-border-radius: 50px; </div>
<div style="text-align: start;">
-moz-border-radius: 50px; </div>
<div style="text-align: start;">
-webkit-transition-duration: 1.20s;</div>
<div style="text-align: start;">
}</div>
<div style="text-align: start;">
.afiliadoss:hover{</div>
<div style="text-align: start;">
-webkit-border-radius: 50px; </div>
<div style="text-align: start;">
-moz-border-radius: 50px; </div>
<div style="text-align: start;">
border-radius: 50px;</div>
<div style="text-align: start;">
}</div>
<div style="text-align: start;">
/*-----FIM do Efeito Para Afiliados 2 por meumundo-meuestilo.blogspot.com.br-----*/</div>
</blockquote>
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: start;">
<i><span style="color: #45818e;">4° Passo:</span></i> Salve as Alterações.<br />
<i><span style="color: #134f5c;">5° Passo:</span></i> Coloque nos Gadgets em que deseja colocar os afiliados:<br />
<blockquote class="tr_bq">
<a href="http://www.blogger.com/LINK" title="TITULO"><img class="afiliadoss" src="IMAGEM" /></a></blockquote>
<i><span style="color: #0c343d;">6° Passo:</span></i> Altere os locais indicados e salve.</div>
</div>
<div style="text-align: center;">
<b><span style="color: #45818e;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="color: #45818e;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="color: #45818e;">3° Efeito (<a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/efeito-para-afiliados-3.html" target="_blank">Preview</a>):</span></b></div>
<div style="text-align: center;">
<div style="text-align: justify;">
<i><span style="color: #d0e0e3;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #a2c4c9;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<span style="color: #76a5af;"><i><span style="background-color: white;">3° Passo:</span></i> </span>Cole acima de "]]></b:skin>" o código abaixo:<br />
<blockquote class="tr_bq">
<div style="text-align: start;">
/*-----Inicio do Efeito Para Afiliados 3 por meumundo-meuestilo.blogspot.com.br-----*/</div>
<div style="text-align: start;">
.afiliadosss{</div>
<div style="text-align: start;">
border-radius: 50px;</div>
<div style="text-align: start;">
-webkit-filter: none; -webkit-transition:all 1s ease;</div>
<div style="text-align: start;">
}</div>
<div style="text-align: start;">
.afiliadosss:hover{</div>
<div style="text-align: start;">
border-radius: 50px;</div>
<div style="text-align: start;">
-webkit-filter: saturate(5);</div>
<div style="text-align: start;">
-webkit-transition:all 1s ease;</div>
<div style="text-align: start;">
}</div>
<div style="text-align: start;">
/*-----FIM do Efeito Para Afiliados 3 por meumundo-meuestilo.blogspot.com.br-----*/</div>
</blockquote>
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: start;">
<i><span style="color: #45818e;">4° Passo:</span></i> Salve as Alterações.<br />
<i><span style="color: #134f5c;">5° Passo:</span></i> Coloque nos Gadgets em que deseja colocar os afiliados:<br />
<blockquote class="tr_bq">
<a href="http://www.blogger.com/LINK" title="TITULO"><img class="afiliadosss" src="IMAGEM" /></a></blockquote>
<i><span style="color: #0c343d;">6° Passo:</span></i> Altere os locais indicados e salve.</div>
</div>
<div style="text-align: center;">
<b><span style="color: #45818e;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="color: #45818e;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="color: #45818e;">4° Efeito (<a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/efeito-para-afiliados-4.html" target="_blank">Preview</a>):</span></b></div>
</div>
<div style="text-align: center;">
<div style="text-align: justify;">
<i><span style="color: #d0e0e3;">1° Passo:</span></i> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #a2c4c9;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<span style="color: #76a5af;"><i><span style="background-color: white;">3° Passo:</span></i> </span>Cole acima de "]]></b:skin>" o código abaixo:<br />
<blockquote class="tr_bq">
<div style="text-align: start;">
/*-----Inicio do Efeito Para Afiliados 4 por meumundo-meuestilo.blogspot.com.br-----*/</div>
<div style="text-align: start;">
.afiliadossss{</div>
<div style="text-align: start;">
-webkit-transition-duration: 1.20s;</div>
<div style="text-align: start;">
-webkit-filter: none; -webkit-transition:all 1s ease;</div>
<div style="text-align: start;">
}</div>
<div style="text-align: start;">
.afiliadossss:hover{</div>
<div style="text-align: start;">
-webkit-filter: hue-rotate(180deg);</div>
<div style="text-align: start;">
-webkit-transition:all 1s ease;</div>
<div style="text-align: start;">
-webkit-transform: rotate(360deg);</div>
<div style="text-align: start;">
-webkit-border-radius: 50px; </div>
<div style="text-align: start;">
-moz-border-radius: 50px; </div>
<div style="text-align: start;">
border-radius: 50px;</div>
<div style="text-align: start;">
}</div>
<div style="text-align: start;">
/*-----FIM do Efeito Para Afiliados 4 por meumundo-meuestilo.blogspot.com.br-----*/</div>
</blockquote>
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: start;">
<i><span style="color: #45818e;">4° Passo:</span></i> Salve as Alterações.<br />
<i><span style="color: #134f5c;">5° Passo:</span></i> Coloque nos Gadgets em que deseja colocar os afiliados:<br />
<blockquote class="tr_bq">
<a href="http://www.blogger.com/LINK" title="TITULO"><img class="afiliadossss" src="IMAGEM" /></a></blockquote>
<i><span style="color: #0c343d;">6° Passo:</span></i> Altere os locais indicados e salve.</div>
</div>
<div style="text-align: center;">
<b><span style="color: #45818e;"><br /></span></b></div>
<div style="text-align: center;">
<b><span style="color: #76a5af;">Espero que tenham gostado dos efeitos <3 Nessa semana teremos mais postagens programadas <3</span></b></div>
Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com0tag:blogger.com,1999:blog-993763511411605453.post-49051372308844745552015-01-04T19:03:00.000-02:002015-01-04T19:03:48.123-02:00Bordas Pontilhadas nos Gadgets<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLm-VG1H1xgdp98CwYHfjwzh6PKEhNtcMXhajXeIXmxW4z5YYSjh3w_sg9KgvRAI5t6RV-Klqb5TqYsMhpivg7N38HYOuRcUS3HwNgIAZpqWuPep8AqkJ77DHEgqMuUDByLAA2MHqBmhU/s1600/11.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #e06666;">Boa Tarde</span></b> "<i><span style="color: #ea9999;">Little Butterflies</span></i>" <3 Bom ultimamente venho postando muito pouco por aqui e não posso prometer que vou postar mais ou regularmente porque nem sempre estou com vontade de mexer em códigos HTML, mas sempre que puder trarei tutoriais novos ou que são bem procurados. Caso você tenha algum pedido de tutorial basta deixar um comentário em qualquer postagem do blog.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hoje eu vim trazer um mini tutorial com o código para bordas pontilhadas na parte internar dos Gadgets do blog, ele é bem simples e se o seu Gadgets já for personalizado é só você incluir o código ao código da sua personalização.<br />
<a name='more'></a><div style="text-align: center;">
<b><span style="color: #ea9999;"><br /></span></b><span style="color: #ea9999;"><b>Preview:</b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0sJOVQVs6qp3o2sgkhQ5eKNCvzVostjEp-AIMZ2q1hFzgTKqRhQLVbratz4rKzFWqh8gdaM5x4_3QV12EJzQKNHxRuNiBcoDUiiXABJJcm_hHj0AKHrfQoz7HICkwOTQmcZI5H4vhYs4/s1600/39.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0sJOVQVs6qp3o2sgkhQ5eKNCvzVostjEp-AIMZ2q1hFzgTKqRhQLVbratz4rKzFWqh8gdaM5x4_3QV12EJzQKNHxRuNiBcoDUiiXABJJcm_hHj0AKHrfQoz7HICkwOTQmcZI5H4vhYs4/s1600/39.png" /></a></div>
<b><span style="color: #ea9999;"><br /></span></b>
<b><span style="color: #ea9999;"><br /></span></b>
<b><span style="color: #ea9999;">Vamos ao Tutorial:</span></b></div>
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div>
<i><span style="color: #f9cb9c;">2° Passo:</span></i> Procure por(Usando Ctrl+F): .sidebar .widget {</div>
<div>
<i><span style="color: #ffe599;">3° Passo:</span></i> Cole abaixo de ".sidebar .widget {" o código:<br />
<blockquote class="tr_bq">
outline-style:dashed;<br />
outline-width: 1px;<br />
outline-color: #000000; /* cor da linha pontilhada */<br />
outline-offset: -3px;</blockquote>
</div>
<div>
<div>
<i><span style="color: #b6d7a8;">5° Passo:</span><span style="color: #a2c4c9;"> </span></i>Visualize e confira se esta tudo certinho e depois salve.</div>
<div>
<br /></div>
</div>
<div>
<b><span style="color: #ea9999;">Pronto!!!</span></b> Espero que tenham gostado do efeito e se usarem coloquem os devidos créditos.</div>
<div>
<br /></div>
</div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F--PpDLM2bPpc%2FVKmn_Ps3KXI%2FAAAAAAAAZmQ%2FIdk5PksA02k%2Fs1600%2F11.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLm-VG1H1xgdp98CwYHfjwzh6PKEhNtcMXhajXeIXmxW4z5YYSjh3w_sg9KgvRAI5t6RV-Klqb5TqYsMhpivg7N38HYOuRcUS3HwNgIAZpqWuPep8AqkJ77DHEgqMuUDByLAA2MHqBmhU/s1600/11.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com1tag:blogger.com,1999:blog-993763511411605453.post-33848341858304525872014-12-22T16:30:00.000-02:002014-12-22T16:30:00.939-02:00Efeito Suddenly Cloudy<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlASe-_Q5DnPAP_hUo2g2KyXnO_OwulMdklEujIk7HYQtJQ0NEUY9z64TxYrpLykwImSdoPC-RsLqy3LitomoNTsoqff2VJHtfZKgRJ0d5Ary-szmxGgOJf97vNMt7MbbrSAHBSYvm3c/s1600/10.png" /></div>
<div style="text-align: justify;">
Boa Tarde!!! Agora falta poucos dias para o natal <3 Já sabem se vão ganhar bastantes presentes ou pelo menos algum que queriam? Eu já me dei os presentes que queria e quem sabe talvez "ganhe" uma câmera nova para poder enfim gravar videos para o meu outro blog *---* Mas se ela não chegar neste natal com certeza chega no meu aniversario em fevereiro <3</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bom hoje eu trouxe para vocês um efeito para usar nos afiliados ou em alguma imagem de divulgação nos Gadgets dos seus blog, gosto bastante deste efeito porque criei ele para um layout que eu gostei bastante, para ver um Preview <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/efeito-suddenly-cloudy-2.html" target="_blank">clique aqui</a>.<br />
<a name='more'></a></div>
<div style="text-align: justify;">
<div style="text-align: center;">
<b><span style="color: #ea9999;"><br /></span></b>
<b><span style="color: #ea9999;">Vamos ao Tutorial:</span></b></div>
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div>
<i><span style="color: #f9cb9c;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div>
<i><span style="color: #ffe599;">3° Passo:</span></i> Cole acima de "]]></b:skin>" o código:<br />
<blockquote class="tr_bq">
/**Efeito Suddenly Cloudy por myfluffyrainbow.blogspot.com.br **/<br />
.efeitoafiliadoss {<br />
text-decoration: none !important;<br />
border-offset: 1px;<br />
-webkit-transition-duration: .90s;<br />
}<br />
.efeitoafiliadoss:hover {<br />
-webkit-transition-duration: .90s;<br />
text-decoration: none !important;<br />
-webkit-filter: blur(5px);<br />
}<br />
/**FIM do Efeito Suddenly Cloudy por myfluffyrainbow.blogspot.com.br **/</blockquote>
</div>
<div>
<div>
<i><span style="color: #b6d7a8;">5° Passo:</span><span style="color: #a2c4c9;"> </span></i>Cole em um Gadget Java/Script o seguinte código:<br />
<blockquote class="tr_bq">
<a href="LINK" title="Nome"><img class="efeitoafiliadoss" src="URL da Imagem" /></a><br />
<a href="LINK" title="Nome"><img class="efeitoafiliadoss" src="URL da Imagem" /></a><br />
<a href="LINK" title="Nome"><img class="efeitoafiliadoss" src="URL da Imagem" /></a></blockquote>
</div>
<div>
<i><span style="color: #a2c4c9;">6° Passo:</span></i> Altere o código colocando o link e o URL da imagem.<br />
<br /></div>
</div>
<div>
<b><span style="color: #ea9999;">Pronto!!!</span></b> Espero que tenham gostado do efeito e se usarem coloquem os devidos créditos.<br />
<br /></div>
</div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F1.bp.blogspot.com%2F-zGIEJw0FTfY%2FVJdlzums9sI%2FAAAAAAAAZgo%2FfwPnH7suCb8%2Fs1600%2F10.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlASe-_Q5DnPAP_hUo2g2KyXnO_OwulMdklEujIk7HYQtJQ0NEUY9z64TxYrpLykwImSdoPC-RsLqy3LitomoNTsoqff2VJHtfZKgRJ0d5Ary-szmxGgOJf97vNMt7MbbrSAHBSYvm3c/s1600/10.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com1tag:blogger.com,1999:blog-993763511411605453.post-10072563107833764742014-12-18T19:37:00.000-02:002014-12-18T21:04:11.322-02:00Tutoriais Básicos #1<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-cqDeTgmmV5A3B0mVBvyGAVlGe9IvwhAsEi7HTtTV7EUU1zFfKB9S9BemmEhjWX_oIbIwerZkSGKFoikltwvepz5gtufge3EXq1VmTLvx2fOLSDxWhfJhBvhddkytgt8Ilcp3t0xtCU/s1600/08.png" /></div>
<div style="text-align: justify;">
<b>Boa Tarde!!</b> Hoje temos uma pequena seleção com 3 tutoriais básicos para começar a personalizar o seu layout, serão diversas postagens com essas pequenas seleções de tutoriais básicos e eu pretendo postar pelo menos uma vez por semana elas.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nesta primeira postagem temos os tutoriais de como remover o 'Assinar: Postagens (Atom)', centralizando o titulo da postagem e link nos comentários. São 3 tutoriais super básicos que a maioria já deve conhecer, mas sempre temos alguém que não conhece.</div>
<div style="text-align: justify;">
<a name='more'></a><br /></div>
<div style="text-align: justify;">
<div style="text-align: start;">
<br /></div>
<div style="text-align: center;">
<b><span style="color: #ea9999;">1. Vamos ao Tutorial de </span></b><span style="color: #ea9999;"><b>como Remover o 'Assinar: Postagens (Atom)'</b></span><b><span style="color: #ea9999;">:</span></b></div>
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div>
<i><span style="color: #f9cb9c;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div>
<i><span style="color: #ffe599;">3° Passo:</span></i> Cole acima de "]]></b:skin>" o código abaixo:<br />
<blockquote class="tr_bq">
.feed-links {<br />
height:0px;visibility:hidden;display:none}</blockquote>
</div>
<div>
<span style="color: #b6d7a8;"><i>4° Passo:</i></span> Salve as Alterações.<br />
<br />
<br />
<div style="text-align: center;">
<b><span style="color: #ea9999;">2. Vamos ao Tutorial de </span></b><span style="color: #ea9999;"><b>como C</b></span><b><span style="color: #ea9999;">entralizando o Titulo da Postagem:</span></b></div>
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div>
<i><span style="color: #f9cb9c;">2° Passo:</span></i> Procure por(Usando Ctrl+F):<br />
/* Posts<br />
----------------------------------------------- */</div>
<div>
<i><span style="color: #ffe599;">3° Passo:</span></i> Cole abaixo dele:<br />
<blockquote class="tr_bq">
h3.post-title {<br />
text-align:center;<br />
}</blockquote>
</div>
<div>
<span style="color: #b6d7a8;"><i>4° Passo:</i></span> Visualize se o titulo foi centralizado e Salve as Alterações.</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div style="text-align: center;">
<b><span style="color: #ea9999;">3. Vamos ao Tutorial de </span></b><span style="color: #ea9999;"><b>como C</b></span><b><span style="color: #ea9999;">olocar </span></b><span style="color: #ea9999;"><b>link nos seus Comentários</b></span><b><span style="color: #ea9999;">:</span></b></div>
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá no blog que deseja fazer seu comentário e escreva ele normalmente.</div>
<div>
<i><span style="color: #f9cb9c;">2° Passo:</span></i> No final ou onde você desejar o link cole:<br />
<a href="LINK">Visite o blog "Nome do Link/Texto"</a></div>
<div>
<i><span style="color: #ffe599;">3° Passo:</span></i> Pronto é só concluir/postar o comentário.</div>
</div>
<div>
<br /></div>
<div style="text-align: center;">
<b><span style="color: #ea9999;">Espero que tenham gostado dos tutoriais <3 Em Breve mais tutoriais Básicos para Vocês <3</span></b></div>
</div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F2.bp.blogspot.com%2F-g73A_Vmynz0%2FVIyuQDyTOCI%2FAAAAAAAAZeU%2F6c7sdA0eVf0%2Fs1600%2F08.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-cqDeTgmmV5A3B0mVBvyGAVlGe9IvwhAsEi7HTtTV7EUU1zFfKB9S9BemmEhjWX_oIbIwerZkSGKFoikltwvepz5gtufge3EXq1VmTLvx2fOLSDxWhfJhBvhddkytgt8Ilcp3t0xtCU/s1600/08.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com0tag:blogger.com,1999:blog-993763511411605453.post-7498408782800479082014-12-15T19:10:00.000-02:002014-12-15T19:10:00.430-02:00Papai Noel Voando no Blog<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig5jeOtD2Mcy6qLH32yxpdCYEWp1jGEZOu4kZGGS5UKhXo2yC85fdM_0qpkrPqeWPyKzP_9kIbq8wFDCTfi9E8mLtwi6Al5WAEnSHmr76rU3ygWtHe9fUFAMIueccisLVzANU6YDdjgb8/s1600/07.png" /></div>
<div style="text-align: justify;">
<b>Bom Dia!!</b> Hoje temos mais um tutorial em clima de natal, espero que vocês goste ele é bem simples de aplicar no blog e deixar aquele ar natalino sem ter que alterar o seu layout, porque muitas vezes não da para criar um layout exclusivo para o natal ou você já acabou de trocar e não quer tirar tão cedo seu novo lay.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bom o tutorial é de como colocar aquele papai noel fofinho que vemos voando em alguns blogs, não tem nada que necessite ser alterado ou adaptado porque já é um código pronto. Ele não foi criado por mim e os créditos do tutorial vão para este blog <a href="http://mundoo-cute.blogspot.com.br/" target="_blank">X</a>.</div>
<div style="text-align: justify;">
<a name='more'></a><br /></div>
<div style="text-align: justify;">
<div style="text-align: start;">
<br /></div>
<div style="text-align: center;">
<b><span style="color: #ea9999;">Vamos ao Tutorial:</span></b></div>
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div>
<i><span style="color: #f9cb9c;">2° Passo:</span></i> Procure por(Usando Ctrl+F): </head></div>
<div>
<i><span style="color: #ffe599;">3° Passo:</span></i> Cole acima de "</head>" o código abaixo:<br />
<blockquote class="tr_bq">
<script type="text/javascript" src="http://blogparts.giffy.me/0017/parts.js" /></blockquote>
</div>
<div>
<span style="color: #b6d7a8;"><i>4° Passo:</i></span> Visualize e confira se seu papai noel esta voando direitinho e salve as alterações.</div>
<div>
<br /></div>
<div>
<b><span style="color: #ea9999;">Pronto!!!</span></b> Espero que tenham gostado deste tutorial especial de natal <b><span style="color: #ea9999;">*--*</span></b><br />
<b><span style="color: #ea9999;"><br /></span></b></div>
</div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-foQqFAlhhVM%2FVIyoMMgm2LI%2FAAAAAAAAZeE%2Fm4t6Z9m-aok%2Fs1600%2F07.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig5jeOtD2Mcy6qLH32yxpdCYEWp1jGEZOu4kZGGS5UKhXo2yC85fdM_0qpkrPqeWPyKzP_9kIbq8wFDCTfi9E8mLtwi6Al5WAEnSHmr76rU3ygWtHe9fUFAMIueccisLVzANU6YDdjgb8/s1600/07.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com0tag:blogger.com,1999:blog-993763511411605453.post-51974284717110144382014-12-13T18:12:00.000-02:002014-12-14T00:10:59.932-02:00Menu Para Marcadores #1<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixOldbDYauX0qAUAochtieBWEDQt_C2OnJA-AU7e3NJY5vVZAb4NaLgzmgcrgh3z1DnNU9uXEHpchsNfm2Jhba2VYbfDEaqfwVz2UBid7vpHHysM0Pu6JMp2c-6DHuGzLpFYDJgDZypHE/s1600/09.png" /></div>
<div>
<div style="text-align: justify;">
<b>Bom Dia!!</b> Hoje temos a segunda postagem de dezembro \o/ bom vou tentar posta a cada dois dias para não deixar aqui parado e abandonado as moscas, mas se eu conseguir posto mais vezes e mais tutorias exclusivos do blog <3</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Estamos chegado perto do natal e nada melhor que um tutorial de um menu exclusivo de presente para vocês, eu crie ele já faz algum tempo para um layout do meu outro blog e como ele é mega fofinho e usável acho que vocês vão ama-lo <3 Para ver o Preview <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/manu-para-marcadores.html" target="_blank">clique aqui</a>.</div>
<div style="text-align: justify;">
<a name='more'></a><div style="text-align: center;">
<b><span style="color: #ea9999;"><br /></span></b><b><span style="color: #ea9999;">Vamos ao Tutorial:</span></b></div>
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div>
<i><span style="color: #f9cb9c;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div>
<i><span style="color: #ffe599;">3° Passo:</span></i> Cole acima de "]]></b:skin>" o código:<br />
<blockquote class="tr_bq">
/*-----Início do Menu Para Marcadores por myfluffyrainbow.blogspot.com -----*/<br />
cute {<br />
padding: 10px;<br />
font-family: pf arma five;<br />
font-size: 12px;<br />
background: #fff ; /*Altere o fundo como preferir*/<br />
border-left: 4px solid #ffb4c4;<br />
border-right: 4px solid #ffb4c4;<br />
box-shadow: inset 0 0 15px #eee, 0 0 4px #ccc;<br />
text-align: center; /*Alinha no centro*/<br />
margin:10px 20px 10px 20px;<br />
line-height:17px; /* Medida de comprimento das entrelinhas - Não altere*/<br />
margin:1em 0; /* Espaço externo - Não altere*/<br />
padding:0 5px 0 9px; /* Espaço interno - Não altere */<br />
overflow:auto; /* Elemento escondido com borda de rolagem - Não altere */<br />
}<br />
/*-----Fim do Menu-----*/</blockquote>
</div>
<div>
<div>
<i><span style="color: #b6d7a8;">5° Passo:</span><span style="color: #a2c4c9;"> </span></i>Edite o código conforme seu gosto e preferencia.</div>
<div>
<i><span style="color: #a2c4c9;">6° Passo:</span></i> Cole em um Gadget Java/Script o seguinte código:<br />
<blockquote class="tr_bq">
<a href="http://meumundo-meuestilo.blogspot.com.br/"><cute>Home</cute></a><br />
<a href="http://meumundo-meuestilo.blogspot.com.br/"><cute>Home</cute></a><br />
<a href="http://meumundo-meuestilo.blogspot.com.br/"><cute>Home</cute></a></blockquote>
</div>
<div>
<i><span style="color: #9fc5e8;">7° Passo:</span></i> Altere o código colocando o link e o nome do link.</div>
</div>
<div>
<br /></div>
<div>
<b><span style="color: #ea9999;">Pronto!!!</span></b> Espero que tenham gostado do tutorial e se usarem coloquem os devidos créditos.</div>
</div>
</div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-NQToX5BFbI0%2FVIzxkE1Hu8I%2FAAAAAAAAZek%2FShciatz0lX4%2Fs1600%2F09.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixOldbDYauX0qAUAochtieBWEDQt_C2OnJA-AU7e3NJY5vVZAb4NaLgzmgcrgh3z1DnNU9uXEHpchsNfm2Jhba2VYbfDEaqfwVz2UBid7vpHHysM0Pu6JMp2c-6DHuGzLpFYDJgDZypHE/s1600/09.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com1tag:blogger.com,1999:blog-993763511411605453.post-85357389998052453802014-12-09T22:50:00.002-02:002014-12-13T19:03:11.314-02:00Neve Caindo no Blog<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiju6kiLTRPVkHw60g4KKOZleXzWou90wgTf-azBmlJbu7lmfrZgboLREq1uZ7ezIsRLf9ncQRn3tjxFyLv3dINDoKY7mt9E-UJPoyRkKGcgJqCXl-MF5n2Le10CO0VASwHvDkBn3R0bow/s1600/04.png" /></div>
<div>
<div style="text-align: justify;">
<b>Boa Noite!!! </b>Depois de mais de um mês com o blog parado estamos voltando com tudo <3 Primeiramente queria pedir desculpa por ter deixado aqui sem ser atualizado, mas ultimamente minha vida ta bem corrida e como esse não é meu único blog eu acabo dando mais atenção ao outro que tem conteúdo literário com resenhas e parcerias com autores que consomem bastante do meu tempo livre.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bom o tutorial de hoje 99% de você já conhecem, mas eu achei valido trazer para o blog, que é o tutorial de como fazer cair neve no blog. Fica super fofinho e para quem não quer fazer um layout exclusivo para o natal da um ar mais natalino ao seu cantinho sem muito esforço.<br />
<a name='more'></a><div style="text-align: center;">
<b><span style="color: #ea9999;"><br /></span></b>
<b><span style="color: #ea9999;">Vamos ao Tutorial:</span></b></div>
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div>
<i><span style="color: #f9cb9c;">2° Passo:</span></i> Procure por(Usando Ctrl+F): <div style='clear: both'/></div>
<div>
<i><span style="color: #ffe599;">3° Passo:</span></i> Cole acima de "<div style='clear: both'/>" o código:<br />
<blockquote class="tr_bq">
<script src="http://static.tumblr.com/8l2gpxb/lcllulgcn/snowstorm.js"></script> </blockquote>
</div>
<div>
<br /></div>
<div>
<b><span style="color: #ea9999;">Pronto!!!</span></b> Espero que tenham gostado do tutorial e que usem nos seus blogs <b><span style="color: #ea9999;"><3</span></b><br />
<b><span style="color: #ea9999;"><br /></span></b>
<b><span style="color: #ea9999;">Obs.; </span></b>Como este tutorial é muito conhecido e foi postado por diversos blogs não consegui descobrir que o criou para colocar os devidos créditos, mas já deixo avisado que não foi criado por mim.<br />
<br /></div>
</div>
</div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F2.bp.blogspot.com%2F-tieUYApW50w%2FVIeXWLeHHrI%2FAAAAAAAAZdA%2FM0y11p0GTyk%2Fs1600%2F04.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiju6kiLTRPVkHw60g4KKOZleXzWou90wgTf-azBmlJbu7lmfrZgboLREq1uZ7ezIsRLf9ncQRn3tjxFyLv3dINDoKY7mt9E-UJPoyRkKGcgJqCXl-MF5n2Le10CO0VASwHvDkBn3R0bow/s1600/04.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com2tag:blogger.com,1999:blog-993763511411605453.post-46159755210774581202014-10-27T09:00:00.000-02:002014-12-13T19:03:14.130-02:00Menu Neon<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgakO9EjTe6afZ85hcbXQkoNUxkE5zbXKFLmVEiZqfUBlJUNvKKDZTx2wbGocz92hb3NTE9V9ehdRS6nIEWj48jKYLI57iBgC914I_qi1qkv6Kqvi7sBiYwaRrhwi5MUzpr1Ej2bkfrHH0/s1600/03.png" /></div>
<div style="text-align: justify;">
<b>Bom Dia!</b> Como foi o fim de semana de vocês? o meu foi ótimo e ao mesmo tempo horrível, eu fiz uma coisa que amo, fui na livraria de um shopping perto de casa e comprei um livro que eu amo <3 li ele quando ainda não tinha sido lançado aqui no Brasil, já no domingo eu fui votar com meu pai e pegamos uma baita chuva...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hoje temos mais um menu que eu já tinha pronto faz algum tempo e como estamos chegando no Halloween ele combinaria perfeitamente em um layout comemorativo <3 ele tem cores que combinam com a data, mas pode ser editado como todos os menus que eu vou trazer para vocês <3 Se quiserem conferir uma Preview do menu é só <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/menu-neon.html" target="_blank">clicar aqui</a>.</div>
<div style="text-align: justify;">
<a name='more'></a><div style="text-align: center;">
<b><span style="color: #ea9999;"><br /></span></b>
<b><span style="color: #ea9999;">Vamos ao Tutorial:</span></b></div>
<div>
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div>
<i><span style="color: #f9cb9c;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div>
<i><span style="color: #ffe599;">3° Passo:</span></i> Cole acima de "]]></b:skin>" o código:<br />
<blockquote class="tr_bq">
/*-----Início do Menu Neon por meumundo-meuestilo.blogspot.com.br-----*/<br />
neon {<br />
border 2px solid #9BCD9B;<br />
background-color: #C1FFC1;<br />
padding: 10px;<br />
font-size: 8px;<br />
font-family: silkscreen;<br />
color: #758495;<br />
box-shadow: inset 0 0 10px #9BCD9B, 0 0 5px #9BCD9B;<br />
text-align: center;<br />
-moz-border-radius: 3px;<br />
-webkit-border-radius: 3px;<br />
border-radius: 3px<br />
}<br />
neon:hover {<br />
color: #d0d0d0;<br />
border 2px solid #528B8B;<br />
background-color: #79CDCD;<br />
color: #758495;<br />
box-shadow: inset 0 0 10px #528B8B, 0 0 5px #528B8B;<br />
-moz-border-radius: 3px;<br />
-webkit-border-radius: 3px;<br />
border-radius: 3px;<br />
}<br />
/*-----Fim do Menu-----*/</blockquote>
</div>
<div>
<div>
<i><span style="color: #b6d7a8;">5° Passo:</span><span style="color: #a2c4c9;"> </span></i>Edite o código conforme seu gosto e preferencia.</div>
<div>
<i><span style="color: #a2c4c9;">6° Passo:</span></i> Cole em um Gadget Java/Script o seguinte código:<br />
<blockquote class="tr_bq">
<a href="Link"><neon>Nome do Menu</neon></a><br />
<a href="Link"><neon>Nome do Menu</neon></a> </blockquote>
</div>
<div>
<i><span style="color: #9fc5e8;">7° Passo:</span></i> Altere o código colocando o link e o nome do link.</div>
</div>
<div>
<br /></div>
<div>
<b><span style="color: #ea9999;">Pronto!!!</span></b> Espero que tenham gostado do tutorial <b><span style="color: #ea9999;"><3</span></b></div>
</div>
<br />
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-2ZwdEJF78L4%2FVE1wenBtoOI%2FAAAAAAAAZDA%2FbajBs9ZLoww%2Fs1600%2F03.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgakO9EjTe6afZ85hcbXQkoNUxkE5zbXKFLmVEiZqfUBlJUNvKKDZTx2wbGocz92hb3NTE9V9ehdRS6nIEWj48jKYLI57iBgC914I_qi1qkv6Kqvi7sBiYwaRrhwi5MUzpr1Ej2bkfrHH0/s1600/03.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com0tag:blogger.com,1999:blog-993763511411605453.post-54374874584236028972014-10-23T16:03:00.000-02:002014-10-23T16:03:40.449-02:002 Modelos de Menu Simples<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmh4vauAueFXUAHMiIJMxLTwR0LpIfXoW9tPQrZYp32tvN1mEGF-1dYcEONK8gp6DVSanprzZ69ip3SA-eGFtCbW-0koiGLURB9FJ0YxqkzPhbjg2IcR1_P2Vz-y_OHkyZgrqX0Ua_GU0/s1600/01.png" /></div>
<div style="text-align: justify;">
<b><span style="color: #ea9999;">Bom Dia!!!</span></b> hoje temos o primeiro tutorial do blog, ele é bem simples/básico são dois modelos de menu simples que eu crie faz muito tempo para o meu antigo blog de tutoriais que hoje é um blog literário. Os primeiros tutoriais aqui do blog serão na maioria repostagens de códigos que eu crie, mas em breve teremos postagens fresquinhas <3</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Os dois modelos de menu por serem simples podem ser personalizados para a cor que vocês desejarem e é super fácil de aplica-los no blog, você não precisa saber quase nada de HTML. Confira os Preview do primeiro menu <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/teste.html" target="_blank">clicando aqui</a> e do segundo <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/menu-simples-2.html" target="_blank">clicando aqui</a>. Espero que gostem do primeiro tutorial do blog e que curtam sua estrutura bem simples.</div>
<div style="text-align: justify;">
</div>
<a name='more'></a><br /><br />
<div style="text-align: center;">
<b><span style="color: #ea9999;">Vamos ao Tutorial:</span></b></div>
<div style="text-align: justify;">
<span style="color: #ea9999;"><i>1° Passo:</i></span> Vá em Modelo > Editar HTML.</div>
<div style="text-align: justify;">
<i><span style="color: #f9cb9c;">2° Passo:</span></i> Procure por(Usando Ctrl+F): ]]></b:skin></div>
<div style="text-align: justify;">
<i><span style="color: #ffe599;">3° Passo:</span></i> Escolha o modelo do menu que deseja(<a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/teste.html" target="_blank">1</a> ou <a href="http://tutoriaisdomeumundomeuestilo.blogspot.com.br/2013/11/menu-simples-2.html" target="_blank">2</a>).</div>
<div style="text-align: justify;">
<span style="color: #b6d7a8;"><i>4° Passo:</i></span> Cole acima de "]]></b:skin>" o código referente ao menu escolhido.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<i><span style="color: #b6d7a8;">Código do Menu 1</span></i></div>
<blockquote class="tr_bq" style="text-align: justify;">
/*-----Início do Menu Simples por meumundo-meuestilo.blogspot.com.br-----*/<br />a.menusimples{<br />background-color: #CDB7B5; /*-----Cor do Fundo-----*/<br />padding-bottom: 10px; <br />padding: 10px;<br />text-align: center;<br />margin:3px;<br />color:#fff;<br />font-size: 12px; <br />}<br />a.menusimples:hover{<br />background-color: #FFE4E1; /*-----Cor do Fundo Houver-----*/<br />-webkit-transition-duration: .80s; <br />}<br />/*-----FIM do Menu Simples por meumundo-meuestilo.blogspot.com.br-----*/</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<i><span style="color: #b6d7a8;">Código do Menu 2</span></i></div>
<blockquote class="tr_bq">
/*-----Início do Menu Simples 2 por meumundo-meuestilo.blogspot.com.br-----*/<br />a.menusimples{<br />background-color: #CDB7B5; <span style="text-align: justify;">/*-----Cor do Fundo-----*/</span><br />padding-bottom: 10px;<br />padding: 10px; <br />border-radius:2px;<br />width:100px;<br />text-align: center;<br />margin:3px;<br />color:#fff;<br />font-size: 12px; <br />}<br />a.menusimples:hover{<br />border-radius:15px;<br />background-color: #FFE4E1; <span style="text-align: justify;">/*-----Cor do Fundo Houver-----*/</span><br />-webkit-transition-duration: .80s; <br />}<br />/*-----FIM do Menu Simples 2 por meumundo-meuestilo.blogspot.com.br-----*/</blockquote>
<div style="text-align: justify;">
<i><span style="color: #a2c4c9;">5° Passo: </span></i>Edite o código conforme seu gosto e preferencia.</div>
<div style="text-align: justify;">
<i><span style="color: #9fc5e8;">6° Passo:</span></i> Cole em um Gadget Java/Script o seguinte código:</div>
<blockquote class="tr_bq" style="text-align: justify;">
<a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a><br /><a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a><br /><a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a><br /><a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a><br /><a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a><br /><a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a></blockquote>
<div style="text-align: justify;">
<i><span style="color: #b4a7d6;">7° Passo:</span></i> Altere o codigo colocando o link e o nome do link.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: #ea9999;">Pronto!!!</span></b> Espero que tenham gostado do tutorial <b><span style="color: #ea9999;"><3</span></b></div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F1.bp.blogspot.com%2F-2xk1UNXjm7Y%2FVEk825QwFII%2FAAAAAAAAZB4%2FFdP-qc0AK4s%2Fs1600%2F01.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmh4vauAueFXUAHMiIJMxLTwR0LpIfXoW9tPQrZYp32tvN1mEGF-1dYcEONK8gp6DVSanprzZ69ip3SA-eGFtCbW-0koiGLURB9FJ0YxqkzPhbjg2IcR1_P2Vz-y_OHkyZgrqX0Ua_GU0/s1600/01.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com2tag:blogger.com,1999:blog-993763511411605453.post-24176628947047572032014-10-21T18:36:00.000-02:002014-10-21T18:47:08.862-02:00Bem Vindos!!!<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihTxerCUWyfTJ3wJW9nKaFNKxvjiUCUSQFnzBjz-n8VdsOW8EWGgstuja0Khf7bTe9UH2sDCiy2Py1qlyUyq58b8a5Qm3_TxA8J9h3RRewq0O6FNlOzyvxNERop9MDjtd0eQooZJBk64w/s1600/03.png" /></div>
<div style="text-align: center;">
<div style="text-align: justify;">
<b><span style="color: #ea9999;">Bom Dia!!!</span></b> essa é a primeira de muitas postagens do MFR,<strike> pelo menos eu espero</strike>, o blog terá um conteúdo bem variado com tutoriais e dicas sobre HTML, photoshop, musica, jogos, animes e oque eu achar valido compartilhar, só não teremos conteúdo como resenha de filmes e livros pois eu já tenho outro blog voltado para isso.</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Para quem não me conhece eu me chamo <b><span style="color: #ea9999;">Jéssica</span></b>, mas pode chamar de Jess, tenho 20 anos e já estou na blogosfera a mais de 5 anos, eu tenho outro blog com um conteúdo voltado a livros e filmes que vocês podem visitar e prestigiar <a href="http://meumundo-meuestilo.blogspot.com.br/" target="_blank">clicando aqui</a>, mas recentemente senti uma vontade de voltar a postar tutoriais e coisas do gênero e esse será o meu cantinho para isso <3<br />
<div style="text-align: justify;">
<a name='more'></a><br /></div>
<div style="text-align: justify;">
Bom se quiser me conhecer melhor pode fazer perguntas e se quiser algum tipo de postagem especifica no blog é só pedir por comentário.<br />
<br />
Já preparei alguns tutorias que serão postados essa semana para vocês, todos eles com menus e efeitos exclusivos.</div>
</div>
</div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-P-J0dhRuK-c%2FVEauryIG2EI%2FAAAAAAAAY_M%2FafADrvR2pNA%2Fs1600%2F03.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihTxerCUWyfTJ3wJW9nKaFNKxvjiUCUSQFnzBjz-n8VdsOW8EWGgstuja0Khf7bTe9UH2sDCiy2Py1qlyUyq58b8a5Qm3_TxA8J9h3RRewq0O6FNlOzyvxNERop9MDjtd0eQooZJBk64w/s1600/03.png" -->Jéssica Melohttp://www.blogger.com/profile/02115081022947316868noreply@blogger.com4