Tutorial 1 - Come mostrare un'anteprima completa di un template
In seguito alle numerose richieste, pervenutemi da altrettante numerose graficomani e creatrici di template , ho deciso di scrivere questo breve tutorial su come far visualizzare un'anteprima di un template come se fosse caricato su un blog. Per farvi capire meglio di cosa stò parlando, riporto qui di seguito un esempio :
Realizzare questo tipo di visualizzazione è molto semplice, basta avere un blog di prova ( cosa che sicuramente avrete se create template, anche solo per testarli) dove incollerete il template in questione. A questo punto cliccate su "anteprima blog" e, dalla schermata che vi si aprirà visualizzate "sorgente pagina" o "visualizza codice", copiate tutto il codice in questione ed incollatelo su una pagina Html (io per tale operazione utilizzo Dreamweaver, ma qualsiasi programma di editing html va bene).
Ok, a questo punto non vi rimane che caricare la pagina così creata sul vostro server ed il gioco è fatto, la linkate e la mostrate ai vostri utenti.
Tutorial 2 - Come cambiare template su Splinder
Altra domanda molto frequente che mi viene rivolta princialmente dai neofiti dei blog è quella di come sostituire il template di defoult di Splinder con un altro a loro più congeniale.
Bene, seguite passo per passo le seguenti istruzioni:
1- Scegliete il template che volete utilizzare e copiatene tutto il codice che troverete cliccando sulla scritta CODICE sotto l'anteprima.
2- Entrate nel vostro pannello di Splinder ed accedete alla categoria "Blog", da qui cliccate su "Template", a questo punto vi apparirà una finestra contenente tutto il codice del template in uso in quel momento. Selezionatelo tutto e cancellatelo.
3- Incollate al suo posto il codice che avrete precedentemente avuto l'accortezza di copiare. Cliccate sul bottone "salva modifiche" situato a sinistra della finestra del codice template. Fine.
Aggiornamento
Recentemente Splinder ha deciso di dividere in due sezioni distinte il codice dei template. Un box dedicato esclusivamente al codice HTML denominato "Template del blog" e sotto ad esso un Box ospitante gli stili CSS indicato col nome "Css del blog".
La scelta è libera, si può incollare tutto il codice nel primo box oppure optare per la suddivisione degli stili Css dall'html. Per chi opta per tale soluzione descrivo brevemente qui sotto come procedere:
-Aprite il foglio del codice del template e selezionate tutto il codice compreso tra <style type="text/css"></style> tralasciando la stringa di codice pocanzi menzionata, copiate ed incollate nel Box "Css del blog". Quindi tornate al foglio del template e cancellate la parte che avevate selezionato in precedenza.
- Adesso selezionate e copiate tutto il codice rimanente ed incollatelo nel Box "Template del Blog".
Questo per quanto riguarda i codici dei template che ho creato fin'ora, mentre i codici dei nuovi template sono già predisposti alla suddivisione.
Tutorial 3 - Come inserire i gadget di Blografando nei vostri Blog.
"Ho trovato molte cose carine sul tuo blog, calendari, contaclick, orologi ecc. ma non saprei proprio dove metter mano per inserirli sul mio blog....sai non sono molto esperta in Html....potresti darmi una mano?"
Tante volte ho risposto a domande del genere, per cui adesso posto una bella spiegazione su come procedere all'inserimento di un gadget all'interno di una colonna; che si tratti di un calendario, di un almanacco oppure una semplice immagine poco importa, ciò che interessa a noi in questo tutorial è la procedura e la posizione in cui essi devono essere incollati al fine di non sballare la vista della colonna del template, e per far ciò è sempre meglio creare un box apposito nella maniera che esporrò di seguito.
- Per prima cosa prelevate, copiandolo, il codice del gadget che vi interessa, nel nostro caso prendiamo come esempio questo orologio
OROLOGIO
- Ora entriamo nella sezione template del nostro blog ed andiamo ad identificare la colonna all'interno della quale vogliamo inserire il nostro orologio. In tutti i template di Blografando la colonna ha inizio dove è situata questa stringa di codice:
<div id="colonna">
- Posizionatevi in una riga vuota sotto tale stringa ed incollate il seguente codice:
<p class="titoletti">Orologio </p>
<center>CODICE</center>
naturalmente potete cambiare il titoletto orologio con qualsiasi altra dicitura, essa apparirà in cima all'orologio, mentre al posto di CODICE incollerete il codice dell'orologio che avete prelevato in precedenza. Ciò che non dovete mai fare è metter mano alle stringhe racchiuse tra questi due simboletti <>
Potete anche incollare il vostro orologio in una zona qualsiasi della colonna, ma ricordate di incollare il codice che ho esposto sopra sempre prima di una stringa di questo tipo:
<p class="titoletti">.........</p>
ossia prima dell'inizio di un nuovo box di categoria.
Tutorial 4 - Mantenere ordinato il template del Blog.
Non c'è nulla di più fastidioso che entrare in un blog e notare come le immagini siano state incollate una sopra l'altra, senza alcuno spazio, o peggio ancora, vedere immagini gigatesche che fuoriescono dalle colonne e dallo spazio adibito ai post, il tutto a creare l'idea del caos primordiale. Solitamente, quando mi imbatto in blog (ma anche siti) del genere, esco immediatamente per non farvi mai più ritorno...sono un'amante dell'ordine, non posso farci nulla...
Vediamo quindi come procedere per far sì che il nostro spazio sul web non si riveli una spelonca di mostruose, gigantesche immagini che troneggiano su tutto ciò che le circonda.
Una tra le cose più importanti quando prelevate il codice di un template, è andare a scoprire che larghezza (width) possiede sia la colonna che il corpo, ossia la zona dove inserirete i post, in modo tale da sapere qual'è la larghezza massima che dovranno avere le immagini che posterete per non eccedere fuori nè dal corpo dei post, nè dalla colonna.
Riassumendo, se la colonna ha un width, ossia larghezza, di 130px le immagini e tutto ciò che andremo a posizionare al suo interno non dovranno avere più di 130px di larghezza.
Ora non avete più scuse, le informazioni ci sono all'interno del codice di ogni template, basta andarsele a cercare.
Ultima cosa, per distanziare tra loro delle immagini o dei gadget basta aggiungere un <br /> o più di uno a seconda dello spazio che si vuole ottenere.
Commenti
Lista Tutorial
Credits
