Postagens Recentes

29 de set de 2009

Blog toc nas postagens

8 comentários:

Faça um "Blog Toc" mais moderno, mais enxuto e mais fácil nas postagens do blog. Quer ver o resultado ? Clique AQUI.


Copie o código abaixo e cole no modo "Editar HTML" no editor de textos do Blogger.





<script style="" src="http://dl.getdropbox.com/u/1367826/blogtoc-reduz.js"></script>

<script src="http://AQUI O NOME DE SEU BLOG.blogspot.com/feeds/posts/default?max-results=2999&amp;alt=json-in-script&amp;callback=loadtoc"></script>






Troque o código na cor veremelha pelo nome de seu blog
reduz.js
Se preferir, é aconselhável hospedar o código javascript em um site de hospedagem

Arquivo do blog no post

Um comentário:

Coloque seus arquivos em um de seus posts, para isso basta seguir a instrução.





Vá até o HTML de seu blog e procure por:

</head>

E acima dele cole o código abaixo:


<script type='text/javascript'>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/><a href="http://www.abu-farhan.com" style="font-size: 8px; text-decoration:none; color: #616469;">Widget Abu Farhan</a></br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><a href="'+postYearMonth2[b]+'">'+temp1+"</a></p><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
//]]>
</script>

Agora cole  próximo código no post do seu blog, mas antes clique em "Editar HTML, coloque o nome de seu blog no local indicado e publique.


<script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Widget de posts recentes com efeito

19 comentários:

Encontrei um blog com dicas bem legais para o Blogger e postarei aqui nos próximos dias todas elas.

A primeira da série é esta, um widget com as últimas postagens do blog com efeito. É bem fácil coloca-lo, é só copiar o código abaixo e colar no HTML/Javascript. Coloque o endereço de seu blog no local indicado com a cor verde e salve.



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:320px;/*largura do widget*/
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:320px;/*largura do widget*/
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;/*aqui o fundo do widget*/
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:15px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 3005;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://NOMEDOSEUBLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://dl.getdropbox.com/u/1367826/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>



Créditos: Abu Farhan

28 de set de 2009

Arquivo do blog


Arquivo do blog






Quer um arquivo assim ? Clique aqui e faça o seu.

27 de set de 2009

Disney Princesas, imagens, background, wallpapers, vídeos, midis...

Nenhum comentário:
Gosta dos filmes da Disney ? E das princesas ? Ariel, Cinderella, Bella, Aurora, Tiane, Mulan, Pocahontas...

Elas estão esperando você neste endereço abaixo. Há wallpapers, imagens PNG, vídeos, midis, backgrounds e muito mais.




22 de set de 2009

HTML 5

2 comentários:

No início de 2009 o W3C – consórcio de empresas de tecnologia para levar a Web ao seu máximo potencial – anunciou a primeira especificação do HTML 5. O HTML (Hypertext Markup Language), que é responsável por organizar e formatar as páginas que visitamos na internet, está em sua versão 4.0.1 e continua evoluindo. Após cinco anos de trabalho, esta, ainda, é apenas uma versão de testes do HTML 5 e a versão final está prometida para 2012. Foram feitas grandes alterações, que incluem: novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais, controle embutido de conteúdo multimídia, aprimoramento do uso off-line, melhoria na depuração de erros, entre outros avanços.

Esta evolução da linguagem padrão para web pode eliminar a necessidade de plug-ins para aplicações multimídia em navegadores. Diversos críticos consideram a tecnologia como um forte concorrente ao Flash do Adobe, Silverlight, da Microsoft, e o recente JavaFX, da Sun. Recentemente, Shantanu Narayen, diretor executivo do Adobe, disse que o Flash não irá perder mercado, porem a versão 5 do HTML já está sendo chamado de “Flash-killer”. Estas tecnologias precisarão se adaptar rapidamente para conseguir manter-se no mercado, tão popular quanto hoje. Na avaliação do co-diretor de ferramentas da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML 5 como o Canvas para desenhos 2D e o armazenamento de conteúdos no desktop, permitirão que “usemos mais o browser do que nunca”.

Após dez anos sem atualizações, a forma como se escreve páginas na Internet passa por uma boa transformação. O HTML 5 oferece uma experiência web totalmente diferente para usuários e embora exista um longo caminho para ser finalizado, os navegadores mais importantes, como o Google Chrome, Safari 4, o novo Firefox 3.5 e o Internet Explorer 8 já implementaram partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.

Com a evolução da linguagem, os navegadores passam da categoria “mostradores de páginas”.

Obrigada leitores feedelizados

6 comentários:

Quero agradecer a todos os leitores deste blog, principalmente aos leitores assinantes do Feed. Já são 1000 leitores assinantes o que faz deste blog um tremendo sucesso. Bom, sei que vc vai questionar o que é sucesso, pois pra mim é isto, ganhar R$ 100.000,00 por mês para fazer o que eu mais gosto:



B L O G A R.




E minha história com blogs começa como de tantos por aí, por curiosidade e insistência. Comecei no Live Spaces, que só vim a saber que nem era blog depois de lá ficar por 3 anos, e só depois migrei para o blog do UOL, o que deixa muuuuuuuuuuuuuito a desejar, até que conheci o Blogger, no meu caso, o blogspot, já que o Blogger é para quem tem conta na Globo.com, sendo esta paga.
A princípio este blog seria apenas para templates e acessórios, como o nome já diz, mas como havia pedidos para que eu ajudasse, ensinasse isto e aquilo, fui colocando tutoriais, dicas, scripts, geradores e aí está, o blog está enooooooorme.

Bom, fiz este post mesmo só para agradecer a vc, ao meu pai e ao saco dele de onde um dia eu saí. Quero agradecer a minha mãe, e ao seu útero limpo e quentinho, que me abrigaram por 9 meses. Quero agradecer também ao longo período de depressão que tive, não fosse ela eu jamais teria tido sido acometida por um tédio mórbido e não teria sentado a frente do computador para me distrair e assim jamais, digo J A M A I S, teria tido um blog, e não menos importante, quero agradecer a minha bunda, não fosse ela, eu não teria como sentar, sendo assim, teria sido impossível ficar tanto tempo conectada. Quanto ao R$ 100.000, 00 que ganho, esse que vc leu no início da postagem, bem, isso é apenas o devaneio de uma mente em desatino, (hehehehe Teca)

21 de set de 2009

The Phantom Of The Opera

Um comentário:
A D O R O


M U I T O






I S S O





M E S M O


Pois é, para muitos o melhor vocal é o da Sarah Brightman. E você, concorda ?
Só sei que não gosto de Raoul, acho-o um mala oportunista. Sou mais o fantasma, rsrsrrsrsrs. Acho que gosto do mal feito.

19 de set de 2009

Slide carousel

2 comentários:
Para colocar um slide como este abaixo vá seguindo as dicas.;-)




Vá até o HTML de seu blog e acima de:

]]></b:skin>

Cole o código abaixo.

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.






#myslides{
background:#2C3133;/*bordas do slide*/
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 600px; /*comprimento do slide*/
height: 265px; /*largura do slide*/
margin: 0px 14px 5px 14px;
background: #515F65;/*cor de fundo do slide*/
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px 17px ;
width:220px; /*comprimento das imagens */
background:#202325;/*cor de fundo das imagens*/
height:240px;/*largura das imagens*/
border:1px solid #378AB4;/*cor da borda das imagens*/
}
.stepcarousel .panel p{
text-align: left;
overflow: hidden;
margin: 5px 5px ;
}
.stepcarousel .panel h2{
text-align: left;
height:20px;
overflow: hidden;
margin: 2px 5px ;
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left;
background:#ffffff; /*cor de fundo das imagens*/
margin: 10px 10px 10px 10px;
padding:0px 0px;
}




Agora abaixo de:
]]></b:skin>

Cole o próximo código e depois insira o endereço no local indicado, substituindo o código na cor vermelha pelo endereço de seu scripts hospedados no Drop Box.
glide.js
jquery.js
slider.js
tabber.js


<script src='ENDEREÇO DO SRIPT glide.js' type='text/javascript'/>
<script src='ENDEREÇO DO SRIPT jquery.js ' type='text/javascript'/>
<script src='ENDEREÇO DO SRIPT slider.js ' type='text/javascript'/>
<script src='ENDEREÇO DO SRIPT tabber.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>



Agora este último código cole-o antes de:
<div id='content-wrapper'>

Faça as modificações necessárias colocando suas fotos e os links e salve.


<!-- Myslides -->
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: [&#39;http://web2feel.com/images/rem1.jpg&#39;, -14, 120], rightnav: [&#39;http://web2feel.com/images/rem2.jpg&#39;, 0, 120]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>
<div class='stepcarousel' id='mygallery'>
<div class='belt'>
<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO'><img alt='TEXTO AO PASSAR O MOUSE' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>
<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>

<div class='panel'>
<a href='ENDEREÇO DO LINK' target='_blanck' title='TEXTO AO PASSAR O MOUSE'><img alt='TEXTO' height='220' src='ENDEREÇO DA IMAGEM' width='200'/>
</a>
</div>
</div>
</div>
</div>
<!-- /Myslides -->



Querendo trocar as imagens das setas, troque o código que está na cor verde.

Créditos: John Resig

Slide

8 comentários:
Coloque um menu em seu blog que é um slide. Vá até o HTML do seu blog e cole o código abaixo acima de:

]]></b:skin>
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.



