Visualizzazione post con etichetta blogger. Mostra tutti i post
Visualizzazione post con etichetta blogger. Mostra tutti i post
Come inserire il form dei contatti in una pagina statica
gennaio 27, 2014
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'/>

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

</form>
</div>
</div>

Semplice, Semplice come sempre, ma se doveste avere problemi lasciate pure un commento!!!!

update 10/02/2018



Ho scritto un nuovo tutorial su come inserire e personalizzare il forma contatti nelle pagine di Blogger. Leggilo!
Come eliminare lo sfondo grigio dalle immagini caricate sul blog
dicembre 19, 2013
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
dicembre 13, 2013
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
dicembre 09, 2013
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
ottobre 08, 2013
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
agosto 01, 2013
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
luglio 31, 2013
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
aprile 06, 2013

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
aprile 02, 2013
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
marzo 21, 2013
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
marzo 19, 2013
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
marzo 06, 2013
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
marzo 01, 2013
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'
ottobre 10, 2012


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...
settembre 18, 2012

... 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
settembre 11, 2012
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
settembre 10, 2012
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.
:*