Como criar logótipos online

Como criar logótipos online

Como criar logótipos online

Boas pessoal bem-vindos a mais uma postagem de Tuga Design Web, e desta vez não vamos abordar o tema tutoriais para blog, mas sim, sites onde vocês podem facilmente criar algo para o vosso blog, desde logótipos, citações, etc. Como todos sabem na web existe muitos sites para criar um tipo de letra, exemplo: criar um logótipo tipo Harry Potter.

Tuga Design Web

Hoje em dia pode-se fazer na web facilmente o que se faz no photoshop e programas do género a única contrariedade é que vocês podem criar um logótipo e outro pessoa ir lá e criar um igual.

Imagem Ilustrativa - Design Web

Na imagem vemos Newton a descobrir a força da gravidade e o despontar de uma nova Lei. Do outro lado, encontramos Steve Jobs a descobrir que o logótipo da maça (apple) pode dar-lhe um enorme lucro. Bem, eu conheço dois sites e utilizo um particularmente que é o: Cooltext, onde você pode encontrar vários logótipos com um design arrojado, e além disso, com apenas uns cliques, definitivamente a Web dá pra tudo. Podem ver aqui alguns logótipos que poderão ser feitos no cooltext:

Alguns exemplos de logótipos arrojados. - Design Web

Contudo este site não fica por aqui ele fornece-nos uma quantidade enorme de tipos de letras que podemos usar nos nossos logótipos, ou então, transferir para usar no nosso computador.

Tipos de letra - Design Web

E como por vezes agradamos a uns e não a outros, existe um website que pode criar letras deste género:

Tuga Design Web

Com os simples cliques na web isto poderá ser feito, o site em questão é: http://www.picturetopeople.org/

Nele podem encontrar uma grande variedade de tipos de letras:

Tipos de Letra - Design Web

Citação - Design Web

E como não há  2 sem 3, sabiam que a  pagina 404 é a 33ª mais vista de todas as webpages. Podem conferir a página de erro 404 do nosso blog, www.tugadesignweb.blogspot.pt/error404. Se quer aprender a fazer quotes ou algo do género, confira:

Quote Image

Bem pessoal, e chegamos ao fim de mais uma postagem de Tuga Design Web, espero que tenham gostado. Não se esqueçam do comentário! Até à próxima aula!

Tuga Design Web

Ler Mais

Personalizar SideBar - Blogger

Boas, hoje vou ensinar a personalizar a SideBar do nosso blog. Para quem não sabe sidebar é a barra que se encontro à esquerda ou à direita do conteúdo do blog: 

Exemplo:

Esquema do Blog

Quando nós criámos um blog, e escolhemos um template base a nossa SideBar encontra-se desta forma:

Sidebar com borda a preto

Para personalizarmos a nossa sidebar vamos usar a classe aside ao adicionarmos código css dentro dessa classe começamos a personalizar a nossa sidebar.

aside {

}

Agora dentro  dos { } é só colocar o nosso código css para personalizarmos a sidebar a nosso gosto. Bem, eu acho que devemos colocar um padding e ele não deve ser eliminado porque dá-nos uma distância para o texto não ficar encostado à borda. Então:

aside {

padding: 20px 5px 20px 5px;

}

A parte adicionada irá dar-nos uma distância entre a borda e o conteúdo, a distância dado no topo e no fim é de 20 px e nas laterais de 5px, podem alterar para se adequar melhor ao seu blog, sendo que o primeiro é a distância em relação ao topo, o segundo em relação à direita, o terceiro ao fim e o quarto à esquerda.

Feito isto podemos adicionar mais coisas, essas serão mencionadas no código abaixo:

aside {

background: rgb(73,192,240); /* Cor de Fundo, pode adicionar imagem deste modo background-image: url("url_da_imagem") */

color: wheat; /* cor do texto */

border-radius: 5px; /* Arredondamento da borda*/

font-size: 12px; /* Tamanho do texto */

padding: 20px 5px 20px 5px;

border: 2px solid black; /* Adiciona uma borda de 2px totalmente preenchida, podem substituir o solid por dashed, dotted, double para efeitos diferentes, e finalmento o black é a cor da borda. Se não quiserem borda removem esta parte. */

}

Feito isto temos a nossa sidebar personalizada, podemos é modificar os links adicionando isto:

aside a:link, aside a:visited {

    color: wheat;

    text-decoration: none;

}

aside a:hover {

    color: black;

    text-decoration: none;

}

aside a:link, aside a:visited - Coloca a cor do link e do link visitado wheate retira o sublinhado usando a parte text-decoration: none;

