Essa skin e feita de 100% de DIV e 0% de Tabelaprimeiro vamos adicionar o codigo CSS no template:Va em DESIGN , EDITAR HTML e procure pela linha:]]></b:skin>Acima dela copie e cole o codigo:#cima {<br /> background: url("http://3.bp.blogspot.com/-Mb9LNO4Aoew/TbxWKmHJUsI/AAAAAAAABkE/sTfLgVC9_JI/s1600/cima.png") no-repeat;<br /> width:385px;<br /> height:35px;<br /> }<br /> #meio {<br /> background: url("http://2.bp.blogspot.com/-4JPpKheR9SY/TbxHt2WV2fI/AAAAAAAABj8/pN06ay-SCgw/s1600/infos.png") no-repeat;<br /> width:381px;<br /> height:60px;<br /> margin-top:-15px;<br /> }<br /> #baixo {<br /> background: url("http://3.bp.blogspot.com/-lRPNodArvPk/TbxINwQdevI/AAAAAAAABkA/dOI4uGjeaPI/s1600/baixo.png") no-repeat;<br /> margin-top:-10px;<br /> width:381px;<br /> height:66px;<br /> }Pronto ja terminamos com a parte do CSS , salve e vamos criar a postagem com o seguinte codigo:<center><div style='float: left; color:#fff; font-size:10px; margin-left:30px; margin-top:56px; display:inline;'><img src="http://4.bp.blogspot.com/-XF0M5WyXP50/TbxXmMd1S9I/AAAAAAAABkI/46tZGxa5sEk/s1600/avatar.png"></div><br /> <div id="cima"><div style='float: left; margin-left:-120px; margin-top:9px; display:inline;'>Episodio 205 - Sonhos e Realidades</div><br /> <div style='float: right; color:#fff; font-size:10px; margin-right:17px; margin-top:-7px; display:inline;'><a href="#">Episodios</a></div><br /> </div><div id="avatar"></div><br /> <div id="meio"><div style='float: left; margin-left:202px; font-size:10px; margin-top:-62px; display:inline;'>50Mb / 60mb / 90mb</div><br /> <div style='float: left; margin-left:205px; font-size:10px; margin-top:-41px; display:inline;'>rmvb / avi / mp4</div><br /> <div style='float: left; margin-left:205px; font-size:10px; margin-top:-20px; display:inline;'>Kira</div></div><br /> <div id="baixo"><div style='float: left; margin-left:50px; font-size:10px; margin-top:3px; display:inline;'><a href="#">Download</a> / <a href="#">Mirror 01</a> / <a href="#">Mirror 02</a></div><br /> <div style='float: left; margin-left:50px; font-size:10px; margin-top:7px; display:inline;'><a href="#">Download</a> / <a href="#">Mirror 01</a> / <a href="#">Mirror 02</a></div><br /> <div style='float: left; margin-left:50px; font-size:10px; margin-top:9px; display:inline;'><a href="#">Download</a> / <a href="#">Mirror 01</a> / <a href="#">Mirror 02</a></div></div></center>Ao final a sua skin de download deve ficar assim: Nesse tutorial a pedidos,de como criar um menu expansivel no blog que seria uma imagem que tu clica e aparece todas as categorias de seu blog.fazendo isso com menu.Vamos la.OBS:SITES/BLOG QUE UTILIZAM JS DE PARCERIA O CODIGO DO MENU NAO VAI FUNCIONARPrimeiro voces iram ir no editar html e procurar por </head> e ira colar o codigo seguinte acima de </head><style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write('<style>.texthidden {display:none} </style>');</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script><br /> <style type='text/css'> #dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff; width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;} #dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase; font-weight:bold;background:#F06214 url() repeat-x bottom left; padding:0 0 0 20px;} #dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;} #dolphinnav ul li{display:block;float:left;margin:0 1px;} #dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none; padding:0 0 0 20px;height:33px;} #dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;} #dolphinnav ul li a:hover{color:#000000; background:transparent url() repeat-x bottom left;} #dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;} #dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6; background:#ffffff url() no-repeat top left;line-height:275%;} #dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto; background:#805E5E url() no-repeat top right;height:33px;} </style>Depois e so adicionar um novo gadget e colocar o seguinte codigo:<center><a href="javascript:void(0);" onclick="expandcollapse('favoritos2')"><img border="0" src="http://downstotal.webs.com/categorias.png" /></a></center><br /> <ul id="favoritos2" class="texthidden"><li><br /> <a dir="ltr" href="LINK DA SUA POSTAGEM AQUI">NOME DA CATEGORIA</a><br /> </li> <li><br /> <a dir="ltr" href="LINK DA SUA POSTAGEM AQUI">NOME DA CATEGORIA</a><br /> </li> <li><br /> <a dir="ltr" href="LINK DA SUA POSTAGEM AQUI">NOME DA CATEGORIA</a><br /> </li> <li><br /> <a dir="ltr" href="LINK DA SUA POSTAGEM AQUI">NOME DA CATEGORIA</a><br /> </li> <li><br /> <a dir="ltr" href="LINK DA SUA POSTAGEM AQUI">NOME DA CATEGORIA</a><br /> </li> </ul>Para trocar a imagem que vem em padrao e so procurar por http://downstotal.webs.com/categorias.png Onde estiver escrito link da sua postagem aqui voce ira colocar o link da categoria e depois colocar o nome a onde esta pedindo Nome da categoria,depois so salvar.Vale lembrar se voce for usar outros tipos de categoria como por exemplo