listes de liens cachees

obtenir ces boutons

Afficher des listes de liens cachées
1) Comme ci-dessus, on peut très facilement créer une ou plusieurs listes de liens dont le seul titre apparaît. En cliquant sur le nom et la flèche vers le bas, on fait apparaître la liste entière.

2) Pour cacher la liste à nouveau, il suffit de cliquer sur le nom de la liste et la flèche vers le haut.

3) Pour ajouter cette possibilité dans un blog, il faut d'abord ajouter UNE SEULE FOIS le code ci-dessous dans un gadget HTML/JavaScript.
Rappel : comment ajouter un gadget HTML/JavaScript sur un blog

<script type="text/javascript">
var id2 = "";
function titrelisteliens(id)
{id2=id + "-A";
if(document.getElementById(id).style.display=='none')
{document.getElementById(id).style.display='block';
document.getElementById(id2).innerHTML=document.getElementById(id2).innerHTML.substr(0,document.getElementById(id2).innerHTML.length-1
)+' ▲';}
else
{document.getElementById(id).style.display='none';
document.getElementById(id2).innerHTML=document.getElementById(id2).innerHTML.substr(0,document.getElementById(id2).innerHTML.length-1
)+' ▼';}
return;}
</script>

<style type='text/css'>
.nomliste
{color: black;
text-decoration: none;
cursor: pointer;
font-size: 15px;
font-weight:bold;}
ul.listecachee {list-style-type: none;}
ul.listecachee a:link{color:blue;}
ul.listecachee a:visited{color:blue;}
ul.listecachee a:hover{color:green;}
</style>

4) Il suffit ensuite d'ajouter, une ou plusieurs fois, le code ci-dessous dans un (ou des) gadget(s) HTML/JavaScript :
- en modifiant les liens selon ses besoins ;
- il faut également donner un numéro d'ordre différent pour chaque liste : "liste01" devient "liste02" ... (TROIS FOIS).

<ul class="listecachee">
<li id="liste01-A" class="nomliste" onclick="titrelisteliens('liste01');" style="margin-left:-10px;">LISTE DE LIENS 1 ▼</li>
<div id="liste01" style="display: none;margin-left:-30px;">

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.be/2011/12/derniers-messages.html"
target="_blank">Améliorer Blogger : résumés 1</a></li>
<li><a href="http://modifier-les-modeles-de-blogger.blogspot.be/2011/12/derniers-messages-2.html"
target="_blank">Améliorer Blogger : résumés 2</a></li>
<li><a href="http://modifier-les-modeles-de-blogger.blogspot.be/2011/12/derniers-messages-3.html"
target="_blank">Améliorer Blogger : résumés 3</a></li>
<li><a href="http://modifier-les-modeles-de-blogger.blogspot.be/2011/12/derniers-messages-4.html"
target="_blank">Améliorer Blogger : résumés 4</a></li>
</div>
</ul>




2 commentaires:

bernard vandervart a dit…

c'est vraiment se que j'ai cherché il y a longtemps est j'ai trouvé tous se que je cherche dans ton blog.

centre d'appel

call center

Al Capone a dit…

Merci our ce nouveau gadet. Ca peuut être utile !