http://anuncioso.blogspot.com.br/ ...

Pesquisar

índice


▼arq. selecione

Mostrando postagens com marcador numeração blogger. Mostrar todas as postagens
Mostrando postagens com marcador numeração blogger. Mostrar todas as postagens

Utilitários de paginação e alguns PageNavi estilo



Tiện ích phân trang PageNavi và một số style

page navi blogger
Tiện ích phân trang vốn không còn xa lạ với Blogspot, bài này chỉ giới thiệu script hack phân trang mà mình đang dùng cùng với một số style khá đẹp để bạn lựa chọn. Đây là script phân trang từ hỗn tạp blog viết lại theo phong cáchWordPress, bạn có thể tham khảo cách làm ở bài viết gốc hoặc xem dưới đây.




 Trong template, chèn đoạn CSS sau phía trên </b:skin>
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

Tiếp tục tìm đến dòng này:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Chèn ngay sau nó:
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Tiếp theo, tìm trong template của bạn:
<!-- navigation -->
<b:include name='nextprev'/>

Thay thế nó bằng:
<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:if>

Tùy chỉnh script:
-  perPage: số bài viết hiển thị trong 1 trang
-  numPages: số trang hiển thị
-  firstText, lastText, nextText, prevText: các từ hiển thị cho các nút First, Last, Next, Prev

Cơ bản vậy là xong, sau đây là một số style, hãy chọn kiểu phù hợp nhất với template của bạn rồi thay thế vào đoạn code màu xanh phía trên:

Kiểu 1:

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

Kiểu 2:

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Kiểu 3:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}

Kiểu 4:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}

Kiểu 5:

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}

Kiểu 6:

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}

Kiểu 7:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}

Kiểu 8:

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}


fonte e créditos:
noct-land.


traduzido                                                          


Utilitários de paginação e alguns PageNavi estilo

página navi blogger
Utilitário de paginação que não é estranho ao Blogspot, isso só introduz corte de paginação script que você está tomando junto com algum estilo muito bom para você escolher. Este é um script de paginação a partir do zero blogue reescrever estilo WordPress , você pode ver como o artigo original, ou veja abaixo.




 No modelo, insira o CSS acima </ b: skin> 
