Visualizzazione post con etichetta coding. Mostra tutti i post
Visualizzazione post con etichetta coding. Mostra tutti i post
Come inserire immediatamente la firma dell'autore visibile in tutti i post
in: // //

Come inserire immediatamente la firma dell'autore visibile in tutti i post

In un tutorial fatto quasi un anno fa (wow come passa il tempo) vi spiegavo come inserire una firma semplice nei vostri post. Certo questo aveva un piccolo difetto, ossia quello di far visualizzare la firma nei post successivi all'inserimento del codice.

Oggi invece vi mostro come inserire una firma visibile in tutti i post, anche in quelli vecchi.

Creiamo la nostra firma... come? dove? Beh esistono alcuni tool online facili ed intuitivi.
Uno che posso consigliarvi è Pixlr Editor, che somiglia un po' a Photoshop, ma più semplice.

Dopo aver creato la vostra firma come immagine, dobbiamo caricarla sul blog.
Forse mi ripeterò, ma vi consiglio di creare un post e mantenerlo come bozza in modo da avere le immagini a disposizione, come se fosse una cartella :)

Una volta caricata l'immagine avrà come codice su per giù questo:
<img src='URL_VOSTRA_FIRMA' border='0' alt='' />
Ora andate in Modifica HTML e andate al widget Blog1 come nell'immagine sotto.

tutorial inserire firma nei post - Simona S.

Scendete giù pian,pianino, per cercare nel codice la sezione del post. Una volta trovato cliccate sulla freccina per espanderlo.

Come inserire le immagini dei tutorial in una griglia
in: // //

Come inserire le immagini dei tutorial in una griglia

Mi è stato chiesto da Marilù Maaga come si possono inserire le immagini dei tutorial così come ho fatto io nella mia pagina TUTORIAL-LIST.



Il sistema utilizzato da me è quello delle tabelle (presto un tutorial - se non video tutorial - sull'argomento), che possono sembrare difficili da realizzare, ma che una volta capito il sistema, non c'è niente di più semplice!


Prima di ogni altra cosa avrete bisogno delle immagini che richiamino i vostri tutorials...
eccone una...

ed eccona un'altra...

Proprio per evitare questo stile a colonna, o di inserirle affiancate, ma averle quasi appiccicate (mi riferisco alle blogger che non hanno dimestichezza con i codici), è possibile affidarsi alle tabelle.

Piccolo promemoria!


Ricordate i tag, ovvero le paroline inserite nelle '<...>', hanno un'apertura ed una chiusura, riconoscibile dalla barretta trasversale subito dopo la prima virgoletta '</...>'.
Se non chiudete bene il tag, sicuramente vi sarà segnalato un errore!

La base del codice è questo:
<table>
<tr>
<td>

</td>
</tr>
</table>

Vediamo un po' cosa significano questi tags:

  • table sta per tabella e racchiude tutto ciò che sta all'interno.
  • tr sta per table row, ovvero la riga nel quale sono contenuti gli elementi.
  • td sta per table data, ossia cella conosciuta meglio come colonna (è così che la chiamerò io) nel quale inserire i dati (scritti o immagini).

Questo giusto per farvi capire in linea di massima come sono strutturate le tabelle, ma in un altro contesto vi spiegherò come utilizzarle al meglio.

Torniamo a noi!
Le immagini che io ho inserito nella mia pagina sono racchiusi in una tabella a due colonne e tante righe, quante me ne servono.

Quando si deve lavorare con i codici, vi consiglio (ma certamente lo sapete già) di utilizzare sempre in modalità HTML del post, e anche di caricare le immagini da qui. Sarà più semplice posizionarle nelle varie colonne.
Ecco il codice per una tabella ad una riga e due colonne:

<table>
<tr>
<td>

</td>

<td>

</td>
</tr>
</table>

Vi basterà cliccare all'interno del tag td, ovvero nello spazio che intercorre fra '<td>' e '</td>' (per facilitarvi ho creato questo spazio) e caricare la vostra immagine.

Una volta caricate le immagini, vi basterà andare in modalità Scrivi, cliccare sulle di esse e dare il comando inserisci link. Così vi sarà più facile aggiungere un collegamento, ma anche a quale immagine lo stiamo facendo :)

Per avere più righe a due colonne, vi basterà duplicare i tag tr con tutto il loro contenuto (meglio se prima di aggiungere le immagini).

PER APPROFONDIRE

  • Questo metodo vale anche per l'inserimento di tabelle all'interno di gadget nella sidebar, come visto qui.
  • Ricorda che puoi sempre creare un post apposito dove ospitare le immagini che usi nella sidebar, quasi fosse una cartella immagini.
Inserire il pulsante 'Pin It' sulle immagini + pin buttons
in: //

Inserire il pulsante 'Pin It' sulle immagini + pin buttons

tutorial inserire pin button blogger - Simona S.

I social networks si sa, sono molto importanti per allargare la cerchia dei nostri utenti, per far conoscere il nostro blog.

Un buon metodo è diffondere le immagini dei nostri post e uno dei social network più famosi che utilizza questo meccanismo è senza ombra di dubbio Pinterest.
Lì si trovano idee di ogni tipo, un singolo materiale è oggetto di innumerevoli DIY, come il sughero.

Se ancora non lo conosci e vuoi registrarti per far parte di questa bellissima e 'pulita' community, ma non sai come fare... qual'è il problema? Ne ho fatto un tutorial qui :)


Crea sezioni carine per i tuoi link
in: //

Crea sezioni carine per i tuoi link



Quante/i di voi hanno una pagina in cui condividono i loro blog preferiti, perchè metterli nella sidebar significherebbe renderla un'autostrada?
Io personalmente lo preferirei facendo comunque una cernita fra quelli che seguo, altrimenti dovrei inserirne più di 200...

Pensando a come sistemarli, senza l'utilizzo di photoshop, mi sono venute in mente queste soluzioni: tipo raccoglitore a schede.

F
O
O
D

crafter

Di certo a raccogliere solo alcuni blog, tralasciandone qualcuno solo perchè ci è passato di mente, potrebbe offendere qualche blogger, ecco perchè, magari, sarebbe meglio fare una buona premessa all'inizio, del tipo:
 'condivido con voi i blog da me seguiti che potrebbero risultarvi utili grazie all'ausilio dei loro tutorials - mi scuso in anticipo se ho dimenticato qualcuno, ma anche io sono umana :) -'.
Che dite ci può stare?

Come inserire il form dei contatti in una pagina statica
in: // //

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:

#ContactForm1 {display:none;}

Create ora la pagina dei contatti, e nel campo HTML...+
tutorial inserire form contatti pagina blogger - Simona S.

...inserite il codice qui sotto

<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
Nome
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
Email<span style='font-weight: bolder;'>*</span>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
Messaggio<span style='font-weight: bolder;'>*</span>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Invia'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'>
</p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'>
</p>
</div>
</form>
</div>
</div>
Semplice, Semplice come sempre, ma se doveste avere problemi lasciate pure un commento!!!!

P.s. EVVIVA SONO ARRIVATA A 200 FOLLOWERS...GRAZIE ♥
Come eliminare lo sfondo grigio dalle immagini caricate sul blog
in: // //

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
in: // //

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.

/***********************************************
* Coding by www.designsimonas.com please do not remove my credits
***********************************************/
<script>
jQuery(document).ready(function($) {

$(&#39;#banner-slide&#39;).bjqs({

height : 300, // altezza dello slideshow
width : 620, // larghezza dello slideshow
animtype : &#39;fade&#39;,
animduration : 450,
animspeed : 5000, // durata dello slideshow in millesimi di secondi
automatic : true,
showcontrols : true,
centercontrols : true,
nexttext : &#39;&#39;,
prevtext : &#39;&#39;,
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally

// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover

// presentational options
usecaptions : true, // show captions for images using the image title tag
randomstart : false, // start slider at random slide
responsive : false // enable responsive capabilities (beta)

});

});
</script>


<script src='http://jj4me.altervista.org/slide-js/libs/jquery.secret-source.min.js'/>

<script>
jQuery(function($) {

$(&#39;.secret-source&#39;).secretSource({
includeTag: false
});

});
</script>

All'interno di questi codici potete fare alcune modifiche, che ho evidenziato con le spiegazioni in italiano.


Passiamo ora agli stili, cioè l'aspetto dello slideshow.
Cercate un posticino fra i codici del CSS per inserire questi:

/* Basic jQuery Slider essential styles */

ul.bjqs {
position:relative;
list-style:none;
padding:0;
margin:0;
overflow:hidden;
display:none;
border:1px solid #ddd;
}
li.bjqs-slide {
position:absolute;
display:none;
}
ul.bjqs-controls {
list-style:none;
margin:0;
padding:0;
z-index:9999;
}
ul.bjqs-controls.v-centered li a {
position:absolute;
}
ul.bjqs-controls.v-centered li.bjqs-next a {
right:-10px;
background: #c0dcda url(http://3.bp.blogspot.com/-_3CkbZ-bNZ0/Uqrrn2xSsWI/AAAAAAAAKpA/V_SLxA-8Y2o/s1600/arr-n.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ul.bjqs-controls.v-centered li.bjqs-prev a {
left:-10px;
background: #c0dcda url(http://3.bp.blogspot.com/-Ts5ONRMhxiE/Uqrrn3IdW8I/AAAAAAAAKo8/skH7B7QBugM/s1600/arr-p.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ol.bjqs-markers{
list-style: none;
padding: 0;
margin: 0;
width:100%;
}
ol.bjqs-markers.h-centered {
text-align: center;
}
ol.bjqs-markers li {
display:inline;
}
ol.bjqs-markers li a {
display:inline-block;
background:#ccc;color:#fff;
padding:5px 10px;
margin:2px 5px;
}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover {
background:#999;
color:#fff;
}
p.bjqs-caption {
display:block;
width:100%;
margin:0;
padding:2%;
position:absolute;
bottom:0;
text-align: center;
background:#555;
color:#fff;
opacity:0.7;
font-size:12px;
text-transform:uppercase;
}

Il background (ossia lo sfondo) che trovate scritto in grassetto è quell'azzurrino dietro le freccine (che sono invece un'immagine): questo background potete cambiarlo, personalizzando il colore a seconda dello stile grafico del vostro blog.
Oppure potete cancellare il background e lasciare/modificare solo la freccina.

Anche gli altri background potete cambiarli, se non vi piace il grigio :)

Ed ora, dopo aver pensato agli script e agli stili, andiamo ad inserire il codice HTML dello slideshow!

Andate in Layout e scegliete il gadget HTML/Javascript e incollate il seguente codice:

<div id="banner-slide">

<ul class="bjqs">

<li><a href='URL-POST'><img src="URL-IMMAGINE" title="" /><p class='bjqs-caption'>INSERISCI IL TESTO O IL TITOLO DEL POST</p></a></li>


</ul>

</div>
<br/><br/><br/>

Copiate e incollate il blocco racchiuso in <li></li> per creare più slide.
Alla fine ho dovuto aggiungere gli spazi <br/> perchè avevo notato che si andava a sovrapporre con il primo post.

PER APPROFONDIRE


  • Se volete eliminare i numeri dei post che compaiono sotto lo slideshow, allora aggiungete display:none; all'interno del blocco appartenente a ol.bjqs-markers.
  • Se volete eliminare le freccine ai lati, fate la stessa cosa ma all'interno dei blocchi appartenenti a ul.bjqs-controls.v-centered li.bjqs-next a e ul.bjqs-controls.v-centered li.bjqs-prev a.
  • Se desiderate che non capaia la descrizione all'interno della striscia grigia, allora vi basterà inserire l'immagine senza alcun testo descrittivo.
  • Se volete cambiare la dimensione dello slideshow, allora dovete modificare i valori di width e height all'interno dello script. Ricordate di creare immagini della stessa dimensione per una migliore visualizzazione.


Spero di non aver scordato nulla, ma se così fosse, o se avete problemi nell'installarlo, potete sempre lasciare un commento qui sotto :)
crea il tuo menu a discesa - how to create your drop down menu
in: //

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...

inserire la data come un calendario
in: // //

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:

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
day = "<strong class='date_day'>"+da[0]+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(day+month+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
display: block;
width:40px;
height:40px;
border-radius: 100px;
-moz-border-radius:100px;
float: left;
margin: 5px 2px 0 -45px;
border: 0;
text-transform: uppercase;
position:absolute;
z-index:1;
padding:5px;
font:normal &#39;Courier New&#39;, Arial, Helvetica;
color:#ffffff;
font-size: 11px;
text-align:center;
background:#000;
}
.date_month {
display:block;
margin-top:-2px;
text-align:center;
line-height:100%;
}
.date_day {
text-align:center;
line-height:100%;
padding-top:-2px;
}
.date_year {
padding:0;
line-height:100%;
display:block;
text-align:center;

}
</style>
</b:if>

Da questo codice potete modificare lo sfondo del cerchio, cambiando il 'background' in #Date.

Vai in MODELLO -> MODIFICA HTML e incollalo come nell'immagine.



Dal pulsante 'Vai al widget' scegli 'Blog1'



Poi premi CTRL+F (per la ricerca veloce in una pagina) e cerca questa riga:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Evidenzia la riga e sostituiscila con questo codice:
<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Ultimo passo (altrimenti non si vede nulla) è andare in LAYOUT e cambiare lo stile della data, scegliendo la penultima.


PER APPROFONDIRE

In #Date trovi 'margin: 5px 2px 0 -45px;' ... questi valori indicano i margini di distanza che l'oggetto ha rispetto a ciò che lo circonda, e i riferimenti si muovono in senso orario: il primo si riferisce al margine verso in alto, il secondo a destra, il terzo in basso e il quarto a sinistra.
I valori in positivo e in negativo indicano quanto l'oggetto si sposta rispetto al punto indicato. Es. noi abbiamo il primo valore '5px' che riguarda il margine in alto; il valore in positivo allontanerà dal punto in alto di 5px l'oggetto (quindi lo vedrai abbassarsi)...il valore '0' lo riporterai nella sua posizione originale... il valore in negativo '-5px' lo sposterà all'interno verso ilpunto indicato (in questo caso lo vedrai alzarsi).


Se doveste avere problemi commentate pure :)
come inserire il box commenti di Facebook in Blogger
in: // //

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 ;)
in: // //

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
in: //

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
in: //

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
in: //

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.

in: //

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
in: //

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
in: // //

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?)

in: //

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 ;)
in: //

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'
in: // //

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.