Postagens Recentes

28 de ago de 2008

Mostrar quantas postagens e comentários tem seu blog

2 comentários:


Mostre a seus visitantes quantas postagens você já publicou em seu blog e oo número de comentários. Copie o código abaixo e ole no HTML/Javascript em seu Blogger. Coloque o nome de seu blog e salve.






Este blog tem: <script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://NOME DO SEU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> postagens e
<script src="http://NOME DO SEU BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>comentários



Créditos: Pizcos

27 de ago de 2008

Email










Nome (obrigatorio):


E-mail: (obrigatorio, não será mostrado)


Sitio Web:


Sua mensagem:









Se você quer fazer parceria, não se esqueça de escrever "Parceria" e linkar o Templates e Acessórios em seu blog. Deixe seu nome e o endereço completo de seu blog.

22 de ago de 2008

Template Bondagem

2 comentários:


Desculpe, template retirado pois ficou obsoleto.

Aceitando sugestões

12 comentários:

Qual a melhor frase para essa foto ?

Deixe sua sugestão nos comentários abaixo.

A melhor frase ganhará um template novinho em folha, totalmente exclusivo.

Colocando imagens nos links que modificam

4 comentários:
Para colocar imagens em seus links que modificam como nesse exemplo AQUI proceda da seguinte forma.

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

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




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.







E acima dele cole o código abaixo fazendo as modificações necessárias como cores das letras e endEreço das imagens.



/* POSTS COM IMAGENS NO LINK-----------------------------------------------
*/
.post-body a:visited {
color: #c00000;
padding-right: 13px;
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat 100% 50%;
}
.post-body a:visited:hover {
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat 100% 50%;
padding-right: 13px;
color:#800000;
}



Para colocar imagens que mudam na widgets(colunas)

Procure pelo código:

/* Sidebar Content----------------------------------------------- */

E cole o código abaixo depois dele.


/* IMAGENS PARA OS LINKS
-------------------------- */
.LinkList a {
color:#000000;
padding-left: 16px;
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat;
}
/* LINKS QUE MODIFICAM
-------------------------- */
.LinkList a:hover {
padding-left: 16px;
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat;
color:#0066cc;
}
/* LINKS VISITADOS
-------------------------- */
.LinkList a:visited {
padding-left: 15px;
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat;
color:#00C0C0;
}
.main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.crosscol .widget{
padding:8px;
}
.main .Blog {
border-bottom-width: 0;
}





Coloque imagens pequenas.


Imagens AQUI, ou AQUI

20 de ago de 2008

Link dos 4 anos

4 comentários:
Pela net afora há quem coloque em seu blog o link da vez, o post do dia, link para o fim de semana e estou lançando:



O link dos quatro anos.

MUITO BOM !!!!!!!!

Então clique AQUI e confira essa maravilha de blog.

Amei !!!



19 de ago de 2008

Template Flores Vermelhas

2 comentários:

Template em 2 colunas, menu horizontal

Free Image Hosting at www.ImageShack.us



Download



Veja o template AQUI
Pegue o código AQUI

18 de ago de 2008

Escolher os blogs para mostrar no perfil

Um comentário:
Para quem tem vários blogs em um só endereço aqui no Blogger mas gostaria de escolher qual mostrar no perfil, é bem simples.


Vá até o painel de controle do Blogger e clique em "Editar seu perfil", estará ao lado de sua imagem de perfil.




Agora nessa outra página clique em " Selecione os blogs a serem exibidos"





Agora deixe selecionado apenas os blogs que você quer que apareça em seu perfil e depois salve.

Pronto !


Botões de avaliação das postagens

2 comentários:





Agora no Blogger poderemos colocar botões para avaliação abaixo de cada postagem. Mas este recurso só está disponível no Blogger Draft.Para obter este recurso clique AQUI e entre no Blogger Draft.


Clique em "Layout"


Agora clique em "Editar" em POSTAGENS NO BLOG



Agora ao abrir essa janela você verá "Reações", selecione a caixinha.


Salve !


Agora vá até o HTML do seu blog, clique em "Expandir modelos de widget" e procure pelo código:




<div class='post-footer-line post-footer-line-3'/>



Cole então depois dele o seguinte código:



<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>



Créditos: El Escaparate de Rosa

Menu de navegação por páginas no Blogger

4 comentários:
Refiz essa tutorial pois a antiga não funcionava.Então peguei a dica do Blog Bustter.


Faça as modificações nos locais indicados com a cor vermelha substituindo o número 14 pelo número de postagens que irá aparecer.


