bpb

Windows Live Writer Portable

noreply@blogger.com (em) — Sun, 26 Jul 2009 22:01:00 +0000

Si propone il piccolo eseguibile creato da Scott Kingery, che trasforma Windows Live Writer in una versione stand-alone pronta per essere inserita e lanciata da dischi rimovibili, pen-drive e hard-disk esterni. Per utilizzare Windows Live Writer in versione Portable:

1. Scaricare l'eseguibile (il programmino necessario per lanciare Windows Live Writer da quasiasi periferica). Spacchettarlo in una pen-drive (o altro supporto).

2. Scaricare Live Writer e installarlo sul proprio PC: sono circa 135 MB ma vale la pena! Il programma propone l'installazione di una miriade di applicazioni: lasciare la spunta solo su Writer...

... il programma propone infine modifiche al browser: togliere tutte le spunte...

Una volta terminata l'installazione, copiare TUTTI i file contenuti in

C:\Programmi\Windows Live\Writer (directory predefinita)

e incollarli in

\WindowsLiveWriterPortable\App\WindowsLiveWriter (directory nella pen-drive o altro supporto)

3. (volendo) disinstallare Windows Live Writer dal pc, non è stato nemmeno necessario avviarlo...

Questa procedura crea un ambiente autonomo che permette il funzionamento di Windows Live Writer. Lanciare il programma dalla pen-drive (o altro supporto)... \WindowsLiveWriterPortable

Al primo avvio viene chiesto di acquisire l'indirizzo e le impostazioni del blog (in questa fase serve il collegamento internet), in modo da visualizzare in anteprima il layout del/dei blog e controllare esattamente i tipi di carattere, la spaziatura, i colori e le immagini dei post:

L'utilità di Live Writer in versione portatile sta nel fatto di poter editare e salvare offline i post da pubblicare nel/nei proprio/i blog, collegando la pen-drive (o altro disco o memoria esterni) a qualunque pc...

bloggerperbabbei™ - 2009

footer a tre colonne

noreply@blogger.com (em) — Wed, 15 Apr 2009 17:05:00 +0000

Poiché sull'argomento già esiste un magnifico tutorial a opera della bloggerbuster Amanda, ci limiteremo a tradurlo qui di seguito, riportando i quattro passaggi necessari per ottenere un blog dal piè di pagina a tre colonne, proprio come in bpb™.

1. Eseguire una copia di sicurezza del template
Prima di apportare qualunque modifica all'aspetto del vostro blog, è fondamentale fare una copia di backup del template esistente. Così se fate qualche errore, oppure il risultato non vi soddisfa, potrete facilmente ritornare al vecchio design: via bacheca > layout > modifica html > scarica modello completo è possibile salvare sul proprio pc un file xml del template in uso.

2. Rimuovere tutti i widget dal footer
E' opportuno spostare (temporaneamente) tutti i widget presenti nella sezione footer del vostro blog in un'altra sezione (ad es. la sidebar). Ciò facilita le operazioni di modifica del codice e impedisce la perdita dei widget durante la modifica stessa. Una volta terminata la procedura in quattro punti, potrete nuovamente traslocare i widget nel footer.

3. Aggiungere il codice al footer del template
Via bacheca > layout > modifica html (senza espandere i modelli widget) individuate [ctrl+f] questa sezione del codice:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

nota bene: questa sezione potrebbe avere una sintassi lievemente differente da quella qui riportata, ad esempio "footer-wrap" oppure "footer". Nel caso poi dei template della serie Rounders, si noterà che esistono due sezioni div. Ad ogni modo, ciò che qui serve è di sostituire la sezione evidenziata in rosso.

Sostituite la parte evidenziata in rosso con questo codice:

<div id='footer-column-container'>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>
</div>

A questo punto è una buona idea salvare il template, prima di passare alla fase finale della procedura, che consiste nell'aggiungere uno stile al footer modificato.

4. Aggiungere uno stile al footer
Via bacheca > layout > modifica html (senza espandere i modelli widget) individuate [ctrl+f] la tag di chiusura </b:skin> e subito prima incollate questo:

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

Fatto. Via bacheca > layout si vedranno le tre nuove colonne create nel footer del blog, alle quali sarà possible aggiungere i widget precedentemente spostati altrove.

