Visualizzazione post con etichetta blogger. Mostra tutti i post
Visualizzazione post con etichetta blogger. Mostra tutti i post
Come inserire i codici nel tuo CSS in Blogger
in: // //

Come inserire i codici nel tuo CSS in Blogger



E' ovvio che io sbaglio quando mi riferisco a tutte voi nei miei tutorials, come se fossero scontate alcune conoscenze, e vi chiedo scusa :)

Per rimediare ho realizzato un video tutorial piccino, picciò per mostrare come e dove inserire i codici nel vostro CSS.

Ma cos'è un CSS? (si chiederanno alcune di voi)
Beh io sono un'autodidatta, come il 99% di chi mi segue, e allora ve lo spiego in modo semplice e conciso:
il CSS è composto da una serie di codici che hanno il potere di cambiare l'aspetto grafico e l'impostazione del vostro blog.

E' come se fosse la macchina da cucire di una sarta :D

Detto ciò, i professionisti del web mi staranno lanciando maledizioni di ogni genere, ma visto che sono sicura che da queste parti di Guru non ne transitano, sono piuttosto serena :P

Bando alle ciance, che ne faccio sempre troppe, eccovi il video tutorial!

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.
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 :)
Blog design: come definire la larghezza del logo
in: //

Blog design: come definire la larghezza del logo

Quanto siete entusiaste di creare da voi il vostro logo?
E quante volte vi siete demoralizzate perchè alla fine risultava troppo grande o troppo piccolo rispetto ai 'confini' del template?

Bene oggi vi parlo di un trucchetto per avere un logo perfetto!
Almeno nelle misure ;)

Innanzitutto dovete entrare in PERSONALIZZA da Modello e andate a vedere in Modifica le larghezze del vostro blog, come nell'immagine qui sotto.

Il mio layout è largo 1020px, ma il mio logo è largo 900px... perchè?
Per come vi dicevo in un altro post, ci sono nel CSS predefinito di Blogger dei margini prestabiliti, che non permetterebbero mai al vostro logo di calzare perfettamente nell'header.
Sono i margin e i padding che a volte romponno le scatole, proprio per questo vi suggerisco, ogni volta che create il logo, di mantenervi al di sotto della larghezza dell'intero blog, di almeno 20/30px.

Se invece volete un logo che sia esattamente largo quanto l'intero blog, bisognerà andare a modificare qualcosina nei codici.
Ecco come.
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?
come inserire le pagine in Blogger
in: //

come inserire le pagine in Blogger

Come accennavo in un altro post, ciò che è facile per me, non è detto che lo sia per altri.
Lavorando ora per persone che si avvicinano per la prima volta al blogging, mi rendo conto che anche inserire il logo, o le pagine, nel proprio blog diventa quasi un'impresa.


Ecco che allora nasce la rubrica (nome pomposo!) TINY TIPS! ovvero i piccoli consigli per rendere meno snervante i gesti più semplici nella nostra vita da blogger.
Vi piace l'idea?

Torniamo a noi: come creare e poi inserire le pagine nel nostro blog.
Innanzitutto dovete creare il vostro menu di pagine. Quindi scegliete 'PAGINE' dal menu a sinistra, nell'admin panel. Poi scegliete 'NUOVA PAGINA'.

Scegliete il tipo di pagina che volete creare:
PAGINA VUOTA per una pagina nella quale scrivere ciò che ci pare (info, contatti, ecc...)
INDIRIZZO WEB per creare un link ad una pagina web esterna, o ad una categoria del vostro stesso blog. (vedi tutorial)

Una volta create le pagine, andate in 'LAYOUT' per aggiungere il gadget.

Infatti cliccando 'AGGIUNGI GADGET' potrete scegliere e aggiungere il gadget delle pagine. Posizionandolo sotto l'header (dove si trova il logo, per intenderci) il gadget delle pagine avrà l'aspetto di un menu orizzontale; al contrario, posizionandolo nella sidebar (barra laterale), il gadget prenderà l'aspetto di un menu verticale.

