25 febbraio 2009

64 commenti

Come inserire Google Translate Widget nel blog

Scrivo questo post per la mia amica VitaIE che più volte mi ha chiesto se fosse possibile inserire nel blog qualche widget che consentisse di tradurre il blog. Il suo infatti è multilingua!

Ed eccomi qui a scrivere questo post con le semplici operazioni da fare per ottenere questo widget:

Translate Italian to Greek Translate Italian to English Translate Italian to German Translate Italian to French Translate Greek to Italian

Come prima cosa bisogna accedere al proprio account Blogger, andare in Layout, cliccare su Aggiungi un gadget nella sidebar e inserire per ciascuna bandierina il seguente codice javascript:

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=it%7Cel&hl=it&ie=UTF8'); return false;" title="Translate Italian to Greek"><img border="0" alt="Translate Italian to Greek" src="http://www.iolecal.it/blog/posts/post065/greece.png" title="Translate Italian to Greek"/></a>

dove la sigla in rosso (it) indica la lingua della pagina mentre quella in blu (el) rappresenta la lingua in cui tradurre la pagina. La stringa in verde (Translate Italian to Greek) è semplicemente una descrizione.

Ed ecco le sigle di alcune delle lingue disponibili:
Arabic = ar; Bulgarian = bg; Croatian = hr; Czech = cs; Danish = da;
Dutch = nl; Finnish = fi; French = fr; German = de; Greek = el;
Italian = it; Norwegian = no; Polish = pl; Portuguese = pt;
Romanian = ro; Russian = ru; Spanish = es; Swedish = sv

Se volete aggiungere nel vostro blog questo widget basta copiare il seguente codice javascript:

Javascript Code
  • <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=it%7Cel&hl=it&ie=UTF8'); return false;" title="Translate Italian to Greek"><img border="0" alt="Translate Italian to Greek" src="http://www.iolecal.it/blog/posts/post065/greece.png" title="Translate Italian to Greek"/></a>
  • <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=it%7Cen&hl=it&ie=UTF8'); return false;" title="Translate Italian to English"><img border="0" alt="Translate Italian to English" src="http://www.iolecal.it/blog/posts/post065/england.png" title="Translate Italian to English"/></a>
  • <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=it%7Cde&hl=it&ie=UTF8'); return false;" title="Translate Italian to German"><img border="0" alt="Translate Italian to German" src="http://www.iolecal.it/blog/posts/post065/germany.png" title="Translate Italian to German"/></a>
  • <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=it%7Cfr&hl=it&ie=UTF8'); return false;" title="Translate Italian to French"><img border="0" alt="Translate Italian to French" src="http://www.iolecal.it/blog/posts/post065/france.png" title="Translate Italian to French"/></a>
  • <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=el%7Cit&hl=el&ie=UTF8'); return false;" title="Translate Greek to Italian"><img border="0" alt="Translate Greek to Italian" src="http://www.iolecal.it/blog/posts/post065/italy.png" title="Translate Greek to Italian"/></a>

Ovviamente potete aggiungere tutte le lingue che volete, io ho messo solo il greco, l'inglese, il francese e il tedesco e in più la traduzione dal greco all'italiano.

Altre bandierine sono disponibili in questo post

Come vedete il widget può anche essere inserito in un singolo post!



20 febbraio 2009

14 commenti

Crea il tuo tema personalizzato in GMail

Tempo fa GMail ha introdotto ben 31 temi per personalizzare la nostra casella di posta elettronica.
Ora è possibile scegliere la propria combinazione di colori e creare un proprio tema personalizzato.
Basta andare in Impostazioni -> Temi -> Scegli i colori che preferisci.
Vi apparirà un popup con il layout della casella di posta. Non vi resta che selezionare per ogni sezione il colore che preferite tra quelli disponibili o aggiungerne uno nuovo cliccando sul pulsante "+", salvare e chiudere il popup.

Ed ecco la nuova veste grafica della mia inbox:



16 febbraio 2009

20 commenti

Script per visualizzare l'anteprima delle immagini nel blog

