Páginas numeradas no Blog
Oie amores hoje eu trago esse tutu de como colocar as páginas do seu blog numerado é super fácil (acho que vocês estão cançados de ouvir isso de mim rsrs), mas requer muita atenção. Você somente irá ver essa ferramenta no seu blog se ele estiver como público, e eu trouxe vários modelos.
Vá no modelo do seu template e pesquise pelo trecho:
<b:includable id='mobile-index-post' var='post'>
ACIMA dele cole o seguinte código:
<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'> var pageNaviConf =
{
perPage: 6,
numPages: 8,
firstText: "Primeira",
lastText: "Última",
nextText: "»",
prevText: "«"
}
</script>
<script src='http://yourjavascript.com/51103499221/paginacaonumerada.js' type='text/javascript'/> <div class='clear'/>
</div>
</b:includable>
Obs: O número destacado no código acima (6) é o número de posts que aparece por página. Ele deve ser o mesmo número que está configurado na aba Layout.
Agora pesquise pelo trecho:
<b:include name='nextprev'/>
E substitua-o pelo seguinte código:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>
</b:if>
Pesquise pelo trecho ]]></b:skin> e logo acima dele cole o código do modelo escolhido, e salve.
Para o primeiro modelo ( é o primeiro de cima para baixo, o segundo é o abaixo dele e assim sucessivamente)
/*--- Paginacao numerada --- */
.pagenavi .pages {display: none;}
#blog-pager, .pagenavi {padding: 8px 10px;
clear: both;
text-align: center;
margin: 30px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: #fff;
margin: 2px;
background: #e9a7bd;
background-position: bottom;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px;
font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: #dc6f93;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;}
.pagenavi .current {
background: #dc6f93;
}
Para o segundo modelo
/*--- Paginacao numerada --- */
.pagenavi .pages {display: none;}
#blog-pager, .pagenavi {padding: 8px 10px;
clear: both;
text-align: center;
margin: 30px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: #fff;
margin: 2px;
background: #99b8d3;
background-position: bottom;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px;
font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: #adadad;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;}
.pagenavi .current {
background: #adadad;
}
Para o terceiro modelo
/*--- Paginacao numerada --- */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-color: #ecdff2;
padding: 5px 10px;
border: 1px solid #b794c7;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #b794c7;
background:#dfc6ea;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #b794c7;
background-color: #dfc6ea;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #b794c7;
background-color: #dfc6ea;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
Para o quarto modelo
/*--- Paginacao numerada --- */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #fff;
background-color: #a5a5a5;
padding: 5px 10px;
border: 1px solid #868686;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #868686;
background:#a5a5a5;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #a5a5a5;
background-color: #868686;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #a5a5a5;
background-color: #868686;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
Para o quinto modelo
/*--- Paginacao numerada --- */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #582e2e;
background-color: #f6dada;
padding: 5px 10px;
border: 1px solid #b7a6a6;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #b7a6a6;
background:#fcb2b2;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #b7a6a6;
background-color: #fcb2b2;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #b7a6a6;
background-color: #fcb2b2;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
Para o sexto modelo
/*--- Paginacao numerada --- */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #505050;
background-color: #fff;
padding: 5px 10px;
border: 1px solid #a6a6a6;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #5b5b5b;
background:#dfdfdf;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #a6a6a6;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #a6a6a6;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
Para o sétimo modelo
/*--- Paginacao numerada --- */.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #000;
background-color: #fff;
padding: 8px 12px;
border: 1px solid #a0a0a0;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 4px 4px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #a0a0a0;
background:#dfdfdf;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #a0a0a0;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #a0a0a0;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
Para o oitavo modelo
/*--- Paginacao numerada --- */
.pagenavi .pages {display: none;}
#blog-pager,
.pagenavi {padding: 6px 10px;
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a,
.pagenavi span,
.pagenavi a {
text-decoration: none;
color: #000;
background-color: #fff;
padding: 8px 12px;
border: 2px dotted #a0a0a0;
font-size: 16px;
vertical-align: middle;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 4px 4px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover,
.pagenavi a:hover {
border-color: #a0a0a0;
background:#dfdfdf;
}
#blog-pager-older-link,
#blog-pager-newer-link { float: none }
.pagenavi .current {
border-color: #a0a0a0;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #a0a0a0;
background-color: #dfdfdf;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
Se vocês querem que eu faça algum tutorial é só me pedir me pedir. Beijocas
1 Comentários
Nossa obrigado me ajudou e muito fazia um tempo que eu procurava isso ess tutorial
ResponderExcluir