Si noterà che è stata aggiunta una linea orizzontale alla sezione footer, allo scopo di assicurare una distinzione grafica tra il contenuto del footer e quello della sezione superiore. E' possibile modificarne il colore, intervenendo sul valore evidenziato in neretto:

<hr align='center' color='#5d5d54' width='90%'/>

bloggerperbabbei™ - 2009
via BloggerBuster

blog successivo

noreply@blogger.com (em) — Mon, 23 Feb 2009 19:50:00 +0000

Lo sapevo. Hai voluto a tutti i costi eliminare dal tuo blog la navbar di Blogger, ma ora ti è tornata voglia di saltabeccare a caso di blog in blog, facendo del sano zapping come ai tempi del link Next blog/Blog successivo...

Ebbene, non hai che da aggiungere un gadget con il link:

http://www.blogger.com/next-blog?navBar=true

... per poi decorarlo a piacimento con immaginette, bottoni o altro...

bpb™ - 2009

from outer wrapper to eternity

noreply@blogger.com (em) — Wed, 18 Feb 2009 18:43:00 +0000

effetto sfoglia pagina per blogspot

noreply@blogger.com (em) — Wed, 11 Feb 2009 22:06:00 +0000

Traducibile come L'orecchia alla pagina, PageEar colloca in alto a destra sulla pagina del blog un "angolino animato" che - al passaggio del mouse - ricrea un effetto a sfogliare... qui un esempio.

Si propone il gingillo inventato da Christian Harz di WebPicasso Media... con un paio di dritte per caricarlo facilmente sul proprio blog a marchio blogspot.com... senza menate e senza millantare credito...

Il tono perentorio del seguente tutorial deriva dalla teutonica origine del codice...

1. Scaricare il pacchetto originale (.zip, download velocissimo), spacchettarlo e tenerlo in caldo. Contiene vari file: index.html, history.txt, copyright.txt... tutti interessanti, ma inutili ai fini qui perseguiti. I due file .jpg vengono forniti dall'autore a titolo di esempio;

2. Creare due file .jpg di proprio gusto, delle dimensioni l'uno di 100x100 pixel (da nominare pageear_s.jpg), l'altro di 500x500 pixel (da nominare pageear_b.jpg): l'immagine piccola fungerà da sfondo per l'angolino animato (la famosa orecchia...), quella grande da immagine di fondo che si svela per effetto dell'animazione in Flash;

3. Hostare le due immagini, preferibilmente su googlepages (chi ha la fortuna di averlo...) o servizi di hosting simili (= affidabili).
Hostare anche i file pageear_s.swf e pageear_b.swf contenuti nel pacchetto originale.
Si otterranno così delle url (indirizzi) come:

http://seventidue.googlepages.com/pageear_s.jpg
http://seventidue.googlepages.com/pageear_b.jpg
http://seventidue.googlepages.com/pageear_s.swf
http://seventidue.googlepages.com/pageear_b.swf

Hostare anche il file AC_OETags.js (servirà in seguito) che verrà tipo:

http://seventidue.googlepages.com/AC_OETags.js

