Inserir Fórum no Blogger - Uncomplicated Works

Inserir fórum no blogger

Boas pessoal!  Bem vindos a mais um tutorial do Blogger Uncomplicated Works, e hoje irei ensinar a incorporar um fórum no vosso blogger. O fórum irá ficar desta forma incorporado no seu blogger. O primeiro passo para criar o nosso fórum é: acessar a este local: Groups Google e pressionarmos criar novo grupo.

Feito isso vamos colocar as informações do nosso fórum como: Nome do Grupo, Endereço de e-mail do grupo, etc. Feito isto pressionamos no criar e preenchemos a caixa de informação, depois disso temos o nosso fórum criado, vamos escolher o nome de apresentação, pode ser qualquer um. E por fim pressionamos guardar as minhas alterações. 

Temos o nosso fórum criado agora só falta incorporá-lo no nosso blogger, para isso vamos ao url do grupo:

https://groups.google.com/forum/#!forum/grupoteste/new

E vamos copiar a parte que se encontra em vermelho e colocar neste código:

<iframe id="forum_embed"
src="javascript:void(0)"
scrolling="no"
frameborder="0"
width="900"
height="700">
</iframe>
<script type="text/javascript">
document.getElementById('forum_embed').src =
'https://groups.google.com/forum/embed/?place=forum/grupoteste'
+ '&showsearch=true&showpopout=true&showtabs=false'
+ '&parenturl=' + encodeURIComponent(window.location.href);
</script>

Depois de modificarmos o código para incorporar o fórum no nosso blogger, vamos colocá-lo numa página e salvámos a partir daí temos o nosso fórum incorporado no blogger, irá ficar deste género: Fórum

Podemos modificar as dimensões para adequar ao nosso blog, substituindo os valores de

width="900"

height="700"

para os desejados.

Espero que tenham gostado do tutorial do Uncomplicated Works e que tenham percebido como se incorpora um fórum no nosso blogger.

0 Comentários Continuar a ler »

Numeração de Páginas no Blogger - Uncomplicated Works

Numeração de Páginas Blogger

Boas pessoal! Bem-vindos a mais um tutorial do Blogger Uncomplicated Works, e hoje irei ensinar como colocar numeração de páginas no blogger. No blogger podemos definir o número de postagens por página, contudo se não aplicarmos nenhum código apenas irá aparecer postagens antigas, ao colocarmos a numeração no blogger o leitor poderá navegar de uma forma mais simples pelo nosso blog. Então vamos aprender a colocar numeração de páginas no blogger. 

A primeira etapa para instalarmos a numeração de página no blogger é inserirmos um script, para isso pressionamos CTRL + F e pesquisamos por </body> depois de encontrar adicionamos este script acima:

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<script type='text/javascript'>

  /*<![CDATA[*/

    var perPage=7;

    var numPages=6;

    var firstText ='Primeiro';

    var lastText ='Último';

    var prevText ='« Anterior';

    var nextText ='Seguinte »';

    var urlactivepage=location.href;

    var home_page="/";

  /*]]>*/

</script>

  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>

</b:if>

</b:if>

var perPage=7; é o número de mensagens na primeira página definidas no seu blogger

Numeração de Páginas - Blogger

Os valores devem ser os mesmos.

var numPages=6; é o número de páginas que irá aparecer no numerador de páginas.

Agora vamos adicionar o código css para melhorarmos o aspeto do nosso numerador de páginas, para isso pressionamos CTRL + F e pesquisamos por ]]></b:skin> e antes disso vamos colocar os códigos desejados:

1º Menu

