Navigatie cu numere in Blogger - corectata

Prin August, anul trecut scriam pe blog despre un sistem de navigare prin blog asemanator cu cel din Wordpress si anume o navigare cu numere prin postari si categorii. Nu am sa mai aduc in discutie beneficiile acestui sistem ci vreau sa va aduc aminte ca acel truc prezentat atunci, nu functiona prea bine si la momentul acela nu exista unul care sa functioneze corect.

Acum datorita blogului Abu Farhan (Page Navigation for Blogger) acest truc este corectat si functioneaza perfect.
Trebuie sa va mai spun ca acest truc nu mai este disponibil in varianta de instalare usoara ci doar prin varianta editarii html-ului sablonului. Deci daca vreti sa aveti navigare cu numere la sfarsitul posturilor  trebuie sa va inarmati cu rabdare, atentie si incredere.

Update 5 februarie 2010.

Din pacate se pare ca si acest truc avea o problema, si anume: nu afisa decat 500 de pagini. Dar acelasi Abu Farhan a gasit rezolvarea. A creat un nou script care vede toate paginile, si la modificat sa arate si ultima pagina. Vedeti la mine pe prima pagina si in Categorii.
Am modificat articolul si cei care vreti sa instalati acest truc de acum inainte urmati tutorialul asa cum e scris.


Imi cer scuze celor au instalat deja acest truc pentru neplacerile create. Ei vor trebui sa inlocuiasca codurile copiate in sablon, cele de la pasul 2 si 3 cu codurile care apar acum la acesti pasi. La pasul 4 nu e nevoie sa umblati.

Inca o data scuze pentru neplacerile create.

Adaugarea codului pentru truc
Pasul 1. Duceti-va la Aspect -- Editati html si primul lucru pe care trebuie sa-l faceti este sa salvati o copie a sablonului in calculator, deoarece, daca ceva nu merge bine sa puteti reveni la el prin simpla incarcare a lui.

Pasul 2. Pasul doi consta in adaugarea codului Css pentru butoane.
Aici Abu Farhan a creat sase stiluri diferite de butoane. Veti alege codul aferent stilului care credeti ca se potriveste mai bine cu sablonul vostru.
Lasati nebifata casuta de extindere a sablonului. Gasiti acest cod: ]]></b:skin>  (folositi Ctrl+F pt o cautare mai usoara) si inaintea lui copiati unul dintre codurile de mai jos:

---

Stil 1

Descarcati codul CSS pentru stilul 1

---

Stil 2

Descarcati codul CSS pentru stilul 2

---

Stil 3

Descarcati codul CSS pentru stilul 3

---

Stil 4

Descarcati codul CSS pentru stilul 4

---

Stil 5

Descarcati codul CSS pentru stilul 5

---

Stil 6

Descarcati codul CSS pentru stilul 6

---

Pasul 3. Adaugarea scriptului Java/Script care se ocupa de transformarea vechii navigatii cu Postare mai noua si Postare mai veche in navigare cu numere.
Pentru a adauga codul scriptului cautati acest cod: </body> (folositi Ctrl+F - este chiar la sfarsitul codului) si inaintea lui adaugati acest grup:

<!--Cod navigare-->
&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=3;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://all-in-one-blogger-widget.googlecode.com/files/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;
<!--Cod navigare-http://bloggerajutor.blogspot.com-->

Personalizare
Aici, pentru a va personaliza modul de afisare a navigatiei trebuie sa modificati astfel:
Numarul 4 reprezinta numarul de postari care v-a fi afisat pe prima pagina. Datii ce valoare vreti, dar trebuie sa puneti neaparat acelasi numar de postari si aici: Setari --> Formatare --> Afiseaza.

Numarul 3 este numarul de cifre care apare in stanga si in dreapata numarului de pagina selectat. Datii ce valoare doriti, dar aveti grija sa meniul sa nu se lateasca prea rau
Acum puteti salva sablonul si verifica daca functioneaza navigatia.

Pentru ca navigarea cu numere sa functioneze si pentru categorii (etichete) trebuie sa urmati si pasii urmatori. Daca vreti ca navigatia sa functioneze doar in pagina principala atunci va puteti opri aici.

Pasul 4. Navigatie pentru categorii
In prima faza, daca nu aveti obiectul gadget cu Etichetele adaugat pe blog mergeti la Aspect -- Elemente de pagina -- Adaugati un obiect gadget si alegeti optiunea Etichete, apoi mergeti din nou la Aspect -- Editati html si de aceasta data bifati casuta pentru extinderea codului html al sablonului.

