Navigatie cu numere la sfarsitul posturilor in Blogger

 Update 02 februarie 2010
Intrati aici - Navigatie cu numere in Blogger - corectata
Aici gasiti acest truc corectat si functioneaza perfect

Spre deosebire de stilul de navigatie deja existent cu "Postari mai vechi si Postari mai noi", navigarea cu numere ofera un cu totul alt stil de a te misca prin multitudinea de postari pe care le strange un blogger de-a lungul timpului. Din pacate Blogger nu ofera alta posibilitate decat cea amintita mai sus.

Bloggeri din toata lumea s-au chinuit sa creeze un sistem de navigare cu numere precum cel din Wordpress si se pare ca au reusit. Dar in momentul acesta daca cauti pe net acest truc pentru al instala in sablonul propriu cu greu vei gasi unul care sa mearga. Pentru ca multi au copiat codul dintr-o parte si l-au pus in alta parte cu mici modificari care pana la urma au facut codul sa nu mai mearga si sa cauti pana inebunesti dupa un cod care sa faca treaba.

Acum catva timp, dupa multe cautari am gasit un cod care instalat functioneaza destul de bine. Si spun destul de bine pentru ca el mai are cateva probleme la care din pacate nu am gasit nici o rezolvare. Din aceasta cauza nu am facut inca un tutorial despre el. Problema ar fi ca atunci cand dai clic pe Next sau pe numarul urmator, mai sunt posturi pe care le sare, sau posturi care au fost in pagina trecuta se regasesc si in pagina urmatoare.

Si pentru ca am fost intrebat de foarte multe ori cum se pune navigatia cu numere, cu toate ca nu merge foarte bine, m-am hotarat sa fac totusi un tutorial despre acest truc.Voi scrie aici tot ce stiu despre script si din pacate daca voi fi intrebat de eventualele erori nu voi putea sa ajut pe nimeni.

Trucul are 2 modalitati de instalare, una mai usoara si una mai grea. Le voi prezenta pe amandoua, ramanand la alegerea voastra pe care sa o folositi.

1. Adaugarea trucului cu ajutorul gadget-ului Html/JavaScript
(varianta care este si pe blogul meu si este preluata de pe blogul Page Navigation Menu)

Dupa cum cred ca ati banuit aceasta este metoda usoara de adaugare a trucului si pasii de adaugare sunt acestia:

a) Logati-va in contul vostru Blogger si urmati calea Aspect --> Elemente de pagina.
b) Dati clic pe Adaugati un obiect gadget in footer.
c) Alegeti optiunea Html/JavaScrpt si in campul pentru continut adaugati codul de mai jos:
Deoarece codul este foarte lung l-am pus intr-un fisier text.

Descarcati codul si adaugati-l in obiectul gadget.

d) Pentru a modifica numarul de posturi care vor aparea in urmatoarea pagina trebuie sa gasiti urmatoarea linie de cod

var pageCount=5;

si sa schimbati numarul 5 cu ce numar doriti.

e) Salvati obiectul gadget apoi trageti-l sub coloana de postare. (vedeti poza de mai jos)
f) Clic pe salvati si apoi verificati cum arata si cum se comporta.

2. Adaugarea trucului prin editarea Html-ului sablonului.
(metoda modificata de Amanda dupa varianta originala)

Desi este ceva mai greu de instalat, cred ca trucul functioneaza mai bine prin aceast aceasta metoda.  Deci daca alegeti aceasta varianta iata ce trebuie sa faceti:

a) Urmati calea Aspect --> Editati Html si primul lucru pe care trebuie sa-l faceti este sa salvati o copie a sablonului in calculator. Asta in caz ca ceva nu merge cum trebuie sa puteti reveni la forma lui initiala.
b) Lasati nebifata casuta care extinde sablonul.
c) Cautati urmatorul cod (folositi Ctrl+F)

]]></b:skin>

si inaitea lui adaugati codul de mai jos

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Acest cod adaugat reprezinta Css-ul codului JavaScript care va fi adaugat mai departe.
Cei care se pricep pot modifica aceasta parte pentru a arata asa cum isi doresc.

d) Mai departe vom adauga codul JavaScript.
Gasiti urmatorul grup de coduri:

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

si imediat dupa tagul de inchidere : </b:section>  adaugati codul de mai jos.

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = &#39;Previous&#39;;
var downPageWord = &#39;Next&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

e) Dupa ce ati adaugat acest cod dati clic pe Previzualizati, si desi nu veti vedea schimbarea in acest mod, veti sti daca ati adaugat codul cum trebuie.
f) Inainte de a salva sablonul aveti posibilitatea de a modifica numarul de posturi care vor apare pe fiecare pagina si numarul de link-uri care vor apare in meniul de navigatie.

var pageCount = 5;  - modifica numarul de posturi
var displayPageNum = 5;   - modifica numarul de link-uri.

g) Salvati.