Contatta lo staff
02/08/2010
Come creare un menù a tendina in Ajax
Alcuni dei MyBlogger più seguiti hanno inserito all’interno delle proprie colonne laterali dei un menù a tendina, come ad esempio i ragazzi di Very Inutil People.
Alcuni di voi ci hanno chiesto come fanno e oggi vi mostriamo come creare in pochi passi un menù a tendina espandibile e personalizzabile, come questo:
Guarda la DEMO.
Dal pannello di gestione del blog andiamo in “Presentazione > Opzioni avanzate” e in queste 5 pagine:
- Modello della home-page
- Modello della pagina dei commenti
- Modello della pagine di link permanente
- Modello della pagina categoria
- Template tags
incolliamo il seguente codice tra le tag <head> e </head>:
<script type="text/javascript"
src="http://scripts.xoom.it/scripts/jquery.js"></script>
<script type="text/javascript"
src="http://scripts.xoom.it/scripts/dropmenu/alternate.js"></script>
Ora andiamo nella sezione “Presentazione > Contenuto delle barre laterali di navigazione” e in fondo alla pagina clicchiamo sul bottone “Aggiungi un testo”. Si aprirà una finestra dove dovremo incollare il seguente codice:
<img src="http://scripts.xoom.it/scripts/dropmenu/categorie.jpg"
width="184" height="40" class="menu_head" />
<center>
<ul class="menu_body">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</center>
Vediamo nel dettaglio cosa contiene questo script.
<img src="http://scripts.xoom.it/scripts/dropmenu/categorie.jpg"
width="184" height="40" class="menu_head" />
mostra una immagine che, una volta cliccata, farà apparire il menù a tendina. Potete utilizzare questa che vi diamo a disposizione oppure una personalizzata da voi.
Per inserire una vostra immagine dovete semplicemente modificare l’url e le dimensioni dell’immagine all’interno dello script senza però toccare il valore di “class”, in questo modo:
<img src="http://URL_Immagine_Personale"
width="Valore_Larghezza" height="Valore_Altezza"
class="menu_head" />
Il resto del codice si occupa di visualizzare le voci di menù che volete inserire.
Ogni riga come questa contiene una nuova voce testuale con link:
<li><a href="#">Menu1</a></li>
Diamo un titolo, senza renderlo visibile, al nuovo oggetto che abbiamo creato. Salviamolo e pubblichiamolo in una colonna. A questo punto, se andiamo nel nostro blog vedremo soltanto la nostra immagine seguita da un elenco testuale. Per dare un aspetto grafico più conforme al nostro blog, dovremo modificare alcuni parametri nel Foglio di stile.
Quindi, andiamo in “Presentazione > Opzioni avanzate” e clicchiamo sul bottone “Modifica modello” del Foglio di stile ed incolliamo il seguente codice:
sidebar ul {
padding: 0px;
margin: 0px;
list-style:none;
}
.sidebar li {
margin: 0px 0px 0px 0px;
list-style-type: none;
list-style:none;
}
.menu_head{border:1px solid #998675;}
.menu_body {display:none; width:184px;
border-right:1px solid #998675;
border-bottom:1px solid #998675;
border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li.alt{background:#362f2d;}
.menu_body li a{color:#FFFFFF;
text-decoration:none; padding:10px;
display:block;}
.menu_body li a:hover{font-weight:bold;}
Modificando questi attributi possiamo scegliere i colori e le dimensioni da dare allo sfondo e al testo del menù a tendina. Una volta modificate le impostazioni come piacciono a noi, salviamole e andiamo a vedere l’effetto finale.
Se volete creare un menù a tendina che mostra in automatico le categorie che avete creato all’interno del vostro blog, basta sostituire il codice dell’oggetto creato nella sezione “Presentazione > Contenuto delle barre laterali di navigazione” con questo:
<img src="http://scripts.xoom.it/scripts/dropmenu/categorie.jpg"
width="184" height="40" class="menu_head" />
<center>{categories assign="category"}{if $category.first}
<div id="box-categories" class="box-decorator1">
<div class="box-decorator2"><div class="box-decorator3">
<div class="decorator1"> <div class="decorator2"></div></div>
<div class="boxcontent-decorator1">
<div class="boxcontent-decorator2">
<div class="boxcontent-decorator3">
<ul class="menu_body">{/if}<li>
<a href="{$category.url|urlchar|lower}/">{$category.name}</a>
</li> {if $category.last}</ul> </div></div></div>
</div></div></div>{/if} {/categories}</center>
Buon lavoro!
10:31 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (1) | Segnala
| Tag: tutorial, menu, tendina, drop, css, ajax, javascript | OKNOtizie | 
| 
del.icio.us
|
| 
Digg | 
Facebook
01/07/2010
Come ti aggiungo il tasto "stampa"
Ciao MyBlogger!
oggi vediamo di dare finalmente una risposta concreta a quanti ci hanno più volte chiesto l’attivazione della funzione print per trasferire su carta le nostre fatiche letterarie.
Vediamo come intervenire.
Per inserire il bottone Stampa all’interno di un post, dobbiamo modificare i template che contengono il post singolo, ovvero:
- Modello della pagine di link permanente;
- Modello della pagina dei commenti.
<script type="text/javascript"
src="http://scripts.xoom.it/scripts/jquery.js">
</script>
<script type="text/javascript"
src=" http://scripts.xoom.it/scripts/jqprint.js">
</script>
Decidiamo adesso dove inserire il bottone “Stampa” all’interno dei post e incolliamo (sempre per entrambi i template) il seguente codice:
<input id="PrintVocab" value="Stampa questo post"
type="button" />
Noi consigliamo di posizionare il pulsante o subito sotto al titolo, quindi dopo questa riga:
<h3 id="p1"><span>{$post.title}</span></h3> o prima del footer, quindi prima di questa riga:
<div class="postbottom"></div>
Ora non ci resta che decidere quale sezione del blog stampare e inseriamo il seguente codice (come sempre per entrambi i template segnalati):
<div id="divToPrint" align="left">
Sezione del post che vogliamo stampare
</div>
Noi consigliamo di stampare la sezione del post che va dalla data all'inizio del footer del post, in questo modo stampiamo: data, titolo e contenuto del post.
<h2 class="date"></h2>
Una riga prima aggiungiamo:
<div id="divToPrint" align="left"><h2 class="date"></h2>
Ora cerchiamo:
<div class="postbottom"></div>
Una riga prima aggiungiamo il "div" di chiusura:
</div>
<div class="postbottom"></div>
Fatto! Siamo ora in grado di stampare tutti i contenuti che vogliamo (con moderazione, c’è un pianeta da salvare :D ).
10:57 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (1) | Segnala
| Tag: ajax, javascript, stampa, print, redazione, myblog, virgilio | OKNOtizie | | del.icio.us
|
| Digg | Facebook