Probabilmente la maggior parte di voi conoscerà questo servizio, che permette di conoscere in tempo reale le facce di chi sta visitando il nostro blog e creare quindi piccole community intorno ad esso. Personalmente lo trovo un ottimo servizio che mi ha fatto conoscere blog di cui ignoravo l’esistenza, e con cui ho stretto legami.
Nel post non vorrei dilungarmi sui benefici dell’utilizzo di tale utility bensì spiegare come adattare questo widget al vostro template utilizzando i fogli di stile: visto e considerato che lo stile di default non permette grandi configurazioni se non giocando con piccole scelte cromatiche.
La mia esigenza è nata in seno alla ristrutturazione grafica fatta intorno al mio blog negli ultimi tempi, e documentandomi in giro per la rete ho trovato diverse informazioni utili e non documentate nell’helpdesk di Mybloglog.
La struttura
Il widget è basato su tabelle, una scelta forse anacronistica, di seguito un estratto di come il codice è strutturato:
<table cellspacing='0' cellpadding='0' id='MBL_COMM'>
<tr><td colspan='2' class='mbl_h'>Recent Readers</td></tr>
<tr id='tr1'>
<td id='tdd11' class='mbl_img'><img /></td>
<td id='tdd21' class='mbl_mem'><a href='#></a></td>
</tr>
</table>
Lo schema è molto facile, c’è una colonna header con il titolo (seconda riga), e le successive colonne con due celle rispettivamente per l’avatar e il link al profilo su Mybloglog. Esiste anche una colonna visibile solo ai non membri con link e riferimento per la registrazione alla Community.
Le classi CSS
Per modificare l’aspetto attraverso i fogli di stile queste sono tutte le classi che abbiamo a disposizione:
- body .widget_mybloglog
Questo è il wrapper del widget, utilizzatela per impostarne la larghezza
body table#MBL_COMM
La tabella principale del widget, qui puoi settare di nuovo la larghezza ed il bordo esterno
body table#MBL_COMM th.mbl_h
La colonna del titolo, quella che contiene per intenderci il “Recent Readers”
body table#MBL_COMM td.mbl_img
La cella contenente l’avatar
body table#MBL_COMM td.mbl_mem
La cella contentente il link al profilo Mybloglog
body table#MBL_COMM td.mbl_join_img
La cella contenente l’immagine che appare ai non membri quando visitano la pagina
body table#MBL_COMM td.mbl_join
Il testo che appare ai non membri di MyBlogLog
body table#MBL_COMM td.mbl_fo_hidden
Le ultime due colonne della tabella contenenti i riferimenti, ovvero: “View Readers Community” e “Provided bu MyBlogLog”
Basterà inserire le opportune dichiarazioni all’interno del vostro foglio di stile per adattarlo come volete al template.
Come ho modificato il mio widget?
Semplice, ed i passaggi sono brevi.
Sono andato sul mio profilo Mybloglog, ho raggiunto la pagina dei Widget e ho impostato:
- larghezza di 995 pixel (in base al mio template)
- Half size per le immagini (immagini piccole)
- 2 Colonne
- Nessun titolo
Il mio intento era quello di avere solamente gli avatar, senza nessun testo evitando anche il testo che appare per gli utenti non iscritti al servizio, ed ho risolto agendo in questo modo sul foglio di stile:
#mybloglog {
border-bottom:5px solid #FFB03B;
margin-bottom:0px;
margin-top:4px;
padding-bottom:4px;
text-align:center;
padding-left:8px;
}
body table#MBL_COMM {
background:white repeat-x scroll 0%;
margin:0pt auto;
}
body table#MBL_COMM td.mbl_fo_hidden {
display:none;
}
body table#MBL_COMM td.mbl_join_img {
display:none;
}
body table#MBL_COMM td.mbl_join {
display:none;
}
body table#MBL_COMM #tr0 {
display:none;
}Il risultato è quello che vedete lì in alto proprio sull’header, forse leggermente invasivo ma è esattamente quello che avevo intenzione di fare.
Spero che questi piccoli e semplici consigli vi siano utili, buona customizzazione (che brutta parola)
Benvenuto nel mio blog personale, un mio piccolo spazio virtuale dove scrivo di quello che mi piace, e di quello che trovo interessante navigando nella rete.
ecco per esempio questa procedura della costumizzazione del mybloglog mi è molto piaciuta perchè l’ho vista sempre più spesso in moltissimi blog che vedo in questo momento in giro…
bene,!
p.s (il tuo blog è molto bello ed ordinato ) Bel lavoro.
Thanks for the link! Your MyBlogLog Widget looks great, I really like what you have done with it.
Troppo bella la tua implementazione!
Occhio che però a pianeta 1024×800 pixel mi si vede lo scroll orizzontale su firefox eh;)
@Stefigno
Sono contento che questo micro howto ti sia utile.
@Phil
Welcome
Thank you for the precious tips on costumizing MyBlogLog widget.
@Traffik
Grazie. Il template è fissato a 995px per quanto riguarda la larghezza purtroppo scrollerà sempre in orizzontale a quelle risoluzioni.
Ti basterebbe ridurre a 980-990 circa
Le risoluzioni con 1024 di larghezza sono ancora tra quelle più diffuse è un peccato disprezzarle 
ce lo appoggio al traffik
hi!
mi è sempre piaciuto lo sfondo di visi…
e se lo farei a 12 righe? sempre 980 ?
ora vado a provare,che non sono mai riuscita a farmelo a mio piacimento…
XOXO;D
Ottimo tip
@Koolinus
Ehi però usate precauzioni
@Hanna
Seguendo questo tutorial puoi modificarlo come meglio credi, se hai bisogno di aiuto contattami via mail.
@Soter
Grassie caro
S M !
alla fine dopo diverse misure ho adattato a 720 il width e 8 righe,mi piace il collage,anche perche ho fatto nero lo sfondo e le scritte,così non mi rompono con la pubblicità…solo che mozilla lo visualizza bene ma in IE si vede sto schifo di bianco…come lo hai risolto?
cmq-grazie!
baci
@Hanna
Se mi dai un link dove vedere questa customizzazione posso darti una mano, le uniche modifiche che ho fatto le ho postate nell’articolo.
S.M.
ho visto 4 visite oggi provenienti dal tuo blog,credevo fossi tu a vedere la mia creazione…
bene,
il vidget si trova molto in basso nella home del mio blog,e si vede malissimo in explorer,
da te non si vede sta striscia bianca..
http://www.philohanna.blogspot.com
@Hanna
Ad occhio il codice mi sembra giusto, bisognerebbe andare a cercare magagne nel codice, che mi sembra oltretutto molto disordinato
Poi, ti do un consiglio, evita di usare IE e sbattitene dei problemi di rendering, anche il miglior sito ha problemi con quel “browser”, usa altro, ci sono grandi alternative.
Ste
S.M.
lo so, il codice l’ho corretto io come piaceva a me…non uso mai IE solo che guardando le statistiche ho visto un sacco di visitatori che lo usano,specialmente in altri paesi,
cmq ti ringrazio molto,era pezzo che non riuscivo ad aggiustarlo,
non ti aggiungo tipico saluto di simpatia di blogger dei due sessi che senno’…hai letto il casino virtuale sul mio blog,no?
He nice widget “toolbox” customizer (I can understand perfectly even if it is in Italian) THNX
@Wilgengebroed
You are welcome