BLOG DE TESTE : 14

10 abril 2014

Fundo de papel nas postagens

Abra seu HTML. Aperte ctrl+F e procure por:

.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}

Procure pela primeira linha para facilitar. Quando achar, apague todo o código e coloque esse no lugar:

.main-inner .column-center-outer {
background: url(URL da imagem) repeat-Y;
}

Agora é substituir pela url da imagem que você quiser.
Aqui que entra a correção. Vocês viram que quando coloca a imagem, a letra do post fica por cima da beirada do papel não é? Para resolver isso, aperte ctrl+F e procure por: .main-inner .column-center-inner {
Substitua o trecho:

padding: $(content.posts.padding) 0;

por esse código abaixo:

padding: 10px 10px 10px 20px;

Você pode ter que alterar o valor em roxo de acordo com a imagem que você usar.

Fundo nos títulos dos posts

O código é simples, o que complica é só ajustar as margens (como na hora de por fundo na c-box). Só lembrando que esse tutorial foi feito no modelo Viagem (Travel) do blogger, então o código correspondente ao título dos posts pode ser diferente em outros modelos.

Abra o blogger, vá em design > Editar HTML.

Procure por:

h3.post-title {

Cole logo abaixo desse trecho o seguinte código:

background:transparent url(LINK DA IMAGEM AQUI) no-repeat bottom;
align: center;
margin:.25em 0 0;
padding: 40px 5px 5px 50px;

Coloque o link da imagem onde se pede.

As medidas do "padding" deste código se ajustam á uma imagem de 500x60 pixels. Se a imagem que você for usar tiver um tamanho diferente, você terá que alterar os valores do padding. Lembrando que as medidas do padding seguem esta ordem:

padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda);

Visualize se ficou bom e depois salve ou cancele.

Se quiser colocar apenas uma cor de fundo, basta colocar esse código abaixo de h3.post-title { :

background-color: #codigodacor;

Separar widgets da sidebar

1- Abra o blogger, vá em modelo > Personalizar
2- No designer do modelo, clique em "plano de fundo da barra lateral" e escolha transparente, como mostra a imagem abaixo (clique para ampliar):

3- Salve as alterações.
4- Volte ao modelo do blog, e agora clique em "Editar HTML"
5- Aperte Ctrl+F e procure por:

.sidebar .widget {

6- Logo abaixo deste trecho cole a seguinte linha:

background: #000;

7- Agora é só trocar #000 pelo código da cor que você quer e salvar!
- Se quiser aumentar a distância entre cada widget, altere o valor dessa linha:

margin: 10px 0;

Trocando o 10 por um número maior.

Pronto! Bem simples não é? Tenho alguns recadinhos para vocês.
1º - Ainda dá tempo de participar do sorteio que está rolando aqui no blog!
2º - Vou postar em breve um video tutorial de como fazer essas faixinhas que eu uso na sidebar e que vocês já viram em outros blogs. Pode demorar alguns dias porque estou gripada e só vou gravar quando minha voz deixar de parecer a de um pato :/
3º - Atualizei os créditos do blog, tava devendo isso desde que mudei o layout. Deem uma olhada lá para ver os blogs e sites divos que me ajudam sempre.

Personalizar os titulos da sidebar

No painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.

Aperte Ctrl+F e procure por h2 {
Logo abaixo do trecho que você procurou, vai ter algo parecido com isso:

h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}

Apague toda essa parte e no lugar coloque esse código:

.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}

Agora é só modificar as cores e a fonte como quiser. Se em vez de cor, você quiser colocar uma imagem de fundo, substitua essa parte:

background: #fbfbfb; /*Cor de fundo*/

Por isso:

background: url(link_da_imagem) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/

Visualize se está tudo certo e salve. A partir desse código você pode aplicar outros efeitos, como sombra, bordas arredondadas e outros estilos de bordas. Espero que tenha sido útil. Se usarem, não esqueçam dos créditos ok ;
Código do blog :http://www.cherryboomb.com
Que não está mais sendo atualizado,por isso coloco os tutorias aqui para eu Usá-los,
você pode usá-los também.

Nivo Slider

CLIC EM:(Ctrl + F) ;e procure por }]]></b:skin>

E acima dele cole o código abaixo;

/* The Nivo Slider styles */

#slider {position:relative;}

#slider img {position:absolute; top:0px; left:0px;

display:none;}

#slider a {border:0; display:block;}

.nivoSlider {position:relative; width: 556px; /* largura */ height: 440px; /* altura */ } .nivoSlider img {position:absolute; top:0px; left:0px;}

/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {position:absolute; top:0px;

left:0px; width:100%; height:100%; border:0;

padding:0;margin:0; z-index:6; display:none;}

/* The slices and boxes in the Slider */

.nivo-slice

{display:block;position:absolute;z-index:5;height:100%;}

