Visualizzazione post con etichetta coding. Mostra tutti i post
Visualizzazione post con etichetta coding. Mostra tutti i post
Come inserire il form dei contatti in una pagina statica
// //

Come inserire il form dei contatti in una pagina statica

Questo tutorial lo avevo visto tempo fa su un blog straniero, che purtroppo non riesco più a ricordare dove sta... altrimenti lo avrei anche linkato.

Ecco come inserire il modulo dei contatti che Blogger ci mette a disposizione in una pagina statica.

Anche se il form non deve comparire nella sidebar, dobbiamo comunque inserire il gadget affinché funzioni correttamente.
Quindi andate in Layout e scegliete il gadget Modulo dei contatti da 'altri gadget'

tutorial inserire form contatti pagina blogger - Simona S.

Per rendere invisibile il modulo all'interno della sidebar, aggiungete nel vostro CSS, negli stili del vostro blog questo codice:
Come eliminare lo sfondo grigio dalle immagini caricate sul blog
// //

Come eliminare lo sfondo grigio dalle immagini caricate sul blog

Quando è capitato a me sono uscita letteralmente pazza, tanto da dedicarne anche un piccolo post e scrivere sul forum della community di Blogger.

Capita a volte di caricare le immagini su blogger in perfetto stato e di vedersele poi pubblicate con uno sfondo grigio orribile e deprimente.
Tutta colpa delle nuove impostazioni di Google+.

Il punto è che le loro intenzioni erano buone, poichè avevano creato un'impostazione che voleva migliorare le immagini, attraverso la correzione automatica.
Invece s'è verificato solo un grande casino.
Ecco come fare per eliminare questo problema (ed io da allora non ho avuto più di questi problemi).

Seguite questo link e scorrete la pagina, fino ad arrivare alla sezione delle foto dove troverete questo:
tutorial immagini grigie blogger - Simona S.
Impostate il settaggio su OFF!
Fatto questo, le vostre immagini verranno visualizzate sul blog esattamente come create da voi... quindi se in futuro dovessero esserci problemi...beh... :D


p.s. Probabilmente negli ultimi 2 giorni avrete visto qualche post apparire e poi sparire... Mi dispiace, ho fatto un po' di casino... In pratica sto risistemando le etichette dei post e quindi non mi sono accorta che alcuni post erano delle bozze... insomma ho mandato online ciò che non doveva andare perchè vecchio e obsoleto. 
Sorry :P
Blog design: inserire uno slideshow semplice nel nostro blog
// //

Blog design: inserire uno slideshow semplice nel nostro blog

Nel demo troverai il nuovo slideshow che puoi trovare in questo post! cliccami!!!


Come vi avevo già preannunciato in questo post ho trovato un carinissimo slideshow da inserire facilmente all'interno del nostro blog.

Ho dovuto apportare un bel po' di modifiche per renderlo più... carino e anche per aggiustare qualche errorino che mi dava :)
L'originale è qui, mentre quello modificato da me lo potete vedere in questo demo.
inserire slideshow semplice blogger - Simona S.
Per ottenere lo slideshow bisogna innanzitutto posizionare gli script al punto giusto all'interno del codice del nostro blog.

Niente paura!!! Partite sempre dalla concezione che se ce l'ho fatta io, potete farcela anche voi!!!


Aprite da Modello -> Modifica HTML e incollate sotto <head> queste due righe

<script src='http://code.jquery.com/jquery-latest.min.js'/>
<script src='http://jj4me.altervista.org/slide-js/bjqs-1.3.min.js'/>

Scorrete la pagina fino a trovare il tag di chiusura di 'body', ovvero </body> e incollate subito prima i codici qui sotto.
crea il tuo menu a discesa - how to create your drop down menu
//

crea il tuo menu a discesa - how to create your drop down menu

tutorial dropdown menu blogger - Simona S.
Menu a discesa? Cos'è? Magari è questa la prima cosa che avrete pensato, ecco è esattamente quello che vedete qui sotto.



Come inserirlo nel blog?

Prima di ogni cosa, onde evitare che nel blog compaiano strane forme indecifrabili, dovete andare in MODELLO > Modifica HTML.

