Cometários em forma de círculos e com foto

Oi gente Boa Tarde desculpe pelo atraso ontem eu esqueci de postar,mentira foi preguiça mesmo.
Hoje vou ensinar como por os comentários em forma de circulo e com foto.

Vamos lá...
Abra o painel do blog e va em layout adicione um gadget no lugar que você quiser,o gadeget deve ser de HTML/JavaScript e você deve por o seguinte código:

<div id="recent-comments-box">
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}  
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 4, 
    showAvatar     = true,
    avatarSize     = 60,
    roundAvatar    = true,
    characters     = 40,
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://jblogdesigner.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=4"></script>
</div>
Obs:
Altere o número em vermelho se você quiser que apareça mais de quatro comentários
A parte em verde você deve por o link do seu blog
Credito ao  Way2blogging .
Tchau gente e até mais

Como criar um Feed.

Oi gente,como prometido vim postar o tutorial de como criar um Feed, não pude postar na sexta pois tive que sair. Então vamos lá....
Primeira coisa entre no Feed Burner e faca o login com a sua conta do google.

Depois coloque o seu link no local indicado e click em next.

Selecione a segunda opção.

Coloque o nome do seu blog em "Feed Title" e o nome do seu feed em "Feed Adress".Como o meu feed.

Click  em next.

Depois selecione todas as opções.

E pronto seu feed foi criado.E até o próximo tutorial.

Botões das redes social e pesquisa na Header

Oi gente,hoje eu vim aqui para mostrar como por os botões de atalho das redes social e uma busca dos postna Header.Primeiro temos que dividir o cabeçalho do blog para isso vamos modelo----editar HTML localizem o código:

<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inne:r header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='J.Blogger Designer (Cabeçalho)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
E substitua por:

 <div class='fauxborder-left header-fauxborder-left'>
<div class='region-inner header-inner' style='width:55%; float:left'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='J Blogger Designer (Cabeçalho)' type='Header'/>
</b:section></div>

<div class='fauxborder-right header-fauxborder-right' style='width:46%;float:right;height: auto;margin: 0px 4px 0 2px;'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML210' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<div style='clear:both;'/>
A parte em azul substitua pelo nome do seu blog.
Agora vá em layout sera criado um gadget de HTML/JavaScript,click em editar e cole o seguinte código:

