Blogger: Tips and Tricks, Creare una Navbar (Barra Menu)

Ancora su Blogger.

Vediamo come creare una semplice barra dei strumenti orizzontale. Iniziamo dicendo che il lavoro è molto semplice, la barra verrà costruita come per qualsiasi sito tramite css e poi inserita tramite widget nel nostro blog.

Prima di tutto creiamo il nostro file html con la lista dei link:

HTML:

<ul id="nav">

<li><a href="http://bit8tbyte.blogspot.com/">Home</a></li>

<li><a href="http://bit8tbyte.blogspot.com/">Link1</a></li>

<li><a href="http://bit8tbyte.blogspot.com">Link2</a></li>

</ul>

 
In questo caso abbiamo creato tre voci del menu di navigazione,  ora dobbiamo inserirle in un widget del blog. Andiamo quindi sul nostro Blog ed aggiungiamo un widget sotto l’intestazione, ci si aprirà una finestra in cui dovremo scegliere il tipo di widget, noi sceglieremo l’opzione HTML/Java Script. Ora sulla pagina di organizzazione del Blog avremo un widget in più che andrà trascinato sotto quello dell’intestazione, la figura lo spiega molto chiaramente:

  

Ora nel widget clicchiamo su modifica,  lasciamo il titolo vuoto ed inseriamo il nostro codice all’interno del box sottostante. Clicchiamo su salva ed osserviamo il nostro Blog che avrà una barra verticale con i nostri tre link.

 

 

Andiamo ora ad applicare dei css per inserire un’immagine di sfondo, e mettere i link in orizzontale. Ci portiamo quindi su DESIGN->DESIGNER MODELLI->AVANZATO->AGGIUNGI CSS,  ed aggiungiamo il seguente codice:

 

Potete chiaramente giocare con i colori, o inserire un imagine di background inserendo nel blocco #nav, qualcosa del genere:

background-image :url('http://www.indirizzotuaimmagine');

Il risultato senza background è questo:





Alla prossima

PHP: Warning: Cannot modify header information - headers already sent

A volte mi è capitato di dover fare un redirect in php tramite la funzione "header", e di avere in rispota l'errore in oggetto.
La causa di questo errore ricorrente (per i principianti come me) è che la funazione Header non accetta nessun tipo di output prima della sua chiamata.

Ad esempio nel seguente codice:

1. <?php


2. //riga vuota


3. header ("Location:redirect.php");


4. ?>

la riga vuota in php viene inerpretata come un otuput, cosi anche un echo ed un print:

1. <?php


2. echo "sono un output";


3. header ("Location:redirect.php");


4. ?>

Lo stesso problema può esserre causato da un utilizzo di "include" e/o di un require, se il file indicato per l'operazione contiene un output ed è inserito prima della funzione Header.

Come si risolve?


Possiamo risolvere il problema utilizzando l'output buffering il quale permette di inviare linee (compresi i cookie), anche dopo che si invia il contenuto del corpo, al prezzo del rallentamento della produzione dell’output PHP.
Tale funzione può essere attivata direttamente dal file php.ini , oppure possiamo attuvarlo a run time con la funzione ob_start(); che possiamo inserire all'inizio del nostro script.
Per svuotare il buffer dopo la chiamata all'Header possiamo utilizzare la funzione ob_end_flush(); che ci permette di evitare un overflow del buffer.

1. <?php


2. ob_start();


3. echo "sono un output";


4. header ("Location:redirect.php");


5. ob_end_flush();


6. ?>

Se il problema persiste potrebbe essere dovuto alla presenza del BOM byte order mark, presente nei file formattati in Unicode, per elimarlo usate un editor di testo che vi permetta di salvare il file in formato ANSI.


Spero sia tutto.

Blogger: Tips & Tricks 1, Come centrare l'Header

Ciao,

il primo post lo voglio proprio fare sull'interfaccia di gestione di Blogger.
Ho girato un po per capire come centrare l'Header del blog e le indicazioni più frequenti erano quelle di aggiungere nell'intefaccia di DESIGN alla voce AVANZATO -> AGIIUNGI CSS il seguente codice:

#header-inner { text-align: center; }

ora questo va bene se inseriamo semplicemente del testo, se invece vigliamo come Header una nostra immagine, dobbiamo creare un css più completo che tenga conto dell'immagine e della sua larghezza. Per prima cosa per centrare tutto quello che è all'interno dell'Header non basta dare l'indicazione di allineare il testo () ma bobbiamo fare in modo che tutto ciò che sia all'interno del'oggetto sia centrato. Per questo aggiungiamo :

margin-left: auto; margin-right: auto;

Bene in molti casi questo basta ma se la nostra immagine è fuori standard potrebbe non allinearsi correttamente al centro, quindi dobbiamo indicare all'oggetto Header anche le dimensioni , ad esempio nel mio caso:

height:90px; width:500px;

Quindi avremo un risultato finale di questo genere:

#header-inner {
height:90px;
width:500px;
margin-left: auto;
margin-right: auto;
}



Spero sia utile a qualcuno, alla prossima.