Copie o código abaixo e cole-o antes de :


]]></b:skin>



.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}



Agora procure pelo código:


<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

E depois de:
</b:section>
cole o próximno código




<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 5;
var displayPageNum = 14;
var upPageWord = 'Anterior';
var downPageWord = 'Próxima';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>




O que acontece com esse código é que os posts com a mesma data de publicação NÃO são mostrados :-(

É a alegria do pobre que dura pouco.

14 de ago de 2008

Como salvar as imagens em seu computador

12 comentários:
Bom, ninguém nasce sabendo e me perguntaram como fazer para salvar uma imagem em seu computador, então aí vai a dica.


Quando você estiver navegando na net e vir aquela imagem que gostou faça da seguite forma.




Clique com o botão direito do mouse sobre a imagem


Abrirá uma janela como esse exemplo.






Clique então em "Salvar imagem como..."

Abrirá então uma outra janela, é aí que você vai salvar a imagem.



Para aprender a hospedar as imagens, clique AQUI

Template Flores do Cerrado

16 comentários:
Template para o Blogger/Blogspot.
3 colunas, fundo fixo, buscador, botão de feed e menu horizontal.

Veja o blog instalado AQUI


Free Image Hosting at www.ImageShack.us


Clique para ampliar



Download




Clique AQUI e pegue o código

13 de ago de 2008

Comentários expandíveis

5 comentários:
Para que o sistema de comentários do blogger seja expandível, isso é, para que ele se abra abaixo do post, vá até o HTML do seu 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.




Copie o código abaixo e cole sobre: </head>




<script type="text/javascript">
//<![CDATA[
var comment_form_template = '<div class="commentelem"><div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
if(typeof(thisblog_showCommentPhotos) == 'undefined')
thisblog_showCommentPhotos = false;
//]]>
</script>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;amp;id=2941927' type='text/javascript'></script>


Salve !
Clique em "Expandir modelos de widget" e procure pelo seguinte código:


<b:includable id='comments' var='post'>
<div class='comments' id='comments'>




Agora substitua a segunda linha por:


<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"commentsul" + data:post.id'> </div>
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
</b:if>


Agora procuraremos pelo seguinte código:
<dl id='comments-block'>


E acima colocaremos o seguinte código:


<div expr:id='"commentsul" + data:post.id'> </div>




Agora procure este código:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if></b:if>

E troque por este:


<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>


Agora procure por este trecho:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

E substitua por este:



<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:loop values='data:post.feedLinks' var='f'>
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display(&amp;quot;" + data:f.url + "&amp;quot;,&amp;quot;commentsul" + data:post.id + "&amp;quot;,&amp;quot;&amp;quot;,&amp;quot;" + data:post.url + "#comments&amp;quot;,&amp;quot;false&amp;quot;);toggleitem(&amp;quot;comments" + data:post.id + "&amp;quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&amp;quot;comments" + data:post.id + "&amp;quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>



Créditos: El Escaparate de Rosa

12 de ago de 2008

Aumentando e diminuindo a imagem em um toque

Nenhum comentário:
Este script faz com que seu visitante aumente ou diminua a imagem. Copie o código e cole no HTML/Javascript em seu blog. Coloque a imagem no local indicado (onde está em vermelho) e faça as modificações do tamanho. Onde está em verde.








<script language="JavaScript1.2">
var zoomfactor=0.05 //Enter factor (0.05=5%)
function zoomhelper(){
if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
}
}
function zoom(originalW, originalH, what, state){
if (!document.all&&!document.getElementById)
return
whatcache=eval("document.images."+what)
prefix=(state=="in")? 1 : -1
if (whatcache.style.width==""state=="restore"){
whatcache.style.width=originalW
whatcache.style.height=originalH
if (state=="restore")
return
}
else{
zoomhelper()
}
beginzoom=setInterval("zoomhelper()",100)
}
function clearzoom(){
if (window.beginzoom)
clearInterval(beginzoom)
}
</script>
<!-- MUDE ABAIXO OS VALORES PARA QUE SE AJUSTEM A SUA IMAGHEM-->
<a onmouseover="zoom(83,83,'logo','in')" onmouseout="clearzoom()" href="#">+ Zoom</a> <a onmouseover="zoom(110,106,'logo','restore')" href="#">Normal</a> <a onmouseover="zoom(160,176,'logo','out')" onmouseout="clearzoom()" href="#">- Zoom </a><br/><br/><br/>
<div style="position:relative;width:83;height:83" align="center"><div style="position:absolute">
<img width="110" src="AQUI O ENDEREÇO DE SUA IMAGEM" name="logo" height="106"/>
</div></div>




Créditos: Javascript Kit

Efeito bolinhas pelo blog

2 comentários:
Para fazer um efeito de bolinhas no blog como você poderá ver AQUI, copie o código abaixo e cole no HTML/Javascript em seu blog. Troque o código em vermelho pelo código da cor desejada.




<script language="JavaScript">
<!-- Starfield - Kurt Grigg - http://www.btinternet.com/~kurt.grigg/javascript
n=20;// Number of stars!
n4=(document.layers);
ie=(document.all);
for (i=0; i < n; i++){
if (n4)
document.write("<layer name='stars"+i+"' top=0 left=0 bgcolor=#cccccc width=1 height=1></layer>");
else
document.write('<div id="stars'+i+'" style="position:absolute;width:20px;height:20px; background: #cc0000; font-size:7px">.</div>');
}
h=0;
w=0;
cy=0;
cx=0;
y=new Array();
x=new Array();
iy=new Array();
ix=new Array();
dir=new Array();
v=new Array();
ds=new Array();
ac=new Array();
for (i=0; i < n; i++){
iy[i]=Math.random()*h;
ix[i]=Math.random()*w;
y[i]=iy[i];
x[i]=ix[i];
v[i]=1.3;
ac[i]=0;
ds[i]=0;
}
function fly(){
h=(ie)?document.body.clientHeight:window.innerHeight;
w=(ie)?document.body.clientWidth:window.innerWidth;
sy=(ie)?document.body.scrollTop:window.pageYOffset;
sx=(ie)?document.body.scrollLeft:window.pageXOffset;
cy=Math.floor((h/2));
cx=Math.floor((w/2));
for (i=0; i < n; i++){
divs=(n4)?document.layers["stars"+i]:document.getElementById("stars"+i).style;
ay=y[i]-cy;
ax=x[i]-cx;
dir[i]=Math.atan2(ay,ax)*180/Math.PI;
v[i]+=ac[i];
v[i]+=(v[i]/10);
if (v[i] > 0.4 && v[i] < 0.5){
if (!n4){divs.fontSize=2;divs.height=2;divs.width=2}
else{divs.clip.height=2;divs.clip.width=2}
}
if (v[i] > 10){
if (!n4){divs.fontSize=2;divs.height=2;divs.width=2;}
else{divs.clip.height=2;divs.clip.width=2;}
}
if (v[i] > 20){
if (!n4){divs.fontSize=3;divs.height=3;divs.width=3}
else{divs.clip.height=3;divs.clip.width=3}
}
if (v[i] > 30){
if (!n4){divs.fontSize=5;divs.height=5;divs.width=5}
else{divs.clip.height=5;divs.clip.width=5}
}
y[i]+=v[i]*Math.sin(dir[i]*Math.PI/180);
x[i]+=v[i]*Math.cos(dir[i]*Math.PI/180);
if (y[i] < 0 y[i] > h-Math.round(v[i]) x[i] < 0 x[i] > w-Math.round(v[i])){
iy[i]=Math.random()*h;
ix[i]=Math.random()*w;
y[i]=iy[i];
x[i]=ix[i];
dx=cy-y[i];
dy=cx-x[i];
ds[i]=Math.sqrt(dy*dy+dx*dx);
ac[i]+=(-(ds[i]*ds[i])+(160000))/(100000000);//?
v[i]=Math.floor(ds[i]/40);
if (!n4){divs.fontSize=1;divs.height=1;divs.width=1}
else{divs.clip.height=1;divs.clip.width=1}
}
divs.top=y[i]+sy;
divs.left=x[i]+sx;
}
setTimeout('fly()',10);
}
fly();
// -->
</script>

Gifs Home e setas

16 comentários:
Abaixo algumas gifs de casinhas(home) e setas coletadas na net. Não são de minha autoria.


Salve em seu computador e depois hospede em um servidor. Clique AQUI para hospedar. Se não sabe como hospedar, clique AQUI para aprender.

Nunca copie as imagens ! Salve-as em seu computador e depois as hospede.

Ver imagens



    Homes




    Setas gifs






Ver imagens



    Inscrição










Ver imagens



    Pacotes:





    Encontrei essa imagem na net e fui trocando as cores.



















    Encontrei essa imagem na net e fui trocando as cores.






















    Imagens feitas por mim.


    Pacotes:














Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube