Tá aí um menu de fácil aplicação, no HTML/Javascript e dá a seu blog um bonito visual. Só não me perguntem o porque deste nome :-)
26 de jun. de 2011
Retirar bolinhas dos links
Para retirar pequenas bolinhas que as vezes aparecem nos links basta colar esse código abaixo depois de:
.sidebar li {
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. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
list-style-type:none;
.sidebar li {
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. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
list-style-type:none;
22 de jun. de 2011
Slide 3slider com as últimas postagens
A Rô do Bloggersphera desenvolveu parte deste slide, coloco aqui para vcs.
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.
Mais uma vez o Blogger mudou toda a configuração e com isso, os antigos templates "Minima" no qual todas as dicas e tutoriais feitas por quase todos os problogers deixarm de ter efeito. Vou aos poucos refazendo as dicas em cima do template "Simple"
Vá até o HTML de seu blog e clique em "Editar modelo, ao pé da página.
Ao abrir a janela, procure por:
<div class='main-outer'>
Para encontrar com facilidade, clique em F3 no seu teclado
Cole então este código abaixo dele
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'><div id='postslide'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif";
showRandomImg = true;
imgwidth = 630;
imgheight = 260;
summaryPost = 140;
startpost = 6;
numposts = 6;
home_page = "<data:blog.homepageUrl/>";
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}
s=s.join("");s=s.substring(0,chop-1);return s;}
function showrecentposts(json){document.write('<ul id="postslideContent">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var item='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></span></li>';if(summaryPost==0){item='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a></span></li>';}
document.write(item);j++;}
document.write('</ul>');}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<div class='clear'/>
</div>
</div>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/ -->
<script type='text/javascript'>
(function($){$.fn.postslide=function(vars){var element=this;var timeOut=(vars.timeOut!=undefined)?vars.timeOut:6000;var current=null;var timeOutFn=null;var faderStat=true;var mOver=false;var items=$("#"+element[0].id+"Content ."+element[0].id+"Image");var itemsSpan=$("#"+element[0].id+"Content ."+element[0].id+"Image span");items.each(function(i){$(items[i]).mouseover(function(){mOver=true;});$(items[i]).mouseout(function(){mOver=false;fadeElement(true);});});
var fadeElement=function(isMouseOut){var thisTimeOut=(isMouseOut)?(timeOut/2):timeOut;thisTimeOut=(faderStat)?10:thisTimeOut;if(items.length>0){timeOutFn=setTimeout(makeSlider,thisTimeOut);}else{console.log("Poof..");}};var makeSlider=function(){current=(current!=null)?current:items[(items.length-1)];var currNo=jQuery.inArray(current,items)+1;currNo=(currNo==items.length)?0:(currNo-1);var newMargin=$(element).width()*currNo;if(faderStat==true){if(!mOver){$(items[currNo]).fadeIn((timeOut/6),function(){if($(itemsSpan[currNo]).css('bottom')==0){$(itemsSpan[currNo]).slideUp((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false);}});}else{$(itemsSpan[currNo]).slideDown((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false);}});}});}}else{if(!mOver){if($(itemsSpan[currNo]).css('bottom')==0){$(itemsSpan[currNo]).slideDown((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false);}});});}else{$(itemsSpan[currNo]).slideUp((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false);}});});}}}};makeSlider();};})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#postslide').postslide({
timeOut: 6000});
</script>
</b:if>
Salve.
Agora procure por:
]]></b:skin>
e substitua por:
/* s3Slider
#slide-wrapper {
border: 3px solid #eee;
background: #fff;
padding: 10px;
margin: 10px;
#slide-wrapper ul li{
list-style:none;
margin:0;
padding:0;
#postslide{
height:250px;
width:auto;
margin:5px auto;
overflow:hidden;
position:relative;
#postslideContent{
position:absolute;
top:0;
right:0;
width:auto;
.postslideImage{
display:none;
float:left;
position:relative;
.postslideImage span{
background-color:#000;
color:#fff;
display:none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
font-size:20px;
left:0;
bottom:0;
padding:30px 25px;
position:absolute;
width:auto;
.postslideImage span p{
font-size:12px;
line-height:1.6em;
padding:10px 25px 15px 0;
margin:auto;
.postslideImage a:link,
.postslideImage a:visited,
.postslideImage a:hover{
color:#fff;
]]></b:skin>
<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.5.3");
</script>
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.
Mais uma vez o Blogger mudou toda a configuração e com isso, os antigos templates "Minima" no qual todas as dicas e tutoriais feitas por quase todos os problogers deixarm de ter efeito. Vou aos poucos refazendo as dicas em cima do template "Simple"
Vá até o HTML de seu blog e clique em "Editar modelo, ao pé da página.
Ao abrir a janela, procure por:
<div class='main-outer'>
Para encontrar com facilidade, clique em F3 no seu teclado
Cole então este código abaixo dele
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'><div id='postslide'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif";
showRandomImg = true;
imgwidth = 630;
imgheight = 260;
summaryPost = 140;
startpost = 6;
numposts = 6;
home_page = "<data:blog.homepageUrl/>";
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}
s=s.join("");s=s.substring(0,chop-1);return s;}
function showrecentposts(json){document.write('<ul id="postslideContent">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var item='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></span></li>';if(summaryPost==0){item='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a></span></li>';}
document.write(item);j++;}
document.write('</ul>');}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<div class='clear'/>
</div>
</div>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/ -->
<script type='text/javascript'>
(function($){$.fn.postslide=function(vars){var element=this;var timeOut=(vars.timeOut!=undefined)?vars.timeOut:6000;var current=null;var timeOutFn=null;var faderStat=true;var mOver=false;var items=$("#"+element[0].id+"Content ."+element[0].id+"Image");var itemsSpan=$("#"+element[0].id+"Content ."+element[0].id+"Image span");items.each(function(i){$(items[i]).mouseover(function(){mOver=true;});$(items[i]).mouseout(function(){mOver=false;fadeElement(true);});});
var fadeElement=function(isMouseOut){var thisTimeOut=(isMouseOut)?(timeOut/2):timeOut;thisTimeOut=(faderStat)?10:thisTimeOut;if(items.length>0){timeOutFn=setTimeout(makeSlider,thisTimeOut);}else{console.log("Poof..");}};var makeSlider=function(){current=(current!=null)?current:items[(items.length-1)];var currNo=jQuery.inArray(current,items)+1;currNo=(currNo==items.length)?0:(currNo-1);var newMargin=$(element).width()*currNo;if(faderStat==true){if(!mOver){$(items[currNo]).fadeIn((timeOut/6),function(){if($(itemsSpan[currNo]).css('bottom')==0){$(itemsSpan[currNo]).slideUp((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false);}});}else{$(itemsSpan[currNo]).slideDown((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false);}});}});}}else{if(!mOver){if($(itemsSpan[currNo]).css('bottom')==0){$(itemsSpan[currNo]).slideDown((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false);}});});}else{$(itemsSpan[currNo]).slideUp((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false);}});});}}}};makeSlider();};})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#postslide').postslide({
timeOut: 6000});
</script>
</b:if>
Salve.
Agora procure por:
]]></b:skin>
e substitua por:
/* s3Slider
#slide-wrapper {
border: 3px solid #eee;
background: #fff;
padding: 10px;
margin: 10px;
#slide-wrapper ul li{
list-style:none;
margin:0;
padding:0;
#postslide{
height:250px;
width:auto;
margin:5px auto;
overflow:hidden;
position:relative;
#postslideContent{
position:absolute;
top:0;
right:0;
width:auto;
.postslideImage{
display:none;
float:left;
position:relative;
.postslideImage span{
background-color:#000;
color:#fff;
display:none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
font-size:20px;
left:0;
bottom:0;
padding:30px 25px;
position:absolute;
width:auto;
.postslideImage span p{
font-size:12px;
line-height:1.6em;
padding:10px 25px 15px 0;
margin:auto;
.postslideImage a:link,
.postslideImage a:visited,
.postslideImage a:hover{
color:#fff;
]]></b:skin>
<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.5.3");
</script>
13 de jun. de 2011
Favicon no Blogger: agora definitivo
Acho que já publiquei um artigo sobre favicon, essas pequenas imagens que se pode ver antes do endereço do blog na barra de ferramentas do pc.
Acontece que nem me atrevia a refazer a dica já que nada funcionava. Mas agora o Blogger está testando através do Blogger in Draft o favicon nativo personalizável no Blogger e oferecer mais essa gentileza aos usuários da plataforma. Portanto, entre em seu blog pelo Blogger in Draft.
Você terá que ter uma imagem ICO e isso você poderá conseguir no site Favicon Generator.
Entre faça seu ico e depois é só subi-lo para seu blog.
Pode ser que demore até dois dias para seu favicon apaecer, mas acredite, ele aparecerá.
Acontece que nem me atrevia a refazer a dica já que nada funcionava. Mas agora o Blogger está testando através do Blogger in Draft o favicon nativo personalizável no Blogger e oferecer mais essa gentileza aos usuários da plataforma. Portanto, entre em seu blog pelo Blogger in Draft.
Você terá que ter uma imagem ICO e isso você poderá conseguir no site Favicon Generator.
Entre faça seu ico e depois é só subi-lo para seu blog.
Pode ser que demore até dois dias para seu favicon apaecer, mas acredite, ele aparecerá.
11 de jun. de 2011
Mudanças no Blogger
O Blogger vai mudar T U D O ! E já é possível ver o quanto ficará moderno fazendo o teste. Basta para isso escrever a palavra view após o endereço do blog. Por exemplo, no caso do meu blog ficará assim:
http://templateseacessorios.blogspot.com/view
Como mosaico
http://templateseacessorios.blogspot.com/view/mosaic
Como snapshot
http://templateseacessorios.blogspot.com/view/snapshot
Como slide
http://templateseacessorios.blogspot.com/view/timeslide
Tente e veja seu blog de outra forma.
Mas para que serve ? Bem você pode linkar esse endereço em algum lugar de seu blog, assim facilita a navegação de seu visitante, isso por enquanto, mas ao que tudo indica será assim a forma como veremos os blogs hospedados no Blogger num futuro próximo.
http://templateseacessorios.blogspot.com/view
Como mosaico
http://templateseacessorios.blogspot.com/view/mosaic
Como snapshot
http://templateseacessorios.blogspot.com/view/snapshot
Como slide
http://templateseacessorios.blogspot.com/view/timeslide
Tente e veja seu blog de outra forma.
Mas para que serve ? Bem você pode linkar esse endereço em algum lugar de seu blog, assim facilita a navegação de seu visitante, isso por enquanto, mas ao que tudo indica será assim a forma como veremos os blogs hospedados no Blogger num futuro próximo.
Assinar:
Postagens (Atom)
