Cum să pun bara de navigare cu numere in Blogger/blogspot

   
 Aceasta metoda iti va permite sa-ti creezi bara de navigare cu numere pentru bloger/blogspot ce va aparea in pagina principala.

1) Intram la "Design"-"Editati HTML", salvati sablonul in caz de erori sau greseli!;
2) Lasam nebifata casuta: "Extindeti sabloanele control";
Pentru a cauta apasam pe combinatia de taste: Ctrl  si  F
3) Gasim in sablon urmatorul cod: ]]></b:skin>
si inaintea lui punem unul din exemplele de coduri de mai jos la alegere dupa plac:
EXEMPLU 1

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #fff;
  font-size:11px; 
  margin:10px;
  padding:8px 20px;
  background: #333;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #666;
  }
  
.showpageNum a:hover {
  background: #888;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #da6100;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
EXEMPLU 2

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUodTcOL1bQG9F3WM-lbCAcjfVG65LvZ48ayGR-JN4dyUBx1uYV9OSU9YCb1rTOcFRDj8eyZr3EO50V6Jx5fUzyeZ3kOIgZzW-CJqVzXn1FalCaPYYPGKgOKd4f9NdTq9xycFa_0z-mU/s1600/wp5.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUodTcOL1bQG9F3WM-lbCAcjfVG65LvZ48ayGR-JN4dyUBx1uYV9OSU9YCb1rTOcFRDj8eyZr3EO50V6Jx5fUzyeZ3kOIgZzW-CJqVzXn1FalCaPYYPGKgOKd4f9NdTq9xycFa_0z-mU/s1600/wp5.jpg) 0 -25px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUodTcOL1bQG9F3WM-lbCAcjfVG65LvZ48ayGR-JN4dyUBx1uYV9OSU9YCb1rTOcFRDj8eyZr3EO50V6Jx5fUzyeZ3kOIgZzW-CJqVzXn1FalCaPYYPGKgOKd4f9NdTq9xycFa_0z-mU/s1600/wp5.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
EXEMPLU 3

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 4px;
  margin:0 4px;
  text-decoration: none;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZX3VBl3MAVlNF053fTCx2LD9R3mIFZIN5SK4Qci83CiytJoxRtAjgmahyQWpbfzYHi5GBjjh0-GGPVf5WByxeJyfIMS7jwNfbRz1If3S7Jr9OThAV-1LsZBZIrmsjf-V6pLhyP_LXPWY/s1600/wp4.jpg) 0 -25px repeat-x;
  }
  
.showpageNum a:hover {
  border-top:2px solid #999;
  border-left:1px solid #999;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  background: #999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZX3VBl3MAVlNF053fTCx2LD9R3mIFZIN5SK4Qci83CiytJoxRtAjgmahyQWpbfzYHi5GBjjh0-GGPVf5WByxeJyfIMS7jwNfbRz1If3S7Jr9OThAV-1LsZBZIrmsjf-V6pLhyP_LXPWY/s1600/wp4.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZX3VBl3MAVlNF053fTCx2LD9R3mIFZIN5SK4Qci83CiytJoxRtAjgmahyQWpbfzYHi5GBjjh0-GGPVf5WByxeJyfIMS7jwNfbRz1If3S7Jr9OThAV-1LsZBZIrmsjf-V6pLhyP_LXPWY/s1600/wp4.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
EXEMPLU 4

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }


.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }


.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhIdnEY3SMrMgvN8PsTosBkdUCWWCwMkbXQMWk1HrFBo5F3jhyphenhyphen6HKGf3UzMU9kYENuy4XRu6OkS6FYqOf23PioHB23GECHCVZ6c9US1Z6vTqc4gydFkvK3C0ToTB-glGV6vqWNvZBtpw/s1600/wp1.jpg) 0 -50px repeat-x;
  }


.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhIdnEY3SMrMgvN8PsTosBkdUCWWCwMkbXQMWk1HrFBo5F3jhyphenhyphen6HKGf3UzMU9kYENuy4XRu6OkS6FYqOf23PioHB23GECHCVZ6c9US1Z6vTqc4gydFkvK3C0ToTB-glGV6vqWNvZBtpw/s1600/wp1.jpg) 0 -25px repeat-x;
  }


.showpageOf{
  margin:0 8px 0 0;
  }


.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhIdnEY3SMrMgvN8PsTosBkdUCWWCwMkbXQMWk1HrFBo5F3jhyphenhyphen6HKGf3UzMU9kYENuy4XRu6OkS6FYqOf23PioHB23GECHCVZ6c9US1Z6vTqc4gydFkvK3C0ToTB-glGV6vqWNvZBtpw/s1600/wp1.jpg) 0 0 repeat-x;
  text-decoration: none;
  }
4) Dupa ce va-ti ales stilul si l-ati copiat, cautam urmatorul cod din sablon: </body> si inainte punem codul de mai jos:
<!--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://navigatiecunumere.googlecode.com/files/navigatiecunumere1.js' type='text/javascript'&gt;&lt;/script&gt;
<!--Cod navigare-http://aflablog.blogspot.com-->
Uitati-va cu atentie la cifrele pe care le-am colorat in rosu si verde, cifra 4 trebuie sa coincida cu cifra din:
"Setari"-"Formatare"-"Afiseaza".
Cifra 3 va arata cite numere vor fi in stinga sin in dreapta din bara de navigare.
5) Salveata-ti sablonul si asta e tot pentru ca sa se afiseze in pagina principala
Daca doresti ca bara de navigatie sa-ti apara si in etichete(categorii), urmeaza pasii de mai departe:
Pentru aceasta trebuie sa aveti activat gadgetul: etichete
6) intram la "Design"-"Editati HTML", salvati sablonul in caz de erori sau greseli!
7) bifam casuta: "Extindeti sabloanele control"
8) gasim urmatorul cod(este de doua ori in sablon):
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
9) fiecare cod il inlocuim cu codul de mai jos:
<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>
Aici la fel trebuie sa coincida cifra 4! Asta e tot si succes!
==============================================
Suntem recunoscatori pentru email, socializare si comentarii, succes!! :)

Introdu emailul tau si primesti articole gratis:

Apasa mai jos, arata si prietenilor
В Blogger В Twitter во ВКонтакте В Одноклассники В Мой Мир В Facebook

Etichete: , , ,

3 comentarii:

  1. Stefan8 mai 2012 la 10:37

    daca nu gasesc codul pentru a pune aplicatia si la etichete ce sa fac ?

    RăspundețiȘtergere
  2. Unknown17 august 2012 la 21:28

    nu gasesti codul probabil ca nu este nevoie de a face bara de navigare pentru etichete...in genere etichetele trebuie sa fie cit mai vizualizate pe pagini, asa ca ti-as propune sa le lasi asa cum sunt fara pagini

    RăspundețiȘtergere
  3. jocuri cazino1 mai 2014 la 07:29

    Interesant tutorialul dar mie nu-mi reuseste paginatia. Imi da eroare. Ma poate ajuta cineva va rog?

    RăspundețiȘtergere