.nivo-box {display:block;position:absolute;z-index:5;}

/* Caption styles */

.nivo-caption {position:absolute;left:0px; bottom:0px;

background: #ccc; /* Cor de fundo do título */ color: #fff; /* Cor do título */ text-transform: uppercase; width: 100%; z-index:50; border-right: 5px solid #;padding: 5px 0;}

.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}

.nivo-caption a {display:inline !important;}

.nivo-html-caption {display:none;}

.nivo-directionNav a

{position:absolute;top:45%;z-index:99;cursor:pointer;}

.nivo-prevNav {left:0px;}

.nivo-nextNav {right:0px;}

/*============================*/

/*=== Custom Slider Styles ===*/

/*============================*/

.slider {width:100%;}

.slider img

{position:absolute;top:0px;left:0px;display:none;}

.slider a {border:0;display:block;}

.nivo-controlNav {display:none;}

.nivo-directionNav a

{display:block;width:31px;height:34px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibrht-Lyj874yPcQLztqbiH-ZPFdLVWJqYCsNRRIH_QBNsu4aQe6xHO4pUTcg8LzPXageI5ASx_P0_oOY0WRFXj7AUrR-g2GfKxneju5k_StOZUBscuOqwrOgEaINgCXXq9neQ_D4zGOsl/s1600/s-12.png)

no-repeat; /* imagem das setinhas */ text-indent:-9999px;border:0; }

a.nivo-nextNav {background-position:-30px 0;right:15px;}

a.nivo-prevNav { left:15px;}

.nivo-caption {font-family:"Trebuchet MS", Arial,

Helvetica, sans-serif;}