Spero vi sia utile questo tutorial e, come ormai sapete, se avete qualsiasi dubbio sfogatelo nei commenti :)


Come importare il blog da Blogger a WordPress
in: // //

Come importare il blog da Blogger a WordPress

Ecco un nuovo tutorial che arriva fresco, fresco, dalla sezione 'PROPONILO TU'.
Come si fa ad importare il blog da Blogger a WordPress?
In pochi, semplici passi, si può traslocare con la velocità della luce!
Dal pannello amministrativo di WordPress, cerca nel menu a sinistra la sezione 'STRUMENTI' e poi clicca su 'IMPORTA'.



Nella nuova schermata, appariranno una serie di piattaforme da cui importare il blog. Voi scegliete 'BLOGGER'.
Una volta cliccato, verrete reindirizzati su Blogger, che ti chiederà se vuoi autorizzare l'operazione in corso. Clicca 'AUTORIZZA' e attendi...


Una volta tornati nel pannello amministrativo di wordpress (lo farà in automatico) vi darà una serie di errori, probabilmente: non abbiate paura!
Scendete più giù nella pagina e troverete i vostri blog creati su blogger. Cliccate su 'IMPORTA' per importare il blog che desiderate.
Come vedete nell'immagine qui sotto, anche i commenti verranno importati.



Visto quanto è semplice?

Ma vi dirò...

Io sono una grande sostenitrice di WordPress, ho iniziato a realizzare template proprio per WordPress, eppure non trasferirei il mio sito da questa piattaforma a quella.

Perchè?

Perchè se un template non ti piace al 100% e vorresti cambiare qualcosina nel codice, non lo puoi fare! Persino il template sei obbligata a 'scegliere' quello che ti propinano loro.
Quindi io preferisco installare wordpress come CMS (Content Management System, ovvero siti preconfezionati) su un server a pagamento, o gratuito, dove posso essere libera di cambiare o anche installare il template che preferisco!

Se vuoi schiarirti le idee leggi il post WordPress o Blogger: quale scegliere.

Wordpress vs Blogger Simons S.

Spero di essere stata utile in questo tutorial, anche se non mi stanco mai di dire il mio parere, buono o brutto che sia :)
come impaginare le foto in un post
in: //

come impaginare le foto in un post

Si sa, i nostri blog son più belli se li abbelliamo con immagini che arricchiscono i nostri post. Ecco perchè diventa quasi indispensabile (per me vitale) avere un programma di grafica.
Ma se non lo si possiede, come si fa?
Beh, vi avevo già presentato Pixlr Express facendovi vedere più o meno cosa si poteva ottenere con un po' di dedizione.
Questa volta vi mostro come avere delle storyboards, così da inserirle nei nostri post.
Innanzitutto bisogna essere su Pixlr... fatto? (erano anni che volevo dirlo :P )
Cliccate sul tasto collage

Apparirà una nuova barra degli strumenti in basso, cliccate su layout per scegliere il template del vostro collage (o storyboard, che dir si voglia) e, ovviamente, scegliete quello che a voi piace di più, o che vi serve in quel momento.

Spostandovi con il mouse sulle aree grigie comparirà una   cliccatela per caricare le foto dal vostro pc. Una volta caricate potrete anche modificarle, ma in questo era inutile mostrarvi come fare... cioè più lo usate e più imparerete le funzioni (come ho fatto io).

Una volta finito di caricare tutte le foto, cliccate finished così da chiudere questa area di lavoro e tornare a quella di default di pixlr.
Da lì potrete aggiungere testo, stickers e altre diavolerie per abbellire lo storyboard.

Questo è quello che ho fatto io... ovviamente su SoCuteThings :P


Come installare un nuovo template in Blogger
in: //

Come installare un nuovo template in Blogger

A volte mi capita di dare per scontato che ciò che per me è semplice lo sia anche per altri.
Sbagliato!
Ad esempio l'installazione di un nuovo template.
Vediamo come procedere passo, passo.

Cliccate sul titolo del vostro blog per accedere al pannello di amministrazione.

