La camera dei casino online blog: maggio 2009

Aggiungere una sezione inferiore al blog

Finalmente ho trovato il tempo di scrivere un articolo particolarmente interessante.

Dopo le innumerevoli richieste da parte vostra, ho deciso di pubblicare una guida su come aggiungere una sezione inferiore al blog.

Per sezione inferiore del blog, intendo il contenitore (per chiamarlo così) che si trova a fine pagina e può contenere 3 elementi a piacere.

Cominciamo col dire che quello proposto è solo un elemento base, modificabile a piacere.

Come prima operazione, rechiamoci in Layout/Modifica HTML ed eseguiamo, per precauzione, il backup del nostro modello.

Quindi ricerchiamo la stringa <b:skin><![CDATA[/ e subito dopo inseriamo questo codice CSS:

#front-popular {

font-size:0.7em;

color:#fff;

width: 940px;

background:#2c2c2c url(http://img211.imageshack.us/img211/4930/bottombar.png) bottom no-repeat;

margin: 0 auto;

padding:10px;

}



#recentpost, #mostcommented {

width:280px;

float:left;

padding:10px;

border:1px solid #fff;

}



#mostcommented {

margin-left:17px;

}



#recent_comments {

width:280px;

float:right;

padding:10px;

border:1px solid #fff;

}



#recentpost a, #mostcommented a, #recent_comments a {

color:#fff;

}



#recentpost ul, #mostcommented ul, #recent_comments ul {

margin-top:5px;

}



#recentpost ul li, #mostcommented ul li, #recent_comments ul li {

list-style:none;

border-top:1px dotted #fff;

padding:5px;

display:block;

}



#recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul li:hover {

background:#3C78A7;

color:#fff;

}



#recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child {

border-top:0px dotted #fff;

}





#footer {

margin: 0 auto;

width: 960px;

font-size:0.6em;

padding-top:10px;

padding-bottom:10px;

}





/* Float Properties*/



.clearfloat:after {

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}



.clearfloat {

display: inline-block;

}





/* Hides from IE-mac \*/

* html .clearfloat {

height:1%;

}



*+html .clearfloat {

height:1%;

}



.clearfloat {

display:block;

}

Inserito il codice, scorriamo fino alla fine del modello e ricerchiamo il testo </body>.

Facendo particolare attenzione, incolliamo questo codice HTML subito prima:

<div class='clearfloat' id='front-popular'>



<div class='clearfloat' id='recentpost'>

<b:section class='extra-bottom' id='extra-bottom1' preferred='yes' showaddelement='yes'>

<b:widget id='Text22' locked='false' title='Aggiungi un elemento' type='Text'/>

</b:section>

</div>



<div class='clearfloat' id='mostcommented'>

<b:section class='extra-bottom' id='extra-bottom3' preferred='yes' showaddelement='yes'>

<b:widget id='Text23' locked='false' title='Aggiungi un elemento 2' type='Text'/>

</b:section>

</div>



<div class='clearfloat' id='recent_comments'>

<b:section class='extra-bottom' id='extra-bottom2' preferred='yes' showaddelement='yes'>

<b:widget id='Text24' locked='false' title='Aggiungi un elemento 3' type='Text'/>

</b:section>

</div>



</div>

Salviamo il modello e avremo così inserito una sezione inferiore nel blog.

Tendo a precisare che il modello proposto è quello ufficiale della camera dei blog. Per qualsiasi modifica, basta editare il codice CSS proposto precedentemente.

E' inoltre possibile inserirvi qualsiasi elemento, semplicemente andando in Layout\Elementi pagina.

Aspetto con ansia di sapere cosa ne pensate!

Problema con lo script dei post espandibili

Grazie ad una segnalazione di Viviana ho l'obbligo di aggiornarvi sui malfunzionamenti che da qualche giorno affliggono lo script Creare post espandibili.

A causa della rimozione del file

http://www.anniyalogam.com/widgets/hackosphere.js

dal server, lo script non risulta più funzionante per tutti coloro che utilizzavano questo link.

Per questo motivo, mi sono preso la briga di trasferire questo file su un'altro server e di aggiornare il vecchio link con

http://kamyxxii.altervista.org/perblog/hackosphere.js

Per aggiornare lo script, ci basterà quindi modificare

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />

con

<script type='text/javascript' src='http://kamyxxii.altervista.org/perblog/hackosphere.js' />

Vincere un dominio personalizzato

Cari visitatori, qualche settimana fa vi ho presentato l'apertura del Blog Awards 2009. Oggi voglio annunciarvi un'importante novità!

Finalmente è stato deciso il premio da assegnare al primo classificato. Si tratta di un dominio personalizzato che avrà validità per tutto l'anno.

Cosa aspettate? Correte ad iscrivervi se non l'avete ancora fatto e fatevi votare per aumentare la vostra posizione in classifica!

Le iscrizioni saranno chiuse entro la metà di Novembre, dopodichè si procederà alla premiazione del primo classificato.

In bocca al lupo a tutti i partecipanti!

Maggiori informazioni sono presenti sul sito ufficiale.

Creare un menu jQuery per blogger

Finalmente anche noi, fedelissimi utenti di Blogger, potremo usufruire di un menu realizzato in jQuery.

Eh si, avete capito bene. Ora anche Blogger, come Wordpress e Joomla, potrà usufruire di questa caratteristica.

Non ci credete? Eccovi proposto un esempio!

(Qualora non venga visualizzato correttamente, visitate questa pagina)

Bello vero? Niente paura, da oggi anche voi potrete utilizzarlo!

Per prima cosa rechiamoci in Layout/Modifica HTML ed eseguiamo, per precauzione, il backup del nostro modello.

Ricerchiamo la stringa <b:skin><![CDATA[/* e subito dopo facciamo il copia ed incolla di questo codice CSS.

.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }

#outerContainer { width:542px; height:202px; margin:auto; position:relative; }

#imageScroller { width:542px; height:202px; position:relative; background:#000000 url(http://img34.imageshack.us/img34/593/imagescrollerbg.png) no-repeat; }

#viewer { width:522px; height:182px; overflow:hidden; margin:auto; position:relative; top:10px; }

#imageScroller a:active, #imageScroller a:visited { color:#000000; }

#imageScroller a img { border:0; }

#controls { width:534px; height:47px; background:url(http://img35.imageshack.us/img35/1139/controlsbg.png) no-repeat; position:absolute; top:4px; left:4px; z-index:10; }

#controls a { width:37px; height:35px; position:absolute; top:3px; }

#controls a:active, #controls a:visited { color:#0d0d0d; }

#title { color:#ffffff; font-family:arial; font-size:100%; font-weight:bold; width:100%; text-align:center; margin-top:10px; }

#rtl { background:url(http://img31.imageshack.us/img31/4483/rtl.png) no-repeat; left:100px; }

#rtl:hover { background:url(http://img30.imageshack.us/img30/9482/rtlover.png) no-repeat; left:99px; }

#ltr { background:url(http://img33.imageshack.us/img33/4863/ltr.png) no-repeat; right:100px; }

#ltr:hover { background:url(http://img32.imageshack.us/img32/8273/ltrover.png) no-repeat; }

Al termine delle modifiche, salviamo il modello.

Ora rechiamoci in Layout/Elementi pagina e, cliccando su Aggiungi un Gadget, selezioniamo HTML/JavaScript.

Verrà così aperta una finestra popup. Inseriamo un titolo, selezioniamo questo codice HTML e inseriamolo al suo interno.

<div id="outerContainer">

<div id="imageScroller">

<div id="viewer" class="js-disabled">

<a class="wrapper" href="http://www.lacameradeiblog.com" title="La camera dei blog"><img class="logo" id="lacameradeiblog" src="http://img32.imageshack.us/img32/2702/lacameradeiblog.jpg" alt="La camera dei blog"></a>

<a class="wrapper" href="http://www.ilsitoblu.com" title="Il sito blu"><img class="logo" id="ilsitoblu" src="http://img33.imageshack.us/img33/5119/ilsitoblu.jpg" alt="Il sito blu"></a>

<a class="wrapper" href="http://www.apple.com" title="Apple"><img class="logo" id="apple" src="http://img35.imageshack.us/img35/3263/applet.jpg" alt="Apple"></a>

<a class="wrapper" href="http://mozilla-europe.org/en/firefox" title="Firefox"><img class="logo" id="firefox" src="http://img34.imageshack.us/img34/2369/firefoxf.jpg" alt="Firefox"></a>

<a class="wrapper" href="http://twitter.com" title="Twitter"><img class="logo" id="twitter" src="http://img31.imageshack.us/img31/270/twitteri.jpg" alt="Twitter"></a>

</div>

</div>

<div align="center" style="font-size:14px"><a href="http://www.lacameradeiblog.com/2009/05/creare-un-menu-jquery-per-blogger.html">Preleva</a></div>

</div>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="http://kamyxxii.altervista.org/perblog/menu.js"></script>

Concludiamo la nostra azione cliccando su Salva.

Ci rimarrà quindi da compiere un'ultima operazione: cambiare le immagini e i link delle icone del menu.

Per far ciò, basterà editare queste righe, modificando il valore href per il link, src per l'immagine, title per il titolo del collegamento, id per l'id del collegamento e alt per il titolo dell'immagine.

<a class="wrapper" href="http://www.lacameradeiblog.com" title="La camera dei blog"><img class="logo" id="lacameradeiblog" src="http://img32.imageshack.us/img32/2702/lacameradeiblog.jpg" alt="La camera dei blog"></a>

Spero di essere stato abbastanza chiaro... se così non fosse, non esitate a lasciare commenti!

Creare una finestra pop-up in blogger

Creare un pop-up significa aprire una nuova finestra del browser contenente una pagina o un determinato contenuto.

Per farla breve, vengono definite pop-up tutte le finestre pubblicitarie che sbucano all'improvviso mentre stiamo navigando su determinati siti web o, le finestre che si aprono quando clicchiamo su degli appositi link.

Il linguaggio di programmazione usato per la creazione di queste particolari finestre è il famosissimo JavaScript.

Fatta questa piccola introduzione, passiamo a quello che è il corpo di quet'articolo, ovvero la creazione di una finestra pop-up in blogger.

Ciò che ci accingiamo a creare, è una cosa ben diversa dalle varie pubblicità che sbucano all'improvviso.

La nostra infatti, si aprirà solo quando uno dei nostri utenti avrà deciso di cliccare su un determinato link.

Provate a cliccare su questo link per capire di cosa stiamo parlando realmente. Dovrebbe aprirsi una finestrina di dimensioni 300x300 contenente il logo della camera dei blog. Questa è la conosciutissima comparsa di un pop-up.

La creazione di una finestra pop-up non è particolarmente difficile. Basta seguire alcuni semplici accorgimenti.

Per prima cosa rechiamoci in Layout/Modifica HTML ed eseguiamo, per precauzione, il backup del nostro modello.

Fatto il backup, ricerchiamo la stringa </head> e inseriamo questo codice subito prima:

<script>

function openPopup(divId,W,H) {

if(W == undefined || H == undefined) {

W=1024;

H=768;

}

var html = document.getElementById(divId).innerHTML;

var newWindow = window.open(&quot;&quot;,&quot;&quot;,&quot;top=100,left=200,width=&quot; +W+&quot;,height=&quot;+H+&quot;,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no&quot;);

newWindow.document.open();

newWindow.document.write(html);

newWindow.document.close();

}

</script>

Terminate le modifiche salviamo il modello.

Avremo così richiamato il codice che ci consentirà di integrare dei pop-up nel nostro blog.

Successivamente ci resterà da vedere come inserire una di queste finestre all'interno di un articolo o widget di blogger.

Non c'è da preoccuparsi, è un'operazione semplicissima. Basta far uso di questa riga di codice:

<a onclick="openPopup('pop-up','200','300')">link</a>

Per definire il contenuto di questo pop-up, basterà creare un <div></div> con id=pop-up come nell'esempio qui riportato:

<div id="pop-up" style="background: #000000; text-align: center;"><img src="http://www.ilsitoblu.com/lacameradeiblog/immagini/logo.png"/></div>

I valori 200 e 300 indicano le dimensioni della nostra finestra. Possono quindi essere modificati a piacimento, mentre se lasciati vuoti, assumeranno i valori 1024x768.

Fatemi sapere qualora riscontriate dei problemi!

Hosting gratuito per java script

Oggi ho deciso di presentarvi un metodo per hostare gratuitamente dei files JavaScript.

Per far ciò utilizzeremo il famosissimo Fileden , un free hosting molto affidabile.

Premettendo che questo servizio non permette di hostare files JavaScript, ci serviremo di un piccolo trucchetto per aggirare l'ostacolo.

Innanzitutto scegliamo il file JavaScript da hostare. Quindi, prima di farne l'upload sul server, rinominiamolo cambiando l'estensione da .js a .j

Rechiamoci su Fileden e dopo esserci registrati selezioniamo Upload.

Scegliamo il file JavaScript da caricare (con l'estensione modificata) e iniziamo la procedure di upload.

Al termine otterremo il link diretto al file e potremo utilizzarlo all'interno del nostro blog.

Qualora questa soluzione non ci soddisfi del tutto, possiamo comunque decidere di utilizzare un hosting gratuito come HotlinkFiles.

Qui possiamo caricare direttamente tutti i files JavaScript che vogliamo senza dover utilizzare particolari trucchetti. (sinceramente non ho mai utilizzato questo hosting e per questo non mi sento di consigliarvelo)

Fatemi sapere cosa ne pensate! ;)

Favicon in blogger

Tempo fa, in questa semplice guida, abbiamo parlato di come si possibile inserire una favicon in qualsiasi blog.

Ora però, a causa dei vari aggiornamenti, è necessario fare una precisazione per tutti coloro che utilizzano la piattaforma di Blogger.

La favicon va ora inserita in una parte precisa della sezione <head> del blog e non può essere quindi messa in una qualsiasi riga.

Affinchè la favicon venga visualizzata correttamente, è necessario inserirla subito dopo la riga che identifica il titolo del blog, ovvero:

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

Pertanto il codice utilizzato dovrebbe essere simile a questo:

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

<link href='http://www.ilsitoblu.com/lacameradeiblog/immagini/favicon.png' rel='shortcut icon' type='image/png'/>