.nivo-caption a {color:#efe9d1; text-decoration:underline;}

As únicas coisas que você precisa alterar são as negritadas. Principalmente o tamanho (width e height).

Agora procure por </head> e acima dele cole:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

<script src='http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/>

<script type='text/javascript'>

var $nv4wp = jQuery.noConflict();

$nv4wp(window).load(function() {

$nv4wp('#slider').nivoSlider({

effect:'random',

slices:15, // For slice animations

boxCols: 4, // For box animations

boxRows: 2, // For box animations

animSpeed:500, // Slide transition speed

pauseTime:3000, // How long each slide will show

startSlide:0, // Set starting Slide (0 index)

directionNav:true, //Next and Prev

directionNavHide:true, //Only show on hover

controlNav:true, // 1,2,3... navigation

controlNavThumbs:false, // Use thumbnails for Control Nav

controlNavThumbsFromRel:false, // Use image rel for thumbs

controlNavThumbsSearch: '.jpg', // Replace this with...

controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src

keyboardNav:true, //Use left and right arrows

pauseOnHover:true, //Stop animation while hovering

manualAdvance:false, //Force manual transitions

captionOpacity:0.8, //Universal caption opacity

prevText: 'Prev', // Prev directionNav text

nextText: 'Next', // Next directionNav text

beforeChange: function(){}, // Triggers before a slide transition

afterChange: function(){}, // Triggers after a slide transition

slideshowEnd: function(){}, // Triggers after all slides have been shown

lastSlide: function(){}, // Triggers when last slide is shown

afterLoad: function(){} // Triggers when slider has loaded

});

});

</script>

Visualize e se estiver tudo ok salve.

O slide ainda não irá aparecer. Para mostrá-lo vá até Layout e adicione em um lugar estratégico um gadget de HTML/JavaScript. Dentro dele cole:

<div id="slide"><div id="slider">

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

</div></div>

Altere o que se pede e seja feliz!

Lembrando que você deve alterar height e width conforme o tamanho que estipulou lá no primeiro código!

Espero que consigam e tenham gostado!

08 abril 2014

MOLDURAS PARA VIDEOS

<center><div style="background:
URL(ENDEREÇO DA IMAGEM)
no-repeat center; height: 367px; width: 640px;">
<div style="float: left; padding-left: 30px; padding-top:
35px;">
<object height="300" width="580"><param
name="movie"
value="ENDEREÇO DO VÍDEO?fs=1&hl=pt_BR">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed
src="ENDEREÇO DO VÍDEO?fs=1&hl=pt_BR"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" height="300"
width="580"></embed></object></div>
</div>
</center>
Salve as molduras em seu computador.
Coloque nos devidos espaços, os endereços ou URLs da imagem e do vídeo. Veja que o endereço do vídeo deve ser introduzido duas vezes no código.
Obs.: Dependendo do local onde o vídeo será colocado em seu blog ou site, poderá haver uma diferença ficando o vídeo, um pouco fora da moldura. Esse problema poderá ser sanado regulando as medidas que estão na cor verde do código.
É isso aí! Espero que gostem...faça um comentário...até a próxima.
CRÉDITOS DO BLOG:http://dr-misterblog.blogspot.com.br/

Adicionar Borda no Video do Youtube


<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/RA2myM4lSpQ?fs=1&hl=pt_BR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RA2myM4lSpQ?fs=1&hl=pt_BR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object

 
Na imagem você vê que o próprio youtube nos fornece um código html do vídeo, algo como o seguinte código:

Para adicionarmos uma borda basta adicionarmos o seguinte código:

2. <object width="480" height="385" border="3x solid"><param
 name="movie" 
value="http://www.youtube.com/v/RA2myM4lSpQ?fs=1&amp;hl=pt_BR"></param><param
 name="allowFullScreen" value="true"></param><param 
name="allowscriptaccess" value="always"></param><embed 
src="http://www.youtube.com/v/RA2myM4lSpQ?fs=1&amp;hl=pt_BR" 
type="application/x-shockwave-flash" allowscriptaccess="always" 
allowfullscreen="true" width="480" height="385" border="3x solid"></embed></object>

Laranja:  Você só  deve 
alterar o valor '3' por outros números, como '5,6,7,8' ou o que desejar.
 Quanto maior o número, maior a borda! Lembrando que deve alterar nas 
duas partes em laranja para que funcione!

07 abril 2014

Video dentro de um background

Quer colocar um nos videos?
Entre no blog:http://goimagines.blogspot.com.br/

Como colocar background nos vídeo

Fazendo a imagem

1- Vá ao youtube e pegue um vídeo de exemplo (qualquer vídeo, é só pra ver o tamanho)
2- Clique em compartilhar > incorporar (coloque o código novo,porque o antigo eu não consegui,porque o video não foi.No código onde está "frameborder troquei o zero pelo numero 5 .e coloque a largura que deseja que os vídeos tenham (coloque uns 40px menor que a área da postagem), então vai aparecer a altura automaticamente. Isso serve pra descobrir a altura correta em relação à largura do vídeo, ou seja, pra ficar proporcional.
3- Agora que você tem a largura e a altura pode usar a criatividade pra criar a imagem! Lembre-se de fazer a imagem maior que o vídeo, para ficar com a "bordinha".

Não desanime vale a pena quebrar a cabeça.Você pode fazer suas próprias molduras no :wwwphotoscape.com.

Baixe no seu computador ele é grátis

Código

Copie o código abaixo e cole na aba "Editar HTML" da postagem, fazendo as alterações necessárias:

<div style="background: url(URL DA IMAGEM) left no-repeat; height: 413px; width: 550px;"><div style="float: left; padding-left: 48px; padding-top: 60px;">CÓDIGO DO VÍDEO</div></div>

Entendendo:

- Onde está destacado de rosa, você vai substituir pelo que está sendo pedido.

- Onde está destacado de azul, você vai substituir pelo tamanho da sua imagem (largura: widht / altura: height)

- No que está destacado de roxo, você pode alterar para o vídeo ficar no lugar que você quiser em cima da imagem. Em padding-left você pode alterar o valor para a esquerda, lembrando que existem números positivos (1;) e negativos (-1;). Em padding-top altere para cima.

Você pode usar esse código para qualquer gadget é só colocar o código html desejado (c-box, contador, fanbox...) onde está escrito "código do vídeo".
No blog: http://goimagines.blogspot.com.br/
Você encontra muitos tutoriais:este eu tirei de lá,mas o crédito não é meu é dela.
Visite o blog e deixa um oi.

Essa moldura fui eu que fiz no photoscape,você pode fazer no tamanho que desejar.

Créditos do blog:goimagines.blogspot.com.br

Código para Centralizar Cabeçalho do Blog

Depois de dar Ctrl+F, procure por este código abaixo
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

Preste atenção,você vai apenas acrescentar esta linhas:
no começo acrescente está<center>
No final acrescente esta</center>
E a imagem do seu cabeçalho ficará centralizado.
Se você tiver dúvida do final do código ele termina no ('display: block'/>)coloque isto</center>
depois dele .
O codigo vai ficar como este abaixo.

**************************************************************************
<center><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></center>

***************************************************************************
1:Entre em HTML do seu blog:Clique em Modelo:
2:Depois em HTML
3:Tecle ctrl+F
4:Quando abrir uma caixinha de pesquiza :
5:Copie e coloque o primeiro código dentro e tecle enter.
6:Atenção as estrelhinas não copie ,coloquei apenas para separar os códigos
porque você vai copiar só o segundo código.Porque o primeiro é que você precisa,para acrescentar
as linhas (center)

06 abril 2014

CAIXA DE ROLAGEM PARA TEXTOS

<center>
<div style="background-color: #fcfcfc; height: 100px; overflow: auto; width: 400px;">
Seu texto aqui</div>
</center>

TUTORIAL DO BLOG: http://dr-misterblog.blogspot.com.br/

(NESTE BLOG TEM MUITO MAIS PRA VOCÊ.VISITE)

Musicas para flogvip e meadd,e flogão