Colocando duas colunas abaixo das postagens do blog

Dica para colocar colunas no novo Blogger aqui





Vou ensinar como colocar duas colunas abaixo das postagens do blog. Assim você poderá fazer o efeito revista em seu blog. É fácil, tenha paciência e perseverança que você consegue. Primeiro vamos fazer a oração para Nossa Senhora dos Blogueiros Aflitos...

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Vá até o HTML do seu blog e procure pelo código :

/* Outer-Wrapper----------------------------------------------- */




E abaixo dele cole o seguinte código:
*Onde está em vermelho é para que você ajuste a largura do widget

#leftsidebar_1 {
width: 280px;
float: $startSide;
margin:0px;
padding:0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#leftsidebar_2 {
width: 280px;
float: $startSide;
margin-$startSide:18px;
padding:0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Se essa de cima não der certo, tente essa abaixo.

#leftsidebar_1 {
width: 280px;
float: right;
margin:0px;
padding:0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#leftsidebar_2 {
width: 280px;
float: left;
margin:10px;
padding:0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Agora procure pelo seguinte código:

</div> <!-- end content-wrapper -->


Agora cole o próximo código abaixo dele.

<div id='leftsidebar_1'>
<b:section class='sidebar' id='sidebar22' preferred='yes'>
<b:widget id='HTML33' locked='false' title='Teste' type='HTML'/>
</b:section>

</div> <!-- end leftsidebar_1 -->

<div id='leftsidebar_2'>
<b:section class='sidebar' id='sidebar44' preferred='yes'>
<b:widget id='HTML22' locked='false' title='Quatro' type='HTML'/>
</b:section>
</div> <!-- end leftsidebar_2 -->

Salve e boa sorte !<\> Veja a dica aqui

»»Leia mais...

Difícil escolha...

Nessas horas se vê a difícil tarefa da mulher.


*Atenção, esses vídeos contém imagens fortes, não os assista caso seja sensível.

Parto cesárea

Parto anormal

* Para assistir a esse vídeo é necesário ter cadastro no You Tube e ter mais de 18 anos.

»»Leia mais...

Seguidores do Blogger

Está funcionando agora no Blogger depois de muito tempo anunciado o widgets de seguidores do Blogger. Com ele seus visitantes poderão assinar seu blog e de quebra criar um link para seu próprio blog. Vamos, o que está esperando ?

Vá até o Layout, Elementos de página, Adicionar um Gadgets e depois clique na cruz em azul. Pronto, basta agora se quiser arrastar e colocar onde quiser.

Para personalizar o widget de seguidores como fiz no meu, clique AQUI e aprenda.

»»Leia mais...

Até mais

Já estou de partida para minha cidade natal para dar a luz ao meu terceiro e último filho. Não sei se retornarei antes de um mês. Um até breve para quem fica e não estarei respondendo a nenhum comentário por esses dias (eu acho).

Um abraço a todos.

Imagens: Anne Guedes

»»Leia mais...

Bullets, setinhas...

Encontrei mais um site com setinhas para usar em nossos blogs.






Não copie, salve as imagens em seu pc e depois hospede-as em um site de sua preferência.

»»Leia mais...

Caixa com aviso flutuante

Fui agora ao blog de Gem@ e de lá trouxe mais essa novidade.
Se trata de uma caixa flutuante para que você deixe recadinhos para seus visitantes. Veja AQUI o exemplo.
Para coloca-la em seu blog é bem simples.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Vá até o HTML do seu blog e procure pelo código:
]]></b:skin>



Acima dele, cole o código abaixo

#topbar{
position:absolute;
border: 1px solid black;
padding: 5px;
background-color: white;
width: 640px;
visibility: hidden;
z-index: 640;
}

Agora clique em "Expandir modelos de widgets" e procure pelo seguinte código:
<div id='outer-wrapper'><div id='wrap2'>

Agora abaixo dele coloque o seguinte código:

* Troque os códigos em verde pelo que se pede.

