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

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:


<data:post.body/>


Depois disso colocamos este código acima:

  <p> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/></p>

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.

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

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