4. Con un Editor html (Notepad di Windows va benissimo, ma c'è gratis Notepad++...) aprire il file pageear.js contenuto nel pacchetto originale. Individuato [ctrl+f] questo blocco del codice...

// URL zum kleinen Bild / URL to small image
var pagearSmallImg = 'pageear_s.jpg';
// URL zu pageear_s.swf / URL to small pageear swf
var pagearSmallSwf = 'pageear_s.swf';

// URL zum großen Bild / URL to big image
var pagearBigImg = 'pageear_b.jpg';
// URL zu pageear_b.swf / URL to big pageear swf
var pagearBigSwf = 'pageear_b.swf';

... rimpiazzare le parti in rosso con le corrispondenti url di cui al punto 3;

Individuando poi questa sezione del codice...

// Zu öffnende URL bei klick auf die geöffnete Ecke
// URL to open on pageear click
var jumpTo = 'http://www.webpicasso.de/blog/'

... si trova il link al quale punta il gadget (= url di destinazione). E' possibile modificarlo: in questo caso bpb™ insiste perché i blogger che ne utilizzano vogliano in qualche modo citare il vero autore* del widget.

Salvare e hostare il file pageear.js (si otterrà qualcosa tipo http://seventidue.googlepages.com/pageear.js);

5. Via bacheca > layout > modifica html, inserire subito sotto alla tag <head> questo script, non prima di averlo opportunamente modificato...

<script src='url del file AC_OETags.js' type='text/javascript'> </script>
<script type='text/javascript'>
var pagearSmallImg = 'url dell'immagine pageear_s.jpg';
var pagearBigImg = 'url dell'immagine pageear_b.jpg';
</script>
<script src='url del file pageear.js' type='text/javascript'></script>

... e subito prima della tag </body> inserire... questo:

<script type='text/javascript'> writeObjects(); </script>

Per complicarsi l'esistenza, l'impunito bloggerbabbeo potrebbe poi volere sto vigetto in alto a sinistra...

Occorrerà allora modificare il valore di var setDirection = 'rt'; (dove rt = right e lt = left): le modifiche vanno effettuate sul file pageear.js.

Volendo infine morire dietro all'operazione, potrebbero associarsi suoni in formato .mp3 agli eventi di arricciamento...
Si può fare, ma ti arrangi. Funziona in analogia a quanto sopra descritto, modificando opportunamente il file pageear.js.

anteprima > salva modello

bloggerperbabbei™ - 2009

* Estratto della Licenza d'uso (License agreements):
Advertising link / Backlinks to webpicasso media,
so far available, may not be removed.
May, non must. Encomiabile.

commenti recenti

noreply@blogger.com (em) — Mon, 08 Dec 2008 13:25:00 +0000

Per inserire nella Sidebar il widget Show Recent Comments (Mostra i Commenti Recenti), bacheca > layout > elementi pagina > aggiungi un gadget > html/javascript e si incolla:

<script style="text/javascript">
function showrecentcomments(json) {
var numcomments = 7;
var showcommentdate = true;
var showposttitle = true;
var numchars = 20;
var standardstyling = true;
var monthnames = new Array();
monthnames[1] = "Gen";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "Mag";
monthnames[6] = "Giu";
monthnames[7] = "Lug";
monthnames[8] = "Ago";
monthnames[9] = "Set";
monthnames[10] = "Ott";
monthnames[11] = "Nov";
monthnames[12] = "Dic";

for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
if (cdday.substring(0,1) == "0") cdday = cdday.substring(1,2);
var comment = entry.content.$t;
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (showcommentdate == true) document.write('il ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ');
if (entry.author[0].name.$t == "Anonymous") {
document.write('<a href="' + alturl + '">anonimo</a> ');
}
else {
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> ');
}
if (showposttitle == true) document.write(' su ' + posttitle);
if (!standardstyling) document.write(':</div><div class="bbrecpostsum">');
if (standardstyling) document.write(' ha scritto:<br/>');
if (comment.length < numchars) { if (standardstyling) document.write('<i>'); document.write(comment);
if (standardstyling) document.write('</i>');
}
else {
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + ' ... <a href="' + alturl + '">(segue)</a>');
if (standardstyling) document.write('</i>');
}
if (!standardstyling) document.write('</div>');
document.write('<br/>');
}
}
</script>

<script src="http://indormia.blogspot.com/feeds/comments/default?start-index=1&alt=json-in-script&callback=showrecentcomments">
</script>

Le parti colorate sono così personalizzabili:

[il] [anonimo] [su] [:] [ha scritto:] [...] [(segue)] e anche altri in verità, sono valori modificabili a piacimento;
<br/> ... il bloggerbabbeo diligente già sa che questa tag inserisce una interruzione di riga e che (volendo) si può anche omettere;
numcomments: numero di commenti da visualizzare;
showcommentdate: true = visualizza la data di ogni commento | false = non visualizza la data;
showposttitle: true = visualizza il titolo del post | false = non mostra il titolo del post;
numchars: numero massimo dei caratteri del commento da visualizzare [se troppo lungo, apparirà la scritta "(segue)"];
standardstyling: true = visualizzazione standard | false = visualizzazione alternativa. Vale la pena provarli entrambi per valutarne la resa grafica... in realtà non si notano grandissime differenze: vedi qui.
indormia.blogspot.com ... indirizzo del vostro blog.

bpb™

navbar evanescente

noreply@blogger.com (em) — Wed, 03 Dec 2008 13:09:00 +0000

Qualche fedelissimo dei gingilli predefiniti di Blogger, non volendo rimuoverla, preferirebbe piuttosto attribuire alla Navbar un effetto che la fa comparire al passaggio del mouse... come qui.

Via bacheca > layout > modifica html [espandi i modelli widget] si trova [ctrl+f] body { ... e subito prima si incolla:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

anteprima > salva modello

Per ripristinare la Navbar (… ma chi può mai volerlo?) basta rimuovere la parte di codice in rosso.

UPDATE 07/12: ... peccato che funzioni solo con Firefox...

bpb - 2008

roba da blogger: visite e statistiche

noreply@blogger.com (em) — Sun, 23 Nov 2008 23:01:00 +0000

Google Analytics...
... chi ancora non lo utilizza, provveda immediatamente! Offre una quantità strabiliante di dati: statistiche di traffico, percorsi in ingresso e in uscita, tempo di permanenza sul sito, chiavi di ricerca, siti e molto, molto altro ancora... tutto gratis e in piena sicurezza.

Per quanto riguarda altre risorse disponibili nel web, occorre prestare molta attenzione per orientarsi tra svariate proposte di "servizio gratuito", "contatore free", "contatore visite gratuito": spesso, dietro a queste definizioni accattivanti, si celano pubblicità (dialer, popup e ActiveX) dannose soprattutto per i visitatori. Qui una lista di contatori "sospetti" [occhio: Schinystat è una patacca...].

Tra i vari servizi disponibili, taluni anche seri e affidabili, si segnala qui:

Ora, nemmeno ShinyStat è completamente privo di pubblicità: la versione base gratuita svolge infatti il ruolo di "assaggio" dei pacchetti a pagamento Business e Pro. La differenza con praticamente tutti gli altri servizi, sta nel fatto che qui giocano a carte scoperte e non ti lanciano pagine pubblicitarie in background...
La versione Free è per l'utente amatoriale più che sufficente per farsi un'idea del traffico generato dal proprio blog/sito. Tra i servizi free: contatore visite, pagine visualizzate, siti di provenienza, chiavi di ricerca, geolocalizzazione...

bloggerperbabbei™ - 2008

roba da blogger: color picker

noreply@blogger.com (em) — Tue, 18 Nov 2008 18:08:00 +0000

ColorMania | Advanced Colorpicker

Utility gratuita e di velocissima installazione. Consente di catturare i codici colore direttamente dallo schermo in modo intuitivo e preciso al pixel. Per ottenerne il valore nei formati più diffusi (HEX, RGB etc.), basta "prelevare" il colore da una qualsiasi fonte, trascinandovi sopra il contagocce in dotazione.

bpb™ - 2008

stile commenti autore

noreply@blogger.com (em) — Thu, 30 Oct 2008 23:01:00 +0000

Qualcuno potrebbe trovare utile attribuire un formato speciale ai commenti inseriti dall’autore, per differenziarli da quelli dei lettori.
Si assume che i commenti al blog siano già attivati (impostazioni > commenti > mostra commenti)…
Via bacheca > layout > modifica html [espandi i modelli widget] si cerca (Ctrl+F) comments-block e si trova:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='commenti-autore-blog'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Una volta inserite le parti di codice riportate in rosso, sempre tramite (Ctrl+F) si cerca .comment-body e (nel Minima Template) si trova questo:

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Chi non utilizza il Minima Template, dovrà comunque cercare la classe “comment-body” e inserire i nuovi attributi (indicati di seguito, in rosso).

Per ottenere uno stile particolare per i commenti dell’autore, si inserisce la parte di codice in rosso:

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.commenti-autore-blog {
margin:.25em 0 0;
}
.commenti-autore-blog p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#F8DEE9;
font-style: italic;
}

In questo esempio si sono mantenuti inalterati i margini ma si è aggiunto un padding (spazio intorno al testo) di 5 pixel sopra e sotto, e uno di 10 pixel ai lati. Si è anche aggiunto un sottile bordo puntato a cornice del testo e un colore (#F8DEE9) di sfondo [per altri codici colore vedi qui]:

E’ inoltre possibile inserire una immagine di sfondo ai commenti dell’autore ("URL IMMAGINE"), e modificare il tipo e la dimensione del carattere di stampa... e molto altro ancora:

.commenti-autore-blog p {
margin:0 0 .75em;
padding:5px 10px;
font-size:120%;
font-family:courier;
background: url("URL IMMAGINE");
}

Vale la pena provare diversi stili-autore per trovare quello più adatto ai propri gusti...

anteprima > salva modello

bpb™ - 2008

feed sito per etichetta

noreply@blogger.com (em) — Tue, 21 Oct 2008 18:38:00 +0000

Oltre che per i post e i commenti di un blog, è possibile ottenere i feed sito anche per singole etichette (tag).
Il formato da utilizzare è il seguente:

http://nomeblog.blogspot.com/feeds/posts/default/-/etichetta

Si sostituiscono nomeblog.blogspot.com con l'indirizzo completo del sito/blog ed etichetta con la tag desiderata. Non si deve dimenticare il trattino ("-") nella url.

bpb™ - 2008
FONTE

rimuovere il link "Iscriviti a: Post (Atom)"

noreply@blogger.com (em) — Sun, 19 Oct 2008 22:01:00 +0000

Chi utilizza nel proprio blog un Feed RSS, potrebbe trovare utile rimuovere lo sgrammaticato, desueto e confusivo link predefinito di blogger "Iscriviti a: Post (Atom)".

Procedura
Via bacheca > layout > modifica html [espandi i modelli widget] si trova (Ctrl+F):

.feed-links {
clear: both;
line-height: 2.5em;
}

Le righe potrebbero variare a seconda dei diversi template, in ogni caso si incolla la riga in rosso alla fine della sezione indicata:

.feed-links {
clear: both;
line-height: 2.5em;
display: none;
}

anteprima > salva modello

bloggerperbabbei™ - 2008

post piu' recenti - home - post piu' vecchi

noreply@blogger.com (em) — Sun, 12 Oct 2008 22:01:00 +0000

Metti che il tuo blog sia tuttagatta.blogspot.com, e che tu voglia personalizzare a tema il testo dei link (situati a piè di pagina) Home page e Post più vecchi / recenti: via bacheca > layout > modifica html [espandi i modelli widget] si trova [Ctrl+F] questa sezione del codice…

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

si sostituisce la porzione di codice con questa:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Bella Miao</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Avanti Miagolo</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Viva Miao</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Viva Miao</a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

legenda

Bella Miao = Post più recenti
Viva Miao = Home Page
Avanti Miagolo = Post più vecchi

anteprima > salva modello

preziosismi

E' possibile anche sostituire del tutto le scritte con immagini a propria scelta, magari del tipo freccia avanti/freccia indietro e simili. Al posto per dire di bella miao, avanti miagolo e viva miao si inseriscono gli indirizzi/url delle immagini utilizzando la seguente sintassi:

<img src='url immagine' />

una chicca
Post più vecchi è visualizzato a destra mentre Post più recenti sta a sinistra. Per invertirne la posizione: via bacheca > layout > modifica html [espandi i modelli widget] si trova [Ctrl+F]...

#blog-pager-newer-link {
float: right;
}

#blog-pager-older-link {
float: left;
}

... e si invertono i valori di float. Il link Post più vecchi è ora a sinistra, Post più recenti a destra. Particolarmente utile se si è scelto di inserire immagini al posto del testo (vedi sopra).

bloggerperbabbei™ - 2008

titolo post - titolo blog

noreply@blogger.com (em) — Wed, 08 Oct 2008 22:11:00 +0000

Qualche buontempone che si interessa di SEO (Search Engine Optimization), di certo saprà che è possibile modificare il formato del testo visualizzato sulla barra del titolo del browser allo scopo di facilitarne la lettura da parte dei motori di ricerca. Preso atto che il titolo di pagina in blogger segue lo schema predefinito TITOLO BLOG - TITOLO POST, risulta evidente che, ad esempio in caso di post con titoli lunghi, le parole chiave del titolo stesso possono venire indicizzate in maniera poco efficace nei motori di ricerca.

E’ dunque consigliabile l'adozione di uno a scelta dei formati di seguito riportati.

TITOLO POST - TITOLO BLOG

Via bacheca > layout > modifica html [espandi i modelli widget] si trova [Ctrl+F] questa riga nel codice...

<title><data:blog.pageTitle/></title>

... e si sostituisce con:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

SOLO TITOLO POST

Via bacheca > layout > modifica html [espandi i modelli widget] si trova [Ctrl+F] questa riga nel codice...

<title><data:blog.pageTitle/></title>

... e si sostituisce con:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

bloggerperbabbei™ - 2008

rimuovere le icone screwdriver, wrench e pencil

noreply@blogger.com (em) — Sun, 05 Oct 2008 22:01:00 +0000

Qualcuno avrà ben notato che, una volta fatto login, sui blog di casa blogger compaiono alcune "strane" icone. Si tratta di attrezzi da lavoro per il blogger.
Ebbene: precisato che le orride icone sono visibili al solo amministratore del blog, e solamente durante l'accesso (log in) su blogger, potrebbero in taluni casi recare disturbo visivo.

Una è la matitina (pencil) che compare a piè di post: dalla pagina principale blog permette di accedere facilmente al singolo post per poterlo editare o modificare.
Il disturbo recato della pencil è invero minimo, ma si può facilmente rimuovere via bacheca > impostazioni > generale: alla domanda "Vuoi visualizzare Quick Edit nel tuo blog?" si risponde "No".
Non dovesse bastare è meglio assicurarsi anche che non ci sia segno di spunta nella casellina mostra quick edit [via: elementi pagina > post sul blog].

L’altra icona incriminata rappresenta l'incrocio tra cacciavite&chiave (screwdriver and wrench icons) e permette di accedere direttamente ai vari widget che corredano il blog, sempre allo scopo di modifiche e/o revisioni. Questa icona è effettivamente più invasiva alla vista:

Per rimuoverla [percorso: bacheca > layout > modifica html] si incolla nel codice dopo qualunque parentesi graffa chiusa } questo comando:

.quickedit {
display:none;
}

Consigliato a: esteti paranoici, blogger nevrotici, maniaci in genere.
Sconsigliato a: blog con troppi widget (quando sono molti, da dentro l’editor è difficile distinguerli tra loro e rintracciare quelli che si vogliono ispezionare o modificare).

bloggerperbabbei™ - 2008
FONTE

aggiungere una search box in blogger

noreply@blogger.com (em) — Thu, 02 Oct 2008 23:11:00 +0000

Una volta rimossa la Navbar di Blogger, che include anche la search box (casella di ricerca) cerca nel blog, può essere utile inserire nel proprio blog una casella simile, ma più personalizzabile, tipo:

BLOG

Percorso: bacheca > layout > elementi pagina > aggiungi un gadget… dove si preferisce fare apparire la casella di ricerca. Si seleziona html/javascript e si incolla:

<form id="searchthis" action=" INDIRIZZO URL BLOG/search" style="display:inline;" method="get">
<strong>BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/></form>

Si modifica il valore indirizzo url blog, inserendo l’indirizzo o la url del (proprio) blog.

Altri valori da modificare:
- blog si può inserire il titolo del blog, oppure altro testo… N.B. <strong>…</strong> applica al testo inserito lo stile grassetto, nel caso disturbasse si può eliminare…; lo stesso dicasi per il tag <br/> che crea un’interruzione di riga (anche qui: va valutato caso per caso se serve o meno…);
- maxlength="..." rappresenta il numero massimo di caratteri digitabili dall’utente nella casella di ricerca (255 va più che bene!);
- size="…" è la dimensione (width) della casella di ricerca: si va a gusto e a necessità;
- value="…" indica la scritta che si vuol fare comparire nel bottone di ricerca.

Volendo, è possibile attribuire all’oggetto (in questo caso una search box) un allineamento specifico, “racchiudendolo” tra due tag <p>:

<p align="valore">
<form id="searchthis" action=" INDIRIZZO URL BLOG/search" style="display:inline;" method="get">
<strong>BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/></form>
</p>

Con valore = left oppure center oppure right.

bloggerperbabbei™ - 2008

rimuovere la navbar da blogger

noreply@blogger.com (em) — Sun, 28 Sep 2008 15:41:00 +0000

Eliminare la fastidiosa (per alcuni) Navbar di blogger, che fa tanto modello precotto, è cosa facile: via bacheca > layout > modifica html [espandi i modelli widget] si trova [Ctrl+F] questa sezione del codice…

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Minima Style
Name: indormia 3C 2008
Created by: Blogger Team
Customized by: indormia.blogspot.com
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#dd9" value="#ffffff">
…

... si incolla la definizione riportata in rosso, e si ottiene qualcosa del genere...

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Minima Style
Name: indormia 3C 2008
Created by: Blogger Team
Customized by: indormia.blogspot.com
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#dd9" value="#ffffff">
…

anteprima > salva modello

Per ripristinare la Navbar (… ma chi può mai volerlo?) basta rimuovere la parte di codice in rosso.

bpb™ - 2008

kwout

noreply@blogger.com (em) — Wed, 09 Jul 2008 17:11:00 +0000

A brilliant way to quote

bpb™ - 2008