aside a:hover - Coloca a cor do link quando estiver o rato sobre ele preto e retira o sublinhado.

E finalmente para modificar o título da nossa sidebar usamos:

aside h2 { 

   background-color: rgba(3, 23, 31, 0.16); 

   padding: 5px;  

   border: 1px solid rgba(0, 0, 0, 0.17); 

   text-align: center;

 }

Adicionam este código em HTML --> Modelo --> Editar HTML

Pressionam Ctrl + F e pesquisam por ]]></b:skin>

Acima disso coloquem o código que estivemos a desenvolver:

 aside {

background: rgb(73,192,240); /* Cor de Fundo, pode adicionar imagem deste modo background-image: url("url_da_imagem") */

color: wheat; /* cor do texto */

border-radius: 5px; /* Arredondamento da borda*/

font-size: 12px; /* Tamanho do texto */

padding: 20px 5px 20px 5px;

border: 2px solid black; /* Adiciona uma borda de 2px totalmente preenchida, podem substituir o solid por dashed, dotted, double para efeitos diferentes, e finalmento o black é a cor da borda. Se não quiserem borda removem esta parte. */

}

aside a:link, aside a:visited {

    color: wheat;

    text-decoration: none;

}

aside a:hover {

    color: black;

    text-decoration: none;

}

aside h2 { 

   background-color: rgba(3, 23, 31, 0.16); 

   padding: 5px;  

   border: 1px solid rgba(0, 0, 0, 0.17); 

   text-align: center;

 }

Irá ficar deste modo:

Sidebar personalizada

Pronto e hoje aprenderam a personalizar a SideBar, se tiverem alguma dúvida ou não conseguirem personalizar a vossa Sidebar deixem nos comentários que eu irei ajudar. Mais um tutorial de Tuga Design Web!

Ler Mais

Como criar área de crédito - Blogger

Como criar área de crédito

Boas pessoal, hoje vou ensinar como criar área de crédito para blogger, desculpem não ter feito muitas postagens, mas isso tem uma desculpa, eu tenho andado a criar templates para blogger para depois vos fornecer para colocarem nos vossos, como eu não percebo muito de design vai devagarinho. Então aqui vai uma amostra de 2 templates:

Como criar área de crédito

Como criar área de crédito

Chega de "paleio" e vamos ao que interessa: Aprender a criar uma área de crédito. Em primeiro lugar temos de remover o crédito que existe pela Tecnologia Blogger. Para isso vamos a Modelo --> Editar HTML e pressionamos:

Ctrl + F

Feito isso pesquisamos por

Attribution1

Aqui é o HTML da área de crédito do blogger. Aqui vamos realizar algumas modificações para criar nossa área de crédito. Para isso devemos-nos concentrar nesta área do código:


<!-- outside of the include in order to lock Attribution widget -->
      <b:section class='foot' id='footer-3' showaddelement='no'>
        <b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Onde está a vermelho 'no' devemos substituir por 'yes'
Onde está a verde 'true' devemos substituir por 'false'

Ficando assim:


<!-- outside of the include in order to lock Attribution widget -->
      <b:section class='foot' id='footer-3' showaddelement='yes'>
        <b:widget id='Attribution1' locked='false' title='' type='Attribution'>

Posto isto, vamos a Esquema e removemos a Atribuição.

Como criar área de crédito

Se repararem agora aparece a opção remover na área de credito do blogger isto deve-se ao facto de termos colocado  locked='false'. Feita a remoção vamos adicionar a nossa área de crédito.

Vamos a Modelo --> Editar HTML e pressionamos: 

Ctrl + F

Feito isso pesquisamos por

</body>

E agora adicionamos a nossa área de crédito para blogger adicionando este código:


div align='center' style='margin:10px' class='Tugacredito'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#169; Copyright 2014. Tecnologia do <a href='http://www.blogger.com/'>Blogger</a>. </div>

Agora é só aletar a parte <a href='http://www.blogger.com/'>Blogger</a>. </div> pelo link do nosso blog e o nome.

Feito isto temos a área de crédito para o nosso blog. Espero que tenham gostado qualquer dúvida comente!

Ler Mais

Criar caixas de pesquisa personalizadas - Blogger

   Boas, hoje aqui no blog Tuga Design Web vamos ensinar a personalizar as caixas de pesquisa para blogger. Como devemos saber o Google já possui essa caixa de pesquisa, o que nós vamos fazer é personalizá-la. Então para personalizarmos a nossa caixa de pesquisa, em primeiro lugar vamos colocá-la. Para colocar a nossa caixa de pesquisava vamos a Esquema -> Adicionar Mini aplicação e adicionamos Caixa de pesquisa.

