Pagina de navigare cu WP-PageNavi pentru Blogger ~ My Personal Blog..

2/26/2012

Pagina de navigare cu WP-PageNavi pentru Blogger

Del.icio.us Tweet/ReTweet Facebook StumbleUpon Technorati Digg This

Dacă a-ti folosit WordPress, este posibil să fi auzit despre WP-PageNavi, celebrul plugin-ul de navigare pagina. Dar, în Blogger (blogspot) nu există nici o astfel de "plug". Blogger oferă doar postul anterior, link-uri Next Post, şi ei nu ne pot satisface. În acest post, am vă va arăta un cod pentru a face navigarea pagina frumoasa, cu WP-PageNavi stil.

Acest cod este complet nou şi nu se bazează pe nici codurile existente.
Cum se instalează

1. Instalaţi stil CSS

Deschideţi fişierul de şablon, şi cautati această linie:

]]></b:skin>

Introduceţi înainte codul:

/* Page Navigation */
.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}

Acest stil este de culoare roşie, pe care le puteţi vedea la acest blog. Dacă doriţi puteţi sa să schimbaţi anumite culori pentru a se potrivi blog-ul dvs..

2. Instalarea script

În şablon, găsiti această linie:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' -(daca scrie false inloc de true inlocuit aceasi problema am avut-o si eu)

Introduceţi după

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

3. Introduceţi pagina de navigare în şablonul

Ultimul pas este de a pune în locul paginii de navigare din dreapta unde este indicat. În fişierul şablon, găsiţi codul:( daca nu il gasit intreg scrieti doar o bucata din el )


<b:include name='nextprev'/>

Înlocuiţi-l cu

<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>

Dacă nu puteţi găsi vechiul cod de pagina de navigare, cautati această secţiune de cod:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
...
<b:includable id='main' var='top'>
...
</b:includable>
</b:widget>
</b:section>

Introduceti acest cod imediat deasupra </ b: includable> tag:

<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>

Configuraţie

După instalarea, poate doriţi să modificaţi unele setări implicite. Toate setările sunt în scenariul din al doilea pas de mai sus:

var pageNaviConf = {
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"

După cum puteţi vedea, toţi parametrii dispune de propriile lor semnificaţii clare:

- perPage : numărul de posturi sunt prezentate în fiecare pagină

- numPages : numărul de pagini sunt prezentate în pagina de navigare

- firstText , lastText , nextText , prevText : pur şi simplu "Primul", "Last", "Next", "Prev" text

Comparativ cu alte scrituri de navigare pagina de Blogger, acest scenariu nu te obliga să introduceţi adresa URL a blog. În afară de aceasta, este curat şi uşor de întreţinut.

Sper că acest hack va fi util pentru tine. Vă mulţumim pentru citirea. Simţiţi-vă liber să lasati orice sugestie sau gând în comentarii.

Daca acest script va fost de ajutor nu va sfiti sa dati un like :)