Cercando di dare ad un'immagine angoli arrotondati in Photoshop o usando i CSS è stata una delle cose più difficili per me quando cercavo di abbellire l'aspetto di un mio blog o sito. Cercavo sempre di creare quelle curve ma mai uscivano come speravo!.
RoundPic è un servizio gratuito che ha risolto questo problema! Usando RoundPic potete prendere una qualsiasi immagine e darle angoli arrotondati istantaneamente! Non solo, lo sfondo è trasparente, quindi potete metterela in qualsiasi sfondo senza dover modificarla ulteriormente.
Ecco a voi una prova:
Ecco com'era la mia immagine
Ed ecco com'è diventata:
Facile no?!
RoundPic non si limita a darvi solo questo; Con l'aiuto di una finestrina in alto a destra potrete scegliere ad esempio quali angoli devono essere arrotondati e quali no! la larghezza e l'altezza dell'immagine, la dimensione dell'angolo arrotondato ed anche il colore di sfondo se non si desidera averlo trasparente.
Dal momento che ho trovato questo sito non perdo più tempo cercando di usare codici CSS , JavaScript oppure con Photoshop. E' solo una perdita di tempo dal momento in cui questo sito può fare tutto per voi! Enjoy!<
Oggi vi presento un widget semplicissimo da usare che vi permettera di visualizzare le statistiche del vostro blog: il numero totale degli articoli ed i commenti presenti nel proprio blog.
Andate su Layout, aggiungete un nuovo widget di tipo HTML/JavaScript e copiate/incollate il seguente codice:
<script style="text/javascript">
function numberOfPosts(json) {
document.write('Articoli in questo blog: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Commenti in questo blog: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="blue"><script src="http://bloggerperinulli.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://bloggerperinulli.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>
function numberOfPosts(json) {
document.write('Articoli in questo blog: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Commenti in questo blog: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="blue"><script src="http://bloggerperinulli.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://bloggerperinulli.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>
A questo punto sostituite L'URL in rosso con l'indirizzo del vostro blog.
Per personalizzare questo widget potete modificare le righe in blu.
Finalmente ho trovato una soluzione al misterioso problema della visualizzazione degli avatar nei commenti blogger.
Come ben sapete, la visualizzazione degli avatar su blogger è una funzionalità gia integrata per default nelle impostazioni però essa non funziona, eh si...non funziona. Ma ora state tranquilli :) , ecco a voi la soluzione!
Prima di tutto andate su impostazioni -> commenti... scegliete: Mostrare immagini profilo nei commenti? SI
A questo punto andate su Layout->Modifica HTML , Fate il backup del vostro Layout-> selezionate Espandi i modelli widget.
Ora cercate la seguente riga di codice
<dl id='comments-block'>
Sostituitela con la seguente:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
Poco in basso, cercate la seguente:
<a expr:name='data:comment.anchorName'/>
Sostituitelo con:
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>
Questo hack vi permetterà di visualizzare gli avatar dei commentatori in alto a sinistra come è mostrato in quest'immagine:
L'ultima cosa da fare è quella di aggiungere questo codice CSS che serve anche per visualizzare un avatar per i commentatori anonimi subito prima di </b:skin> ( Grazie ad Albania di averci segnalato la mancaza di questo codice)
.avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHRwhU9ZWk_DcKJnFSRrMhgL1raer5gKY52NyiPyGuzyADqWPNsISpzlFV1skxf0JSClUjunhVw-8x3O9lGhKW6VKpNTIrKmxlaqaI6c5QwWcRLzKgmNUc6b7ow2dTMwLjH0WhTQrkA/s400/default.gif); width:35px;height:35px; }
.avatar-image-container img { border:none;}
.avatar-image-container img { border:none;}
E' un sistema di commenti simile a quelli usati dai blog caricati sulla piattaforma Wordpress.
Spero che vi sia tutto chiaro, e non esitate di fare domande ;)
In quest'articolo vi spiego il modo in cui si può personalizzare la visualizzazione dei codici all'interno dei vostri articoli. Esistono vari metodi, oggi mi limitero' a spiegare la versione SyntaxHighlighter che vi permetterà di avere una cosa di questo tipo:
(questo codice è solo un esempio, non ha niente a che fare con questo hack).
Ecco a voi i passi da seguire:
1) Prima di tutto vi consiglio di salvare il vostro codice HTML.
2) Inserite il seguente codice subito prima il tag </head>
<link href="'http://sites.google.com/site/simoxisite/syntaxhighlighter/SyntaxHighlighter.css'" rel="'stylesheet'" type="'text/css'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shCore.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCpp.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCSharp.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCss.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushDelphi.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJava.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJScript.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPhp.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPython.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushSql.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushVb.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushXml.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushRuby.js'" type="'text/javascript'/">
2) Ora subito dopo </body> , incollate il seguente codice:
<script language="'javascript'">
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>
A questo punto salvate il vostro template.
Per poter applicare questo Hack all'interno dei vostri articoli bisogna usare il seguento codice all'interno di quest'ultimi:
<pre name="code" class="css">
Inserire il codice qui
</pre>
Oppure
<textarea name="code" class="css">
Inserire il codice qui
</textarea>
Usando pre bisogna convertire i tags <> in & lt; e & gt; (senza lo spazio tra & e g )
Tutto chiaro? :)
oggi vi segnalo un nuovo set di icone da scaricare gratuitamente.
20 icone creare principalmente per le applicazioni web: Grafici, Profilo, Ricerca, Cggiungi, Cancella, Email, Stampa ecc...). queste icone sono di tre dimensioni; 48x48 px, 32x32 px, e 24x24 px. Tutte in formato PNG con sfondo trasparente.
Scarica il set: Download
License: Creative Commons 3.0 License
Dopo aver spiegato nella prima parte di questo tutorial il modo in cui si proceda per poter lavorare con i condition-tags su blogger per gestire la visualizzazione dei widgets ( in alcune pagine si in altre no ) in quest'articolo cerchero' di approfondire un può questo discorso.
Abbiamo detto che per riferirsi alla home page si usa il seguente segmento di codice:
per la pagina archivio
L'idea mi è venuta quando cercavo di eliminare la notifica "Visualizzazione post con etichetta .... Mostra tutti i post" (come mostrata nell'imagine sotto) che viene fuori ogni volta che si clicca su qualche etichetta.
il metodo è SEMPLICISSIMO!!!!!
Il codice da usare è il seguente:
<b:if cond='data:navMessage'>
(cosa vuoi visualizzare nella pagina "etichette" )
</b:if>
Tutto qua!!!!!! :D
Abbiamo detto che per riferirsi alla home page si usa il seguente segmento di codice:
<b:if cond='data:blog.page.type == "index"'>
Ciao mondo
</b:if>
Ciao mondo
</b:if>
per la pagina archivio
<b:if cond='data:blog.page.type == "archive"'>
Ciao mondo
</b:if>
e per la pagina Item invece : (l'articolo stesso)Ciao mondo
</b:if>
<b:if cond='data:blog.page.type == "item"'>
Ciao mondo
</b:if>
Adesso vediamo il caso della pagina Label ovvero la pagina delle etichette. Ho cercato veramente tanto sperando di trovare un metodo per risolvere questo "mistero" perchè, come alcuni di voi avranno potuto constattare, se uso lo stesso segmento di codice usato sopra limitandomi a modificare il ...page.type == "Label"'> non funziona niente.Ciao mondo
</b:if>
Ecco allora che mi è venuta un idea quando cercavo di eliminare la notifica "Visualizzazione post con etichetta .... Mostra tutti i post" (come mostrata nell'imagine sotto) che viene fuori ogni volta che si clicca su qualche etichetta. |  |
L'idea mi è venuta quando cercavo di eliminare la notifica "Visualizzazione post con etichetta .... Mostra tutti i post" (come mostrata nell'imagine sotto) che viene fuori ogni volta che si clicca su qualche etichetta.
il metodo è SEMPLICISSIMO!!!!!
Il codice da usare è il seguente:
<b:if cond='data:navMessage'>
(cosa vuoi visualizzare nella pagina "etichette" )
</b:if>
Tutto qua!!!!!! :D
Iscriviti a:
Post (Atom)
Post