PageNavi {clear: both; margin: 10px auto; text-align: center}. 
.. PageNavi extensão PageNavi a {padding: 3px; margin-right: 5px ; background: # fff; border: 1px solid # c20c0c} 
. PageNavi a: visited {color: # c20c0c} 
... PageNavi a: hover, PageNavi atual {background: # c20c0c; color: # fff; text-decoration: none } 
.. PageNavi páginas PageNavi atual {font-weight:.. bold} 
.. PageNavi páginas {border: none}

continuar a encontrar esta linha:<b: widget id = 'Blog1 "fechado title =' true '=' 'type =' Mensagens Blog Blog ">Inserir imediatamente após:<b:includable id='page-navi'><div class="pagenavi"><script type="text/javascript">var pageNaviConf = {perPage: 5,NumPages: 5,firstText: "Em primeiro lugar,"lastText: "Last",nextText "» "prevText "« "}</ script><script type = "text / javascript "src =" http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js "> </ script><div class="clear" /></ div></ b: includable>Em seguida, procure em seu modelo:! <- navegação -><b:include name='nextprev'/>Substitua-o:<b: se os dados cond = ': blog.pageType == " index "'><b:include name='page-navi' /><b:else/><b:if cond='data:blog.pageType == "archive"'><b: include = nome de 'page -navi '/></ b: if></ b: if>script personalizado: -  perPage : número de artigos exibidos em uma página -  NumPages : número de impressões de página -  firstText, lastText, nextText, prevText : palavras exibição para os botões de First, Last, Next, Prev Basicamente isto é feito, aqui estão algumas estilo, escolha o estilo que melhor se adapte às suas template e substitua o código azul acima:Tipo 1:. PageNavi {clear: both; margin: 10px auto; text-align: center}.. PageNavi extensão PageNavi a {font-size: 12px; padding: 2px 2px 4px 4px; margin: 2px; border: 1px solid # dfdfdf; cor # 000;}PageNavi a:. visited {}}; none: PageNavi a: hover, PageNavi atual {color: # FFF; background-color:... # e81d1d;:; fronteira 1px solid # fb1515 text-decorationTipo 2:PageNavi {clear: both; margin: 10px auto; text-align: left}... PageNavi extensão PageNavi um {background: # 0e0f10; font-size: 12px; padding: 3px 5px; margin: 2px; margem: 1px solid # 333; color: # fff;}. PageNavi a: visited {}atual hover, PageNavi {color:: PageNavi um... # FFF; background-color: # 33393f; border: 1px solid # 444; texto decoration: none;}Tipo 3:PageNavi {clear:. ambos; margin: 20px auto 30px; text-align: center}.. PageNavi extensão PageNavi um {background: # 24bde2; border: 1px solid # 4adcff; padding: 3px 8px; color: # fff; margin: 2px;-size font: 12px}. PageNavi span {color: # 3a3a3a}... PageNavi a: hover, PageNavi {color atual: # fff; background: # ff6734; border: 1px solid # ddd; text-decoration: none}PageNavi páginas {display: none}..Tipo 4:PageNavi {clear:. ambos; margin: 20px auto 30px; text-align: center}.. PageNavi extensão PageNavi um fundo { :-moz-linear-gradiente de repetição (superior central, # 96aeba, # 536a75) transparente rolagem 0 0; border: 1px solid # 616e76; padding: 8px 4px; color: # fff; margin: 2px;-size font: 12px; -moz-border-radius: 4px}. PageNavi extensão {color: # 3a3a3a}... PageNavi a: hover, PageNavi {color atual: # fff; background: # c70e0c; border: 1px solid # 782f28; text-decoration: none}.. PageNavi páginas {color: # fff}Tipo 5:PageNavi {background: #. 3498b9; clear: both; margin: 30px auto 20px; text-align: center; border: 1px solid # 2f7a93; padding: 0 4px }PageNavi extensão PageNavi a {font-weight: bold; padding:.. 8px 7px; color: # fff; margin: 1px;-size font: 11px}. PageNavi extensão {color: # 3a3a3a}. PageNavi a: hover, . PageNavi atual {background: # 236e8f; color: # fff; text-decoration: none}... PageNavi páginas {color: # fff}Tipo 6:PageNavi {background: #. F1F1F1; clear: both; margin: 30px auto 20px; text-align: center; margem: 1px solid # bfbfbf; padding: 3px 0}.. PageNavi extensão PageNavi a {border: 1px solid # F1F1F1; padding: 1px 4px; color: # 000; margin: 2px; font -size: 12px}. PageNavi span {color: # 3a3a3a}... PageNavi a: hover, PageNavi atual {border: 1px solid # bfbfbf; background: # fffdf0; color: # 000; text-decoration: none}. PageNavi . páginas {color: # 666}Tipo 7:PageNavi {clear: both; margin: 20px auto 30px; text-align: center}.PageNavi extensão PageNavi um fundo {:.. # 1dc1ff; padding: 6px 6px; cor: # fff; margin: 2px; font-size: 12px;-moz-border-radius: 5px}. PageNavi span {color: # 3a3a3a}. PageNavi a: hover, PageNavi fundo {current: # ff9200; color:.. # fff; text-decoration: none}.. PageNavi páginas {display: none}Tipo 8:PageNavi {clear: both; text-align:. direita; margin: 25px 0 10px 0; font-size: 0,714 em; font-weight : 600; line-height: 1.4em}PageNavi extensão PageNavi um fundo {:.. # e1e1e1; border: 1px solid # 555;-moz-border-radius: 3px;-webkit-border-radius: 3px; border- raio: 3px;-moz-box-shadow: 0 1px 0 # FFF;-webkit-box-shadow: 0 1px 0 # FFF; box-shadow: 0 1px 0 # FFF; color: # 555; margin-left: 5px ; padding: 3px 4px 6px; text-shadow: 0 0 1px # C2C2C2}. PageNavi span {color: # 3a3a3a}... PageNavi a: hover, PageNavi atual {background:-moz-linear-gradiente (parte superior central, # 45bc3f, # 1c6318) repetir transparente rolagem 0 0; border: 1px solid # 00203B; text-shadow: 0-1px 0 # 00203B; color: # fff; text-decoration: none}.. PageNavi páginas {background: none; fronteira : none}




























































































você está em: 





Continue Lendo ►

compartilhar


||


estatísticas

facebook