Templates e Acessórios: Menu de navegação por página

Postagens Recentes

Mostrando postagens com marcador Menu de navegação por página. Mostrar todas as postagens

10 de jan. de 2014

Breadcrumb com css

. Elke di Barros | 17:23 Nenhum comentário:

O que todos os blogueiros querem, em qualquer nicho que estejam é ter leitores e que os leitores permaneçam em seu blog o maior tempo possível. É interessante que você tenha a maior interatividade em seu blog para que ao ler um post, a curiosidade de seu leitor para outros posts seja aguçada assim seu leitor de um post passe a outro, e depois a outro, assim sucessivamente tornando seu blog mais acessado e aberto por mais tempo.
O breadcrumb é um bom recurso para isso pois traz em evidência os marcadores das postagens em sintonia com o post que seu leitor estiver, portanto, ajuda na navegação de seu blog. Siga o passo a passo e instale o menu de navegação em seu blog.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Procure por

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Acima dele, cole o próximo código:

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>></span></span>
</span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:label.url' property='v:title' rel='v:url'><span itemprop='title'><data:label.name/></span></a>
<span class='arrow'><span>></span></span>
</span>
</b:if>
</b:loop>
<b:else/>
Untagged
</b:if>
</b:loop>
<span class='crust'>
<a class='crumb' expr:href='data:post.url'><span><data:post.title/></span></a>
<span class='arrow'><span/></span>
</span>
</span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>></span></span></span> <span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Archives for <data:blog.pageName/></span></a>
<span class='arrow'><span/></span></span>
</span></div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageName == ""'>
<b:else/>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>></span></span></span> <span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Posts tagged <data:blog.pageName/></span></a><span class='arrow'><span/></span></span>
</span>
</div>
</b:if>
</b:if>
</b:if>
</b:if>

Salve. Agora vamos implementar o estilo.

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/* Start CSS breadcrumb by Howeblog - http://htmlmaker.blogspot.com*/
.breadcrumb {
background: #F7F7F7;
border: 1px solid #E6E6E6;
box-shadow: 0 2px 3px #B5B5B5;
border-bottom:none;
width: 720px;
margin: 5px;
font-size: 9px;
text-transform:uppercase;
overflow: hidden;
}
.breadcrumb a, .breadcrumb a:visited {
color: #848484;
font-family: Oswald;
}
.breadcrumb .boardTitle {
display: none;
}
.breadcrumb .crust {
display: block;
float: left;
position: relative;
}
.breadcrumb .crust a.crumb {
background-color: #EDEDED;
display: block;
height: 24px;
line-height: 24px;
margin-bottom: -1px;
outline: 0 none;
padding: 0 10px 0 18px;
text-decoration: none;
}
.breadcrumb .crust:first-child a.crumb {
padding-left: 10px;
}
.breadcrumb .crust:last-child a.crumb {
background-color: #D9D7D7;
font-weight: bold;
}
.breadcrumb .crust:last-child .arrow span {
border-left-color: #D9D7D7 !important;
}
.breadcrumb .crust .arrow {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent black transparent #BBBBBB;
border-image: none;
border-style: solid none solid solid;
border-width: 12px 1px 12px 12px;
display: block;
height: 0;
position: absolute;
right: -12px;
top: 0;
width: 0;
z-index: 5;
}
.breadcrumb .crust .arrow span {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent black transparent #EDEDED;
border-image: none;
border-style: solid none solid solid;
border-width: 12px 1px 12px 12px;
display: block;
height: 0;
left: -13px;
overflow: hidden;
position: absolute;
text-indent: 9999px;
top: -12px;
white-space: nowrap;
width: 0;
z-index: 6;
}
.breadcrumb .crust:hover a.crumb {
background-color: #D9D7D7;
color: #3C3C3C;
}
.breadcrumb .crust:hover .arrow span {
border-left-color: #D9D7D7;
} /* End CSS breadcrumb by Howeblog - http://htmlmaker.blogspot.com*/

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Via

»»Leia mais...

28 de mai. de 2013

Menu navegação em flash para o novo Blogger

. Elke di Barros | 03:36 4 comentários:

O Cláudio Sanches do Ferramentas Blog desenvolveu este plugin para o Wordpress e o pessoal do Dicas Frenetizadas adaptou-o para o Blogger. Como a dica do blog do Dicas Frenetizadas está para o antigo Blogger, trouxe a dica adaptada para o novo Blogger, implementado em julho de 2010. (usei o template Simples)