.pagecurrent { text-decoration: none; background-color: #FF7B01; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…AiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+); background-image: -webkit-gradient(linear, 0% 0%, 100% 100%,color-stop(0, rgb(172, 79, 79)),color-stop(1, rgb(254, 244, 150))); background-image: -webkit-repeating-linear-gradient(top left,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); background-image: repeating-linear-gradient(to bottom right,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); background-image: -ms-repeating-linear-gradient(top left,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); border-top: 5px solid rgb(254, 244, 150); } .displaypageNum a:hover, .showpage a:hover { text-decoration: none; background-color: #FF7B01; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…AiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+); background-image: -webkit-gradient(linear, 0% 0%, 100% 100%,color-stop(0, rgb(172, 79, 79)),color-stop(1, rgb(254, 244, 150))); background-image: -webkit-repeating-linear-gradient(top left,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); background-image: repeating-linear-gradient(to bottom right,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); background-image: -ms-repeating-linear-gradient(top left,rgb(172, 79, 79) 0%,rgb(254, 244, 150) 100%); border-top: 5px solid rgb(254, 244, 150); border-bottom-right-radius: 1em; border-bottom-left-radius: 1px; } .displaypageNum a, .showpage a, .pagecurrent { padding: 5px 10px; margin-right: 5px; color: #3C3737; background-color: #404042; -webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); -moz-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); background-color: #d5a273; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…AiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+); background-image: -webkit-gradient(linear, 0% 0%, 100% 100%,color-stop(0, rgb(254, 244, 150)),color-stop(1, rgb(172, 79, 79))); background-image: -webkit-repeating-linear-gradient(top left,rgb(254, 244, 150) 0%,rgb(172, 79, 79) 100%); background-image: repeating-linear-gradient(to bottom right,rgb(254, 244, 150) 0%,rgb(172, 79, 79) 100%); background-image: -ms-repeating-linear-gradient(top left,rgb(254, 244, 150) 0%,rgb(172, 79, 79) 100%); -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.2s ease; }

2º Menu

.displaypageNum a:hover, .showpage a:hover, .pagecurrent { text-decoration: none; color: wheat; 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-bottom: 5px solid wheat; border-radius: 5px; } .displaypageNum a, .showpage a, .pagecurrent { padding: 5px 10px; margin-right: 5px; color: wheat; background-color: #404042; -webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); -moz-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53); background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); -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.2s ease; }

Feito isto, temos a numeração de páginas implementadas no nosso blog, espero que tenham gostado do tutorial do Uncomplicated Works, e se tiverem alguma dúvida sobre como colocar numeração de página no blogger deixem nos comentários. Hoje aprendemos a colocar numeração de página no blogger.

0 Comentários Continuar a ler »

Como colocar diferentes tipos de Letras no Blogger ~ Uncomplicated Works

Tipos de Letras - Blogger

Boas pessoal! Bem-vindos a mais um tutorial do Blogger Uncomplicated Works, e como o nome indica, não vamos fazer nada de complicado: o tutorial é sobre mudar o tipo de letra ou fonte do nosso blogger. O blogger disponibiliza alguns tipos de letras contudo existe uma enorme variedade disponibilizada pelo Google Fonts, assim podemos colocar diferentes tipos de letra no nosso blog. Antes de inserir o tipo de letra no blogger devemos escolher um tipo de letra então, vamos ao Google Fonts. 

Alguns exemplos de tipos de letra:

Tipo de letra - Open Sans Condensed - Uncomplicated Works

Tipo de letra - Lobster - Uncomplicated Works

Tipo de letra - Indie Flower ~ Uncomplicated Works

Bem, depois de escolhido o tipo de letra, vamos ao passo 3

Tipos de letras Blogger - Passo 3

e escolhemos Standard, copiamos o código que aparece,  vamos a modelo clicamos em editar HTML e procuramos por </head> Podem simplesmente pressionar Ctrl + F para uma busca mais rápida. E antes adicionamos o código anteriormente copiado.

Feito isto, se você não adicionar mais nada a fonte não será aplicada ao blogger,  necessitamos de inserir o código CSS, pressionamos Ctrl+F e pesquisamos por ]]></b:skin>, antes disso colocamos o seguinte código:

body {
Tipo de fonte;
}

Onde se encontra tipo de fonte vamos adicionar o código dado pelo Google Fonts no passo 4.

Tipos de Fontes Blogger - Passo 4

O código CSS para diferentes tipos de Letras no Blogger, deve ficar deste género:

body {
font-family: 'Indie Flower', cursive;
}

Feito isto basta guardar o modelo, e ver se o tipo de letra mudou, se o tipo de fonte se manteve apague o código CSS e poste nos comentários, porque pode ter outros códigos interferindo, então eu irei ajudar.

Espero que tenham gostado do tutorial como colocar diferentes tipos de Letras no Blogger de Uncomplicated Works

0 Comentários Continuar a ler »

Como colocar Menu no Topo do Blogger ~ Uncomplicated Works

Menu no Topo - Blogger

• Aprenda a colocar um Menu Scroll Fixo - Novidade
• Três diferentes menus para o Blog

Boas pessoal! Bem-vindos ao primeiro tutorial do Blogger Uncomplicated Works, e como o nome indica, não vamos fazer nada de complicado: o tutorial é sobre o menu fixo no topo. Como podem ver no meu blog existe uma barra fixa no topo, que contém as categorias do meu blogger assim como uma caixa de pesquisa, e neste tutorial vou apenas ensinar a colocar as categorias e depois mais tarde irei abordar a colocação de uma caixa de pesquisa e ícones para as redes sociais. Caso estejam interessados nisso neste momento, deixem algo nos comentários, e irão obter a minha ajuda. Contudo, para já vamos apenas criar o menu fixo no topo, que é como eu já disse, bastante simples. A primeira etapa para colocarmos o menu fixo no topo do blogger, é inserirmos este código no HTML do blog. Este código terá de ser colocado depois de " <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> " Podem simplesmente pressionar Ctrl + F para uma busca mais rápida.

<div class='menutopo'>
<nav class='menu'>
<a href='#' title="Home" >Home</a>
    <a href='#' title="Templates" >Templates</a>
    <a href='#' title="Tutoriais">Tutoriais</a>
    <a href='# title="Windows"'>Windows</a>    
</nav>
</div>

Depois de inserir o código HTML do nosso menu fixo vamos modificá-lo a nosso gosto, onde se encontra # colocamos o url desejado. O title é a informação que irá aparecer quando o rato estiver sobre o texto e o que se encontra entre >Aqui</a> substituímos de forma a que o menu fique do nosso agrado. Para que o menu fixo no topo do blogger esteja pronto, só necessitamos de inserir o código CSS, pressionamos Ctrl+F e pesquisamos por ]]></b:skin> e antes disso vamos colocar o seguinte código:

nav.menu a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
text-decoration: none;
font-family: 'Laila',serif;
font-size: 18px;
color: rgba(30, 144, 255, 0.7);
transition: border 0.3s, color 0.4s linear;
}
.menutopo {
position: fixed;
height: 60px;
width: 100%;
z-index: 1;
background: black;
}

nav.menu a:hover {
color: white;
border-bottom: 3px solid white;

}

Feito isto, temos o menu no topo do blogger assim: Teste Menu

Para modificarem o menu a vosso gosto, podem alterar algumas partes como:

'color: red' - color define a cor do texto, ou seja, depois dos dois pontos vamos colocar a cor que nós desejamos, onde aparece nav.menu a:hover é a cor do texto quando o rato está sobre o texto.

'background: black' - define a cor do fundo do menu, alterem para os valores que desejarem.

4 Comentários Continuar a ler »