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 />

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

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.

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

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  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:

-