Mostrar mensagens com a etiqueta Blogger. Mostrar todas as mensagens
Mostrar mensagens com a etiqueta Blogger. Mostrar todas as mensagens

domingo, 9 de novembro de 2014

Ferramentas para avaliar o seu blog

Ferramentas para avaliar o seu blog

Boas pessoal, hoje vou disponibilizar alguns ferramentas que uso para avaliar/controlar o meu blog, estas ferramentas de avaliação são bastante úteis para percebermos a que nível as pessoas gostam do conteúdo do nosso blog. Muitos dos leitores, deixam comentários mas a maioria deles lê, gosta e nada comenta, outros publicam nas redes sociais, hoje estarei postando algumas ferramentas para avaliar o seu blog.


Ferramentas para avaliar o seu blog


Google Analytics- Ferramentas para avaliar o seu blog


Google Analytics - O google analytics é uma ferramenta para avaliar o seu blog, que todos os criadores de conteúdo deviam possuir. É gratuito e oferecido pelo Google. Nele conseguimos perceber a origem do tráfego, o país das pessoas de origem, as postagens que mais acessam, as palavras-chaves de sucesso, o tempo que as pessoas permanecem no seu blog, taxa de rejeições, etc. É uma ferramenta bastante importante para sabermos como está a evoluir o nosso blog.


Woorank - Ferramentas para avaliar o seu blog

Woorank - Woorank, oferece-nos um relatório bastante completo do nosso blog, é deveras uma ferramenta útil para avaliar o nosso blog. depois de digitar-mos o link do nosso blog é dada uma nota do mesmo, e a partir daí é só descobrir o que está correto e o que está errado, podemos ver uma lista de prioridades para o blog. É uma ótima ferramenta para quem trabalha com SEO. Esta é uma ferramenta para avaliar o nosso blog no instante, embora seja paga tem 7 dias grátis.


Pingdom - Ferramentas para avaliar o seu blog

Pingdom - Pingdom, é uma ferramenta que serve para avaliar a velocidade com que o nosso blog abre, e depois dá-nos uma informação na qual o nosso blog é superior a outros já testados. Não é uma ferramenta útil para a maioria dos usuários, mas é rápida e eficaz. Por isso esta na nossa postagem Ferramentas para avaliar o seu blog.


Webmaster Tools - Ferramentas para avaliar o seu blog

Webmaster Tools - Webmaster tools, é uma ferramenta importante para melhor o SEO do nosso blog. Com ela podemos receber avisos do google sobre: mudanças bruscas no tráfego, erros de rastreamento, etc; identificar correções no HTML; enviar sitemaps; identificar novos links, e muitas mais coisas.

Em suma, hoje disponibilizei uma grande variedade de ferramentas para avaliar o seu blog, espero que com elas consiga aumentar a sua visibilidade no google, até uma próxima aula! Um tutorial de Tuga Design Web  - Ferramentas para avaliar o seu blog





sábado, 18 de outubro de 2014

Como Criar um Blog - A interface do Blog (1ª Aula)


Criando um blog passo a passo - A interface do Blog

Boas pessoal bem-vindos à primeira aula de como criar um blog, sem dúvida que esta é a aula mais secante porque praticamente vocês não aprendem nada, contudo é muito importante para o desenrolar da "série" Como criar um blog.

A primeira coisa que nós vamos fazer é ir ao site blogger, posto isto  pressionam em Blogue Novo

Blogue Novo - Como criar um blog - 1ª Aula

Posto isto, irá ser apresentada uma janela deste género:

Título e Endereço do Blog - Como criar um blog - 1ª Aula

Título - Aqui vocês irão colocar o título do vosso blog, o título deve ter a ver com o tema retratado no blog, ou seja, se vocês criarem postagens sobre futebol, não irão dar um título tipo: agricultura. Mas sim desporto rei ou blog sobre desporto.

Endereço - Aqui é o endereço com que as pessoas encontram o vosso blog, é preferível ser algo simples e fácil de memorizar. 

Feito mais um passo da 1ª Aula de Como criar um blog, vamos passar ao próximo.

Menu Blogger - Como criar um blog - 1ª Aula
Depois de criarmos um blog, vamos encontrar este menu. Vou explicar sucintamente o que precisamos para já.

Visão Geral - Aqui conseguem acompanhar tudo o que se passa no vosso blog desde, comentários a aguardar pela vossa moderação, comentários publicados, visualizações de hoje, mensagens e seguidores;

Mensagens - Mensagens publicadas no vosso blog;

Páginas - Criar páginas, exemplo: formulário de contato, página sobre do vosso blog;

Comentários - Comentários publicados no Blog;

Estatísticas - Aqui podem ver quantas visualizações tem o vosso blog, de onde provém o tráfego, de que países são as pessoas que vistam vosso blog, etc;

Esquema - Aqui podem adicionar Mini aplicações ao vosso blog;

Modelo - Permite editar HTML do blog, personalizar o vosso blog e efectuar cópias de segurança do mesmo.

Definições - Podem alterar o título do vosso blog, adicionar descrição, alterar o endereço do blog, adicionar mais escritores ao blog, tornar o blog público ou privado, alterar o número de postagens por página, etc.

Primeira aula de como criar um blog de Tuga Design Web.


quarta-feira, 8 de outubro de 2014

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!

segunda-feira, 29 de setembro de 2014

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:

Template UG 3
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!

quarta-feira, 24 de setembro de 2014

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 ;)

segunda-feira, 22 de setembro de 2014

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!

sexta-feira, 19 de setembro de 2014

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

domingo, 14 de setembro de 2014

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






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

quinta-feira, 11 de setembro de 2014

Numeração de Páginas - Blogger

    Numeração de Páginas - Blogger



     Boas, hoje vou ensinar como colocar numeração de páginas no blog. No blog temos a opção de definir o número de postagens por página, contudo não é possível colocar numeração, em vez disso aparece "Postagens mais antigas" e "Postagens recentes". Ao colocarmos numeração fica mais fácil para o leitor navegar em seu blog, e hoje vão aprender a colocar numeração.

Colocar numeração, em primeiro lugar vamos adicionar o script, este não foi feito por mim. Vamos a Template -> Editar HTML e pressionamos Ctrl + F





E adicionamos este script acima:





var perPage=7;

 É o número de postagens, você deve definir consoante seu blog.


Estes números devem corresponder.



var numPages=6;

 É o número de páginas que aparecerá no navegador.

Adicionado o script, vamos adicionar o CSS e este sim foi elaborado por mim com ajuda de geradores para melhor o aspeto do nosso numerador de páginas

Adicionamos este código acima de:



Que se encontro em Template -> Editar HTML, para encontrar pressionamos Ctrl + F

1º Menu:




2º Menu:






Feito isto, temos o nosso numerador de páginas para blog concluído. Espero que gostem, se quiserem outro design peçam nos comentários.

quarta-feira, 10 de setembro de 2014

Botão Like - Blogger



Boas, hoje trago um botão Like do Facebook para blogger, que permitirá que os leitores gostem e compartilhem seu post. Então vamos aprender a adicionar o botão de Like Facebook.

Vamos a Template -> Editar HTML, pressionamos Ctrl + F e pesquisamos por:





Depois disso colocamos este código acima:

 

E pronto, fácil e rápido! Espero que tenham gostado se tiverem alguma dúvida de como adicionar botão Like do Facebook, deixem nos comentários.

terça-feira, 9 de setembro de 2014

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:







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"





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



 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




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

domingo, 7 de setembro de 2014

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:



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!