La scorsa settimana ho pubblicato un post su Lytebox, un utilissimo script per visualizzare in modo professionale le immagini nel proprio blog.

Oggi invece voglio segnalarvi uno script che permette di visualizzare l'anteprima delle immagini al passaggio del mouse sopra ciascuna immagine.

Per utilizzare questo script, basta aggiungere nel proprio blog prima del tag </head> questo codice:

Javascript Code
  • <script language='javascript' src='http://digilander.libero.it/iolecalblogspot/script/boxover.js' type='text/javascript'/>
  • <link href='http://digilander.libero.it/iolecalblogspot/script/boxover.css' rel='stylesheet' type='text/css'/>

Per vedere lo script in funzione basta passare il mouse sulle immagini. Come al solito le foto utilizzate sono quelle del mio amico Amsis:

Ninfee Aglio Ninfa Ninfea Gazania

Lo script può essere anche utilizzato per visualizzare un tooltip al passaggio del mouse su un testo presente nel blog, come ad esempio questo!!!

Per visualizzare l'anteprima di un'immagine o il tooltip su di un testo basta scrivere:

Javascript Code: Anteprima Immagine
  • <img src="URL IMMAGINE" title="cssbody=[tooltipbody] cssheader=[tooltipheader] header=[TESTO HEADER] body=[<img src='URL IMMAGINE ANTEPRIMA'/>] offsety=[-30]" />

Javascript Code: Tooltip
  • <a href="LINK" title="cssbody=[tooltipbody] cssheader=[tooltipheader] header=[TESTO HEADER] body=[TESTO BODY] offsety=[-30]">Link</a>


11 febbraio 2009

9 commenti

Lytebox: javascript per la visualizzazione delle immagini

Poco tempo fa Amsis ha pubblicato un post su Lightbox 2:

Lightbox 2, con l'ausilio di Prototype Framework e la libreria degli effetti di script.aculo.us, permette di visualizzare in maniera professionale le immagini su una pagina web. Lo trovo stilisticamente molto accattivante ed offre il vantaggio di poter aprire immagini di ampie dimensioni sovrapponendole alla pagina, senza interferire con il layout ed avvantaggiando la navigabilità.

Ho provato questo script su diversi browser e mi sono accorta che su Internet Explorer bloccava l'apertura della pagina. Come ha già detto Amsis, lo script funziona anche su Internet Explorer ma evidentemente va in conflitto con qualche script presente nel blog. Ho provato anch'io a inserirlo nel mio blog è ho avuto lo stesso problema.

Sul sito di Lightbox2, sono consigliati altri due script: TickBox e Lytebox.

Dei due preferisco Lytebox: ha gli stessi effetti grafici di Lightbox2 e in più consente di visualizzare uno slidehow con le immagini presenti in una pagina web e di scegliere un tema tra cinque disponibili (grigio, blu, giallo, rosso e verde), in più altre funzioni che ancora devo approfondire.

Come si usa Lytebox??? Basta andare sul sito, scaricate il Lytebox v3.22 e seguire le istruzioni per visualizzare una singola immagine o più immagini oppure uno slideshow.

Ecco di seguito un esempio di cinque immagini visualizzate con Lytebox:


e di uno slideshow con cinque immagini:




Ringrazio Amsis per queste bellissime foto ;)

Per saperne di più su come usare Lytebox nel blog...


9 febbraio 2009

11 commenti

Come copiare facilmente il codice javascript e css dal mio blog

Qualche giorno fa ho pubblicato un post su Come inserire il numero di pagine in Blogger contenente il codice javascript e css da utilizzare per far apparire nel vostro blog il numero di pagine per una facile navigazione.
Per evitare di scrivere un post chilometrico incollando i due listati di codice, ho preferito creare due file, caricarli su Yahoo e pubblicare solo i link dei file.

Il post appariva in questo modo:

...basta inserire il codice css che trovate in questo file...

In molti però mi avete contattato per segnalarmi che non riuscivate ad aprire i file in quanto Yahoo era temporaneamente non disponbile. Temporaneamente si fa per dire... è stato così tutta la settimana!

Ho pensato allora di inserire i due listati di codice all'interno della pagina, in questo modo:

.showpageArea { margin-top: 12px; margin-bottom: 10px; }
.showpageArea a { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #9B0021 solid; color: #9B0021; padding: 3px; margin-left: 5px; background: #F9D6DD;}
.showpageArea a:hover { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #F9D6DD solid; color: #F9D6DD; padding: 3px; margin-left: 5px; background: #9B0021; }
.showpageNum a { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #9B0021 solid; color: #9B0021; padding: 3px; margin-left: 5px; background: #F9D6DD; }
.showpageNum a:hover { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #F9D6DD solid; color: #F9D6DD; padding: 3px; margin-left: 5px; background: #9B0021; }
.showpagePoint { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #F9D6DD solid; color: #F9D6DD; padding: 3px; margin-left: 5px; background: #9B0021; }
.showpageTot { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; color: white; }

Questa soluzione era solo provvisoria: ho notato che non era molto semplice copiare il codice. Ecco qual è quella che adotterò nei prossimi post e che rimpiazzerà quella dei post già pubblicati: ogni listato di codice (javascript, css, ...) presente nella pagina potrà essere facilmente copiato dal popup che si apre cliccando sul pulsante .

Css Code
  • .showpageArea {
  • margin-top: 12px;
  • margin-bottom: 10px;
  • }
  • .showpageArea a {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #9B0021 solid;
  • color: #9B0021;
  • padding: 3px;
  • margin-left: 5px;
  • background: #F9D6DD;
  • }
  • .showpageArea a:hover {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #F9D6DD solid;
  • color: #F9D6DD;
  • padding: 3px;
  • margin-left: 5px;
  • background: #9B0021;
  • }
  • .showpageNum a {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #9B0021 solid;
  • color: #9B0021;
  • padding: 3px;
  • margin-left: 5px;
  • background: #F9D6DD;
  • }
  • .showpageNum a:hover {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #F9D6DD solid;
  • color: #F9D6DD;
  • padding: 3px;
  • margin-left: 5px;
  • background: #9B0021;
  • }
  • .showpagePoint {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #F9D6DD solid;
  • color: #F9D6DD;
  • padding: 3px;
  • margin-left: 5px;
  • background: #9B0021;
  • }
  • .showpageTot {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • color: white;
  • }

Javascript Code
  • <script type="text/javascript">
  • function showpageCount(json) {
  • var thisUrl = location.href;
  • var htmlMap = new Array();
  • var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.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>

Come al solito si accettano consigli e suggerimenti!


4 febbraio 2009

14 commenti

Post più cliccati sul blog

Qualche giorno fa un mio lettore mi ha chiesto se conoscevo qualche script da inserire nel blog per visualizzare i post più cliccati.

Dopo una breve ricerca su internet ho trovato questo codice:

Javascript Code
  • <script type="text/javascript">
  • function pipeCallback(obj) {
  • document.write('<ol style="text-transform: capitalize;">');
  • var i;
  • for (i = 0; i < obj.count ; i++)
  • {
  • var href = "'" + obj.value.items[i].link + "'";
  • var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
  • document.write(item);
  • }
  • document.write('</ol>');
  • }
  • </script>
  • <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2Fnomeblog.blogspot.com&num=5" type="text/javascript"></script>
  • <noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Hacks</a></noscript>

che in realtà consente di elencare i post che hanno avuto più commenti, non proprio quelli più visitati.

Nel codice bisogna cambiare soltanto due cose:
nomeblog.blogspot.com: l'indirizzo del vostro blog
num=5: il numero di post da visualizzare

Anche in questo caso, come per il post precedente, se il vostro blog su Blogger non termina con ".blogspot.com" ma con ".com" allora dovrete sostituire nomeblog.blogspot.com con www.nomeblog.com.

Nota
Questo codice non è più funzionante.
Ho realizzato quindi un widget che potete trovare qui


Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy