Abbiamo parlato anche nei precedenti tutorial di gallerie di immagini con fantastici effetti. In rete esistono migliaia di esempi. La scelta cade nella utilità e nella semplicità di queste gallerie e dell'uso che dobbiamo fare.
Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Flux Slider è una animazione CSS3 framework basato transizione delle immagini, in parte ispirato dal fantastico plugin jQuery Nivo Slider.
Al posto delle tradizionali animazioni basate su Javascript timer utilizzati da jQuery, Flux utilizza la più recente e più potente tecnologia di animazione CSS3. Si trova in uno stato abbastanza presto / ruvido al momento, ma test su iPhone / iPad sembra produrre animazioni più smussate.
Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Capita spesso di vedere nei template Wordpress, stili belli e particolari, ricchissimi di funzionalità e dalla grafica accattivante.

E 'abbastanza comune vedere lo stile del formato data, accanto ai post nei Temi WordPress, in stile calendario, ma per la piattaforma Blogger non è cosi facile per aggiungerlo.


Ma chi ha detto che è impossibile?
In questo tutorial vi mostrerò come crearlo per la piattaforma Blogger.
Credetemi, è più facile farlo che dirlo.
Per prima cosa facciamo il backup del nostro template, cosi in caso di errori possiamo ripristinarlo.
Vediamo come...
Entra nelle impostazioni di Blogger, andando in:
Impostazioni > Lingua e formattazione - Formato intestazione data e cambia il formato della data in giorno/mese/anno, ad esempio: 06 Novembre 2012 - come si può vedere nel mio esempio qui sotto::

e alla fine salva tutto.
Ora vai su:
Modello  ›  Modifica HTML, attiva > "Espandi i modelli widget" e cerca  (CTRL + F) la seguente riga:

<h2 class='date-header'> <span> <data:post.dateHeader/> </ span> </ h2>

e la sostituite con:

<div id='Date'>  <script> changeDate ('<data:post.dateHeader/>'); </ script>  </ div>  <b:else/>  <div id = ' Data '>  changeDate <script> (''); </ script>  </ div>

Ora aggiungere il codice riportato di seguito appena sopra </ head> (CTRL + F per trovarlo)
<script type='text/javascript'> / / <[CDATA [! var DateCalendar; changeDate funzione (d) { if (d == "") { d = DateCalendar; } var da = d.split ('') ; giorno = "<strong class='date_day'>" + da [0] + "</strong>"; . month = "<strong class='date_month'>" + da [1] fetta (0,3) + "</strong>", year = "<strong class='date_year'>" + da [2] + "</strong>"; document.write (mese + giorno + anno); DateCalendar = d; } / /]]> </script> <b:if cond='data:blog.pageType != "static_page"'> <style type='text/css'> / * Calendario Data ------- ---------------------------------------- * / # Data { background: url trasparente ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixIt1D_DPgJXZubK5R7JQylN1wPXW3RvP-9d9ggFCSRB3Rk5F5n_EcfRvW_vcvj-7tC5ow19Lth4-WfOB208PQPguXZb2x_C2H4HtHFF-Kbe8LXfOmanUVdH94gyrbheYHB54F-BTfEunJ/s1600/calendar07.png ) no-repeat; display: block; width: 60px; height: 60px; float: left; margin: 15px 2px 0 -108 px; padding: 0 0 8px 0px; bordo: 0; text-transform: uppercase; } . date_month { display: block; font-size: 15px; font-weight: bold; margin-top:-1px; text-align: center; color: # ffffff; colore / * del mese * / } . date_day { display: block; font-size: 28px; font-weight: bold; margin-top:-8px; text-align: center; color: # 282828; / colore Giorno * A * / } date_year {. display: block; font-size: 10px; margin-top:-8px; text-align: center; color: # 282828; colore / Anno * A * / } </style> </b: if>

Alla fine fate l'Anteprima e se tutto è ok, fate clic su Salva. Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Per chi ha bisogno di spazio e vuole sistemare graficamente e non solo il suo sito o blog, mettendo in ordine  tutti i link, le pagine, le etichette e qualsiasi cosa, questo post sarà sicuramente di grande aiuto.
Come vedete nell'immagine (cliccando qui o sopra l'immagine si aprirà la demo che ho preparato per darvi meglio l'idea), abbiamo una lista di link, che all'interno contengono altri link.
Cliccandoci sopra, vedrete l'effetto scroll che visualizza il contenuto della categoria scelta.
E' una specie di "Mobiletto con cassetti", dove possiamo inserire e tenere in ordine tutto quello che vogliamo. Possiamo inserire i nostri "Blog Amici", le etichette piu richieste, la lista dei nostri libri o film preferiti, e tutto chiuso in uno spazio piccolo e graficamente bellissimo.
Per inserirlo è facilissimo. Vediamo come:
1 - Collegatevi a blogger.
2 - Andate in Layout, clickate su Aggiungi un gadget pagina, poi su HTML/JavaScript, inserite il codice sotto:

