Retirar a borda das Imagens do Modelo de Visualizações dinâmicas

Olá pessoal, bem vindos a mais um tutorial do Uncomplicated Works e hoje vou ensinar como retirar a borda das imagens do modelo de Visualizações dinâmicas, eu já tinha postado anteriormente e tinha pensado que resolveria em todos os tipos de modelos do blogger, contudo recebi um comentário a pedir para retirar do modelo de visualizações dinâmicas, eu logo instalei um modelo desse género e deparei-me que não possuía o mesmo código que os outros modelos, por isso hoje irei vos ensinar como retirar a borda das imagens do modelo de visualizações dinâmicas. 

Retirar a Borda das Imagens dos Modelos 'Normais'

1º Passo: Modelo -> Editar HTML 

2º Passo: Pressionar CTRL + F e pesquisar por ]]></b:skin>

3º Passo: Acima da tag pesquisada coloquem o seguinte trecho:

.article .article-content img:not(.deferred) {

padding: 0px!important;

}

Retirar a borda das Imagens do Modelo de Visualizações dinâmicas

 Resultado:

Retirar a borda das Imagens do Modelo de Visualizações dinâmicas

Feito isso, as vossas imagens não irão ter mais bordas, espero que tenham  conseguido retirar as bordas das vossas imagens, até ao próximo tutorial!

0 Comentários Continuar a ler »

Personalizar caixa de pesquisa do Blogger

Olá pessoal, bem vindos a mais um tutorial do Uncomplicated Works e hoje irei ensinar-vos como modificar a caixa de pesquisa do vosso blog. A caixa de pesquisa é algo que tem de estar sempre presente no vosso blog, irá ajudar o leitor a encontrar o que procura de uma forma mais simples, e por isso tem de estar a condizer com o blog, assim sendo hoje trago-vos alguns exemplos de caixas de pesquisa para o vosso blog.

1º Passo: Esquema -> Adicionar uma Miniaplicação -> Caixa de Pesquisa

Personalizar caixa de pesquisa do Blogger

2º Passo: Modelo -> Editar HTLM -> Crtl +F e pesquisar por ]]></b:skin>

3º Passo: Antes da tag encontrada adicionar o código CSS desejado para o nosso botão de pesquisa do Blog

Modelo 1:

input.gsc-input {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvHXKH3YLAQyvyYUuRSDIHxA5k6LuWgy9LTv6UVd8RjWeUi2V5fZnztQe_u2eMIoTWfaQFA_cGV8ki8xsl9Mxv9fp_1GAyTdbleAhMUYFCKJu8PdeLWN9XK1eisz0tQCTdBHG74b_GDeW/s30/search_icon.png);

    background-color: #2c2c2c;

    color: #FFF;

    background-repeat: no-repeat;

    background-position-x: 100%;

    border: 0px!important;

    background-position-y: 2px;

    height: 30px;

   

    

}

input.gsc-search-button {

    height: 32px;

    margin-left: -2px!important;

    background: #DC5050;

    border: 0px;

    border-top-right-radius: 4px;

    border-bottom-right-radius: 4px;

    color: white;

    font-weight: bold;

    text-shadow: black 0.1em 0.1em 0.2em;

}

input.gsc-search-button:hover {

    cursor: pointer;

}

Modelo 2:

input.gsc-input {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvHXKH3YLAQyvyYUuRSDIHxA5k6LuWgy9LTv6UVd8RjWeUi2V5fZnztQe_u2eMIoTWfaQFA_cGV8ki8xsl9Mxv9fp_1GAyTdbleAhMUYFCKJu8PdeLWN9XK1eisz0tQCTdBHG74b_GDeW/s30/search_icon.png);
    background-color: #2c2c2c;
    color: #FFF;
    background-repeat: no-repeat;
    background-position-x: 100%;
    border: 0px!important;
    background-position-y: 2px;
    height: 30px;
    border-radius: 20px;
   
    
}

input.gsc-search-button {
    height: 32px;
    margin-left: -2px!important;
    background: transparent;
    border: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: white;
    font-weight: bold;
    text-shadow: black 0.1em 0.1em 0.2em;
}

input.gsc-search-button:hover {
    cursor: pointer;
}
div#CustomSearch1_form {
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 30px;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.25);
    padding: 8px;
    padding-left: 15px;
}

form.gsc-search-box {
    margin-top: 5px!important;
}

Espero que tenham gostado do tutorial de como personalizar caixa de pesquisa do Blogger, e que acima de tudo tenham conseguido colocar no vosso blog, se não estiverem a conseguir ou preferirem de outro género com outras cores ou outras formas, não hesitem a pedir nos comentários eu certamente irei ajudar, até ao próximo tutorial!

0 Comentários Continuar a ler »

Como modificar o cursor do Mouse no Blogger

Como modificar o cursor do Mouse no Blogger

Olá, sejam bem vindos a mais um tutorial do Uncomplicated Works, hoje irei ensinar como modificar o cursor do Mouse do vosso blog que vem por base, é bastante simples, basta inserir um pequeno trecho de código no vosso template, adicionando a imagem que vocês querem para o vosso cursor.

Com este tutorial de modificar o cursor do Mouse no Blogger, pretendemos mostrar como personalizar o seu blog, diferenciando-o dos outros, com um código bastante simples!

É bem simples de colocar, e não afetará o rendimento das suas páginas.

1º Passo - Ir a Modelo -> Editar HTML

2º Passo - CTRL + F e pesquisa por ]]></b:skin>

3º Passo - Antes da tag pesquisada, adicionamos este trecho: body {cursor: (URL_DA_IMAGEM), auto;}

4º Passo- Adicionar a imagem pretendida, http://www.cursors-4u.com/ este site dispõem de uma variedade elevada de cursors, certamente que irá encontrar o seu pretendido, para personalizar o seu blog da forma desejada.

Exemplos(Coloque o Cursor sobre o quadrado):

Sexy Red Lips:

Código: body{cursor: url(http://ani.cursors-4u.net/symbols/sym-8/sym761.ani), url(http://ani.cursors-4u.net/symbols/sym-8/sym761.png), auto;} 

Disney Frozen:

Código: body {cursor: url(http://ani.cursors-4u.net/movie/mov-2/mov139.cur),auto;} 


Espero que tenham gostado e que acima de tudo tenham conseguido modificar o cursor do mouse no vosso blog, este tutorial é válido para qualquer outro tipo de plataformas que aceite edição de CSS, só têm de proceder da mesma forma, colocar o trecho dentro do código CSS, até à próxima aula, se tiverem alguma dúvida deixem nos comentários que eu irei esclarecer.

0 Comentários Continuar a ler »