/* s3slider-------------------- */
#slider {
background:url(http://1.bp.blogspot.com/_FXIne2ZDJII/SrQibvsAyFI/AAAAAAAABhw/vDf4hrpYAWg/s1600/980.png);/*aqui o endereço da imagem de fundo do slide*/
height: 252px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #F54D0B;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #F54D0B;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 20px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 30px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
width : 280px;
higth: 280px;
position: absolute;
top: 20px;
left: 557px;
background:transparent;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 30px;
color: #F54D0B;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
/* fim slide */








(Querendo trocar a imagem de fundo do slide que é preta, hospede uma das imagens disponibilizadas abaixo e substitua o endereço onde está em vermelho no código acima)


Agora abaixo de:

]]></b:skin>

Cole este código


<!-- Slide-->
<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>

<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>
<!-- Fim Slide-->

<script type='text/javascript'>
//<![CDATA[
// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
var delayLength = 4000;

function doMove(panelWidth, tooFar) {
var leftValue = $("#mover").css("left");

// Fix for IE
if (leftValue == "auto") { leftValue = 0; };

var movement = parseFloat(leftValue, 10) - panelWidth;

if (movement == tooFar) {
$(".slide img").animate({
"top": -200
}, function() {
$("#mover").animate({
"left": 0
}, function() {
$(".slide img").animate({
"top": 50
});
});
});
}
else {
$(".slide img").animate({
"top": -200
}, function() {
$("#mover").animate({
"left": movement
}, function() {
$(".slide img").animate({
"top": 50
});
});
});
}
}

$(function(){

    var $slide1 = $(".slide");

var panelWidth = $slide1.css("width");
var panelPaddingLeft = $slide1.css("paddingLeft");
var panelPaddingRight = $slide1.css("paddingRight");

panelWidth = parseFloat(panelWidth, 10);
panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
panelPaddingRight = parseFloat(panelPaddingRight, 10);

panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;

var numPanels = $(".slide").length;
var tooFar = -(panelWidth * numPanels);
var totalMoverwidth = numPanels * panelWidth;
$("#mover").css("width", totalMoverwidth);

$("#slider").append('<a href="#" id="slider-stopper">Parar</a>');

sliderIntervalID = setInterval(function(){
doMove(panelWidth, tooFar);
}, delayLength);

$("#slider-stopper").click(function(){
if ($(this).text() == "Stop") {
clearInterval(sliderIntervalID);
$(this).text("Start");
}
else {
sliderIntervalID = setInterval(function(){
doMove(panelWidth, tooFar);
}, delayLength);
$(this).text("Stop");
}

});

});
//]]>
</script>


Agora copie o próximo código e cole antes de:

<div id='content-wrapper'>



Faça as modificações necessárias e salve.



<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>
</div>

<div class='slide'>
<h2><a href='AQUI O ENDEREÇO DO LINK' title='Clique-me'>
TÍTULO
</a></h2>
<span class='slmet'>SUB-TÍTULO</span>
<br/>
<p>TEXTO AQUI</p>
<img alt='' src='ENDEREÇO DA IMAGEM'/>

</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->



Abaixo, alguns fundos em cores diferentes para o slide. Clique sobre a imagem desejada e salve em seu computador, hospedando em seu blog a imagem e colocando o endereço no primeiro código na inscrição na cor vermelha.











Créditos:Jonh Resig

17 de set de 2009

Imagem do perfil nos comentários do Blogger

5 comentários:
Será uma miragem ? Estou vendo alguns avatares de comentaristas no sistema de comentários do meu blog. E vc, os vê no seu ? Será esse mais um presente dos 10 anos do Blogger para nós ? Investigando...




Se em seu blog os avatares não aparecem, dê uma olhada se não está configurado para não aparecer imagens.

Clique em "Configurações" e depois em "Comentários"




Agora selecione o "Sim"


Aproveite que vc está aí, e peloamordeDeus, selecione o NÃO para a opção de "Exibir confirmação de palavras para os comentários", isso é um verdadeiro empata foda. É de lascar ter que confirmar o comentário através de senha. Quer sber o que eu faço quando tyenho que confirmar senha ? Fecho o blog !






Se ainda assim os avatares não apareceram, aprenda com o Ice Breacker a configurar no HTML do blog, dica que a Meri Pellens deixou nos comentários.

Template Rosinha refeito

16 comentários:
Algumas meninas me pediram para refazer este template que estava desconfigurado, e aí está ele. Podem baixar esta fofurinha a vontade. Clique AQUI para pegar o código.




Se você gostou de algum template publicado por mim, mas que constatou que está com defeito, deixe um recado para mim no post do template, assim que puder irei refaze-lo.

Template Scrap Gabriel

Um comentário:
Template em 3 colunas. Muito lindinho !


16 de set de 2009

Template Scrap Suave

22 comentários:
Template em 3 colunas, data costumizada e bordas arredondadas.