(Ora magia delle magie...riciclerò un'immagine già usata in precedenza, anche il mio blog è ecosostenibile :P )

Seguite l'immagine qui sotto...

Blog design: Inserire la data come un calendario
// //

Blog design: Inserire la data come un calendario

Un po' di tempo fa, mi fu chiesto questo tutorial, ma per via del mio shop, nel quale avevo dato anche questo servizio, non avevo esaudito la richiesta... ora visto che lo shop non esiste più e che è difficle che mi venga fatta una richiesta del genere da una mia qualunque ex cliente straniera, eccomi qui che esaudisco tale richiesta.

Qual'era? Mi fu chiesto come inserire la data, così com'è presente nel mio blog.

Sembra difficile, ma in realtà è semplice se si segue passo, passo il procedimento, e senza paura.
Ricordate che prima di mettere mano bisogna fare il backup del proprio modello (ovvero salvarne una copia, ogni tanto fatene una anche del vostro blog, con i post i commenti...anzi finito lo faccio pure io!) e poi premendo CTRL+Z si può sempre fare qualche passo indietro all'interno del codice, cancellando le modifiche, ma funziona SOLO se non si chiude MAI la pagina delle modifiche dell'HTML.

Copia lo script qui sotto:
come inserire il box commenti di Facebook in Blogger
// //

come inserire il box commenti di Facebook in Blogger

Vuoi inserire il box dei commenti di facebook sotto i tuoi post e non sai come fare?
No problem, ho studiato io per te :)

Vai prima di tutto a questa pagina, poi segui le istruzioni dell'immagine n.1



Per inserire il box sotto ad ogni post devi entrare nel codice HTML del tuo blog, poi segui l'immagine qui sotto

Evidenzia poi tutta la riga che racchiude il 'post' e clicca lì dove ci sono i puntini sospensivi. Si aprirà il widget completamente evidenziato. LASCIATE EVIDENZIATO e, stando attenti a questo, scendete fino alla fine del widget, ossia fino a quando incontrerete il tag di chiusura.
Ecco proprio prima di questo tag, inserite il secondo codice dato da fb.



----------------------------------------------------------------

Spero sia utile a qualcuna/o di voi!
E' ovvio che più un blog ha una pagina con molti fans attivi, e più si ha l'esigenza di inserire uno script del genere.
Fatemi sapere se ne usufruite, se lo ritenete utile oppure no :)

AGGIORNAMENTO!

Se volete inserire il box sotto ad ogni post, o comunque vedere come procedere date un'occhiata a questo video tutorial ;)
Blog design: Come formattare il testo in un post
// //

Blog design: Come formattare il testo in un post

Di solito modifichiamo il testo dal pannello di controllo, oppure ci affidiamo alle opzioni a disposizione nella modalità 'SCRIVI' quando iniziamo un nuovo post.

Troviamo le opzioni:

  • TIPO DI CARATTERE
  • DIMENSIONE DEL TESTO
  • FORMATO (normale, intestazione, ecc...)
  • GRASSETTO
  • CORSIVO
  • SOTTOLINEATO
  • BARRATO AL CENTRO

Ma se volessimo creare un paragrafo con un po' di spazio fra le lettere come questo?
In questo caso vi consiglio di passare alla modalità 'HTML' e di inserire il vostro paragrafo all'interno del tag <span> e di scrivere lo stile che volete dargli.


<span style='letter-spacing:5px;'>.....paragrafo.....</span>



E se vogliamo l'ombreggiatura?

Basta scrivere questo codice:


<span style='text-shadow: 0px 5px 5px #ccc;'>.....paragrafo.....</span>


Cambiando il valore del colore si possono avere varie tonalità di ombreggiatura, ovviamente; mentre cambiando i primi due valori dei pixel modificherete la distanza dell'ombreggiatura rispetto al testo - il primo verso destra, il secondo verso il basso -, il terzo valore in pixel è l'ampiezza dell'ombreggiatura.

HAI TROVATO UTILE QUESTO POST?

POTREBBE ESSERE UNO STILE DEL TITOLO, VERO?
Blog deisgn: Come cambiare colore alla scrollbar
//