<!-- inizio cod CSS --> <style type="text/css"> .menuPad { height:2px; } #slide { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#000000 none repeat scroll 0 0; font-family:arial,sans-serif; font-size:12px; margin:0; padding:10px; position:absolute; width:181px; } #slide dt { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(back.png) repeat scroll 0 0; color:#DDDDDD; cursor:pointer; font-weight:bold; height:37px; line-height:37px; margin:0; padding:0; text-align:center; width:181px; } #slide dt.slide { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(back.png) repeat scroll left bottom; color:#FFFFFF; } #slide dt a { color:#FFFFFF; display:block; height:37px; line-height:37px; text-decoration:none; } #slide dt a:hover { color:#FFCC00; } #slide dd { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#EEEEEE url(shade.png) no-repeat scroll left top; height:0; margin:0; overflow:hidden; padding:0; position:relative; text-align:center; width:181px; } #slide dd ul { bottom:0; height:auto; left:0; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; position:absolute; } #slide dd ul li { border-bottom:1px solid #AAAAAA; height:25px; line-height:25px; width:181px; } #slide dd ul li a { color:#666666; display:block; font-size:11px; height:25px; text-decoration:none; } #slide dd ul li a:hover { color:#000000; } </style> <!-- fine cod CSS --> <dl id="slide"> <dt><a href="">HOME</a></dt> <dt id="item1" class="">Prima Categoria</dt> <dd id="sitem1" style="height: 0px;" class=""> <ul> <li><a href="inserire qui il link">Primo link</a></li> <li><a href="inserire qui il link">Secondo link</a></li> <li><a href="inserire qui il link">Terzo link</a></li> </ul> </dd> <dt id="item2" class="">Seconda Categoria</dt> <dd id="sitem2" class="" style="height: 0px;"> <ul> <li><a href="inserire qui il link">Primo link</a></li> <li><a href="inserire qui il link">Secondo link</a></li> <li><a href="inserire qui il link">Terzo link</a></li> </ul> </dd> <dl> <div class="menuPad"></div> <!-- inizio cod JAVASCRIPT --> <SCRIPT> var getdd = document.getElementById('slide').getElementsByTagName("DD"); var getdt = document.getElementById('slide').getElementsByTagName("DT"); for (var i=0; i<getdt.length; i++) { getdt[i].onclick=function() { if (this.id.indexOf('item') != -1) { for (var z=0; z<getdd.length; z++) { if (getdd[z].id.indexOf(this.id) !=-1 && getdd[z].className=='') { eNext = getdd[z].firstChild; while (eNext.nodeType!=1) {eNext = eNext.nextSibling;} ulHeight = eNext.offsetHeight; expand (0,ulHeight,getdd[z].id) } else { eNext = getdd[z].firstChild; while (eNext.nodeType!=1) {eNext = eNext.nextSibling;} ulHeight = eNext.offsetHeight; if (getdd[z].offsetHeight > 0) { contract (ulHeight,0,getdd[z].id) } } if (getdd[z].id.indexOf(this.id) !=-1 && getdd[z].className=='') { getdd[z].className='selected'; this.className='slide'; } else { getdd[z].className=''; ePrevious = getdd[z].previousSibling; while (ePrevious.nodeType!=1) {ePrevious = ePrevious.previousSibling;} ePrevious .className=''; } } } } } function expand (cY, fY, subY) { cY=cY+2;; if (cY <= fY) { document.getElementById(subY).style.height = cY + "px"; setTimeout ("expand("+cY+","+fY+",'"+subY+"')", 5); } } function contract (cZ, fZ, subZ) { cZ=cZ-2; if (cZ >= fZ) { document.getElementById(subZ).style.height = cZ + "px"; setTimeout ("contract("+cZ+","+fZ+",'"+subZ+"')", 5); } } </SCRIPT> <!-- fine cod JAVASCRIPT -->

Naturalmente, bisogna personalizzarlo.
Trovate il blocco di codice sotto e personalizzate le scritte in rosso:

<dt id="item1" class="">Prima Categoria</dt>
<dd id="sitem1" style="height: 0px;" class="">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>
<dt id="item2" class="">Seconda Categoria</dt>
<dd id="sitem2" class="" style="height: 0px;">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>

Potete aggiungere tutte le categorie che volete, personalizzando l'identificatore del blocco codice(vedi nel essempio le scritte in blu) e aumentando il numero (esempio: item 3 e sitem 3 - item 4 e sitem 4 - item 5 e sitem 5 - e cosi via

<dt id="item1" class="">Nome Categoria</dt>
<dd id="sitem1" style="height: 0px;" class="">
<ul>
<li><a href="inserire qui il link">Nome</a></li>
<li><a href="inserire qui il link">Nome</a></li>
<li><a href="inserire qui il link">Nome</a></li>
</ul>
</dd>

Dopo aver fatto tutte le prove e tutte le modifiche, quando siete soddisfatti,
salvate tutto ed Enjoy your Accordion Menu. Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

 In questo tutorial vedremo come creare popup online, grazie ad un generatore di popup, che genera un codice javascript da inserire nel nostro sito o blog. In questa popup possiamo inserire un messaggio di benvenuto, dei link, del semplice testo o anche immagini o file multimediali.

Andate qui. Anche se è in inglese, è molto semplice è intuitivo. Potete personalizzare il colore, la larghezza e l'altezza, la posizione x e y, il tempo di entrata, l'effetto in entrata e in uscita, potete decidere se sarà l'utente a chiudere la popup o chiuderla automaticamente dopo un tot di secondi. Una volta personalizzato, cliccate sul pulsante "Preview" per l'anteprima, e alla fine se siete soddisfatti, basta cliccare "Generate Pop Code". Copiare e incollare il codice nel vostro sito o blog ed il gioco è fatto.
Vi lascio anche il videotutorial che vi spiega passo dopo passo.


Potete vedere un esempio di una popup, creato con questo generatore al nostro altro blog DixDiPCperVoi Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su