<div id='topbar'>
<a href='' onClick='closebar(); return false'><img border='0' src='ENDEREÇO DA IMAGEM PARA FECHAR O QUADRO '/></a>
ESCREVA AQUI O QUE QUISER
</div>

Agora copie o código que esta AQUI, vá até "Elementos de página", clique em "Adicionar um gadget" e depois clique em HTML/Javascript e cole o código.

»»Leia mais...

Widget com todas as postagens

Dica quente do blog El Scaparate de Rosa. Um Widget com todas as postagens que já foram publicadas no blog. Experimentei e gostei !

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Vá até o HTML do blog e procure pelo código:
</head>

Acima dele, cole o código abaixo. Salve !

<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
// &quot;cb&quot; is intended to be a common library, where different widgets would
// utitlize the shared operations such as getTitle, getLink, etc. from a json object.
var cb = {
// search function requires these parameters:
// 1. query: a blogger address, such as &quot;hoctro.blogspot.com&quot;,
// 2. type: type of return data, either &quot;comments&quot; or &quot;posts&quot;,
// 3. start: the start-index parameter (where to start extracting data)
// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)
// 5. func: the returned function the json object will feed.
search: function(query, type, start, increment, func) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/&#39; + type + &#39;/default?alt=json-in-script&amp;start-index=&#39;
+ start + &#39;&amp;max-results=&#39; + increment + &#39;&amp;callback=&#39; + func + &#39;&amp;orderby=published&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
},
// searchLabel function return a result of posts w/ a label query
// it requires these parameters:
// 1. query: a blogger address, such as &quot;hoctro.blogspot.com&quot;,
// 2. an array of labels
// 3. func: the returned function the json object will feed.
searchLabel: function(query, label, func) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39; + encodeURIComponent(label) +
&#39;?alt=json-in-script&amp;callback=&#39; + func + &#39;&amp;orderby=published&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
},
// getTotalResults needs the json object, and it&#39;ll return the total number of comments (or posts) of the blog.
getTotalResults: function(json) {
return json.feed.openSearch$totalResults.$t;
},
// getStartIndex gets the start index of a search inside an json object.
getStartIndex: function(json) {
return json.feed.openSearch$startIndex.$t;
},
// getLink return a href link if &quot;name&quot; matches the content inside &quot;a&quot; tags) of the link
getLink: function(entry, name) {
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == name)
alturl = entry.link[k].href;
}
return alturl;
},
// getTitle gets the title of the title of an entry of a json object.
getTitle: function(entry) {
return entry.title.$t;
},
// getContent gets the content inside an entry of a json object.
getContent: function(entry) {
return entry.content.$t;
},
// getCommentAuthor: gets the commenter name inside an entry of a json object.
getCommentAuthor: function(entry) {
return entry.author[0].name.$t;
},
// Given a json label search, this function return the decoded label.
getLabelFromURL: function(json) {
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani&#39;s Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf(&#39;/&#39;)+1);
return decodeURIComponent(label);
}
}
},
txt : function (s) {
return s + &quot; Widget by &lt;a href=&#39;http://hoctro.blogspot.com&quot; + &quot;&#39;&gt;Hoctro&lt;/a&gt;&quot;;
}
};
</script>

Agora procure pelo código:

<b:section class='sidebar' id='sidebar' preferred='yes'>

E abaixo dele cole o seguinte código:
*Troque o código que está em vermelho pelo nome de seu blog.

