J. Blogger Designer

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

2012-08-01T14:52:00.000-03:00

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.

2012-07-30T10:37:00.002-03:00

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

2012-07-27T13:11:00.002-03:00

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:

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

2012-07-26T16:50:00.001-03:00

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

2012-07-26T14:53:00.003-03:00

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