Feito isto, vocês já possuem vossa caixa de pesquisa no seu blog, agora vamos personalizá-la.

Para personalizar a nossa caixa de pesquisa vamos a Modelo -> Editar HTML 

Pressionamos:

Ctrl + F 

E pesquisamos por:

]]></b:skin>
Feito isto, vamos escolher a caixa de pesquisa que eu personalizei, abaixo dela terão o código para personalizar a caixa de pesquisa que deverão colocar antes da parte pesquisada.

form.gsc-search-box { background: rgb(125,126,125); background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); border-radius: 5px; padding-left: 5px; padding-right: 5px; padding-top: 2px; }

form.gsc-search-box { background: rgb(167,207,223); background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1))); background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); border-radius: 5px; padding-left: 5px; padding-right: 5px; padding-top: 2px; }

form.gsc-search-box { border-radius: 5px; padding-left: 5px; padding-right: 5px; padding-top: 2px; background: rgb(240,249,255); background: -moz-linear-gradient(top, rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1))); background: -webkit-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); background: -o-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); background: -ms-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); background: linear-gradient(to bottom, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); }

E pronto, mais uma aula de Tuga Design Web, espero que tenham gostado das caixas de código personalizadas para blogger, se quiserem uma só para seu blog com outras cores, peça nos comentários ;)

Ler Mais

Como colocar menu no topo - Blogger

Boas, hoje irei ensinar-vos como colocar um menu no topo do blog. É bem simples apenas precisam de prestar um pouco de atenção, então vamos lá aprender a colocar um menu no topo do blogger.

Em primeiro vamos a Modelo -> Editar HTML 

Pressionamos:

Ctrl + F 

E procuramos por:

<body>

E depois desse código vamos colocar o código HTML a seguir:



<!-- Menu Topo --> 

<div class='TugaDesignWebBack' style='height: 50px;'/>
<div class='TugaDesignWeb' href='/#'>Menu</div>
<div class='TugaDesignWeb' href='/#'>Menu</div>
<div class='TugaDesignWeb' href='/#'>Menu</div>
<div class='TugaDesignWeb' href='/#'>Menu</div>



Feito isto vamos substituir esta parte:  href='/#'>Menu</div>

Onde tem "/#" devemos substituir por o link da página que nós queremos que o leitor vá e substituímos Menu pelo texto desejado.

Exemplo:

<div class='TugaDesignWeb' href='http://tugadesignweb.blogspot.pt/2014/09/css-button-lima-1.html'>CSS Button</div>


Se quiserem adicionar mais opções é só acrescentar: <div class='TugaDesignWeb' href='/#'>Menu</div>


Posto isto o menu deve ficar deste modo:

Agora vamos passar ao design do nosso menu no topo, para isso vamos usar código CSS:


Pressionamos:

Ctrl + F 

E procuramos por:

]]></b:skin>

Se quiserem um menu neste modo:

Adicionam este código CSS antes:


.TugaDesignWeb { background: #FFF500; text-align: center; border-radius: 3px; box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset; -webkit-transition: 0.3s; -moz-transition-duration: 0.3s; -htm-transition-duration: 0.3s; display: inline-block; font-style: normal!important; color: black!important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.26); padding: 10px; font: italic 15px arial; position: relative; font-weight: bold; margin-left: 10px; cursor: pointer; padding-left: 50px; padding-right: 50px; text-shadow: 2px 2px 5px #800000; box-shadow: 1px 1px 1px yellow; top: 12%; }
.TugaDesignWebBack { width: 100%; height: 32px; background-color: black; border: 2px solid yellow; border-radius: 10px; box-shadow: 2px 2px 5px #000000; }
div.TugaDesignWeb:hover { transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); background: #FFEB00; text-decoration: none; }

Se preferirem este menu colocam este código CSS antes:


.TugaDesignWebBack { width: 100%; height: 32px; background: rgb(69,72,77); background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); border: 1px solid rgb(129, 121, 121); border-radius: 10px; }
.TugaDesignWeb { text-align: center; border-radius: 3px; -webkit-transition: 0.3s; -moz-transition-duration: 0.3s; -htm-transition-duration: 0.3s; display: inline-block; font-style: normal!important; color: black!important; padding: 10px; font: italic 15px arial; position: relative; font-weight: bold; margin-left: 10px; cursor: pointer; padding-left: 50px; padding-right: 50px; top: 12%; background: rgb(169,3,41); background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); }
div.TugaDesignWeb:hover { transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); background: #FFEB00; text-decoration: none; }

