segunda-feira, 14 de abril de 2014

Paginação numeradas

Cat selfie | via Facebook

O Tutorial a ser explicado é igual a Numeração de Página do PH. Aprendi no site Templantes pra você

 

Design>Editar Html> Ctrl+F ou F3 e procure por:

<b:includable id='mobile-index-post' var='post'>
antes dele cole o seguinte código:

<b:includable id='page-navi'> <div class='pagenavi'> <script type='text/javascript'> var pageNaviConf = { perPage: 5, numPages: 5, firstText: &quot;First&quot;, lastText: &quot;Last&quot;, nextText: &quot;&#187;&quot;, prevText: &quot;&#171;&quot; } </script> <script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/> <div class='clear'/> </div> </b:includable>

perPage: 5 (Significa quantos posts serão exibidos por página de navegação)
PS:.Deve ser igual ao número de postagens na página principal que você configurou quando criou seu blog. Confira em Configurações » Postagens e comentários » Mostrar no máximo "X" postagens na página principal.» Depois clique em Salvar configurações


numPages: 5 (São quantos números de páginas serão exibidos na página de navegação)
firstText: &quot;First&quot; (Altere First, se quiser por Primeira página, Início ou Anterior)
]lastText: &quot;Last&quot; (Altere Last, se quiser, por Última página, Próxima(o))
]nextText: &quot;&#187;&quot; (&#187; Corresponde ao símbolo "»" você pode alterá-lo por outro símbolo)

]prevText: &quot;&#171;&quot; (&#171; Corresponde ao símbolo "«" você pode alterá-lo por outro símbolo)

agora aprocure a linha:

<b:include name='nextprev'/>

após encontrar selecione e substitua pelo código abaixo:


<b:if cond='data:blog.pageType == &quot;index&quot;'> <b:include name='page-navi'/> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <b:include name='page-navi'/> </b:if> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:include name='nextprev'/> </b:if> </b:if>


após ter feito os passos acima, clique em Salvar modelo


Agora procure pela linha ]]></b:skin> para dar estilo as páginas. Escolha os modelos abaixo:


Modelo 1

*---Page-Navigation--- */ #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: #F8F8F8; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8); background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%); background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%); background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8)); background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%); background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%); padding: 5px 10px; border: 1px solid lightGrey; font-weight: bold; font-size: 12px; 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: #C6C6C6; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee); background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%); background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%); background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE)); background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%); background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%); } #blog-pager-older-link, #blog-pager-newer-link { float: none } .pagenavi .current { border-color: #C6C6C6; background-color: #E9E9E9; 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: #C6C6C6; background-color: #E9E9E9; 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); }

Modelo 2

/*---Page-Navigation--- */ #Page-Navigation { margin-top: 3em !important } .pagenavi {padding: 8px 10px; clear: both; text-align: center; margin: 30px auto 10px; font-size: 13px !important; font-weight: bold; } .pagenavi span, .pagenavi a { margin-right: 5px !important; padding: 7px 10px 7px 10px !important; color: #1E598E !important; background: #F6F6F6 !important; border: 1px solid #C8D5E0 !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; text-transform: none; text-decoration: none; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; } .pagenavi a:visited { color: #1E598E !important } .pagenavi a:hover { color: #1E598E !important; border-color: #C8D5E0 !important; background: #C8D5E0 !important; } .pagenavi .current { padding: 7px 10px 7px 10px !important; border: 1px solid #C8D5E0 !important; color: #1E598E !important; margin-right: 3px !important; border-color: #C8D5E0 !important; background: #ffffff !important; border-radius: 5px; } .pagenavi .pages, .pagenavi .current { font-weight: bold } .pagenavi .pages { border: 1px solid #C8D5E0 !important; color: #1E598E !important; background: #F6F6F6 !important; } #blog-pager-newer-link { float: left } #blog-pager-newer-link a { padding: 7px 10px 7px 10px !important; color: #1E598E !important; background: #F6F6F6 !important; border: 1px solid #C8D5E0 !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; text-transform: none; text-decoration: none; font-size: 1.4em !important; margin-right: 3px !important; text-decoration: none !important; } #blog-pager-newer-link a:hover { padding: 7px 10px 7px 10px !important; color: #1E598E !important; border-color: #C8D5E0 !important; background: #C8D5E0 !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #blog-pager-older-link { float: right } #blog-pager-older-link a { padding: 7px 10px 7px 10px !important; color: #1E598E !important; background: #F6F6F6 !important; border: 1px solid #C8D5E0 !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; text-transform: none; text-decoration: none; font-size: 1.4em !important; margin-right: 3px !important; text-decoration: none !important; } #blog-pager-older-link a:hover { padding: 7px 10px 7px 10px !important; color: #1E598E !important; border-color: #C8D5E0 !important; background: #C8D5E0 !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #blog-pager { text-align: center; float: center; margin-left: 214px !important; } #blog-pager a { padding: 7px 10px 7px 10px !important; color: #1E598E !important; background: #F6F6F6 !important; border: 1px solid #C8D5E0 !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; text-transform: none; text-decoration: none; font-size: 1.4em !important; margin-right: 3px !important; text-decoration: none !important; } #blog-pager a:hover { padding: 7px 10px 7px 10px !important; color: #1E598E !important; border-color: #C8D5E0 !important; background: #C8D5E0 !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
Modelo 3