Blog deisgn: Come cambiare colore alla scrollbar

Avete notato che la scrollbar ha cambiato colore? lo potete notare anche nel 'textarea' del post precedente




Purtroppo non tutti i browser li visualizzano nel modo corretto, e alcuni non rilevano alcuna modifica, ma se usi Chrome, avrai notato questa piccola novità grafica :)
Ecco come si fa!
Copia e incolla fra gli stili del tuo blog il codice che trovi qui sotto.
body, html {
scrollbar-base-color: #f7cdce;
scrollbar-face-color: #f7cdce;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-dark-shadow-color: #FFFFFF;
scrollbar-3d-light-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
}

::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #f7cdce;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-corner {
background: #fff;
}
Il valore che vedi '#FFFFFF' indica il colore bianco, mentre '#f7cdce' indica il colore rosa del mio blog.
Ti basta cambiare il secondo valore con uno dei colori del tuo blog per avere anche tu una scrollbar abbinata al tuo salotto sul web.
Hai trovato interessante questo post? Condividilo!!! :P
come inserire glitter al tuo cursore
//

come inserire glitter al tuo cursore

Stanche del solito cursore a forma di punta di lancia? (sembra uno spot, lo so)
Se volete aggiungere un tocco personale al vostro cursore, e meravigliare almeno un po' quelli che visitano il vostro blog, magari potete aggiungere una pioggia di stelle, quasi fosse la polverina magica di Trilli.
I passi da seguire sono, come al solito, semplici e facilissimi da seguire :)




Spero vi sia piaciuto questo tutorial, ovviamente il codice non l'ho creato io ma l'ho reperito nel web, quindi è più che giusto lasciare i crediti a chi gli appartengono :)
Se avete problemi, nel caso in cui doveste usarlo, commentate pure qui!
Blog design: list-style, inseriamo un'immagine alla lista
//

Blog design: list-style, inseriamo un'immagine alla lista

Quando parlo di lista mi riferisco a quella che viene creata in automatico quando aggiungiamo il gadget delle etichette, oppure quella che creiamo noi in un determinato post.
Come questo:

Se andiamo a sbirciare nel codice noteremo che la lista è racchiusa fra i  tag  ul e li
<ul>
<li>primo</li>
</ul>
Se vogliamo, possiamo cambiare quei puntini che scandiscono la lista con immagini più carine, che possano rendere il nostro blog più carino ^_^ ... così
  • primo
  • secondo
  • terzo
Bastano pochi passi per fare queste modifiche.
Innanzitutto dobbiamo scegliere un'immagine che non sia molto grande, che affiancata al nostro testo non lo deformi troppo. Io utilizzerò questo mini pixel, che mi farà sembrare il testo nella lista 'spuntato' (per salvare l'immagine cliccateci sopra col tasto destro)

Entriamo in 'MODELLO' > 'MODIFICA HTML'
Cliccate come nella foto in basso per aprire gli stili del vostro blog.


Scorrete fino a passare oltre i codici che riguardano le variabili ed arrivate al punto come nell'immagine sotto.