Puteti salva si aici o copie a sablonului, diferita de prima. Daca gresiti in continuare sa puteti reveni la forma initiala a sablonului, dar sa nu mai repetati pasii de mai sus.

Folosind Ctrl+F gasiti aceasta linie de cod:
(aveti grija ca este de 2 ori )

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

Dupa ce ati gasit-o, inlocuiti-o cu acest grup de coduri (ambele linii existente):

<script type='text/javascript'>
  var lblname = &quot;<data:label.name/>&quot;;

  lblname2 = encodeURIComponent(lblname);
  var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=4&#39;;
  document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script>

Cifra 4 din acest cod reprezinta numarul de postari care vor apare pe pagina categoriei, si este foarte importantant sa fie la fel cu numarul de postari care apar pe pagina principala.

Asta e tot, dar dupa cum vedeti este destul de complicat asa ca aveti grija cum procedati. Cititi cu atentie.

Optiune noua: Pagini statice si meniu pe Blogger

Update: De azi 4 februarie 2010 aceasta optiune este disponibila si pe Blogger normal

Incepand de ieri Blogger a lansat o noua optiune si anume crearea paginilor statice. Fiind in teste ea nu poate fi accesata deocamdata decat prin varianta Blogger in Drat.
Pentru cei care nu stiu Blogger in Draft este o varianta a blogger-ului normal unde ei lanseaza pentru teste noile optiuni.




Dar haideti sa vedem cum se face!
Accesati Blogger in Draft si din Tabloul de bord alegeti optiunea Editati postari a blogului unde vreti sa adaugati pagini statice.
Ajunsi aici vom observa ca in randul optiunilor de la tabul Postare a aparut o noua optiune si anume Editati paginile.  Dati clic pe link si vom ajunge in pagina de adaugare si administrare a paginilor statice.

Dati clic pe butonul Pagina noua si se va deschide editorul de text al noi pagini.

Dupa cum observati editorul de text arata ca cel folosit pentru postarile normale, mai putin casuta de adugare a etichetelor (categoriilor)
Scrieti ce doriti in pagina si datii un titlu (Despre, Contact, etc).

Setari comentarii:
Daca dati clic pe Optiuni de publicare veti observa ca by default comentariile pentru paginile statice nu sunt permise. Daca doriti totusi ca vizitatorii sa poata comenta si in aceasta pagina atunci bifati optiunea Permiteti si sunteti gata de a publica pagina.

Dati clic pe Publicati pagina si veti fi dusi catre o alta pagina cu setari pentru pagina statica.

Ca optiune legata de optiunea cu adaugarea paginilor statice, Blogger ne ofera si posibilitatea de a le adauga pe blog sub forma unui meniu. (mai exact un obiect gadget)

Variante de salvare pagini

Dupa cum vedeti sunt 3 optiuni de adaugare a meniului:
1. Bara laterală a blogului - meniul v-a fi vertical si v-a apare in sidebarul blogului.
2. Filele de pe blog - meniul v-a fi orizontal si v-a fi afisat sub header.
3. Niciun obiect gadget - aceasta optiune va lasa sa creati pagina dar nu v-a adauga gadgetul cu meniul. Nu va faceti griji, puteti adauga meniul si mai tarziu.
Aceasta optiune este buna pentru cei care au un sablon personalizat si au deja un meniu integrat. Creati paginile si apoi puteti adauga link-ul lor la meniu prin varianta aceasta de modificare a meniului existent.

Alegeti una din variantele care va convine si apoi dati clic pe Salvati si publicati.
Pagina deschisa ne ofera posibilitatea de a accesa pagina creata sau sa o editam. Alegeti desigur sa vedeti pagina.
Daca doriti sa creati o noua pagina accesati din nou optiunea Editati paginile si urmati din nou pasi de mai sus.
Observati si  macheta paginii nou create si cele 3 optiuni. (Editaţi, Ştergere, Vizualizaţi)

Vizualizare meniu
Daca ati ales ca si mine optiunea a doua la vizualizare sablonul vostru ar trebui sa aiba meniul adaugat si sa arate cam asa:

Observati si url-ul paginii ca este diferit de cel al postarilor obisnuite.




Setari meniu
Blogger ne ofera si cateva setari pentru meniu. Accesati Aspect --> Elemente de pagină si cautati obiectul gadget numit Pagini. Clic pe Editati si se v-a deschide in pop-up pagina cu setarile meniului.

