O Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.
TwitHut é uma aplicação online onde podemos criar um vários modelos e cores de banner , em três tamanhos , com o conteúdo da última atualização do Twitter. Muito fácil. Acesse a página twithut.com, coloque seu username no local indicado e escolha o modelo que quer usar. O aplicativo gera automaticamente o código necessário para inclui-lo em praticamente qualquer página web; poderão ser usados em fóruns, assinaturas de emails HTML, blogs… 
Informação vista em WWWHat’snew
Beijo da Mama ♥
<div id='logo'>Edite substituindo o endereço da minha imagem pela sua. Deixe assim:
<a href='index.html'><img alt='logo' src='http://4.bp.blogspot.com/_DCJ4PAWLOdE/S_UzFFR0hsI/AAAAAAAAEc0/eDtjiw00oEM/s1600/buttonp.jpg'/></a>
</div><!--end logo—>
<div id='logo'>
<a href='index.html'><img alt='logo' src=' ENDEREÇO-DO-SEU-LOGOTIPO '> </a>
</div><!--end logo—>
<div id='contact_details'>
<p><a href='mailto:SEU-EMAIL>SEU EMAIL</a> </p>
<p><a href='ENDEREÇO-CONTATO>Informações via Formulário de Contato</a></p>
</div><!--end contact details-->
<div class='text'>
<h2>Este Blog está em construção</h2>
</div><!--end text-->
<div class='social'>Se quer substituir os ícones, encontre o seguinte trecho e edite o conteúdo.
<a class='twitter' href=’SEU-ENDEREÇO’>
<a class='flickr' href=’SEU-ENDEREÇO’>
<a class='facebook' href='SEU-ENDEREÇO>
<a class='youtube' href='SEU-ENDEREÇO’>
<a class='yahoo' href='SEU-ENDEREÇO’>
</div>
.social a {Nota: Nessa área Você poderá retirar, substituir ou acrescentar ícones segundo as redes sociais das quais você participa, alterando tambem o código HTML .
display:block;
width:64px; /* largura do ícone */
height:64px; /* altura do ícone */
float:left;
margin-right:20px;
}
#slidertext ul li a.twitter {
background:url(http://3.bp.blogspot.com/_DCJ4PAWLOdE/S_UN0ZIS8RI/AAAAAAAAEb8/Sj-z5kl5dxM/s320/twitter.png) no-repeat scroll 0 0;
}
#slidertext ul li a.flickr {
background:url(http://3.bp.blogspot.com/_DCJ4PAWLOdE/S_UNmJy33-I/AAAAAAAAEa8/GQwdtQX08k8/s320/flickr.png) no-repeat scroll 0 0;
}
#slidertext ul li a.facebook {
background:url(http://3.bp.blogspot.com/_DCJ4PAWLOdE/S_UNkt6peKI/AAAAAAAAEa0/q2-E8pU31ow/s320/facebook.png) no-repeat scroll 0 0;
}
#slidertext ul li a.youtube {
background:url(http://1.bp.blogspot.com/_DCJ4PAWLOdE/S_UN3tULZrI/AAAAAAAAEcM/-2xbBNYnCeI/s320/youtube.png) no-repeat scroll 0 0;
}
#slidertext ul li a.yahoo {
background:url(http://1.bp.blogspot.com/_DCJ4PAWLOdE/S_UN1qqDdAI/AAAAAAAAEcE/wYCT1VnyWaI/s320/yahoo.png) no-repeat scroll 0 0;
}
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribeform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=DicasParaBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>Substitua pelo seu endereço Feed.
<p>
<div id='email_input'><input id='email' name='email' onblur='if(this.value==''){this.value='Enter Your E-mail'};' onfocus='if(this.value=='Enter Your E-mail'){this.value=''};' size='30' type='text' value='Enter Your E-mail'/>
<input name='uri' type='hidden' value='DicasParaBlogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='submit_button' size='80' type='submit' value='Submit'/></div></p>
</form>
<h3>Informções sobre o site</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.</p>
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://4.bp.blogspot.com/_JwD5r652h00/S_K3UAPbbuI/AAAAAAAAAWQ/sZRBQArO34k/comments-facebook.gif' width='331'/></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'AppID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments width='600' xid='boxID'/>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>
<div style=' font-size:10px; padding-left:-13px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> </b></div>Veja e teste como ficou a minha caixa de comentários já editada
</b:if>
<b:if cond='data:blog.pageType == "item"'>Bom e agora, onde devemos inserir esse código?
<p align='left'><img alt='' class='icon-action' height='51' src='http://3.bp.blogspot.com/_DCJ4PAWLOdE/S_PyevR70gI/AAAAAAAAEXk/bNulaI1H9yQ/s320/commnet.jpg' width='331'/></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '123418887678526', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments width='600' xid='boxID'/>
<div style=' font-size:10px; padding-left:-13px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> </b></div>
</b:if>
O Blogger in Draft adicionou um botão bem melhor para vista-prévia das nossas postagens. Para utilizar essa função devemos acessar o Blogger pelo ► Blogger in Draft ◄ É necessário também marcar a opção "Editor atualizado", ou seja: Clique na aba "Configurações" role a página até a sessão "Configurações Globais" e marque a opção como no exemplo abaixo.... 
/* search formSe você já entende um pouco do assunto, poderá alterar as cores das bordas, do background, do círculo, etc..
-------------------------------------- */
#searchthis {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
#searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
#searchBox{
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
#submit-button {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
<form action='/search' class='right' id='searchthis' method='get'>
<input class="input-text" id="searchBox" name="q" onblur="if(this.value=="")this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value="";" type="text" value="Pesquisar..." vinput="" />
<input class="searchbutton" id="submit-button" type="submit" value="Go" /></form>
… #submit-button{color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
background: -moz-linear-gradient(top, red, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='#454545'); /* ie8 */
}
Após a confirmação do botão autorização Permitir na janela pop-up, somos convidados a autorização definitiva para publicação do post, mesmo quando não estamos conectados. 
e na janela po-pup clique novamente para confirmar Permitir.
<Variable name="footer.background" description="Footer Background" type="background"Se você selecionar e copiar em seu navegador o endereço grifado em vermelho acima, verá essa imagem
default="transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left" value="transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left"/>
Essa é a imgem do background, certo? repeat scroll top left é o código que determina que ela se repita.
Hospedar no próprio Blogger ou em um site de sua preferência substituir todo o código, deixando assim:<Variable name="footer.background" description="Footer Background" type="background"O resultado será esse:
default="transparent url(http://img100.imageshack.us/img100/3033/marron.png) repeat scroll top left"/>
<Variable name="footer.background" description="Footer Background" type="background"Vai ficar assim
default="transparent url(APAGUE-O-ENDEREÇO-ENTRE-ASPAS) repeat scroll top left" value="transparent url(APAGUE-O-ENDEREÇO-ENTRE-ASPAS) repeat scroll top left"/>
<Variable name="footer.background" description="Footer Background" type="background"Depois role a página, mais abaixo encontre o /*Footer .
default="transparent url() repeat scroll top left" value="transparent url() repeat scroll top left"/>
/* FooterNo exemplo abaixo eu mudei assim: background: #F37443; (Laranja berrante rs)
----------------------------------------------- */
.footer-outer {
color:$(footer.text.color);
background: $(footer.background); /*---AQUI VOCÊ MUDA A COR ---*/
-moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
-webkit-border-top-left-radius: $(footer.border.radius.top);
-webkit-border-top-right-radius: $(footer.border.radius.top);
-webkit-border-bottom-left-radius: $(footer.border.radius.bottom);
-webkit-border-bottom-right-radius: $(footer.border.radius.bottom);
-goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}
Veja esse aplicativo criado por Jacob Cyrus Bijani ( Direto de criação doTumblr’s ) . Com o BORDER RADIUS não tem mistério. A única coisa que você precisa fazer é determinar o numero em px para cada canto e o aplicativo oferece o código correspondente para ser inserido no bloco que queira exibir arredondado, por exemplo as áreas de postagens do Blogger, Header, ou sidebar. É ótimo pra gente compreender esse truque em CSS.
Veja no exemplo abaixo, coloquei 10px para cada canto.
Neste outro exemplo, coloquei 50px para o topo a esquerda e 50px para o bottom a direita:
Veja um exemplo para deixar sua área de postagem separada por blocos e com formato de cantos arredondado. Faça o seguinte:
OBS: Exemplo criado em modelo “Mínima” do Blogger
Faça login no Blogger e no painel clique na opção ►Layout
Depois clique em ►Editar HTML
Procure pelo trecho .post{
Troque todo o trecho entre colchetes, pelo código abaixo destacado em vermelho.
.post {
margin:10px;
border:1px solid #cccccc;
padding:10px;
background: #E9EAEE;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Veja no blog de testes DEMO
Beijo da Mama ♥
O Carlos Leopoldo do TECHITÁSTICO é um dos sites que eu assino onde encontro sempre dicas e novidades excelentes para aprender e compartilhar com vocês. Ontem ele publicou uma relação de geradores de códigos CSS3.CSS3 segundo Wikipédia:
“CSS3 é a mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout.”
Segundo WebMaster:Pois bem, algumas das indicações do Carlos eu já postei AQUI para vocês, mas uma das que ele indicou me chamou a atenção por oferecer muitas opções. A WESTCIV.COM Lá tem tanta ferramenta que eu nem faço idéia (ainda) para que servem. Porem as que eu já conheço e utilizo, vou compartilhar com vocês.
“ O excitamento dos desenvolvedores com o CSS3 é quase infantil (no bom sentido). É um novo brinquedo que facilita a criação dos layouts e permite aplicar efeitos que outrora exigiam o fatiamento de diversas imagens somadas a dezenas de linhas de código.”
© 2009 Dicas e Templates Mamanunes► by Mamanunes Templates
..