Espero que tenham aprendido a colocar um menu no topo do blog. Até à próxima aula, se quiserem modificar o Design ou se tiver algum erro, deixe nos comentários que eu ajudo!

Ler Mais

Como criar post aleatório e personalizar - Blogger

´

Boas, hoje irei ensinar como criar um post aleatório e personalizá-lo. Este widget é útil em blogs que tenham muitas postagens e deste modo fica mais fácil para o leitor poder ter acesso a postagens mais antigas.

O código é em JavaScript, ele permite edição. Contudo se você não perceber de JavaScript, vai poder apenas escolher uma imagem, ou deixar em texto e editá-lo com CSS. Em primeiro lugar vamos aprender a criar um botão de Post aleatório com imagem.  Vamos à secção Esquema -> Adicionar miniaplicação -> HTML/JAVASCRIPT e colocam o seguinte código para obterem um botão de post aleatório com imagem, ficara deste forma:

<span class="wlWriterPreserve" id="preserve0494d138efe349cc96867b72108cbb45"><script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = '<img src="http://uuuiiii.zip.net/arr_blog_109_ran2.jpg"/>'; document.getElementById('myLuckyPost1').appendChild(a); } </script></span> <span class="wlWriterPreserve" id="preserved0d51eabe3024fba8115ec3460b82bbb"><script src="/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=feelingLucky"></script></span>

Podem substituir a imagem alterando a parte que está em vermelho por outra.

Para personalizar o post aleatório por CSS usem este código:

<div id="myLuckyPost1"></div> <span id="preserve0494d138efe349cc96867b72108cbb45" class="wlWriterPreserve"><script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Post Aleatório'; document.getElementById('myLuckyPost1').appendChild(a); } </script></span> <span id="preserved0d51eabe3024fba8115ec3460b82bbb" class="wlWriterPreserve"><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script></span>

Podem substituir o texto Post Aleatório que está de cor vermelha para outro texto.

Vamos à parte do CSS

Para criarem um post aleatório igual ao meu depois de adicionarem o código JavaScript adicionem este código abaixo:


<style>
div#myLuckyPost {
position: relative;
display: inline-block;
margin: 20px;
}
div#myLuckyPost:after {
content: "";
height: 100%;
width: 100%;
padding: 4px;
position: absolute;
bottom: -15px;
left: -4px;
z-index: -1;
background-color: transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div#myLuckyPost a:active {
top: 10px;
background-color: #F78900;
-webkit-box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
-moz-box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}
div#myLuckyPost a {
color: white;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
text-align: center;
text-decoration: none;
background-color: #f45145;
display: block;
position: relative;
padding: 20px 40px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: 0px 1px 0px #000;
filter: dropshadow(color=#000, offx=0px, offy=1px);
-webkit-box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #CA2121;
-moz-box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #CA2121;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>

Se perceberem de CSS podem personalizar o código se não, podem-me pedir nos comentários que eu faço para vocês. Espero que tenham gostado e saibam como colocar um post aleatório no vosso blog. Mais uma aula de TugaDesignWeb

Ler Mais

Personalizar Postagens Populares - Blogger

Boas, hoje irei ensinar a personalizar as postagens populares. A plataforma blogger oferece-nos esse widget, e hoje eu vou ensinar a instalar e personalizar.

Em primeiro lugar vamos a Esquema -> Adicionar mini-aplicação e escolhemos Mensagens Populares.

Depois disso pressionamos o + e configuramos a nosso gosto.

Feito isto, já possui o widget Postagens Populares, agora vamos personaliza-lo a nosso gosto.

Se você quiser um widget de postagens populares igual ao meu coloque este código em: Modelo -> Personalizar -> Avançadas -> Adicionar CSS

1º Postagens Populares

.PopularPosts img { padding-right: .4em; margin-left: 10px; } .PopularPosts .widget-content ul li { background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); color: #ffffff!important; border-radius: 3px; -moz-border-radius: 3px; height: 80px; text-decoration: none; -webkit-transition: all .3s ease-in-out !important; font-weight: bold!important; } .PopularPosts .widget-content ul li:hover { margin-left: 20px; background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); border-right: 5px solid wheat; }

Se você quiser um widget de postagens populares para blogger com outro design, peça nos comentários! Espero que gostem! 

Ler Mais

Caixas de Código Personalizadas - Blogger

Caixas de Código Personalizadas - Blogger

Boas, hoje vou ensinar como criar caixas de código personalizadas, é um recurso bastante útil porque podemos diferenciar o texto do código, podemos sempre usar a Citação, mas uma caixa de código fornece-nos mais opções. Em primeiro vou exemplificar uma caixa de código dita normal:

Isto é uma caixa de código normal.


O código usado é este:

<textarea name="textarea" onfocus="this.select()" onmouseover="this.focus()" style="font-weight: bold; height: 200px; margin: 2px; padding: 20px; width: 300px;">Isto é uma caixa de código normal.
</textarea>

Agora o que vamos fazer é ao código da caixa de código personalizada inserir uma class para podermos personalizar a nossa caixa de código. Adicionemos por exemplo class="box"

Isto é uma caixa de código personalizada!



 E adicionam este código CSS para personalizar sua caixa de código: Modelo -> Personalizar -> Avançadas -> Adicionar CSS

textarea.box { background-image: url("http://www.quemdisse.com.br/autores/bartsimpson.jpg"); overflow: auto; background-image: url("http://www.quemdisse.com.br/autores/bartsimpson.jpg"); overflow: auto; height: 200px; margin: 2px; width: 300px; padding: 20px; color: white; font-weight: bold; }

 Sempre que quiserem criar uma caixa de código personalizada tem de inserir este código na parte HTML da vossa mensagem:

  O código usado é este:

<textarea class="box" name="textarea" onfocus="this.select()" onmouseover="this.focus()" style="font-weight: bold; height: 200px; margin: 2px; padding: 20px; width: 300px;">Aqui o código.
</textarea>

Ou então podem optar por uma caixa de código sem uma imagem predefinida, em que apenas tem de colocar as tag <code> no início e </code> no fim.
Ficaria deste género:

 Aqui o código por Lima

O código usado é este:

<code>Aqui o código</code>


 Se optarem por esta parte mais simples só tem de adicionar este código em: Modelo -> Personalizar -> Avançadas -> Adicionar CSS


code{ display: block; padding: 10px; overflow:auto; color:white; font-size:80%; background-color: #1a82f7; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #1a82f7); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #1a82f7); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #1a82f7); }

Espero que tenham gostado e se desejarem uma caixa de código personalizada deixem nos comentários que eu irei criar!

Ler Mais

CSS Button - Lima #1

CSS Button - Lima #1

Boas, hoje irei fornecer um botão feito completamente em CSS com um fundo de uma imagem, pode ser útil para o vosso blog, para colocarem onde quiserem. É um CSS botão com vários efeitos, podem ver como ele funciona colocando o rato em cima do botão criado em CSS:

Lima

Aqui está o código CSS:

.pacman { color: black; border: 1px solid #E1E1E1; background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRovu52aSruC0MMts9vfhlYKTG4f38JH0Dfs7xEld93RT5ay5fS"); text-decoration: none; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 10px; font-weight: bold; font-size: 40px; position: relative; float: left; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; text-shadow: 0px 4px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 1px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; transition: 1s ease-in-out; font-family: "Brush Script MT", cursive; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-filter: grayscale(100%); } .pacman:hover { -webkit-filter: grayscale(0%); text-shadow: 4px -5px 6px white, 2px -4px 10px yellow, 0px -13px 20px #ff8000, 0px -18px 40px black; text-shadow: -3px -0px 10px #000, 1px 1px 1px #000; color: #FF8900; padding-top: 15px; padding: 12px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }

Aqui está o código HTML:

<div class="pacman"> Lima</div>

E este é o primeiro CSS Button muitos outros virão! Espero que gostem :)

Ler Mais

Fundo das imagens - Blogger

Como retirar o fundo das imagens do blog

Boas, o tutorial de hoje é de como retirar o funda das imagens que colocámos nas postagens! Quando publicava uma imagem no blog ela ficava com um fundo branco e eu pensava que era devido à mesma não possuir fundo transparente, só que depois fazia download da imagem e ela não possuía fundo branco. 

O problema:

Depois de pesquisar no código do blog encontrei isto:

Este código diz que as imagens colocadas nas postagens irão possuir fundo branco, com border X e com box-shandow X, ou seja, mesmo ao colocar imagens sem fundo o blog automaticamente irá colocar o fundo. Para resolver o problema do fundo branco temos de modificar o código e para não complicarmos vamos coloca-lo da forma mais rápida e fácil:

Avançadas

Adicionar CSS

E iremos colocar o seguinte código para retirar o fundo branco das imagens nas postagens:
.post img { background-color: transparent!important; border: none; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0); }

Resultado:

Espero que este tutorial de como retirar o fundo das imagens do blog tenha sido útil, se o código fornecido não funcionar informe nos comentários que eu irei ajudar!

Ler Mais