1 2 3 4 5
Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens

30.7.12

Colocando o botão do facebook curtir/recomendo.


Colocar o botão curtir no seu blog, é super fácil, apenas copie um dos códigos abaixo, sendo que o primeiro é de Curtir e o segundo para recomendar. Ao copia-los, acesse o painel principal do seu blog, clique em “Layout” –> “Adicionar um Gadget” –> “HTML/Javascript”, faça as devidas modificações necessárias conforme destacado no código e depois salve.
Curtir
<iframe src="http://www.facebook.com/plugins/like.php?href=ENDERECODOSEUBLOG&layout=standard&
show_faces=false&width=380&action=like&colorscheme=light&height=25&locale=pt_BR" scrolling="no" allowTransparency="true" frameborder="0" style="border:none; overflow:hidden; width:250px; height:25px;" ></iframe>

Recomendar
<iframe src="http://www.facebook.com/plugins/like.php?href=ENDERECODOSEUBLOG&layout=standard&
show_faces=false&width=380&action=recommend&colorscheme=light&height=25&locale=pt_BR" scrolling="no" allowTransparency="true" frameborder="0" style="border:none; overflow:hidden; width:250px; height:25px;"></iframe>

27.6.12

Aumenta/diminuir espaço da postagem/gadgets

A pedido de uma seguidora ,vou explicar este tutorial super fácil...
Let's Go!

1-Vá em Modelo
2-clique em Personalizar como o paint abaixo:

3-Depois ajustar larguras como no paint abaixo:
4-Vá aumentando ou diminuindo o tamanho da postagem, e se quiser também dos gadgets,e para ver como ta ficando só é olhar abaixo ,la já vai mostrando como vai ficar.
5-Clique em aplicar ao blog...e pronto
Facinho né...




26.6.12

Afiliados efeito opacity

                         Vá em Design ,adicione um gadgets,e procure HTML/Javascript,clique,e cole:

<a href="LINK DO BLOG" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="LINK DA IMAGEM" /></a>&nbsp
Edite colando o link dos seus afiliados. E pronto ...




Efeito Hover


Tutorial fácilissississimo pra vocês espero que gostem,o efeito hover é na foto da postagem,ficando as pontas redondas,mudando de lado ao passar o mouse.
1- Vá em Design Editar HTML aperte F3 e procure por:
]]></b:skin>
2-acima do ]]></b:skin> , coloque o seguinte código:
.main img {
-moz-border-radius: 03px;
-webkit-border-radius: 0px 30px 0px 30px; */ Bordas arredondadas */
-webkit-transition-duration: .70s; */ Efeito fade */
}
.main img:hover {
-moz-border-radius: 03px;
-webkit-border-radius: 30px 0px 30px 0px; */ Bordas arredondadas hover */
-webkit-transition-duration: .70s; */ Efeito fade */
}

23.6.12

Slide de postagens recentes.

Gente vou ensinar a voces ,um slide muito cupcate ,olha aqui como fica :
Viram? Bom vamos lá...

1- Vá em Designer, Editar HTML e procure por:
]]></b:skin>
2- Acima de ]]></b:skin> coloque o código abaixo:
/*----- INÍCIO DO SLIDE  ----------------------------------------*/
.theme-default .nivoSlider {
 position:relative;
 background:#fff url(http://i1043.photobucket.com/albums/b436/JBollton/loading.gif) no-repeat 50% 50%;
 -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
 -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.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:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:618px; /* Make sure your images are the same size */
 height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}
3- Depois procure por:
 </body> 
E acima dele coloque o código abaixo:
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>
Salve
4- Agora vá em Designer e adiciona um novo HTML/Javascript e cole o codigo abaixo:
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 246; //image height
 var image_width = 618;  //image width
</script>
<script src="http://tutorizand-o.blogspot.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

5-  O código destacado de rosa é a quantidade post que você deseja mostrar no slide.
6- Os códigos destacado de verde, é a largura(width) e altura(height) do slide.
7- O código destacado de vermelho é o endereço do seu blog. 

Personalizando data da postagem


1-Vá em desing editar HTML aperte F3 e procure por:
.main-inner h2.date-header {
2-Cole este código abaixo do que porcurou.
/* Data da postagem personalizada por The Lovers */
color: #000000; /* Cor da Fonte */
margin-left: 70px; /*Distância, chute os valores até ficar do seu jeito*/
background: #f0f8ff; /* Cor de fundo */
float: left; /* Se preferir, troque left por right caso queira a data do lado direito */
font-size: 11px; /* Tamanho da fonte */
padding: 4px;
border: 1px solid #6195ED; /* Cor da Borda */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Tem mais formas de datas aqui 

Fotos com efeito giratório ao passar o mouse

1-vá em design,depois em editar HTML ,depois aperte F3, e procure por:
body { 
2-Cole este código abaixo ,ao lado de  body { ,obs:cole o código logo após o final body }<<assim,onde a chave feicha o código de body{.

.rotate{ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width:auto; -webkit-transition-duration: 1.20s;}.rotate:hover{-webkit-transform: rotate(360deg);}
3-Cole o código abaixo onde você quer que ele funcione.
<img src="http://media.tumblr.com/tumblr_lvp990zayu1qgec02.png" class="rotate">
Créditos aqui

Efeito arco-iris

Hii, como vão?
Bom muitas pessoas tão optando por o efeito de arco-iris nos links,então vamos aprender
Let's go!!!
 1-Vá em design clique em Editar HTML ,depois marque a caixinha Expandir modelos widget ,aperte F3 procure por :  
</head>
 Antes do </head> coloque o código abaixo: 
<br /> <br /> <script type='text/javascript'>  //<![CDATA[  var rate = 20;  if undefineddocument.getElementById) window.onerror=new Functionundefined"return true")  var objActive;  // The object which event occured in var act = 0;    // Flag during the action var elmH = 0;   // Hue var elmS = 128; // Saturation var elmV = 255; // Value var clrOrg;     // A color before the change var TimerID;    // Timer ID  if undefineddocument.all) { document.onmouseover = doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } else if undefineddocument.getElementById) { document.captureEventsundefinedEvent.MOUSEOVER | Event.MOUSEOUT); document.onmouseover = Mozilla_doRainbowAnchor; document.onmouseout = Mozilla_stopRainbowAnchor; }  function doRainbowundefinedobj) { if undefinedact == 0) { act = 1; if undefinedobj) objActive = obj; else objActive = event.srcElement; clrOrg = objActive.style.color; TimerID = setIntervalundefined"ChangeColorundefined)",100); } }   function stopRainbowundefined) { if undefinedact) { objActive.style.color = clrOrg; clearIntervalundefinedTimerID); act = 0; } }   function doRainbowAnchorundefined) { if undefinedact == 0) { var obj = event.srcElement; while undefinedobj.tagName != 'A' && obj.tagName != 'BODY') { obj = obj.parentElement; if undefinedobj.tagName == 'A' || obj.tagName == 'BODY') break; }  if undefinedobj.tagName == 'A' && obj.href != '') { objActive = obj; act = 1; clrOrg = objActive.style.color; TimerID = setIntervalundefined"ChangeColorundefined)",100); } } }   function stopRainbowAnchorundefined) { if undefinedact) { if undefinedobjActive.tagName == 'A') { objActive.style.color = clrOrg; clearIntervalundefinedTimerID); act = 0; } } }   function Mozilla_doRainbowAnchorundefinede) { if undefinedact == 0) { obj = e.target; while undefinedobj.nodeName != 'A' && obj.nodeName != 'BODY') { obj = obj.parentNode; if undefinedobj.nodeName == 'A' || obj.nodeName == 'BODY') break; }  if undefinedobj.nodeName == 'A' && obj.href != '') { objActive = obj; act = 1; clrOrg = obj.style.color; TimerID = setIntervalundefined"ChangeColorundefined)",100); } } }   function Mozilla_stopRainbowAnchorundefinede) { if undefinedact) { if undefinedobjActive.nodeName == 'A') { objActive.style.color = clrOrg; clearIntervalundefinedTimerID); act = 0; } } }   function ChangeColorundefined) { objActive.style.color = makeColorundefined); }   function makeColorundefined) { // Don't you think Color Gamut to look like Rainbow?  // HSVtoRGB if undefinedelmS == 0) { elmR = elmV;    elmG = elmV;    elmB = elmV; } else { t1 = elmV; t2 = undefined255 - elmS) * elmV / 255; t3 = elmH % 60; t3 = undefinedt1 - t2) * t3 / 60;  if undefinedelmH < 60) { elmR = t1;  elmB = t2;  elmG = t2 + t3; } else if undefinedelmH < 120) { elmG = t1;  elmB = t2;  elmR = t1 - t3; } else if undefinedelmH < 180) { elmG = t1;  elmR = t2;  elmB = t2 + t3; } else if undefinedelmH < 240) { elmB = t1;  elmR = t2;  elmG = t1 - t3; } else if undefinedelmH < 300) { elmB = t1;  elmG = t2;  elmR = t2 + t3; } else if undefinedelmH < 360) { elmR = t1;  elmG = t2;  elmB = t1 - t3; } else { elmR = 0;   elmG = 0;   elmB = 0; } }  elmR = Math.floorundefinedelmR).toStringundefined16); elmG = Math.floorundefinedelmG).toStringundefined16); elmB = Math.floorundefinedelmB).toStringundefined16); if undefinedelmR.length == 1)    elmR = "0" + elmR; if undefinedelmG.length == 1)    elmG = "0" + elmG; if undefinedelmB.length == 1)    elmB = "0" + elmB;  elmH = elmH + rate; if undefinedelmH >= 360) elmH = 0;  return '#' + elmR + elmG + elmB; }  //]]>  </script>

17.6.12

Barra de rolagem nos comentários.


Tumblr_m5rh0lzmbo1r0mv1wo1_500_large
Eu só ensino tutoriais facil né rsrs...mais são os simples que são mais lindos vamos lá!!!
1-Vá em desing ,depois editar HTML e procure por:
body {
2-Acima dele cole o seguinte código:
#Blog1{overflow-y:auto; overflow-x: hidden; height:500px; width: 100%;margin: 0px;}

Personalizando a Footer .

Img1502334679_large
Gente pra quem não sabe footer é tipo um rodapé,que fica no final da página, pode ser uma imagem, um aviso de direitos autoriais e talz.

1-Vá design clique em editar html e procure por:
]]></b:skin>
2-cole  acima dele o código:
#footer-wrapper {
background: #000; /*** cor do fundo ***/
background-repeat: no-repeat;
z-index: 1000;
height: 20px;
clear: both;
font-size: 90%; /*** tamanho da fonte ***/
color: #fff; /*** cor da fonte ***/
text-align: center; /*** alinhamento da fonte ***/
padding: 5px;
}
3-Depois procure por : 
</body> 
4-Depois cole o seguinte código acima dele:
<div id='footer-wrapper'>Escreva o que Quiser</div>

Bordas nas fotos das postagens


3122e5a9b1_86402346_o2_large
Gente o efeito é lindo,pode optar neste seu blog fica-rá lindo.
1-Vá em desing depois editar HTML, e procure por:
 ]]></b:skin>
2-Acima dele cole o seguinte código:
.post img{-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; border: 1px solid #ccc;padding: 5px;}
gente edite ao seu gosto...
px:é a largura
solid,como eu disse no post anterior é reto ,e dashed é pontilhado.
#ccc:é a cor você pode mudar na Tabela de cores

Borda ao redor da postagem


547257_120772464730165_1500403097_n_large
Oii muchachoos *--*, este tuto é bem fácil e fica lindo o blog*--*
1- Vá em design depois editar HTML e procure por:
 .post-body { 
2- Abaixo cole esse código: 
border: solid 2px #000000;
Obs:solid é o estilo da borda, quer dizer uma linha reta, se quiser linhas pontilhadas troque por dashed
2px é a largura da borda,edite o número conforme seu gosto
#000000;cor da borda, troque pela cor de sua escolha

Barra lateral com borda pontilhada


Beach-beautiful-blonde-cool-cute-favim.com-447438_large
Trouxe um tutorial fácil, e simples de fazer.
1-vá em design depois editar hotm, e procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
2-E cole o seguinte código logo abaixo:
border-right: 1px dashed #000000;
Agora é só mudar a cor da borda com ajuda da Tabela de cores,a espessura, e o lado left ou right.

16.6.12

Caixa de pesquisa

Gente ,sabe aquela caixa personalizada de pesquisa,tipo a  que temos aqui no blog, então vou ensinar a vocês como coloca-la...Let's Go !!!

1- Vá em Layout clique em adicionar um gandgets,e procure e clique em HTML/JavaScript e cole este código:
<form action="/search" class="search" method="get"><input class="searchbar" id="s" name="q" type="text" value="" /><input class="searchbut" type="submit" value="" /></form>
 Depois vá em Design,editar Html e Procure por:
]]></b:skin> 
E cole o código abaixo ,acima do  ]]></b:skin> :