Dal menu a sinistra scegliete 'MODELLO'. Poi clicate in alto a destra su 'BACKUP/RIPRISTINO', così facendo si aprirà una finestra pop-up dalla quale scegliere due diverse opzioni.

1. Fare il backup del nostro blog, ovvero scaricare il template corrente così da conservarlo nel pc.

2. Caricare il nuovo template da installare cliccando sul tasto 'Scegli file'. Cliccate proprio quest'ultimo!

Cercate nel vostro pc il file .xml del vostro nuovo template, cliccate 'apri' e il nuovo template verrà installato senza problemi.

Se invece Blogger dovesse dirvi che ci sono errori e non vi fa installare il template, basta semplicemente 'aggiornare' la pagina e riprovare.
A volte è capitato anche a me. Infondo Blogger non è così infallibile :P

Eliminare sfondo immagini dai template predefiniti di blogger
in: //

Eliminare sfondo immagini dai template predefiniti di blogger

Avete presente lo sfondo delle immagini dei post o (peggio ancora) della sidebar presenti nei nuovi templates?
A me non piacciono,e a quanto pare non sono la sola!
Così ora vi svelo cosa andare a levare dal codice HTML del nostro blog per eliminare le cornici con tanto di sfumatura al seguito.



Come al solito entrate in 'MODELLO' e poi cliccate su 'MODIFICA HTML'.
Ora dovete cercare '.post-body img'... e voi penserete 'quanto la fai facile'. E ora vi dico un altro trucchetto per trovare subito ciò che ci serve: quando siete in 'MODIFICA HTML' premete CTRL+F sulla vostra tastiera, vi comparirà in alto a dx (almeno per me che ho chrome, non so con gli altri browser dove esca) una finestrella, copiate e incollate lì dentro, in questo caso, '.post-body img' (senza le virgolette!)

Eliminate quel codice evidenziato nell'immagine qui sotto.



Così facendo avrete eliminato sia lo sfondo delle immagini dei post che delle sidebar.
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?)

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.
Inserire immagine fissa...
in: // //

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: Creare una pagina per categoria
in: //

blog design: Creare una pagina per categoria

Questo post nasce dalla necessità di inserire una certa quantità di post catalogati sotto la stessa categoria e quindi reperibili da un tasto del menu-pagine.
Voi direte 'ma di tutto questo non c'è bisogno perchè esiste già il widget delle categorie'.
Lo so, ma il menu in alto è più veloce!
E ricordatevi la regola dei 3 click!
Se un visitatore non ottiene risposte sul vostro blog al terzo click... beh state certi che lo abbandonerà... ed effettivamente è così, perchè io stessa l'ho fatto.
Quindi più possiamo richiamare l'attenzione verso l'argomento di punta del nostro blog, con quanti più possibili tasti veloci, meglio è!

Premesso ciò, ecco come creare una pagina in cui vengano raccolti i post di una determinata categoria.

AGGIORNAMENTO PAGINE

11/03/2014 - Da un po' di giorni l'interfaccia delle pagine è cambiata ed ora si presentano come una lista di post.
Per aggiungere un link alla pagina, in modo da reindirizzarla ad esso, dobbiamo per forza di cosa entrare nel pannello LAYOUT cliccare su MODIFICA gadget, e cercare AGGIUNGI PAGINA CON LINK.
A questo punto potete procedere come nel tutorial qui sotto ;)

Nel creare una nuova pagina, scegliamo non una pagina vuota, ma 'Indirizzo Web'.


Quindi gli diamo come nome, il nome della categoria nella quale possiamo trovare i nostri post (es.Tutorial) e inserite l'URL della categoria da voi scelta.


Come facciamo a recuperare l'indirizzo? Selezionate dal widget 'etichette' la categoria che vi interessa mettere in risalto e poi, copiate l'indirizzo, dalla barra dei link, in alto.


Come al solito, commentate per qualsiasi chiarimento ;)

AGGIORNAMENTO SETTEMBRE 2015

Vi posto un'immagine che vi indica il nuovo layout di inserimento dei links al menu delle pagine!

blog design: Diminuire la distanza fra i widget
in: // //

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