La sera del 25 marzo è mancato mio padre. Solo stasera sono riuscito a trovare la serenità mentale giusta per avvertire che per qualche giorno starò lontano dal blog. Mi dispiace per chi ha lasciato un commento o mi ha scritto delle mail aspettando una risposta. Tornerò a dedicarmi appieno al blog la prossima settimana.
A presto,
Orazio
Questa è una di quelle modifiche relativamente semplici da fare ma che permetteranno di dare un look & feel più gradevole e professionale al blog su Blogger: sostituire i link “Post più vecchi”, “Post più recenti” e “Home” con il numero delle pagine:
Decisamente d’impatto, permetterà una navigazione più intuitiva e rapida nel blog.
Inizialmente proposta da Mohamed Rias, questa modifica è stata segnalata con qualche ritocco da Iole (che ringrazio per essermi stata d’aiuto una sera di qualche tempo fa – avete presente quando siete stanchi morti e subito prima di spegnere il pc vi accorgete che il blog è tutto sballato? Ecco, era una di quelle sere).
La ripropongo a mia volta, con qualche piccolo cambiamento. Questa modifica non appesentirà significativamente il caricamento del blog, ed è mia intenzione farla al più presto su questo blog. Come sempre farò riferimento al template Minima, ma non ci dovrebbero essere particolari problemi su qualsiasi altro template.
Andate in Layout->Modifica HTML, e cercate queste righe di codice (verso l’inizio):
/* Variable definitions
====================
Subito sotto, incollate questo:
<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">
E salvate il template. In Layout->Caratteri e colori, apparirà già la possibilità di personalizzare i colori dei link alle pagine che inseriremo:
Tornate in Layout->Modifica HTML, e cercate questa riga di codice (CTRL+F col browser):
]]></b:skin>
Subito sopra, incollate 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;
}
E salvate le modifiche fatte.
Andate in Layout->Elementi pagina, e aggiungete un elemento di tipo HTML/Javascript (nell’esempio l’elemento è inserito sotto la sezione dei post, ma potete aggiungerlo dovunque).
All’interno dell’elemento (lasciatelo senza titolo) incollate questo codice Javascript:
<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+'?updated-max='+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?updated-max='+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&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>
Prima di salvare l’elemento, potete personalizzare il codice modificando le due righe che ho evidenziato:
var pageCount = 5;
var displayPageNum = 3;
La prima indica il numero di post che verranno visualizzati in ogni singola pagina: in questo caso vale 5. Per ottenere un effetto migliore, consiglio di mettere lo stesso numero di post che state già visualizzando, e che potete cambiare (ma non è necessario farlo) da Layout->Elementi pagina, cliccando su Modifica nella sezione dei post:
La seconda indica quanti link alle pagine appariranno. Lasciando 3, ecco il risultato:
Una volta incollato il codice, salvate l’elemento e spostatelo sotto l’area dei post:
A questo punto salvate e visualizzate il blog, per vedere l’effetto. Tutto fatto!
Previa valutazione dei punti sopra, vi invito a segnalarmi qualsiasi problema che si presenti.
Per l’ultima immagine si ringrazia Mohamed
Altra proposta votatissima nel sondaggio è stata la possibilità di aggiungere e personalizzare un bordo ai post e agli elementi del blog. Con questo articolo spiegherò sia come aggiungere un bordo fatto non solo da linee ma anche da altri motivi.
Come sempre partirò dal template Minima (il più diffuso e base di partenza per la maggior parte degli altri) per fare l’esempio.
L’aspetto dei bordi viene definito dal codice CSS presente nei template. Nel template Minima, l’aspetto dei post viene definito da questo codice:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Mentre l’aspetto dei widget da questo:
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Più genericamente, possiamo dire che la definizione dello stile dei post comincia con .post o #post, mentre quello degli elementi della colonna laterale con .sidebar o #sidebar.
Delle righe viste, ce ne interessa particolarmente una, ed è quella che definisce il bordo delle varie parti:
border-bottom:1px dotted $bordercolor;
Questa riga indica di inserire un bordo sotto gli elementi (border-bottom), larga 1 pixel (1px), punteggiata (dotted), del colore predefinito da Layout->Caratteri e colori ($bordercolor, ovvero Colore del bordo nella personalizzazione dei colori). Se nel vostro template non trovate questa riga, inseritela voi stessi nella sezione corrispondente!
Vediamo le possibili combinazioni del comando:
Per fare una prova e capire il concetto, sostituiamo nel codice che definisce l’aspetto del post la parola border-bottom con border:
.post {
margin:.5em 0 1.5em;
border:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Ecco l’aspetto che avrà il post:
Il bordo non è più solo sotto ma tutto intorno. In questo caso si nota davvero poco, ma possiamo intervenire sul primo parametro (1px) per definire la larghezza del bordo:
.post {
margin:.5em 0 1.5em;
border:5px dotted $bordercolor;
padding-bottom:1.5em;
}
Ed ecco il risultato ottenuto:
Adesso si nota sicuramente di più. Passiamo al secondo parametro (dotted - punteggiato) che definisce l’aspetto della linea. Ecco i possibili valori:
Facciamo direttamente una prova per capire, nel codice sostituiamo dotted con dashed (tratteggiato):
.post {
margin:.5em 0 1.5em;
border:5px dashed $bordercolor;
padding-bottom:1.5em;
}
Ecco il risultato:
A questo punto resta l’ultimo parametro, $bordercolor, che potete personalizzare direttamente da Layout->Caratteri e colori (Colore del bordo) oppure decidere voi stessi usando la codifica RGB dei colori (potendo così scegliere un colore diverso per le varie sezioni del blog). Proviamo a cambiare $bordercolor con #FF9900 (che provato con Color Scheme Online darà una tonalità di arancione):
.post {
margin:.5em 0 1.5em;
border:5px dashed #FF9900;
padding-bottom:1.5em;
}
Ecco come appaiono i nostri post ora:
Adesso potete sbizzarrirvi a provare le varie cominazioni.
Ricordiamoci della seconda porzione di codice, quella che definisce il bordo dei widget:
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
In realtà questa porzione non definisce solo l’aspetto della colonna laterale ma anche quella dell’area occupata dalle varie sezioni del blog. Per semplificare le cose, incolliamo subito sotto queste righe:
.sidebar .widget {
border-bottom:1px dotted $bordercolor;
}
Che ci permetteranno di personalizzare solo il bordo degli elementi della colonna laterale. Facciamo una prova più completa, modificando così il codice aggiunto:
.sidebar .widget {
border-bottom:5px dotted #993300;
border-left:5px dotted #993300;
}
Che secondo quanto spiegato sopra, aggiungerà un bordo sotto (border-bottom) e uno a sinistra (border-left):
Anche se la cosa può sembrare più complicata di quella che è, basta fare delle prove per afferrare subito il concetto. Per qualsiasi chiarimento, lasciatemi un commento!
Quale giorno fa ho segnalato alcuni servizi per pubblicare online i file PDF e condividerli nel proprio blog. Come avevo annunciato, ecco un elenco di strumenti che vi permetterà di convertire in PDF i vostri documenti dai formati più diffusi (Word, Excel, Powerpoint, Publisher, e così via, perfino immagini).
Tutti i servizi che presento sono assolutamente gratuiti e non inseriscono alcuna fastidiosa pubblicità nel pdf finale. Sono tutti in lingua inglese, ma semplici da usare.
PDF Online è probabilmente il miglior servizio nel suo genere, sia per la velocità con cui i documenti vengono convertiti, sia per le ridotte dimensione dei file finali. Basta scegliere il documento da convertire cliccando su “Scegli file”, decidere un nome per il file convertito (Output filename), inserire il vostro indirizzo di posta elettronica (Email address) e cliccare su “Convert to PDF”. Il caricamento può richiedere anche alcuni minuti, a seconda delle dimensioni del file (fino a 2 megabyte), e una volta finito basteranno pochi secondi per ricevere in posta il PDF convertito. I formati supportati sono quelli di Office (Word, Powerpoint, Excel) e di Publisher (PUB). Il risultato ottenuto è di ottima qualità.
Nel sito sono disponibili altri interessanti strumenti, tra cui PDF2Word per convertire in DOC i file PDF.
Anche PDF Converter è uno strumento molto veloce, e in più permette di convertire, oltre i documenti Office, anche immagini e pagine web (in tutto i formati supportati sono 67). Basta scegliere il file da convertire dal proprio computer (oppure una pagina web, cliccando su URL e inserendone l’indirizzo), inserire il proprio indirizzo di posta (cliccando su “Attach files to e-mail” riceverete il file in allegato) e cliccare su “Convert”.
PDF Converter permette di convertire anche documenti di grosse dimensioni, ma il PDF finale in genere occupa più spazio di quello generato da strumenti analoghi.
Kinati 2PDF converte i formati più diffusi (Word, Excel, Powerpoint, Publisher, TIF e altri) e i documenti possono essere grandi fino a 15 megabyte. Anche in questo caso il documento convertito in PDF arriverà in posta (verrà prima mandata una mail di conferma). La particolarità di Kinati è che permette di criptare i file generati e di aggiungervi delle password.
Google Docs & Spreadsheets è una suite per ufficio completa, messa a disposizione gratuitamente da Google. Oltre a un wordprocessor, è presente anche un foglio elettronico simile ad Excel e uno strumento per creare presentazioni simile a Powerpoint. Possiamo creare online i nostri file, ma anche caricarli dal nostro disco per poi scaricarli direttamente in formato PDF. La conversione non è di eccellente qualità, ma è immediata.
HTML2PDF permette di convertire in PDF le pagine web e si distingue da altri strumenti simili (e ne ho provati davvero tanti) per l’alta qualità della conversione: di solito i PDF ottenuti da pagine web mancano di sfondi o di altri elementi grafici, mentre con HTML2PDF il risultato ottenuto è ottimo. Dal sito anche possibile aggiungere un pulsante al browser per accelerare l’operazione. Ringrazio Paolo per avermelo segnalato.
Ecco una selezione di ben 30 template per Blogger che sono stati pubblicati recentemente in rete. Da quelli fashion a quelli più professionali, direi che ce n’è davvero per tutti i gusti.
Vi raccomando come sempre di provarli prima su un blog di prova per essere sicuri che vi piaccia. Per maggiori informazioni su come cambiare il template di Blogger, vi rimando a questo post.
Water Color
vedi – scarica – articolo originale – autore
Gamezine
vedi – scarica – articolo originale – autore
Lay Pucca
vedi – scarica – articolo originale – autore
Dark Marble
vedi – scarica – articolo originale – autore
Starlight Diva
vedi – scarica – articolo originale – autore
Solipsus
vedi – scarica – articolo originale – autore
The Professional Template
vedi – scarica – articolo originale – autore
Blak Magik
vedi – scarica – articolo originale – autore
Business Ads Ready
vedi – articolo originale – autore
Del template Business Ads Ready non è disponibile ancora il download, ma l’autore dice che ci sarà presto. Vista l’alta qualità del template, ho deciso di segnalarlo lo stesso.
Aku Boonto
vedi – scarica – articolo originale – autore
Magazeen
vedi – scarica – articolo originale – autore
Shoopaholic
vedi – scarica – articolo originale – autore
Elegant Grunge
![[elegant_grunge[7].jpg]](http://lh3.ggpht.com/_tv0CYLxoyho/SbI69Jz8XmI/AAAAAAAACh0/5O10Hrj4rTk/s1600/elegant_grunge%5B7%5D.jpg)
vedi – scarica – articolo originale – autore
Green Scrapbook Diary
![[green+scrapbook+diary+template.jpg]](http://4.bp.blogspot.com/_nxOMLf2KJwU/Sa_Ve_-fJpI/AAAAAAAABKI/JDQimuXiO60/s1600/green%2Bscrapbook%2Bdiary%2Btemplate.jpg)
vedi – scarica – articolo originale – autore
Coffee Desk
![[coffee desk[16].jpg]](http://lh3.ggpht.com/_tv0CYLxoyho/Sa5YxdKvZXI/AAAAAAAAChg/uW9WO96q5Pc/s1600/coffee+desk%5B16%5D.jpg)
vedi – scarica – articolo originale – autore
Doraemon
vedi – scarica – articolo originale – autore
Hot Coffee
vedi – scarica – articolo originale – autore
Fashionholic
vedi – scarica – articolo originale – autore
Zinmag Remedy 2.0
vedi – scarica – articolo originale – autore
Zinmag Tribune
vedi – scarica – articolo originale – autore
Zinmag Futura
vedi – scarica – articolo originale – autore
Gramophonica
vedi – scarica – articolo originale – autore
Blue Wave
vedi – scarica – articolo originale – autore
Herbalicious
vedi – scarica – articolo originale – autore
Floral Concept
vedi – scarica – articolo originale – autore
AdSense Tech
vedi – scarica – articolo originale – autore
Terra Green
scarica – articolo originale – autore
Pinky Blue
vedi – scarica – articolo originale – autore
Coffee Talk
vedi – scarica – articolo originale – autore
Baby cute
vedi – scarica – articolo originale – autore
Lightbox è uno script che ha avuto molto successo in rete che permette di applicare particolari effetti di ingrandimento alle immagini di un sito. Un esempio vale più di mille parole, quindi visitate questa pagina e cliccate sulle varie foto per capire cosa è capace di fare Lightbox.
Dalla versione 2 (adesso Lightbox è giunto alla versione 2.04) è anche possibile creare slide di immagini.
Con questo articolo, riuscirete a integrare Lightbox con Blogger in pochi minuti, e una volta fatto potrete applicare l’effetto di ingrandimento alle varie immagini dei vostri post. Se avete un photoblog o siete artisti che pubblicano i propri lavori sul blog, o comunque volete stupire i visitatori con un effetto davvero d’impatto, Lightbox fa per voi!
Lightbox è leggero e non appesantirà in maniera significativa il caricamento del vostro blog.
Da questa pagina potrete scaricare il pacchetto di installazione di Lightbox. Nella pagina sono anche presenti le istruzioni (in lingua inglese) per la configurazione del pacchetto, che possiamo sintetizzare velocemente così:
Per Blogger ho già fatto io l’operazione: basterà fare un copia e incolla.
Dalla bacheca, andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercare questa riga di codice:
</head>
Subito sopra, incollate questo codice:
<link href='http://sites.google.com/site/creareblog/script-blog/lightbox/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js' type='text/javascript'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://sites.google.com/site/creareblog/script-blog/lightbox/lightbox.j' type='text/javascript'/>
E salvate il template. Lightbox è già integrato col vostro blog.
AGGIORNAMENTO: a causa dei problemi avuti, ho modificato la parte in rosso nel codice sopra. Dovrete aggiornarlo nei vostri template altrimenti questa modifica non funzionerà più.
Blogger ha di base un brutto meccanismo di gestione delle immagini che infastidisce l’integrazione con Lightbox e che sto cercando di risolvere (in rete non si trovano molte informazioni sul connubio Blogger + Lightbox, quindi non ho potuto confrontarmi con nessuno), e per poter applicare l’effetto d’ingrandimento alle immagini queste dovranno già trovarsi in rete. Il che significa che prima dovrete pubblicarle utilizzando un servizio come Imageshack o Skydrive, recuperarne l’indirizzo e inserirle nei post tramite l’URL:
Una volta caricata l’immagine, andate in Modifica HTML del post:
E all’inizio del codice che rappresenta l’immagine, aggiungete la parte che evidenzio in rosso:
<a rel="lightbox" onblur="try {parent…
Sicuramente un po’ macchinoso. Specialmente quando avrete più immagini e avrete già scritto il post, ci sarà molta confusione. Per fortuna, Windows Live Writer ci semplificherà, come al solito, la vita!
Ovviamente, potete ridimensionare l’immagine dentro il post, tanto ci penserà Lightbox a ingrandirle!
Con Windows Live Writer la cosa si fa più semplice. Inserite l’immagine nel post cliccando nell’apposita icona nella toolbar:
Anche in questo caso dovrete selezionare “Da Web” e inserire l’indirizzo dell’immagine. Una volta inserita l’immagine, nelle opzioni a destra selezionate URL nella voce “Collega a” (per far apparire le opzioni dell’immagine, basta cliccarci sopra):
Inserite l’indirizzo dell’immagine e nella voce Rel la parola lightbox:
Attenti a non sbagliare, perchè altrimenti non funzionerà niente. In questa finestra potete anche inserire un titolo per l’immagine, che comparirà sopra l’immagine una volta ingrandita:
Scrivete il vostro post e pubblicatelo. Ecco come apparirà nel blog:
Sembra la vecchia solita immagine vero? Ma cliccateci sopra ed ecco la magia:
Anche in questo caso potete rimpicciolire l’immagine per occupare meno spazio nel post. Come ho scritto all’inizio dell’articolo, Lightbox permette anche di creare delle gallerie di immagini. A breve seguirà un altro post proprio su questo argomento. Nel frattempo, per qualsiasi difficoltà, lasciatemi un commento.
Per le immagini di esempio all’inizio del post, si ringrazia Paul van Roekel.
Se volete aggiungere un collegamento nel vostro blog a Creare Blog, potete utilizzare il seguente codice:
Oppure il seguente (grazie ad Adele per la realizzazione grafica):
