Blog trasferito su
www.NoizExperience.com


25 giugno, 2008

Come creare un BlogRoll in stile Mac




un menu stile mac

Tutti hanno un Blogroll, cioè un elenco di link a Blog che il Blogger segue e vuole rendere disponibili a propri lettori o semplicemente un elenco per scambio link, ma non tutti si curano di esaltarlo.

Vediamo insieme come realizzarne uno per il tuo Blog, basterà semplicemente fare copia e incolla ed inserire i tuoi link. Un'esempio lo trovi nella mia sidebar a sinistra.

Scarica qui il file zip contente il foglio di stile, tre javascript, tra cui il potentissimo Jquerry, e le due immagini di sfondo che ci servono. Ora estrai i file e caricali sul tuo server o spazio web. Dopo di che inserisci questo codice prima del tag </head>:

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js"></script>
<script type="text/javascript" src="mac-style.js"></script>
<link href="mac-style.css" rel="stylesheet" type="text/css" />

Nel caso in cui non hai uno spazio web in cui caricare i file, usa questo codice:
<script src='http://www.risparmiocitta.it/source/mac-slide-style/jquery-1.2.2.pack.js' type='text/javascript'></script>
<script src='http://www.risparmiocitta.it/source/mac-slide-style/ddaccordion.js' type='text/javascript'></script>
<script src='http://www.risparmiocitta.it/source/mac-slide-style/mac-style.js' type='text/javascript'></script>
<link href='http://www.risparmiocitta.it/source/mac-slide-style/mac-style.css' rel='stylesheet' type='text/css'/>

Ora inserisci il codice Html nel punto in cui vuoi che venga visualizzato:
<div class="applemenu">

<div class="silverheader"><a href="http://indirizzodelblog01.it" title="Brevissima descrizione01" rel="external"><strong>Nome del blog01.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog01.<br />
</div>

<div class="silverheader"><a href="http://indirizzodelblog02.it" title="Brevissima descrizione02" rel="external"><strong>Nome del blog02.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog02.<br />
</div>

<div class="silverheader"><a href="http://indirizzodelblog03.it" title="Brevissima descrizione03" rel="external"><strong>Nome del blog01.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog03.<br />
</div>

<div class="silverheader"><a href="http://indirizzodelblog04.it" title="Brevissima descrizione04" rel="external"><strong>Nome del blog04.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog04.<br />
</div>

</div>


Ora hai il tuo BlogRoll in stile Mac, non ti resta che editare le voci che ho segnato in Rosso e Arancione per poter inserire i tuoi link ai Blog. Per personalizzare i colori e le dimensioni edita direttamente il foglio di stile.

Il codice proposto permette di inserire solo 4 link, nel caso ne vuoi aggiungere altri basta inserire questo codice per ogni nuovo link prima dell'ultimo tag </div>:

<div class="silverheader"><a href="http://indirizzodelblog05.it" title="Brevissima descrizione05" rel="external"><strong>Nome del blog05.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog05.<br />

</div>

Se usi Blogger come piattaforma è ancora più semplice: accedi alla tua bacheca, clicca su Modifica Layout poi su Modifica Html, cerca il tag </head> e inserisci il codice in verde e clicca su Salva Modello. Ora vai su Elementi Pagina e clicca su Aggiungi un Elemento Pagina, e nel riquadro grande inserisci il codice html. Edita le voci colorate in rosso e arancione e clicca su salva.

Per problemi o suggerimenti sono disponibile a verificarli insieme.


Articoli correlati per categorie



4 commenti!:

marbio ha detto...

Ottimo tutorial! Ho visto l'esempio sul tuo blog e devo dire che davvero "cool". Hai spiegato davvero bene come installare il tutto, complimenti!
Per ora scarico il pacchetto e lo metto in archivio sul mio HD, è una risorsa utilissima!In futuro potrà servirmi.

Ciao e a presto!

Anonimo ha detto...

La resa è ottima, complimenti !
wow sono uno dei primi membri del blogroll :D

Anonimo ha detto...

carino assai , complimenti ottimo lavoro.

Anonimo ha detto...

Ciao Angelo,
ho tirato su una pagina "i blogger che mi leggono", dove se passi a farti vivo ti ricambio il link! :D

Ciaoo,
Francesco