Blogger per i nulli: giugno 2009

Immagini differenti per ogni autore di articolo su blogger

Come si può vedere dallo screenshot qui sotto,l'immagine visualizzata accanto al titolo dipende a seconda di chi è l'autore dell'articolo.

Se volete scoprire come si può mettere un'immagine accanto all'articolo visitate questa pagina.

Esiste un metodo elaborato da EL Escaparate che sfrutta il JavaScript per questo scopo, tuttavia ho scoperto che esiste un'altro metodo moooolto più semplice che sfrutta i tag condizionali di Blogger.

Come si possono inserire immagini differenti per autori differenti su blogger?

Iniziamo, quindi:

1) layout->modifica HTML
2) selezionare "Espandi i modelli widget"
3) Cercate questa porzione di codice:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

dovrebbe essere qualcosa di questo tipo:

4) subito dopo la linea rossa, inserite il seguente codice:

<b:if cond='data:post.author == "AUTORE1"'>
<span class="author"><img src="IMAGE1_URL"/></span>
</b:if>

<b:if cond='data:post.author == "AUTORE2"'>
<span class="author"><img src="IMAGE2_URL"/></span>
</b:if>

Potete aggiungere più tag condizionali se il vostro blog è condivisa tra più di 2 membri.

TENETEVI IN MENTE CHE il codice è case sentitive. In questo caso, "autore1" non la stessa cosa che "AUTORE1". Il nome utente (autore) che bisogna inserire deve essere esattamente lo stesso che viene visualizzato nel profilo di Blogger. La dimensione ideale dell'immagine è di circa 30x30 - 50 x 50 pixel.

5) subito prima ]]</b:skin> inserite il seguente codice:

.author img{padding: 0; float: left; border: none; margin: 0 10px 10px 0;}

la proprietà float, cosi come la proprietà margin potrebbere essere cambiati a seconda di dove si desidera che l'immagine venga visualizzata.

6) DIVERTITEVI.

è SEMPLICISSIMOOOOOOOOOOOOOO

Commenti: 3 Continua...

la sexy social-bookmark per blogger versione italiana

Buona notizia per gli utenti blogger.com, ora si può aggiungere il segnalibro più sexy che esista (Sexy-bookmark wordpress ). seguendo questi semplici passaggi:

Il social bookmarking è un servizio basato sul web, dove vengono resi disponibili elenchi di segnalibri (bookmark) creati dagli utenti.

Questi elenchi sono liberamente consultabili e condivisibili con gli altri utenti appartenenti alla stessa comunità virtuale.(wikipedia)

nota: 1.QUESTA è L'UNICA VERSIONE CHE FUNZIONA!
2.Al posto di Sharing is sexy! c'è la versione Italiana ovvero Condividere è sexy! (piccolo dettaglio ma significativo ;) )

Ora, Iniziamo.
! Prima di modificare il modello, non dimenticate di fare il backup del modello e dei gadgets!
Layout->modificaHTML->Selezionate la voce "Espandi i modelli widget" e copiate il seguente codice subito prima </head>

Ora cercate la seguente riga di codice <data:post.body/> ed inserire il seguente codice come mostrato nell'immagine qui sotto:

Ricordatevi di cambiare l'indirizzo del FEED sostituendo DENVOIZER con il vostro id.
Per quanto riguarda la versione WordPress la potete trovare qui.
A questo punto Salvate il vostro template e godetevi la nuova "sexy-barra"!

Commenti: 0 Continua...

Google Advertising: AdManager e AdPlanner

Due strumenti per migliorare i servizi pubblicitari offerti da Google. Ad manager Ã¨ un gestore professionale di spazi pubblicitari; Ad planner Ã¨ un pianificatore di campagne in base all'audience del Web

Commenti: 1 Continua...

Inserire un pulsante "Torna su" FLUTTUANTE

"Torna su" è un pulsante o un link che manda il lettore in alto alla pagina una volta cliccato. Ciò aiuta i lettori a navigare meglio, supprattuto se si hanno pagine lunghe. Questo link si trova di solito nella parte inferiore della pagina, o nel piè di pagina.

Ciò che vi spiegherò oggi è leggermente diverso. La funzione è la stessa ma la posizione del link/pulsante è diversa. Come suggerisce il titolo, vi spieghero il modo che rendere questo pulsante "fluttuante o galleggiante" sul fondo dello schermo, rimane lì anche se si scorre la pagina; è sempre visibile al lettore. Faremo questo utilizzando solo un breve codice HTML.

Bisogna semplicemente inserire il seguente codice subito PRIMA il tag </body>.

Sostituite LinkPulsante con il link della foto che volete usare come pulsante.

Se preferite usare un link testuale piuttosto che un'immagine, usate questo codice:

<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Click to go to top">LinkText</a>

Potete modificare la posizione del pulsante/link semplicemente cambiando i seguenti attributi:

bottom:5px; left:5px;

nota: a quanto pare questo metodo presenta dei problemi con Internet Explorer. Sto cercando un codice in giro che possa risolvere questo problema ;)