Visualizzazione post con etichetta blogger. Mostra tutti i post
Visualizzazione post con etichetta blogger. Mostra tutti i post
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.
:*