31 dezembro 2014

CÓDIGO para colocar video do you tube em molduras (EM TESTE)

<table width="331.25" height="228.75" align="center" style="background-color:#D54242; border-color:#C11515; border-width: 10px; border-style: outset;"><tr><td width="349.25" height="150" align="center" valign="middle" style="background-color:#D54242; background-image: url(http://i62.tinypic.com/1t3k15.jpg)"><table width="200" border="0" align="center"><tr><td align="center" style="background-color: transparent;"><span><font size="3" face="Times New Roman" color="#E21F1F">A FÉ,SEM TEMPLO</font></span></td></tr></table><iframe width="250" height="150" src="http://www.youtube.com/embed/uaZiL4MBQW4?" frameborder="0" allowfullscreen></iframe></td></tr></table><br />
às Nenhum comentário:

Personalizando o gadget de postagens relacionadas


Antes de começar vocês tem que instalar o linkwithin no blog

Vá no seu HTML dê um ctrl + f e na barra de pesquisa que apareceu, procure por: ]]></b:skin>

Agora cole o seguinte código ANTES de ]]></b:skin>


/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFA500; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:22px; /* Tamanho do título do gadget */
color:#FFAEB9; /* Cor do título do gadget */
font-family: 'Sofia', cursive; !important;
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Com isto eliminamos o link */
}
.linkwithin_posts {
width: 560px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 28px !important;
}
.linkwithin_posts a:hover {
background: #FFFACD !important; /* Cor de fundo ao passar o cursor */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 { /* Bordas redondeadas */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
border-style: dashed !important;
}
.linkwithin_title {
color: #000000 !important; /* Cor dos títulos das postagens */
font-family: 'Sofia', cursive; !important; /* Tipo de fonte dos títulos das postagens */
font-size: 13px !important; /* Tamanho dos títulos das postagens */
line-height: 10px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #FF1493 !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}

O próprio código já diz o que deve ser feito
às Nenhum comentário:

Widget acima da área da postagem

Vá no seu HTML e procure por: showaddelement='no' e substitua por:  showaddelement='yes'
Salve. agora vá em ''elementos da página'' e verá o novo campo para adicionar Widgets acima da área da postagem.
às Nenhum comentário:

Rodapé das postagens

 TTutorial tirado do blog:(www.isjackiezzdream.blogspot.com.b)


coloquei no lugar do Background-color(ou seja a cor do fundo COLOQUE  A URL DA 
IMAGEM QUE VOCÊ QUIZER) e o espaço dos comentários. 
Vá no seu HTML (use ctrl + f pra facilitar a busca) e procure por:

 .post-footer {

Se você nunca tiver mexido nessa área do template ele irá aparecer acompanhado pelo seguinte código: 
.post-footer {
  margin: .5em 0;
  line-height: 1.6;
}


Substitua todo o código acima por este:
.post-footer {
border-top:1px dotted #000000;
background-image:url('URL DA SUA IMAGEM AQUI'); background-repeat:no-repeat; font-family: 'Cookie', cursive;
font-size: 16px;
letter-spacing:1px;
margin:0.73em 0;
padding:5px 8px;
text-transform:none;
}
.post-footer a{
color:#FF1493;
text-decoration:;
font-weight: ;
background-color: #FFFF00;
}
.post-footer a:hover{
color:#FFFF00;
text-decoration:none;
background-color:#FF1493;
}
.comment-link {
margin-left:17px;
magin-top:500px;
color: #ccc;
background-color: #FFFF00;
}



Pra fonte funcionar corretamente primeiro você precisa instalar ela no template entenda mais lendo este post (www).
Instalando a fonte!
Cole o código abaixo acima de:  </head>


<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'/>
Personalizando a imagem de fundo!
Agora você só precisa criar uma imagem que fique no fundo, assim como eu fiz, exemplo:
 (só pra que usa o google chrome, baby) Pra acertar as medidas vá na área que fica o rodapé do seu template e aperte o Button direito do mouse e selecione a opção ''inspecionar elemento''

Agora que você sabe a medida certa é só criar uma imagem e colar a url dela no local indicado de vermelho (não apague os tracinhos do lado) : background-image:url('URL DA SUA IMAGEM AQUI');

Visualize se estiver tudo certo salve ;D
às Nenhum comentário:

Colocando imagem para cada autor da postagem

TUTORIAL 1 

Vá no seu HTML e cole o código abaixo logo após <div class='post-footer'> 

<b:if cond='data:post.author == &quot;AUTOR1&quot;'>
<img src='URL-DA-IMAGEM-AUTOR1' style='float:left;border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;AUTOR2&quot;'>
<img src='URL-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/>
</b:if>
 Entendendo o código:
AUTOR - Onde esta grifado de vermelho, coloque o nome do autor MAAAAS cuidado na hora de alterar o nome do autor (onde coloquei autor1, autor2), pois deve ser exatamente igual como está no perfil da pessoa. Caso contrário NÃO irá funcionar.
Por exemplo:
 
PERMISSÕES 
Autores do Blog
Meu nome está escrito assim: Anadir Pedro se no código eu escrever  anadir pedro não vai funcionar, porque eu usei letras minusculas sendo que no meu perfil está em maiúsculo, entenderam?  
URL DA IMAGEM - É simples você vai copiar a url da imagem e colar no local indicado! Caso não saiba fazer isso."Entre no site :www.tinypic.com"e faça a URL da imagem que você quizer.Pode fazer no Programa:PhotoScape:www.photoscape.com
Quanto mais autores você queira com imagens personalizadas é só ir repetindo o código, ok? 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
TUTORIAL 2 
Vá no seu HTML e marque a opção http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif expandir modelos de widgets. 
Procure por: <div class='post-footer'>
O código precisar estar mais ou menos assim: 
Daí você cola isso <img src='URL DA IMAGEM' style='border:0px;'/> igual está na imagem ABAIXO:
-
 
 
 
 
às Nenhum comentário:

Efeito cute pulsar

Créditos HTMLuv
Esse efeito de coração batendo é realmente muuuuito fofo *---* mais quem quiser, pode trocar a imagem mudando a url. Agora vá pro seu HTML que já vamos começar

  Aperte  (ctrl+f) na caixa de pesquiza que aparecer procure por essa linha
Cole esse código acima de
.bass{
max-width:74px;
margin:1px;
border-radius:10px;
-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;
}
.bass:hover{
-webkit-animation: smallToBig 300ms alternate infinite ease;-moz-animation: smallToBig 300ms
alternate infinite ease;
}
Salve! Agora sempre que você quiser usar o efeito pulsar  basta colar o código abaixo em um gadget de HTML/Javascript ou na postagem na aba 
HTML.

<img src="http://i.imgur.com/F409R.png" class="bass" />
VOCÊ PODE COLOCAR OUTRAS IMAGENS,É SÓ TROCAR O URL.
às Nenhum comentário:

Personalizando o título das postagens

Esse tutorial  se trata de algo muito simples. Certamente você já viu em algum blog ou até mesmo no seu, o titulo da postagem super personalizada e quando você clica no post em questão fica totalmente diferente e sem personalização alguma, certo? Isso acontece porque provavelmente você ainda não sabe que o titulo da postagem tem 3 momentos:

- O momento que está na página inicial 
- O momento em que se passa o cursor em cima do titulo 
- E por fim o momento em que você já clicou no título e está na página que mostra somente o post.

E pra cada um desses ''momentos'' existe um código especifico pra você personalizar. Gente eu juro que não é difícil, segue essa linha de raciocínio que vai dar tudo certo
O código de personalização é esse:
1° Você irá copiar todo esse código 
text-align:center; /*deixa o título dos posts centralizado. Se você não quiser centralizá-los, apague essa linha.*/ 
font-family: "NOME DA FONTE AQUI"; /*Se refere a fonte*/ 
 font-size: 26px; /*Tamanho da fonte*/
color: #FF1493; /*Se refere a cor da fonte*/ 
border-bottom: 2px dashed #FF1493; /*Se refere a borda pontilhada abaixo do titulo. Se não quiser apague essa linha*/ 
background: #fff; /*Nesse trecho você pode colocar uma cor de fundo*/
Pra facilitar eu coloquei a explicação do lado de cada código. A fonte eu vou ensinar a mudar logo no final desse post. 

2° Agora vá no seu HTML e procure por: h3.post-title a {
(Esse código se refere ao momento em que título do post está na página inicial). Agora cole o código de personalização ANTES dessa chavinha:

3° Agora faça o mesmo com os outros 2 códigos:
h3.post-title a:hover {
(Este código refere-se ao momento em que se passa o cursor em cima do titulo).
h3.post-title {
(Este código refere-se ao momento quando o leitor já clicou no link da postagem e está na página onde aparece somente o post que ele está lendo).

Visualize. Se estiver tudo OK salve!
Por último personalize a fonte

Esse é o link da sua fonte hospedada (deixe aí por enquanto).
Agora cole esse código acima de ]]></b:skin>
@font-face { font-family: "NOME DA FONTE"; src: url(URL DA FONTE); }
Onde esta vermelho coloque o nome que você quiser e onde esta roxo coloque a URL do arquivo que tu hospedou.
Exemplos prontos (podem usar).
@font-face { font-family: "honey"; src: url(http://static.tumblr.com/fmvhucp/r9Cn17b5u/honeyscript-light.ttf); }


@font-face { font-family: "running"; src: url(http://static.tumblr.com/fmvhucp/2RQmy7wug/running_for_a_cause.ttf); }


@font-face { font-family: "amati"; src: url(http://static.tumblr.com/fmvhucp/ILHmy7tju/amaticsc-regular.ttf); }


@font-face { font-family: "are you"; src: url(http://static.tumblr.com/fmvhucp/at7my7ofj/are_you_freakin__serious.ttf); }


@font-face { font-family: "love"; src: url(http://static.tumblr.com/fmvhucp/2Htmyccu5/amandarae.ttf); }
Agora vocês podem personalizar qualquer fonte do seu blog, é só saber onde fica o font-family de cada um e alterar o nome da fonte padrão para o nome da fonte que vocês escolheram.


às Nenhum comentário:

Imagens giratórias com efeito zoom no post do blog

Vá no seu HTML, dê um CTRL +F e na caixa de pesquisa que apareceu pesquise por: ]]></b:skin>

e ACIMA dela acrescente os seguintes códigos CSS:
 ****************************************************************

.post-body img {
z-index:999999;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
}

.post-body img:hover{
z-index:9999;
-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
}Visualize, se estiver todo ok salve! Fácil né? 

Espero que tenham gostado
às Nenhum comentário:
Assinar: Comentários (Atom)