Ora copiate e incollate questo codice:
ul {list-style: url(http://4.bp.blogspot.com/-Yz-KTOD8RRg/UKQKhsQiKaI/AAAAAAAADzk/m3h4u2NVBMU/s320/2guwow4.gif);}
Così facendo qualsiasi lista presente nel vostro blog avrà l'immagine che abbiamo inserito, A MENO CHE una lista in particolare (come ad esempio il menu in alto) non abbia già un suo stile ben definito.

Non abbiate paura se mentre scrivete il post non visualizzate l'immagine, controllate sempre nella preview e se dovessero esserci problemi scrivete un commento qui sotto.

Inserire nuovi font al posto di quelli predefiniti
//

Inserire nuovi font al posto di quelli predefiniti

Nuovo video tutorial richiestomi per sapere come inserire nuovi fonts al nostro blog, al posto di quelli predefiniti da Blogger.
Per qualsiasi domanda, sapete cosa fare ;)

http://youtu.be/INRvb50I7WE
Blog design: come inserire i social icons
//

Blog design: come inserire i social icons

Volete inserire delle icone nel vostro blog che portino al vostro shop o ai vari social networks,ai quali il vostro blog è collegato?
Vi mostro come fare in un modo  quasi  semplice e veloce.
Avete le vostre icone? Ok, tenetele un attimo da parte.
Per questo 'lavoro' dovete aprire due finestre del vostro browser: una su 'LAYOUT' , nell'altra creiamo un 'NUOVO POST'.
In 'LAYOUT' scegliamo il gadget 'HTML/JASCRIPT' e inseriamo questo codice:
<a href='INSERT_URL'><img src='URL_SOCIAL_ICON'/></a>
<a href='INSERT_URL'><img Src='URL_SOCIAL_ICON'/></a>
<a href='INSERT_URL'><img src='URL_SOCIAL_ICON'/></a>
Teniamolo buono, buono per un attimo e torniamo nella finestra con il 'nuovo post' aperto.
A cosa serve questo post?
Semplicissimo: a caricare le immagini del nostro blog, a tenerle a disposizione come in una cartella del nostro pc.
Quindi NON pubblicate questo post, ma salvatelo come BOZZA!
Una volta caricate le immagini nel post, possiamo copiarne l' URL  cliccando col tasto destro sull'immagine stessa.
COME INSERIRE I CODICI?
Ormai avrete capito che tutto ciò che è racchiuso in questo tag diventa un link e quindi vi conduce, solitamente (ma anche no, sarà in un altro tutorial) in una pagina diversa da quella in cui vi trovate.
Quindi dopo il 'href' dobbiamo SEMPRE inserire il link della pagina che vogliamo raggiungere.
<a href='http://sketchyourblog.blogspot.it'> </a>
Dove troviamo il tag 'img' vuol dire che è presente un'immagine e con il riferimento 'src', ovvero SEARCH, gli diciamo dove andarla a cercare in tutto l'universo del web.
<a href='http://sketchyourblog.blogspot.it'><img src='http://4.bp.blogspot.com/-LI-q4WdwfU8/UUQeTd4xxtI/AAAAAAAAFvY/54leWr4EGTg/s320/twitter-bird.png'/></a>
Il risultato? Eccolo!

Ripetendo l'operazione, per quante sono le vostre icone, potrete ritrovarle nella sidebar, una affianco all'altra.

E se le icone sono troppo grandi e tutte non mi ci vanno?
NO PROBLEM! Gli indichiamo noi che grandezza devono avere aggiungendo 'width' (basta dargli solo una opzione, quella della larghezza in questo caso) prima della chiusura '/' del tag 'img'. Ovviamente regolatevi sulle misure originali in pixel della vostra icona.
<a href='http://sketchyourblog.blogspot.it'><img src='http://4.bp.blogspot.com/-LI-q4WdwfU8/UUQeTd4xxtI/AAAAAAAAFvY/54leWr4EGTg/s320/twitter-bird.png' width='50px' height='auto'/></a>
E l'icona comparirà più piccola.

Spero vi sia utile questo post, se lo è lasciate un commentino? ^_^
blog design: come inserire la firma nei post
// //

blog design: come inserire la firma nei post

Avete voglia di inserire una firma alla fine del vostro post, che sia un saluto o semplicemente il vostro nome?
Ecco come fare!
Innanzitutto dobbiamo creare l'immagine nella quale figuri il vostro nome (in questo caso dovete avere un programma di grafica) così:


Caricate la firma nel vostro blog: io consiglio, come sempre, di creare un post all'interno del vostro blog da utilizzare solo per il caricamento di alcune immagini che servono per la grafica, quindi salvatelo sempre come bozza! Io di solito lo chiamo 'IMMAGINI' (che fantasia eh?)

aggiungere un effetto transizione ai links
//

aggiungere un effetto transizione ai links

Innanzitutto la novità! Quale? La grafica!
Vi piace? Stavolta ho usato una di quelle presenti nel mio shop su etsy, anche se l'ho modificata un pochettino :P

E ora passiamo al piccolo tutorial di oggi: links con  'transition effect' !
Avete notato l'effetto del mio menu in alto? Quello sotto il logo...
Ecco quello è l'effetto 'transition', ossia passare da un colore ad un altro, quando si passa su col mouse, con un specie di effetto  'fade' .

Non è complicato ottenere questo effetto, bisogna solo aggiungere una piccola voce negli stili dei links, ossia quello scritto in grassetto:
a:link {
text-decoration:none;
color: $(link.color);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
Il valore numerico sta ad indicare il numero dei secondi che impiega l'effetto a passare dal colore iniziale a quello d'arrivo; potete cambiarlo a seconda del vostro gusto.

Se lo provate, mi raccomando scrivetemi se l'effetto vi garba o no ;)
blog design: Creare un pannello slide a discesa
//

blog design: Creare un pannello slide a discesa

Vuoi inserire un pannello a discesa come quello in alto nella mia sidebar?

Allora ecco cosa devi fare ^_^, segui il video tutorial (questa volta lascio il link, ma inserisco il video nella pagina dei video tutorial, che trovate tramite il menu in alto):
http://youtu.be/iby9C_DfFLA

 CONSIGLIO!  Non inserirlo in un post o in una pagina, ho notato che il sistema di blogger, sfasa il codice, però funziona benissimo con il gadget ;)

Codice da inserire nel foglio di stile, ovvero il CSS:
Quando manca il gadget 'Lettori fissi'
// //

Quando manca il gadget 'Lettori fissi'



Un po' di tempo fa è sorto questo problema per una di voi, ed ho deciso di creare un post veloce per aiutarvi a risolverlo, in caso vi capitasse all'apertura di un nuovo blog.
Il problema era questo: nel momento in cui si cercava di aggiungere il gadget 'Lettori fissi' (potete farlo da 'LAYOUT'), questo in realtà non veniva inserito e compariva invece un avviso con su scritto "Correggere gli errori di questo modulo".

Per aggirare questo problema bisogna essere temerari, ed aggiungerlo manualmente.
Andate in 'MODELLO' e cliccate su 'MODIFICA HTML'.
Scorrete giù in basso (probabilmente fino alla fine) fino a trovare una serie di righe che iniziano con
<b:widget id='...
sono tutti i widget del vostro blog persenti nelle sidebar.
In mezzo a queste righe inserisci quest'altra riga, così com'è scritta:
<b:widget id='Followers1' locked='false' title='Lettori fissi' type='Followers'/>
Salvate le modifiche.
Non preoccupatevi dove lo inserite, perchè una volta salvato, andate in 'LAYOUT' e cercate lì il widget inserito, così da spostarlo nella posizione che più vi aggrada.
Inserire immagine fissa...
// //

Inserire immagine fissa...

... che scrolli verso l'alto la pagina del nostro blog.

Ovvero inserire un'immagine che dica all'utente 'torna su!'
Perdonatemi a volte sono negata con i titoli XD

Come si fa???

Innanzitutto dobbiamo creare un'immagine (se non avete photoshop, va bene anche paint, altrimenti vi proporrò fra poco una utility online da perdere la testa).
Fatto ciò, carichiamola nel nostro blog (vi consiglio quello che di solito faccio, ovvero aprire un post dal titolo IMMAGINI e caricare ciò che vi serve di 'stramano'... ovviamente il post salvatelo solo senza pubblicarlo :D )

Una volta caricata l'immagine, e ottenuto il suo URL (cliccaci su col tasto dx e poi fai 'COPIA URL IMMAGINE'), vai in 'LAYOUT' e 'AGGIUNGI UN GADGET'.
Scegli il gadget 'HTML/JavaScript' ed incolla questo codice:
<div style="position:fixed; bottom:0px;right:0px;float:right;z-index:1;"><a href="#"><img alt="TORNA SU!" src="INSERISCI QUI IL LINK DELLA TUA IMMAGINE" /></a></div>
Incollato così il codice ti farà comparire l'immagine nella stessa posizione in cui vedi la mia coccinella in basso a destra.

Se vuoi fare una prova semplice, puoi prelevare il codice qui sotto con l'immagine da me creata.
<div style="position:fixed; bottom:0px;right:0px;float:right;z-index:1;"><a href="#"><img alt="TORNA SU!" src="http://2.bp.blogspot.com/-rUPflDKu6uo/UFdb5ip_J7I/AAAAAAAADDc/OifEdytF_0U/s1600/up.png" /></a></div>
blog design: Diminuire la distanza fra i widget
// //

blog design: Diminuire la distanza fra i widget

Si sa che i commenti alimentano i blog... soprattutto questo blog :)
Ed è per questo che nasce questo post, per aiutare un'amica blogger 'Il Gufo Creativo' che mi ha chiesto come si ridurre la distanza fra i widget presenti nella sidebar.

Per fare ciò dobbiamo fare quella che è sicuramente un'operazione che terrorizza chi non ha proprio dimestichezza con i codici: andare a modificare l'HTML... ma niente paura ;)

Selezionate 'Modello' dal menu a tendina accanto al nome del vostro blog, quindi cliccate su 'Modifica HTML'


Vi apparirà questa schermata che in un certo senso vi inibirà, dicendovi che dovrete procedere solo se sapete ciò che fate, beh noi lo sappiamo quindi clicchiamo 'Procedi' :)



Scendiamo giù con lo scrollbar, fino a quando troviamo la sezione del 'Widgets' (questo perchè è sempre bene tenere un po' d'ordine anche nei codici :D)




A questo punto, aggiungiamo il nostro codice, che ci permetterà di diminuire lo spazio fra i widget presenti nelle sidebar:
.sidebar .widget {
margin-top: -10px;
}

Con questo codice gli stiamo dicendo che per tutte le widget della sidebar il margine superiore deve diminuire di 10 pixel, se volete ridurlo ulteriormente dovete aumentare il valore dei pixel (essendo in negativo).




Fatto tutto ciò, potrete vedere un'anteprima e poi salvate le modifiche.



Come al solito spero tanto di essere stata chiara, ma in caso contrario chiedete pure chiarimenti.
:*
Border radius: arrotondo un div
//

