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: "First", lastText: "Last", nextText: "»", prevText: "«" } </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: "First" (Altere First, se quiser por Primeira página, Início ou Anterior)
]lastText: "Last" (Altere Last, se quiser, por Última página, Próxima(o))
]nextText: "»" (» Corresponde ao símbolo "»" você pode alterá-lo por outro símbolo)
]prevText: "«" (« 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 == "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>
após ter feito os passos acima, clique em Salvar modelo
Olá! Aqui já foi um post bem atrativo, porem, infelizmente com a perda das imagens hospedadas no Tinypic.com, não tenho mais os prints em tempo real.(Post atualizado em 04/072021)
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO9xFoSxmwmspXPtJgWeCAKQnkZpttZU9e6c57v7gvorZZ2CW4cS_sjDfste-kUTZXyWE3hoEoDylSUAhVLddcbVyun4yqA1ck4GyJOIeoB4ezQQkQB_WXtG8mI2Y9oftUJAGq9tQFW4mf/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
Olá! Obrigada pela sua visita e comentário♥