Vá até o HTML de seu blog e clique em editar HTML

Procure por:

.blog-pager {
background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}

Troque-o então por:

<b:if cond="data:blog.pageType != "item"">"

.blog-pager {
background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}

</b:if>

Salve !

Agora procure por:

<b:skin>...]]></b:skin>

Abaixo dele, cole este próximo código:

<style>
#fnp-nav {font-size:13px;color:#000;text-align:left;}
.fnp-previous {position:fixed;top:50%;left:10px;height:37px;width:20px;z-index:9999;}
.fnp-next {position:fixed;top:50%;right:10px;height:37px;width:20px;z-index:9999;}
.fnp-previous a, .fnp-next a {transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;opacity:0.6;}
.fnp-previous a:hover, .fnp-next a:hover {opacity:1;text-decoration:none;}
.fnp-box-left {position:relative;width:20px;height:37px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir7ALAf2Q8vBg_hBxFWy00Ldc5V121bZAuU3tZDZb9eb6Y-yNDGzNiNvm46crATwCNz4MlOHpYlasvuUBDlxkZ0p-Wa4ug8GpW_48kPD7PfR5mswQEJoQ5I11cEkvkPW4e42KjqvvFpSAh/s1600/arrow-left.png) no-repeat;}
.fnp-content-left {overflow:hidden;width:200px;height:101px;padding:5px 10px 0 60px;border:1px solid #ccc;color:#000;background:#fff;display:block;position:absolute;top:-36px;left:-235px;z-index:-1;-moz-border-radius:0 20px 20px 0;-webkit-border-radius:0 20px 20px 0;border-radius:0 20px 20px 0;}
.fnp-box-right {position:relative;width:20px;height:37px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddIS_jBsYQXPdyCjMOqiYC6xf-tjI1UGS3D6ZXH1TLHzS-zWk6MvFieyp3WCrw2zzgMuoJP2cTKx8f1LP80hIwnGjAKhajDro8NjppyLwK6rGTcpW7W7aibNjFwnew95yPTe-Lc8f4e03/s1600/arrow-right.png) no-repeat;}
.fnp-content-right {overflow:hidden;width:200px;height:101px;padding:5px 60px 0 10px;border:1px solid #ccc;color:#000;background:#fff;display:block;position:absolute;top:-36px;right:-235px;z-index:-1;-moz-border-radius:20px 0 0 20px;-webkit-border-radius:20px 0 0 20px;border-radius:20px 0 0 20px;}
.fnp-nav-title {opacity:0;font-weight:bold;margin:5px 0;}
.fnp-nav-link {opacity:0}
.fb-content-left .fb-content-border,.fb-content-right .fb-content-border {display:none;}
@media screen and (max-width: 900px) {
.fnp-previous {display:none;}
.fnp-next {display:none;}
</style>


<b:if cond='data:blog.pageType == "item"'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var alts = jQuery.noConflict();
alts(document).ready(function(){
var newerLink = alts("a.blog-pager-newer-link").attr("href");
alts("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = alts("a.blog-pager-newer-link").text();
alts("a.blog-pager-newer-link").text(newerLinkTitle);
});
var olderLink = alts("a.blog-pager-older-link").attr("href");
alts("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = alts("a.blog-pager-older-link").text();
alts("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
});

var fnp = jQuery.noConflict();
fnp(document).ready(function(){

fnp(".fnp-previous").mouseenter(function(){
fnp(".fnp-content-left").stop().animate({
left:-10
},700);
fnp(".fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link").stop().delay(500).animate({
opacity:1
},500);
});
fnp(".fnp-previous").mouseleave(function(){
fnp(".fnp-content-left").stop().animate({
left:-400
},700);
fnp(".fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link").stop().animate({
opacity:0},500)
});fnp(".fnp-next").mouseenter(function(){
fnp(".fnp-content-right").stop().animate({
right:-10
},700);
fnp(".fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link").stop().delay(500).animate({
opacity:1
},500);
});fnp(".fnp-next").mouseleave(function(){
fnp(".fnp-content-right").stop().animate({
right:-400
},700);
fnp(".fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link").stop().animate({
opacity:0
},500);
});
});
</script>
</b:if>

Salve.

Procure por:

<b:includable id='nextprev'>...</b:includable>

Substitua por todo o código abaixo.

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fnp-nav'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<div class='fnp-previous'><a rel='prev'><div class='fnp-box-left'><div class='fnp-content-left'><div class='fnp-content-border'/><div class='fnp-nav-title'>Anterior</div><div class='fnp-nav-link'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' style='display: block;'/></div></div></div></a></div>
</b:if>

<b:if cond='data:olderPageUrl'>
<div class='fnp-next'><a rel='next'><div class='fnp-box-right'><div class='fnp-content-right'><div class='fnp-content-border'/><div class='fnp-nav-title'>Próximo</div><div class='fnp-nav-link'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'/></div></div></div></a></div>
</b:if>

</div>
<div class='clear'/>
</div>
</b:if>

<b:if cond='data:blog.pageType != "item"'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Página Anterior</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Próxima Página</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:if>
</b:includable>

Salve !

»»Leia mais...

22 de jan. de 2013

Substituir Postagens mais antigas por menu no Blogger

. Elke di Barros | 16:45 Um comentário:

Eis aí, mais alguns modelos de menu de navegação no Blogger para dar aquele estilo a seu template.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Procure por </body>

E acima dele cole o código abaixo:

<script type='text/javascript'>
var pageCount=7;
var displayPageNum=3;
var upPageWord ='« ';
var downPageWord =' »';
</script>
<script src='https://sites.google.com/site/paginblogger/numeradas/pagenav.js'/>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;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+'&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){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){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++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="" class="showpageOf"> Paginas '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&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){upPageHtml=labelHtml+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){html=labelHtml+'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++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="" class="showpageOf"> Páginas ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

Salve !

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado o modelo escolhido.

Modelo 1

/* Navegação
----------------------------------------------- */
.showpageNum a,.showpage a {
background: #F39C1F; border: 3px 0 3px 0 solid#DB850B;
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
-o-box-shadow: 0px 2px 2px #000;
-ms-box-shadow: 0px 2px 2px #000;
goog-ms-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #000;
font: bold 23px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
text-decoration: none;
padding:16px 14px;
white-space: nowrap;
color: #fff;
margin: 5px;

}
.showpageNum a:active {
color: #fff;
padding:15px 14px;
margin: 5px;
position: relative; top: 0px;
}
.showpageNum a:hover,.showpage a:hover {
background: #808080;
color: #000;
text-decoration:none;
}
.showpageOf{
display:none;
}
.showpagePoint {
background: #F39C1F; border: 3px 0 3px 0 solid#DB850B;
margin: 5px;
color:#ffffff;
text-decoration:none;
width:36px;
height:16px;
font-size:18px;
padding: 16px 14px;
font: bold 23px Arial, Tahoma, Helvetica, FreeSans, sans-serif;]
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
-o-box-shadow: 0px 2px 2px #000;
-ms-box-shadow: 0px 2px 2px #000;
goog-ms-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #000;
}

Modelo 2

/* Menu de Navegação
-------------------------------------------- */
showpageArea {
font-family:"Oswald", Lucida Sans Unicode, Helvetica, Arial, sans-serif;
color: #8B008B;
font-size:18px;
margin:20px;
}
.showpageNum a,
.showpage a{
padding:0px 8px;
margin:0 3px;
text-decoration:none;
background:#fff;
border:1px solid #000;
font-size:19px;
color:#000000;
-webkit-border-radius:5px;-moz-border-radius:8px;
}
.showpageNum a:hover{
background:#F35B1F;
color:#000;
}
.showpagePoint{
color:#000;
font-size:20px;
padding:0 8px;
margin:2px;
-webkit-border-radius:5px;-moz-border-radius:8px;
border:1px solid #000;
background:#F35B1F;
text-decoration:none;
}
.showpageOf{
display:none !important;
visibility:hidden !important
}

Salve. Agora clique em Layout

Modelo 3

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #000;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 12px 2px;
}

.showpageOf{
display: none;
}
.showpageNum a{
padding:8px 12px;
color: #000
margin:0 4px;
text-decoration:none;
background:#548054;
border: 1px solid #000;
-moz-border-radius: 35px;
border-radius: 35px;
}

.showpagePoint{
padding:8px 12px;
margin:4px;
border: 1px solid #000;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage{
margin:4px 6px;
background:transparent;
border: 1px solid #000;
-moz-border-radius: 35px;
border-radius: 35px;
padding:8px 12px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
background:#548054;
}

.showpage a:hover{
text-decoration:none;
}
.showpageNum a:hover{
background:#548054;
}

»»Leia mais...

Menu de navegação por página, alguns modelos

. Elke di Barros | 02:48 Nenhum comentário:

Vamos modernizando, vamos modificando, vamos melhorando, vamos colocar um menu de navegção de página e substituir "Postagens antigas" no Blogger.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Procure por </body>

Acima dele cole o seguinte código:

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código do modelo de sua preferência e cole no local indicado, como nas imagens acima.

Modelo 1

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
background: #000;
padding: 12px 2px;
}
.showpageOf{
background:#0282dd;
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 8px 0 0;
color:#222;
}
.showpageNum a{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#6f6f6f;
color:#fff;
border:1px solid #39312e
}
.showpageNum a:hover{
padding:8px 8px;
font:16px Arial,Verdana;
color:#fff;
background:#0282dd;
border:1px solid #00558f
}
.showpageArea{
margin:10px 0;
font:16px Arial,
}
.showpagePoint{
color:#fff;
padding:8px 8px;
font:16px Arial,Verdana;
margin:2px;
border:1px solid #00558f;
background:#0282dd;
text-decoration:none
}
.showpage{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#6f6f6f;
color:#fff;
border:1px solid #39312e;
}
.showpage a{
padding:8px 8px;
font:16px Arial,Verdana;
text-decoration:none;
color:#fff;
}
.showpage:hover{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#0282dd;
color:#fff;
border:1px solid #00558f;

}
.showpage a:hover{
padding:8px 8px;
font:16px Arial,Verdana;
text-decoration:none;
background:#0282dd;
color:#cc0000;
}

Modelo 2

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #000;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yi02ckKqOtsxGSJCSwDI2MClaziQ9L5Pi6PBeAP4DTcwXiuMPYqRnMdighYUnTx5q9GGV_ThK-vqjcYHH_qkefFV96u3J1toSrwtxbqhHd-rKKcpCuQXIe2nFL3r7mEbUDlwYn_8MII/s1600/background-brushed2.jpg) repeat;
padding: 12px 2px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

.showpageOf{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
padding:8px 8px;
margin:0 8px 0 0;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
.showpageNum a{
padding:8px 8px;
margin:0 4px;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
border:1px solid #808080
-moz-box-shadow: inset 0 0 2px 2px #888;
-webkit-box-shadow: inset 0 0 2px 2px#888;
box-shadow: inset 0 0 2px 2px #888;
}

.showpagePoint{
padding:8px 8px;
margin:2px;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
text-decoration:none
-moz-box-shadow: inset 0 0 2px 2px #888;
-webkit-box-shadow: inset 0 0 2px 2px#888;
box-shadow: inset 0 0 2px 2px #888;
}
.showpage{
padding:8px 8px;
text-decoration:none;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
}

.showpage a:hover{
text-decoration:none;
border:1px solid #808080;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
.showpageNum a:hover{
background: url(background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDANyFFX784OLVKJjwflII4xGqvTdaybR4HRwN_3gnvngR2yw4_99NJO5x8CyfCApI4DiNWi9rXLtaL6k9tVizsULnU60oh0yMZpcsKSK_MOfCI-AaTb6VsNOJly_Blp72evOYEu9rCNM/s1600/metal2.png) repeat;) repeat;
border:1px solid #808080;
}

Modelo 3

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #fff;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
background: #000;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 12px 2px;
-moz-box-shadow: 0 0 2px 2px #888;
-webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
}

.showpageOf{
background:#cc0000;
-moz-border-radius: 35px;
border-radius: 35px;
padding:8px 12px;
margin:0 8px 0 0;
}
.showpageNum a{
padding:8px 12px;
color: #000
margin:0 4px;
text-decoration:none;
background:#F9C527;
-moz-border-radius: 35px;
border-radius: 35px;
}

.showpagePoint{
padding:8px 12px;
margin:4px;
background:#1F60F3;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage{
padding:8px 5px;
margin:4px;
background:#ffffff;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
background: #ccc;
}

.showpage a:hover{
text-decoration:none;
}
.showpageNum a:hover{
background: #fff;
}

Mais modelos aqui

»»Leia mais...

22 de out. de 2012

Breadcrumb no novo Blogger

. Elke di Barros | 02:01 Um comentário:

DEMO

Este hack é excelente para seu leitor ter acesso aos outros posts de seu blog. Refiz todo o código, para quem usa o template Simple, portanto, se não o usa, nem comece a implementar os códigos pois não dará certo. Vinculei o estilo ao menu de páginas, portanto, os dois terão o mesmo estilo.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack atualizado para modelos implementados em 2013

Agora vamos clicar em "Ir para um widget" e depois clicar em Blog1

Pronto. Veja, o código de seu template está todo dividido em partes. Mas para encontrar o código que queremos você precisará abrir a seguinte parte clicando na pequena seta, como mostra a imagem abaixo:

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>...</b:widget>