Border radius: arrotondo un div

Attenzione! Ti ricordo che sono web designer completamente autodidatta, di conseguenza è difficile che troverai qui scritti termini appropriati... Quindi, se mastichi il mio stesso web-designeresco, allora sei il benvenuto. Se ti si drizza il pelo sulle braccia per i termini da ignorante e tutto ciò ti fa senso... puoi restare lo stesso
E' uno stile che mi fa impazzire, non solo perchè lo trovo molto bello da vedere, lì dove è bello da vedere, ma sopratutto perchè non ricordo mai i comandi che gli devo dare per far sì che esca come dico io!

Se hai notato la follia che mi prende ogni due giorni per il cambio della grafica (ma giuro che per ora sto buona, buona ) ti sei accorta che questo mi porta alla ricerca di novità da aggiungere al mio blog. Quindi mi sono ritrovata a 'ricercare' i border-radius, accompagnati da -moz e -webkit, ecc...
Google e i webfonts
//

Google e i webfonts

Incredibile, ma vero! Ci affanniamo tanto noi debuttanti del mondo del web design a cercare a destra e a manca risorse per ottimizzarei nostri blog/siti...
Usiamo il motore di ricerca tanto amato e tanto odiato, Google, che non semrpe ci dà le risposte che vogliamo, gli parliamo, più che altro prendendolo a parolacce per costringerlo a darci il responso dell'oracolo... e digitiamo una lettera per volta per vedere 'lui' quale suggerimento ci dà...
Ma nulla...
Eppure per alcune cosettine le soluzioni ce le dà proprio casa Google .
Ad esempio i webfonts.

Scegli quale vuoi, e ti si apre la pagina con il campione del font nei vari pixel, in modo da farti vedere come ti viene nella grandezza impostata.

Poi hai il set del carattere, ti dice cosa vien fuori se premi un certo tasto.

Puoi anche scaricarlo, oppure (se vuoi mantenere 'leggero' il tuo pc) inserirlo nel tuo codice direttamente seguendo le istruzioni alla voce usa il font.

facile, no? peccato solo non avere una vasta scelta...ma come si dice: a cavallo donato non si guarda in bocca