/*---Page-Navigation--- */ #blog-pager, .pagenavi{ padding: 6px 10px; clear: both; text-align: center; margin: 20px auto 10px; } #blog-pager a, .pagenavi span, .pagenavi a { margin: 0 6px; display: inline-block; font-weight: 400; line-height: 1.2em; text-decoration: none; background-color: #295874; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #FFFFFF; padding: 5px 8px; } #blog-pager a:hover, .pagenavi a:hover, .pagenavi span.current{ background-color: #3180AE; text-align: center; } #blog-pager-older-link, #blog-pager-newer-link { float: none }
Modelo 4

/*---Page-Navigation--- */ #blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 10px; } #blog-pager a, .pagenavi span, .pagenavi a { border: 1px solid #3d8bf2;/*Cor da Borda Azul*/ padding: 5px 10px; text-decoration: none; font-family: arial; color:#fff; margin: 2px; background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');/*Imagem de Fundo*/ background-position: left; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; } #blog-pager a:hover, .pagenavi a:hover { background-position:right; } #blog-pager-older-link, #blog-pager-newer-link { float: none; } .pagenavi .current { background-position:right; }
Modelo 5

/*---Page-Navigation---*/ #blog-pager, .pagenavi { padding: 5px 10px; clear: both; text-align: center; margin: 30px auto 10px; } #blog-pager a, .pagenavi span, .pagenavi a { border: 1px solid #D2136F;/*Cor da Borda Rosa*/ padding: 5px 10px; text-decoration: none; font-family: arial; color:#fff; margin: 2px; background-image: url('http://4.bp.blogspot.com/-qif9KRu_IBo/UfBrsXlprOI/AAAAAAAAADU/3U1HiFHE1Mw/s1600/menubg1.PNG');/*Imagem de Fundo*/ background-position: left; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; } #blog-pager a:hover, .pagenavi a:hover { background-position:right; } #blog-pager-older-link, #blog-pager-newer-link { float: none; } .pagenavi .current { background-position:right; }

Modelo 6

/*---Page-Navigation--- */ #blog-pager, .pagenavi{ padding: 6px 10px; clear: both; text-align: center; margin: 20px auto 10px; } .pagenavi span.current{color: #999999;} #blog-pager a,.pagenavi a, .pagenavi span{background: #FFFFFF;border-radius: 30px 30px 30px 30px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);color: #AE2525;margin: 0 6px;display: inline-block; font-weight: 400;line-height: 1.2em;text-decoration: none;padding: 10px 12px;} #blog-pager a:hover, .pagenavi a:hover {background: #eaeaea; color:#EA1C5D; border:1px none #ccc; -webkit-transition-duration: .90s;} #blog-pager-older-link, #blog-pager-newer-link { float: none }

Modelo 7

/*---Page-Navigation--- */ .blog-pager, .pagenavi{ padding: 6px 10px; clear: both; text-align: center; margin: 20px auto 10px; } .blog-pager a, .pagenavi a, .pagenavi span{background: #E3E2D9;border: 1px solid #CECCC1;color: #000;margin: 0 6px;display: inline-block; font-weight: 400;line-height: 1.2em;text-decoration: none;padding: 4px 8px;} .blog-pager a:hover,.pagenavi a:hover, .pagenavi span.current {background-color: #CA4C3F;border: 1px solid #B05142;color: #FFFFFF;} .blog-pager-older-link, .home-link, .blog-pager-newer-link { float:none;}

Modelo 8

/*---Page-Navigation--- */ .blog-pager, .pagenavi { padding: 8px; clear: both; text-align: center; margin: 20px auto 10px; } .blog-pager a, .pagenavi a, .pagenavi span { padding: 5px; margin-right: 10px; font-size: 15px; color: #03719c; text-decoration: none; border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-transition-duration: .90s; } .blog-pager a:hover, .pagenavi a:hover, .pagenavi span.current { background: #03719c; color: #fff; border: 3px solid #AFAFAF; } .pagenavi span.current { font-weight: bold; } .blog-pager-older-link, .home-link, .blog-pager-newer-link { float:none;}

Modelo 9

/*---Page-Navigation--- */ .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: white; margin: 2px; background: black; 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: orange; } #blog-pager-older-link, #blog-pager-newer-link { float: none;} .pagenavi .current { background: orange;}


Veja que neste estilo aparece a opção "Page 1 of 4". Para removê-la e fique igual ao modelo 9 coloque abaixo de /*---Page-Navigation--- */ o seguinte código:
.pagenavi .pages { display: none;}

Obrigada Templantes pra você



Nenhum comentário:

Postar um comentário

Hey!
Fique a vontade ao comentar! Sem xingamentos por favor!

Muito obrigada!♥