Ca prima setare: lasati bifata optiunea Automatically add new pages when they are published (deocamdata netradusa) Aceasta optiune permite paginilor pe le veti mai crea sa se adauge automat la meniu.

Optiunea Pagini pe care doriţi să le afişaţi va permite sa selectati paginile care doriti sa apara in meniu prin simpla bifare sau debifare a casutei din dreptul paginii.

A treia optiune este Ordinea de pe pagină si ne permite prin metoda Drag and Drop sa selectam ordinea in care paginile vor apare in meniu.
Dupa ce ati facut setarile nu va mai ramane decat sa Salvati si apoi sa vizualizati blogul.

Revenire asupra sectiuni: Variante de salvare pagini - punctul 3

Daca ati ales varianta treia (Niciun obiect gadget), din greseala sau v-ati razgandit si vreti sa adaugati meniu pe blog, accesati Aspect --> Elemente de pagina si alegeti sa adaugati un nou obiect gadget. Alegeti optiunea Pagini si apoi faceti setarile meniului asa cum am aratat mai sus. Salvati .
Mutati obiectul gadget unde vreti sa apara: sub header sau in sidebar si salvati..

Cum sa pui un formular de sondaj (poll) in postare

Dupa cum stiti Blogger ne ofera un widget prin intermediul caruia puteti face un sondaj de opinie pe blog si care se adauga foarte usor in sidebar.
Dar ce se intampla daca dorim sa facem un sondaj si formularul sa-l punem in interiorul unei anumite postari, el fiind astfel accesibil doar cand este citita aceasta postare?
Din pacate acest lucru nu este posibil, pentru ca widgetul se poate adauga doar in sidebar nu si in postare.

Dar, pentru ca Blogger ne ofera acest widget prin intermediul unui Iframe, (adica el este hostat pe alt server si cu ajutorul unui cod este embed-at pe blogspot), exista totusi o posibilitate de a pune formularul si in postare.




Iata ce trebuie sa faceti!
1. Duceti-va la Aspect --> Elemente de pagina --> Adaugati un obiect gadget si dati clic pe Sondaj.

2. In pagina de configurare a sondajului scrieti raspunsurile si setati data si ora de incheiere a sondajului.
Atentie: Aveti grija cum faceti setarile sondajului pentru ca nu veti mai putea sa le modificati.
Puneti o intrebare si salvati gadget-ul. El v-a apare in sidebarul blogului.

3. Intrati pe blogul vostru si dati un clic dreapta. Din meniu alegeti sa vedeti sursa paginii. (Firefox - View page source)

4. In pagina deschisa care contine codul html al sablonului trebuie sa cautati exact cuvintele care compun intrebarea pusa de voi in sondaj.

Exemplu: Daca intrbarea voastra ar fi - Ce parere aveti despre acest articol?- atunci voi trebuie sa cautati exact aceste cuvinte.
- Pentru o cautare mai usoara puteti folosi combinatia de taste Ctrl+F. Se v-a deschide o caseta de cautare unde trebuie sa copiati intrebarea si sa dati Next sau Search next -

5. Dupa ce gasiti intrebarea, al doilea rand de cod, in jos, este codul care ne trebuie noua. Codul v-a fi de genul asta:

<iframe allowtransparency='true' frameborder='0' height='200' name='poll-widget8471964784630266066' src='http://www.google.com/reviews/polls/display/8471964784630266066/blogger_template/run_app?txtclr=%23000000&lnkclr=%23255ED1&chrtclr=%23255ED1&font=normal+normal+110%25+Georgia%2C+Serif&hideq=true&purl=http%3A%2F%2Fbloggerajutor.blogspot.com%2F' style='border:none; width:100%;'></iframe>

6. Selectati codul, dati clic dreapta si apoi Copy. Acum nu trebuie decat sa va duceti la articolu pe care il scrieti, sa intrati in modul Editati html al editorului de text si sa dati Paste la cod acolo unde doriti sa apara formularul de sondaj.

Dupa ce publicati articolul puteti sa stergeti din sidebar gadgetul cu formularul de sondaj. El v-a ramane insa in postarea voastra si v-a funtiona corect.

Daca vreti ca formularul de sondaj sa apara pe un alt fundal atunci trebuie puneti codul sondajului intre aceste linii:

<div style="border:1px solid gold;padding:10px;background-color:#CDD2D7;">
Codul sondajului
</div>

Modificati culoarea fundalului dupa cum doriti, prin schimbarea codului scris cu verde.




Votati in acest sondaj: Ce parere aveti despre acest articol?

For technorati

ZFGUS566NRNF