2 modi per modificare "Post più Recente", "Home page" e "Post più vecchio" su Blogger

Ecco 2 modi interessanti per sostituire i tre  Link "Post più Recente",  "Home page" e "Post più vecchio", alla fine dei Post su Blogger.

In effetti per dare un aspetto più gradevole al nostro Blog possiamo scegliere se sostituirli con delle icone oppure rendere visibile la numerazione delle pagine.

Questo per avere anche una navigazione più usabile e chiara ed invogliare i nostri lettori a sfogliare le pagine del nostro Blog!


Primo metodo:

Ora vediamo di usare delle semplici Icone in sostituzione ai tre Link. Innanzi tutto vi suggerisco di usare FindIcons o IconsFinder  per trovare le Icone più adatte al vostro Tema Blogger. Una volta che le avete scaricate, utilizzate Dropbox o Picasa per hostarle. A questo punto entriamo nel codice sorgente del Blog, Modifica HTML ed Espandi i modelli widget.
Cerchiamo questo codice:

<b:includable id='nextprev'>

cancelliamo tutto fino a che non troviamo quest altro:

</b:includable>

Il codice cancellato verrà sostituito con quest altro ancora:


<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blogpager-
newer-link'>
<img src='URL Icona Freccia Sinistra'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blogpager-
older-link'>
<img src='URL Icona Freccia Destra'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL Icona Home Page'/></a>
</div>
<div class='clear'/>

Ok, ora andiamo ad inserire qualche riga di codice CSS. Cerchiamo questo codice:

]]></b:skin>

Subito sopra incolliamo quest altro:

#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

Adesso troveremo le tre Icone al posto dei tre Link. Attenzione che non tutti i Blog sono uguali, quindi per allinere le Icone nel modo giusto dovrete fare delle prove modificando il codice CSS:

margin-left: 30px; oppure

margin.right: 10px;

Fate qualche tentativo!

Secondo metodo:

Inseriamo il numero delle pagine al posto dei tre Link: "Post più Recente",  "Home page" e "Post più vecchio", come nella foto qui sotto.

Anche in questo caso bisogna mettere mano al codice sorgente di Blogger, quindi andate in
Modifica HTML ed Espandi i modelli widget.

Cercate il codice:

/* Variable definitions
====================

Subito otto inserite queste variabili:

<Variable name="pagebgcolor" description="Pagine - colore di sfondo"
type="color" default="#ccc" value="#ffdfbf">
<Variable name="pagefwcolor" description="Pagine - colore testo e bordi"
type="color" default="#000" value="#cc0000">

Queste servono per impostare i colori che potete trovare direttamente in "Layout->Caratteri e colori",
Ora inseriamo il codice CSS, quindi cerchiamo questo:

]]></b:skin>

Subito sopra inserite questo:

.showpageArea {
margin-top: 12px;
margin-bottom: 10px;
}
.showpageArea a {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px $pagefwcolor solid;
color: $pagefwcolor;
padding: 3px;
margin-left: 5px;
background: $pagebgcolor;
}
.showpageArea a:hover {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px $pagebgcolor solid;
color: $pagebgcolor;
padding: 3px;
margin-left: 5px;
background: $pagefwcolor;
}
.showpageNum a {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px $pagefwcolor solid;
color: $pagefwcolor;
padding: 3px;
margin-left: 5px;
background: $pagebgcolor;
}
.showpageNum a:hover {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px $pagebgcolor solid;
color: $pagebgcolor;
padding: 3px;
margin-left: 5px;
background: $pagefwcolor;
}
.showpagePoint {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
border: 1px $pagebgcolor solid;
color: $pagebgcolor;
padding: 3px;
margin-left: 5px;
background: $pagefwcolor;
}
.showpageTot {
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
color: white;
}

Salvate il tutto. Ricordatevi di fare sempre una copia di backup, prima di modificare il codice.

Andiamo in Layout, apriamo un nuovo widget HTML/Javascript, non inseriamo alcun titolo e incolliamo il seguente codice:

<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length) == ".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ?
thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ?
thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum = 1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml = '';
var downPageHtml = '';
var pageCount = 5;
var displayPageNum = 3;
var firstPageWord = '<<';
var endPageWord = '>>';
var upPageWord = '<';
var downPageWord = '>';
var labelHtml = '<span class="showpageNum"><a
href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
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!='') {
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] = '/search/label/'+thisLable+'?updatedmax='+
timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}
itemCount++;
}
}
else {
if(title!='') {
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
if(thisUrl.indexOf(timestamp)!=-1 ) {
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updatedmax='+
timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++) {
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)) {
if(fFlag ==0 && p == thisNum-2) {
if(thisNum==2) {
if(isLablePage) {
upPageHtml = labelHtml + upPageWord +'</a></span>';
}
else {
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}
else {
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord
+'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)) {
html += ' <span class="showpagePoint">'+thisNum+'</span>';
}
else {
if(p==0) {
if(isLablePage) {
html = labelHtml+'1</a></span>';
}
else {
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}
else {
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'
</a></span>';
}
}
if(eFlag ==0 && p == thisNum) {
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord
+'</a></span>';
eFlag++;
}
}
}
if(thisNum>1) {
if(!isLablePage) {
html = '<span class="showpage"><a href="/">'+ firstPageWord +'
</a></span>'+upPageHtml+' '+html +' ';
}
else {
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpage">Pagina '+thisNum+' di
'+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'">
'+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage) {
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2) {
html ='';
}
for(var p =0;p< pageArea.length;p++) {
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0) {
html ='';
}
if(blogPager) {
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&maxresults=
99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margintop:
15px;display:none;"> <a href="http://rias-technowizard.
blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this
Widget ~ Blogger Accessories</a></div>

Ok ora salviamo!


Il codice delle due variabili sotto riportate ed evidenziate in rosso, servono per:

var pageCount = 5;

var displayPageNum = 3;

La prima dichiara che 5 sono i Post contenuti in una singola pagina.

La seconda che sono 3 i link alle pagine.

Queste possono essere modificate da voi, a seconda delle esigenze. Attenzione che non tutti i modelli per Blogger sono uguali, in alcuni potrebbero non funzionare.

Spero di essere stata utile!

Se ti è piaciuto l'articolo, iscriviti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog! Per maggiori informazioni sui feed, clicca qui!