.search{


float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */font-family: Tahoma, Tahoma; /* Fonte */}.searchbar{height: 20px;width: 140px;color: #FF82AB; /* Cor da fonte  */-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFFFFF; /* Cor de fundo da parte onde escrevemos */}.searchbut{background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/width:30px;height:30px;border: 0;padding:7px;} 

Depois edite como deseja e prontinho!




Estrelas caindo da seta do seu blog

Eu acho muito lindo, tenho em um dos meus blogs, e vou ensinar a vocês como colocar,vamos nessa.
1-Vá em Desing ,Editar Html ,aperte F3 e procure por
</body>
2-Antes de </body> cole:

<script type='text/javascript'>
// <![CDATA[
var colour="#FFD700";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
Pronto ,agora onde tem  var colour="#FFD700"; . você coloca a cor desejada.


Energy Saving Mode

Gente sabe quando você ta logado no tumblr issoeudigoparaquemtemtumblr mais não ta usando que aparece na tela Energy Saving Mode? Não, então vou mostrar um print que eu fiz,olha só:
Lembrou agora, então, para quem gosta dessa moda de blog tumblr,vai ficar bem irado.
Vamos ao tutorial!!!
1- Vá em Design Editar HTML , e aperte F3 ,procure por:
<head>
2. Acima, cole o seguinte código:
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>

Fácil ,extremamente fácil...


Blog estilo Tumblr



Gente ensinar um tutorial muito procurado, que é o do botão de Follow igual do tumblr para o blog.
É beem legal, e fácil então Let's Go!
1-Vá em Layout clique em adicionar o gandget,depois procure por HTML/JavaScript e clique.
2-Cole o código abaixo:
<a style="display:scroll;position:fixed;top:45px;left:15px;" href="http://www.blogger.com/follow-blog.g?blogID=1888996378057713035" title="Follow"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?468" /></a>


Os números que esta destacado você apaga e vá no Layout ,copie os números que aparecem na url,Como no print abaixo:


Pronto,sempre visualize antes de salvar.
Não sei se vocês vão querer mais tem o de dashboard,faça as mesma coisas acima mais cole o código abaixo:
<a style="display:scroll;position:fixed;top:45px;left:15px;" href="http://www.blogger.com/follow-blog.g?blogID=1888996378057713035" title="Follow"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?468" /></a><a style="display:scroll;position:fixed;top:15px;left:15px;" href="http://www.blogger.com/home" title="Dashboard"><img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?468" /></a>
Obs: onde está em negrito " left" em todos os dois códigos é a posição, lado esquerdo ,se quiser do lado direito,edite e coloque right.



1º letra da postagem

Vou ensinar a vocês um tuto bem fácil...este tuto é para destacar a primeira letra da sua postagem...
Vamos lá!!!

1-vá em Design e clique em Editar HTML.
2-Aperte F3 e procure por:
 ]]></b:skin>
3-Acima do código que procurou cole o código abaixo:
big {font-size:50px; /*tamanho da fonte*/
font-style:bold;
color: #ff1b72; /*Cor da letra*/
line-height:30px; /* altura da linha*/
float:left;}

Você pode mudar a cor na Tabela de cores, e pode editar como quiser o tamanho e altura.
Fácil né? são coisas minusculas que deixa o blog mais lindo.

Confirmação dos comentários

Bom, confirma quando você vai comentar irrita as vezes ate desisto...vamos aprender a tira-lo...
É fácil, não precisa meche no html nadinha ...
Let's Go!!!

1- Vamos em Mais Opções no painel do seu blog, no menu clique em Configurações.
2- Clique em Postagens e Comentários, e em onde tem escrito "Exibir uma confirmação de palavras para os comentários" vá na opção não.
3- Salve as alterações.

Efeito Opacity nas fotos

O efeito opacity fica muito lindo,e da um ótimo visual as suas fotos,eu uso este efeito em um dos meus blogs.
Let's go!!!
1-Vá em editar HTML, procure pelo código:
]]></b:skin>
2-Acima do código que procurou cole este código:

.main img {
filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
}
.main img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
duration: 50s;
}

Fácil né? antes de salvar visualize.