Procure então por:

<b:if cond='data:mobile == "false"'>

Observe que um pouco abaixo, haverá um código como esse abaixo.


<div class='blog-posts hfeed'>

Troque-o por:

<div class='blog-posts hfeed'>


    <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

Agora procure por:

<data:top.dummyBootstrap/>

Observe que abaixo dele há o seguinte trecho:

</b:if>

</b:includable>

O que você deverá fazer é apagar este trecho todo e depois colar o código abaixo:

<data:top.dummyBootstrap/>
</b:if>

</b:includable>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
    <b:if cond='data:blog.pageType == "item"'>
       <div class='breadcrumbs'>
         Menu » <a expr:href='data:blog.homepageUrl' rel='tag'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4OD7JpQPPi7c0kTetIzf7eJGnfPKOgmUm2d6KJMHRPrm15W5DODJ9A3ECAw-rP3ynHY6jc2jijdS7AmWq0mGKyLykDcaXA8OT7wGM5GaMWwyoU5YbzCzeN8JtfnS8G7Y6Xl4LUR_oDzF/s1600/home.gif'/> Início </a>
        <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'>
             <b:loop values='data:post.labels' var='label'>
               <b:if cond='data:label.isLast == "true"'> »
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5qfs3Xmwre4g6R3hhUF0xiaiqqizzRNLsDTw4AMYhp8CFvbpaKr1n3wwpioqis7bk7RlffpFqeTD_JhRYqPlxAdRCgsH3LL2hmJg0KbjBxo9ySmMO6sspGld5eLxycW9YA3NZPNO-KJEL/s1600/tag.gif'/>
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
               </b:if>
             </b:loop>
             »    <span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSYTNA5vEzmBIZodS6eeJyDnOpmhUIfwT8aLe6s9Ukt3gEZU5eWTiRzYtRW0fe88FrigyXaxTx1HoFpKOD_SU-EdDBzXYHPFf5bVCR7Mqx3l-rFFYBM_jLUMgrwqryEgdqxvHFyZ9YaHjv/s1600/arrow_fat_down.gif'/> <data:post.title/></span>
           </b:if>
         </b:loop>
       </div>
    <b:else/>
      <b:if cond='data:blog.pageType == "archive"'>
        <div class='breadcrumbs'>
         Menu »   <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
        </div>
      <b:else/>

        <b:if cond='data:blog.pageType == "index"'>
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == ""'>
            Menu » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
          <b:else/>
            Menu » <a expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4OD7JpQPPi7c0kTetIzf7eJGnfPKOgmUm2d6KJMHRPrm15W5DODJ9A3ECAw-rP3ynHY6jc2jijdS7AmWq0mGKyLykDcaXA8OT7wGM5GaMWwyoU5YbzCzeN8JtfnS8G7Y6Xl4LUR_oDzF/s1600/home.gif'/> Início</a> » Posts com marcador: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5qfs3Xmwre4g6R3hhUF0xiaiqqizzRNLsDTw4AMYhp8CFvbpaKr1n3wwpioqis7bk7RlffpFqeTD_JhRYqPlxAdRCgsH3LL2hmJg0KbjBxo9ySmMO6sspGld5eLxycW9YA3NZPNO-KJEL/s1600/tag.gif'/> <data:blog.pageName/>
          </b:if>
          </div>
        </b:if>
      </b:if>
    </b:if>
</b:if>
</b:includable>

Salve. Agora vamos das estilo ao menu breadcrumb

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/*Breadcrumbs-------------------------------*/

.breadcrumbs {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
border: $(header.bottom.border.size) solid $(tabs.border.color);
font-size: 14px;
padding:5px;
font-weight: bold;
line-height: 1.4em;
margin: 2px 1px;
}

.breadcrumbs select a, .breadcrumbs a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
font-weight: bold;
color:$(body.text.color);
padding:5px;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

»»Leia mais...

6 de ago. de 2012

Menu de navegação de páginas coloridas

. Elke di Barros | 15:11 4 comentários:

Que tal o menu de navegação de páginas do Blobgger com um estilo todo especial ? É a dica do blog Blogger Widgets. Como ele só disponibilizou um modelo, o laranja, fiz modificações e trouxe outras cores, para que combine com seu blog.

Vá até o Modelo de seu blog, clique em Editar modelo

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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011