15 de set de 2009

Conseguindo o endereço da propriedade de rádios e tvs

7 comentários:
Muita gente que vem ao meu blog, paraquedista ou não, vem atrás de uma dica: colocar media player no blog. Os proprietários dos blogs adoram colocar músicas em seu blogs, mesmo que isso afaste os leitores, rs. Já havia ensinado como colocar vários tipos de players no blog e como conseguir o endereço de músicas, mas não havia ensinado como conseguir o endereço de tvs e rádios, mas eis que agora vou ensinar.

Entrando em um site que disponibiliza rádios, clique na rádio de seu interesse.


Eu escolhi a Rádio Dance e cliquei sobre a rádio.







Veja o player da rádio.






Dê um clique em cima do player com o botão direito do mouse. Veja que abriu uma janela. Clique então em "Propriedade"









Agora você verá uma janela como essa abaixo. Onde estiver escrito "LOCAL", arraste o mouse por cima com o botão esquerdo selecionado. Clique então com o botão direito e ao abrir outra janela clique em "COPIAR"





Agora clique em "COPIAR" e cole este código dentro do código de algum player. Disponibilizo o código AQUI e outro AQUI.

14 de set de 2009

Imagem no cabeçalho/header do Blogger

3 comentários:
Para colocar imagem no cabeçalho do Blogger, vá até o HTML de seu blog e procure pelo trecho: (levando em consideração o template Mínima, pode ser que esteja diferente em seu blog então procure a partge em negrito e substitua tudo que estiver até } )


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.




#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


Substitua por este outro colocando o endereço de sua imagem hospedada na net e coloque o valor referente ao tamanho de sua imagem.


#header-wrapper {
background: url(AQUI O ENDEREÇO DE SUA IMAGEM) no-repeat;
height: 200px; /*comprimento*/
width:660px; /*largura*/
margin:0 auto 10px;
border:1px solid $bordercolor;/*borda*/
}



height:----------comprimento
width:-----------largura

Se não quer borda, apague todo o trecho em negrito

Template Scrap Gerbera

6 comentários:
Este template foi refeito em março de 2013 com códigos atualizados

13 de set de 2009

Gerador de caixinha link-me

3 comentários:

12 de set de 2009

Dando estilo ao blockquote que vem no Blogger

3 comentários:
Ao menos o template Minima já vem com esta opção, e acredito que todos os outros devam vir também já que o Blogger, no editor de textos tem esta opção já incorporada a barra de ferramentas. Para usa-la basta que após escrever o seu texto, você selecione a parte que quer que fique em destaque e clicar no ícone como mostra a imagem abaixo



Vá até a barra de ferramentas então, procure pelo trecho:

.post-body blockquote {

Após ele, cole o código abaixo de sua preferência.

Para esta aparência do seu blockquote





background: #cccccc;

*Para colocar outra cor de fundo, troque o código na cor vermelha.


Para esta aparência do seu blockquote




border: 6px double #cccccc;
padding: 8px;



Para trocar a cor da borda, troque o código na cor vermelha
Para trocar a aparência da borda, troque o código na cor verde. AQUI tipos de borda

Para esta aparência do seu blockquote




border: 4px solid #cc0000;
background: #cccccc;



vermelho-------espessura da borda
rosa-------------tipo de borda
laranja----------cor da borda
azul------------cor de fundo


Para esta aparência do seu blockquote




background: url(AQUI O ENDEREÇO DE SUA IMAGEM) repeat;
padding: 8px;
font-weight: bold;


Código em vermelho, troque pelo endereço de sua imagem

Para esta aparência do seu blockquote






background: url(AQUI O ENDEREÇO DA IMAGEM) top left no-repeat;
border-right: 2px solid #000000;
padding-left: 96px;
font-weight: bold;

Código em vermelho, imagem
verde cor da borda
azul é a margem necessária para que as letras não fiquem sobre a imagem

Imagem ou cor no cabeçalho ocupando toda a área

7 comentários:

Para que o cabeçalho do seu blog ocupe toda a extenção da header é bem facinho.







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 de seu blog e procure pelo código:


#header-wrapper {


Agora veja onde estiver escrito:




width:

Troque o número que estiver a frente dele pelo número: 1030
O código então ficará assim:


width: 1030px;


Salve.


Agora procure pelo trecho:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='template34094 (Cabeçalho)' type='Header'/>
</b:section>
</div>


Copie todo o trecho e apague-o pois você irá coloca-lo em outro lugar. Procure então pelo primeiro código <div id= e cole então o código que você copiou  acima dele.






Salve e pode fazer suas modificações.</s>


Veja a dica AQUI

Botões sociais

Nenhum comentário:
Fiz estes botões para a barra social. Mas atenção, não copie, salve em seu pc e depois hospede em algum site ou mesmo no Blogger.

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