<style>
#navbar{display:none;}
body{ background:#808080}
.content-inner {background: transparent;}
.body-fauxcolumn-outer .cap-top { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VZM2WhenxSDaQLq1_-u-hyWjG_gWYM4XECwcdaKrIjPNBcwMb906dHpdShFlEr4b5HWS5c5DPA5V8X4AHt9R57dTdCSN12ycoTYDT69EGF8fsL3iGxhkiKzdrsfN6fouZzazHSxqYJZE/s1600/fundo1.png) repeat-x;}
.main-outer{background: #fff;margin: 8px auto;}
.Header h1 {
  font-size: 40px;
  padding: 40px 2px 20px 2px;
  color: #000;
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
</style>
<style>
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
 margin: 33px 20px 0 20px;
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  /*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
  background: #808080;
  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.tabs-inner .widget li a {
  display: inline-block;
  margin: 0 1px 0 0;
  padding: 25px 16px 25px 16px;
  font: $(tabs.font);
  color: #000;
  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #000;
  background-color: #fff;
  text-decoration: none;
}

</style>

<style>
#menu-feed{text-align: right;margin: -5px auto;}
#menu-feed a{color: #000;}
</style>
<div id="menu-feed">
<span style="color: white; font-size: x-small;"><b><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDt1bg_7B_GCkqy11_qb0k1ZaknI7RL1l5iEU3EagpLrRw4ovOoJefMjuXEiqNexxKSUnKTgmjrxCRyoFeMwKVGOPFMbFoF3yLVvTj_-dZo1iHBLUjq5ZUvNuIbpDgRW3qZWff8gWSoMI/s1600/feed+%25281%2529.png" /> <a href="http://feeds.feedburner.com/TemplatesEAcessrios">Feed Posts</a>  <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjLgWqfrHDODwJPvL6RrxAAIZVuotCLNJCkeMdIsgLtJVT3B3gC5re8H0gh4MyykfZueLl84E6myuDu7IC_4K-4A1eCVK35l2BIf0YkBfqczrZp_bReuBMxJqcru2fuDz238n24IUl0yk/s1600/feed_ballon+%25281%2529.png" /> <a href="http://templateseacessorios.blogspot.com/feeds/8129006636274137536/comments/default">Feed Comentários</a></b></span></div>


<style type="text/css">
#box-procura{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimeK62bxPDwglwEXNGOSSiTLJfrWLZYbTz9_IrgGyG95rTndT799DcYqzxLUS51SK6UDEkKlsgzM7Qt-sY2VlVLY7u7j0OQSpD3SrkCMEBRhc4N5cW2YBHpKna4JfdZRDXNLdQgKGoV-6r/s1600/box+procura.png) no-repeat scroll right transparent; width:307px; height:50px;display:block; float: right; margin: 50px 2px 0 0;}
form#box-procura2{display: block;padding: 12px;margin:0;}
form#box-procura2 #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#box-procura2 #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="box-procura">
<form id="box-procura2" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style>
#menu-social {
  margin: 40px 1px 0 10px;
  float: right;
}
#menu-social ul {
  margin: 0;
  padding: 0;
  margin-top:10px;
}
#menu-social ul li {
  border-right: 1px dashed #808080;
  float: left;
  padding: 5px 2px 0 3px;
  margin-left: 2px;
  list-style-type: none;
}
#menu-social ul li a {
  padding: 4px 0 0 18px;
  height: 22px;
  color: #999;
  text-decoration: none;
  line-height: 1.45em;
}
</style>

<div id="menu-social">

<a href="ENDEREÇO DA PÁGINA INICIAL DE SEU BLOG" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWv7KCtmJbRGsoIKT8zG8scg2CkIDn0lluSl2FPHYy2l82_CRw1HMAmDDiuJuI2jtz8MZG5ttcBnLYKgPyVp1O7EsFW8YEsBYjQu_fb_NMcuyEHREi-lQgKQ2obaUSlSt4KUR5yx8Iwuf1/s1600/social_balloon-21.png" /></a>
<a href="ENDEREÇO DE SEU FACEBOOK" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BULOG69ONyFmBEdkls-QsAk9cELF4eILHXPztvJFpeLU33fs4YuGC9n8TowTCCo3cTDGQtXJr1xLImOSEUJNnFtZnQjRIK4Qy5NVv5P8gozpcKfjhnZ2QDngZPchiekNQU_ITlbQ-8Mg/s1600/social_balloon-14.png" /></a>
<a href="ENDEREÇO DE SEU TWITTER" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLkLaTzXO0rrNXqNtbmRblNPNr5k5TYkkdW3butA96ynWWchLxMYvRty-vNBycmHNisv8ctFv7w1vbX1d0VvKcWR8ndQd6oFPvjKkXwVinplAcI1RDJgH-oQhI34ZtQSWz-7UA1eSfEGeu/s1600/social_balloon-05.png" /></a>
<a href="ENDEREÇO DE SEU GOOGLE" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIA1C2a_xUXA27ksTlLFOIcFg9tl-AZBp0i_RHwMX5_A1kzikmio2IXLN5Jx5S_KAXzEh_B-LzNExllD0T24UybctNdJl2HaQx9CfsbNP8UwFMwBaE3e79H9PP0Q5Qh2O9NOS602PP3t4/s1600/social_balloon-19.png" /></a>
<a href="ENDEREÇO DE SEU FEED" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GS6cXVZszEEuRSJcxV_RwkhGUsU3SpPJsd_sSA18SEvutrD8SLXoCvy6yWQ1hOuYQP30OUVKuJOTu9Es7aaHHWZ2kebrnE_0YRVsCpYeknTpxKYB_WnocwynjHiSnOpPlZ7xeqZvN0bd/s1600/social_balloon-15.png" /></a>
</div>
A parte em verde devera ser editada pelo que se pede..
A sua página deverá ficar assim:

Até mais,em breve mostrarei como fazer um feed to editando o post e até mais,posto o feed hoje ainda.

Slide das postagens mais recentes para blog

Bom esse modelo é um slide-show das postagens mais recentes do blog igual ao que está no meu.
O código deve ser inserido como um gadget de HTML/JavaScript o caminho é esse:
Painel de blog---visão geral----layout---adicionar um gadget-----HTML/JavaScript
O código é esse:




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 800;
var pause = 6500;
function removeFirst(){
first = $('ul#slide li:first').html();
$('ul#slide li:first')
.animate({opacity: 0.5}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#slide').append(last)
$('ul#slide li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
#slide{
height:150px;
width:360px;
overflow:hidden;
border: 1px solid #ccc;
margin: auto;
padding:5px;
}
#slide li{
margin: 10px 0 0 0;
list-style:none;
}
#slide .news-title{
display:block;
text-align: center;
line-height: 10px;
}
#slide img{
float:left;
margin-right:2px;
padding:10px;
border:solid 1px #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "URL IMAGEN 1";
showRandomImg = true;
tablewidth = 360;
cellspacing = 1;
borderColor = "";
bgTD = "#ffffff";
imgwidth = 120;
imgheight = 120;
fntsize = 16;
acolor = "#ff0000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 12;
summaryColor = "#0000ff";
icon2 = " ";
numposts = 10;
label = "";
home_page = "http://www.jblogdesigner.blogspot.com.br/";
</script>
<script src="http://acessoriosparablogs.com.br/scripts/slide.js" type="text/javascript"></script>

A parte em azul deve ser alterada pelo endereço do seu blog ou site.
Outra forma é usar o Wibbitz nele você poes o seu nome e o endereço do site e ele já cria o slide o site é http://www.wibbitz.com/

Como nasceu o J. Blogger Designer

Bem...esse blog é para mostrar os meu trabalhos como designer de blog e sites e para postar coisas interessantes para os mesmos.Já fiz vários temas para tumblr e blog editei o Puro Glamour (http://www.puroglamour.com)junto com a sua dona a Amanda Ribeiro (minha prima,o negocio de blog está no sangue,rsrsrs)e fiz o site da sua loja a Glam Store (http://www.puroglamourboutique.blogspot.com).E é isso. Então vamos lá e começar a postar e ajudar os outros com seus sites e blog