<b:widget id='HTML50' locked='false' title='Todos os posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
<ul><div id='dataPost' style='height:400px; overflow:auto;'/></ul>
</div>
<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
// This widget lists the available posts based on the uP.nPost value below
// Use -1 if you want them all.
var uP = {
nPost : -1
};
var cP = {
// private variable to store the total results
totCount : 0,
// the number of elements for each json call
increment : 10,
// this is the place to define the blog name for subsequent retrieval data
web : &quot;AQUI O NOME DE SEU BLOG.blogspot.com&quot;,
listPosts: function(json, tag) {
var text=&quot;&quot;;
for (var i = 0; i &lt; json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
text += &quot;<li>&quot; + &quot;&lt;a href=&#39;&quot; + cb.getLink(entry, &quot;alternate&quot;)
+ &quot;&#39;&gt;&quot; + cb.getTitle(entry) + &quot;</li>&quot;;
}
var p = document.createElement(&#39;span&#39;);
document.getElementById(tag).appendChild(p);
p.innerHTML = text;
},
callPostJson: function(json) {
this.listPosts(json, &quot;dataPost&quot;);
},
getCo : function(json) {
this.totCount = cb.getTotalResults(json);
var count = (uP.nPost &lt; 0) ? this.totCount : uP.nPost;
var i=1;
while(i&lt;=count) {
var incr = (count-i &lt; this.increment) ? count-i+1 : this.increment;
cb.search( cP.web, &quot;posts&quot;, i, incr, &#39;cP.callPostJson&#39;);
if (incr==0) incr=incr+1;
i = i+incr;
}
}
};
cb.search( cP.web, &quot;posts&quot;, 1, 2, &#39;cP.getCo&#39;);
</script>
</b:includable>
</b:widget>

»»Leia mais...

Dia das crianças

Hoje é dia das crianças.

Dia de alegria !

Aproveitem o dia também marmanjos de plantão ! Abaixo alguns vídeos para relembrar a nossa infância.

»»Leia mais...

100 anos de Cartola

Hoje faria 100 anos Angenor de Oliveira, mais conhecido como Cartola. Compositor e fundador da Estação Primeira de Mangueira teve uma infância difícil. Estudou somente até o primário. Trabalhou como pedreiro, (onde ganhou seu apelido ao usar um pequeno chapéu coco para não sujar os cabelos com cimento) lavador de carros, vigia de prédio.
Apesar de sua genialidade, o sambista só conseguiu gravar seu primeiro disco aos 65 anos. Apesar do grande sucesso de seus sambas, Cartola morre pobre, morando numa casa doada pela prefeitura do Rio de Janeiro. Leia mais...

Centro Cultural Cartola

»»Leia mais...

Comentários do autor do blog em destaque

Outra dica do blog El Scaparate de Rosa. Com esta dica você poderá deixar os seus comentários em destaque em seu próprio blog.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

A primeira coisa a fazer é ir até o HTML do seu blog.
Clique então em "Expandir modelos de widgets"




Agora procure pelo trecho:

*Note que a parte que está em preto é o que deverá já existir em seu blog. Copie as partes que estão em vermelho e insira no código.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Agora salve.

Procure então o código:

/* Comments
----------------------------------------------- */

*Se não der certo, tente só:

/* Comments

E cole o próximo código abaixo dele.
Para fazer as modificações troque os trechos em destaque na cor verde até que fique do seu agrado. Se quer uma imagem, substitua o último trecho


background :#C3FDB8;
Por
background: url("AQUI O ENDEREÇO DA SUA IMAGEM") repeat;

.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border: 1px dotted #254117;
background:#C3FDB8;
}

»»Leia mais...

Menu accordion

Encontrei este menu no blog Link Duzão. Fiz algumas alterações pois havia alguns intens sobrando (eu acho, rsrrsrs).







A primeira coisa a fazer é ir até o HTML do seu blog, procure pelo código:

<HEAD>

*Números em veremelho representam as cores do menu. Troque-as se quiser.

Agora cole todo código abaixo DEPOIS dele.

<script type="text/javascript" src="http://rosduz.googlepages.com/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="http://rosduz.googlepages.com/ddaccordion.js">
</script>
<style type="text/css">
.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}
.openpet{ /*class added to contents of 1st demo when they are open*/
background: #000000;
}
.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}
.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}
.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}
</style>
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>

Agora copie este segundo código e cole no HTML/Javascript em seu blog. Faça as modificações necessárias e salve. Você poderá colocar textos, códigos e imagens dentro deste menu.

<h3 class="mypets">LINK 1</h3>
<div class="thepet">

AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 2</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 3s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 4s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 5s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 6s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 7s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

»»Leia mais...

Mais mudanças...

Pois é, para tirar o ranço da última postagem resolvi modificar o layout do blog. Mas também deverei ficar um tempinho sem postar pois como algumas pessoas sabem, estou na etapa final da gravidez e a qualquer momento devo desaparecer do blog, mas calma, não se anime, eu vou mas volto...
O u acharam que ficariam sem as postagens mal criadas desta blogueira ?

Portanto, a qualquer momento pararei de postar.

»»Leia mais...

Número de comentários no título do blog

Também no blog de Gem@ encontrei esta outra dica. Colocar o número de comentários junto ao tÍtulo do blog.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Bom, para começar vá até o HTML do seu blog e procure pelo código: ]]></b:skin>

Agora cole antes dele o código abaixo.

.numComments {
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
.numComments a:link{
color: #CODIGO HEXADECIMAL;
}
.numComments a:visited{
color: #CODIGO HEXADECIMAL;
}
.numComments a:hover{
color: #CODIGO HEXADECIMAL;
}

Agora salve.

Clique então em "Expandir widgets" e procure pelo código:

<b:if cond='data:post.title'>

E abaixo dele cole o próximo código.

<span class='numComments'><a expr:href='data:post.url'><data:post.numComments/></a></span>

»»Leia mais...

Desabafando pela milésima vez !

Fofinhos e fofinhas, ilustres frequentadores deste humilde espacinho virtual, venho através desta, MAIS UMA VEZ, lhes informar, a quem possa interessar que eu, Elke di Barros

• NÂO DOU CONSULTORIA
• NÃO CONSERTO BLOGS
• NÃO DOU AQUELA AJUDINHA
• NÃO DOU UMA MÃOZINHA
• NÃO VOU A SEU BLOG CONFERIR CÓDIGO
• NÃO INSTALO NADA
• NÃO AJUDO

É claro que se PAGAR bem, que mal tem ?!

Sou má, ruim mesmo, uma praga, uma mulher péssima, antipática, anti-social...

Mas fico admiradíssima que essas pessoas que vem aqui pedir ajuda. Não tem ao menos a consideração de colocar um link deste blog aqui no que possui.

INCRÍVEL ! Nem um simples link, um banner, um botão...

Já vi até gente que linka tudo quanto é blog de ajuda que tem por aí, menos este blog aqui.

Isso não poooooooode !

Mas ficar com a ladainha de pedir ajuda...

Isso poooooode !

Por favor, não insistam e nem se ofendam por este desabafo, mas o fato é que já coloco aqui várias dicas, tudo com foto, tudo explicadinho passo a passo, com link de onde peguei, se você não consegue, fazer o quê ?

Eu NÃO tenho tempo e nem saco para isso, por favor, me entendam e me desculpem, mas não rola mesmo.

»»Leia mais...

Gerador de iframe

Encontrei esse gerador de iframe. Serve para que você coloque uma página de um outro blog ou site dentro de seu blog.

»»Leia mais...

Nuvem de tags em flash

Mais uma dica da Amanda do excelente Blog Buster. Trata-se de colocar em seu blog a nuvem de tags, ou etiquetas em seu blog em flash, como o modelo abaixo.
*Dê preferência a esse modelo se você tem poucas tags.




Vá até o HTML do seu blog e procure pelo código:

<b:section class='sidebar' id='sidebar' preferred='yes'>


Abaixo dele cole o código abaixo dando preferência por hospedar o código que está em destaque pelo seu código. Para isso, clique sobre ele para fazer o download e depois hospede-o em um site como o Google Sites ou no Your Script trocando o endereço que está no código pelo seu.

<b:widget id='Label99' locked='false' title='Nuvem de Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type="application/x-shockwave-flash" data="http://sites.google.com/site/marcadoresflash/marcflash/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=

true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Este código em vermelho representa a cor de fundo, caso queira, é só mudar para a cor que quiser.
Código em azul largura
código em rosa comprimento

»»Leia mais...