Qualche tempo fa abbiamo visto come espandere e comprimere i gadget utilizzando Scriptaculous e Prototype , è un metodo che funziona bene, ma c'è chi usa jQuery e non vuole caricare altre librerie sul proprio blog, quindi in questo post vedremo come ottenere lo stesso risultato ma utilizzando jQuery.
Espandere e comprimere i gadget può essere utile per chi ne ha molti e desidera che la barra laterale abbia un aspetto più ordinato, mostrando solo i titoli dei gadget e i contenuti solo quando l'utente li desidera. Potete vedere un esempio in questo post di blog di prova ; cliccando sul titolo del gadget, questo si espanderà .
Per aggiungere questi gadget espandibili, ti serve solo jQuery. Se non lo hai ancora, vai su Template | Modifica HTML e dopo <head> aggiungi questa riga:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
E ora, per applicare l'effetto espandibile e scorrevole a un gadget, individua il gadget a cui desideri applicarlo nell'editor HTML . Ad esempio, un gadget HTML/Javascript si presenterebbe così:
<b:widget id='HTML1' locked='false' title='Titolo gadget' type='HTML'>Aggiungi ciò che è in rosso e il gioco è fatto.
<b:includable id='main'>
<!-- visualizza il titolo solo se non è vuoto -->
<b:if cond='data:title != ""'>
<h2 class='title'>
<span id=' expandGadget1 ' style='cursor:hand;cursor:pointer;'>
▼▲
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class=' expand1 ' style='display: none;'>
<data:content/>
</div>
<script>$(document).ready(function(){$('# expandGadget1 ').click(function(){$('. expand1 ').slideToggle("slow")})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Per guidarti su dove inserire i codici:
Il primo codice in rosso circonda il tag <data:title/>.L'altra parte in rosso va dopo <div class='widget-content'>
e l'ultima va prima.
</div>
<b:include name='quickedit'/>
Nota che in blu vedrai un ID e una classe, entrambi visualizzati due volte. Se dovessi aggiungere un altro gadget espandibile, dovresti modificare sia gli ID che le classi, ad esempio expandGadget2 ed expand2.
Nel primo frammento che abbiamo aggiunto vedrai apparire questi caratteri: ▼▲
Queste sono le frecce su e giù ▼▲, puoi sostituirle con un altro carattere, un altro testo o persino un'immagine:
<img src=' URL immagine ' bordo='0' larghezza='14px'/>
Il codice di esempio è per i gadget HTML/Javascript , ma può essere applicato a qualsiasi altro gadget. È sufficiente identificare il tag <data:title/> del gadget (dove va inserito il primo codice) e il contenuto del gadget (dove va inserito il secondo codice).
Forse dovrei chiarire che questo non velocizza il caricamento del blog, poiché il contenuto continua a caricarsi anche quando è nascosto all'utente. Serve solo a mostrare meno spazio nella barra laterale, poiché a volte abbiamo gadget che occupano troppo spazio, e questo è un buon modo per rendere il blog più ordinato.
Trovato questo articolo interessante? Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook per suggerire questo risultato nelle ricerche in Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie! CONDIVIDI SU!
Post
Nessun commento:
Posta un commento