duminică, 9 august 2009

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.

29 de comentarii:

  1. La mine a mers fara probleme prima varianta ! Chiar e fain.

    RăspundețiȘtergere
  2. Eu am facut varianta a doua si merge din prima, ... ! Multumim, Daniel !

    RăspundețiȘtergere
  3. exceptand faptul ca imi numara 19 pagini si de fapt arata 17 functioneaza si arata postarile fara sa sara pagini

    RăspundețiȘtergere
  4. Ma bucur ca va place. Chiar am avut dubii daca sa scriu despre el.

    RăspundețiȘtergere
  5. Un tutorial super simplu de pus in practica. Felicitari si multumiri ca le imparti cu noi!

    RăspundețiȘtergere
  6. nu mere nustiu de ce prima varianta nu se deschide lincul deoarece imi da eroare iar a doua nu apare nimic parca e blestemata:((:((:((:((

    RăspundețiȘtergere
  7. ma juta si pe mn cineva ca mie nu mi mere cu numerotarea

    RăspundețiȘtergere
  8. Pe ce blog ai pus codul?

    Scrie aici adresa blogului

    RăspundețiȘtergere
  9. http://file-mussic.blogspot.com/ scuze de intarziere aici am pus dar nu vrea incerc de o saptamana si nu vrea dani daca vrei iti trimit printrun mail toate setarile html

    RăspundețiȘtergere
  10. am gasit dani serteri in css in html mia aparut intru n fel dar nu aparea tot asa cum trebuia iar cand dadeam next zicea ca blogul nu exista daca vezi ca nu raspund in comentariile de pe pagina asta trimite mail pe alex_motocyclystu ca eu intru mereu pe mail

    RăspundețiȘtergere
  11. Alex, incearca prima varianta. Acum link-ul pentru cod merge.

    RăspundețiȘtergere
  12. buna Daniel,am pus ce mi ai spus dar sincer nu functioneaza dar cei drept apre cv dar nu e functional intra pe site http://file-mussic.blogspot.com/ si uitete jos te rog aju ta ma daca vrei iti pot da username si parola,astept mesaj pe mail alex_motocyclystu@yahoo.com

    RăspundețiȘtergere
  13. Alex, dupa cum spuneam si in articol, codul nu functioneaza prea bine, iar eu desi am incercat sa rezolv problema din pacate nu am reusit.

    RăspundețiȘtergere
  14. si nu poti sa ma ajuti intr un fel ca am mare nevoie de acest tip de cod poate tu conosti pe baieti care au reusit sa adauge acest cod am peste 60 de liste si nu pot sa pun cea originala de la blog macar daca as putea sa editez dar nu pot te rog iti raman dator vandut da un id de al tau sa ti vb mai bn daca vrei trimite prin mail ca sa ti pastrezi confidential

    RăspundețiȘtergere
  15. buna.scuze daca te deranjez,dar am o problema.am folosit codul postat cu link de download.imi mergea pana ieri.de azi nu'mi apar paginile,doar cand pui click'ul pe ele.[ http://spflash.blogspot.com ] de blogul acesta e vorba. vreo sugestie?

    RăspundețiȘtergere
  16. Demult vroiam sa pun asa ceva la blog, cu toate ca repeta unele postari din pagina precedenta, cred ca am sa las, tutorialul mi-a placut...:)

    RăspundețiȘtergere
  17. a mers prima varianta fara probleme ;)) e chiar utila bara de navigatie, mai ales ca unii nu vad "postari mai vechi" si se uita doar pe prima pagina..

    RăspundețiȘtergere
  18. salutare
    am incercat si eu prima varianta si nu functioneaza cum trebuie. in primul rand paginile nu imi merg decat din 2 in 2 adica pagina 1, 3, 5, 7 etc. apoi ultima pagina nu imi afiseaza primul articol al blogului si in plus la sfarsit se suprapun butoanele last page cu numarul paginii.
    varianta a 2a nu am incercat-o pt ca nu ma pricep la editare css
    deci per total, nu merge asa ca am revenit la sistemul default postari mai noi, postari mai vechi
    blogul meu este http://unzambetpezi.blogspot.com

    RăspundețiȘtergere
  19. Octavus la inceputul articolul scrie ceva, te sfatuiesc sa citesti.
    Este link-ul catre varianta care functioneaza bine.

    RăspundețiȘtergere
  20. buna mie nu imi merge de nici un fel ma poti ajuta te rog asta e blogul meu http://aline-bijoux-2010.blogspot.com/

    RăspundețiȘtergere
  21. Vezi ca la inceputul postari este un link (un update) catre un articol unde vei putea sa adaugi unul care merge

    RăspundețiȘtergere
  22. Salu!
    Mi-am facut si eu un blog si nu am reusit ca prima data sa imi apara postarile vechi si apoi cele noi...
    Poate cineva sa ma ajute?

    RăspundețiȘtergere
  23. O sa apara cand vei avea mai multe postari.

    RăspundețiȘtergere
  24. prima data am incercat prin a 2-a metoda..si nu a mers.Nu stiu de ce.POate mi-am prins urechile unde trebuie adugat EXACT codul.Am incercat prin prima metoda si merge.

    thx .Voie buna.!

    RăspundețiȘtergere
  25. Salut ,daca ma poti ajuta si pe mine ,mie nu-mi merge nici o varianta ,si am facut bine,ma pricep cat de cat, asta e site-ul meu http://tuning-pe.net daca ma poti ajuta ai acolo contact .Multumesc

    RăspundețiȘtergere
  26. Intra aici si vei gasi navigatia corectata:
    http://bloggerajutor.blogspot.com/2010/02/navigatie-cu-numere-in-blogger.html

    RăspundețiȘtergere
  27. Salutare Daniel, mie nu mi merge prima varianta de cod am faccut exact ce ai spus, dar dupa ce aplic codul nu mi arata absolut nimic, am mai inserat coduri in pagina asta nu vrea.

    Poti sa ma ajuti te rog?

    RăspundețiȘtergere
  28. La mine am facut a doua varianta si imi sare pagini? ce ar trebui sa fac? putin ajutor va rog

    RăspundețiȘtergere
    Răspunsuri
    1. Citeste update-ul de la inceputul articolului.

      Ștergere