Bloggtips #2
Här kommer ett litet tips som gör att du enkelt kan gömma text/bilder/flash med mera på din bloggsida. Genom att klicka på länken nedan visas det som är dolt och klickar man en gång till så döljs det igen.
Klicka här för att visa det dolda
Så, hur fungerar allt det här, vad behöver jag göra för att kunna ha liknande på min egen blogg? Det första du ska göra är att på alla "kodmallar" (front, entry, category och archive) lägga till följade rader mellan <HEAD> </HEAD>-taggen:
När väl det är gjort så skriver du följade HTML-kod i ditt inlägg för att skapa det dolda "blocket":
ID:et för själva "blocket" kan vara vad som helst (i detta fall "valfritt_id"), kom bara ihåg vad då det måste matcha länken senare. Mellan <DIV> </DIV>-taggarna (där jag skrivet bla bla bla...) är där du stoppar in allt du vill ha dolt.
För att sedan visa allt skapar du en helt vanlig länk fast som mål skrivar man:
Som ni ser så ska alltså ID:et och texten i javascriptet vara samma ("valfritt_id" i mitt fall), stämmer inte de överens fungerar inte koden. Till er som inte skriver länkar för hand utan använder länk-knappen i editorn så ska "länkens url" endast vara javascript:visa('valfritt_id'); samt öppnas i samma fönster.
Det enklaste sättet för er som inte är så himla vana vid HTML och sånt är att skriv allt ni vill skriva, lägg in bilder, filmer, ja vad det nu är ni vill a dolt och gå sedan in i koden genom att trycka på "Infoga/redigera HTML-kod"-knappen / klicka på "Ändra redigerare" ner till höger och lägg till <div id="valfritt_id" style="display: none;"> precis före och </div> precis efter.
Sådär, lätt som en plätt, eller hur? :-)
Klicka här för att visa det dolda
Så, hur fungerar allt det här, vad behöver jag göra för att kunna ha liknande på min egen blogg? Det första du ska göra är att på alla "kodmallar" (front, entry, category och archive) lägga till följade rader mellan <HEAD> </HEAD>-taggen:
<script type="text/javascript">
function visa(divName) {
var objDivStyle = eval("document.getElementById('" + divName + "').style");
if (objDivStyle.display == 'block') {
hideDiv(divName);
} else {
showDiv(divName);
}
}
function showDiv(divName) {
var objDivStyle = eval("document.getElementById('" + divName + "').style");
objDivStyle.display = 'block';
}
function hideDiv(divName) {
var objDivStyle = eval("document.getElementById('" + divName + "').style");
objDivStyle.display = 'none';
}
</script>
function visa(divName) {
var objDivStyle = eval("document.getElementById('" + divName + "').style");
if (objDivStyle.display == 'block') {
hideDiv(divName);
} else {
showDiv(divName);
}
}
function showDiv(divName) {
var objDivStyle = eval("document.getElementById('" + divName + "').style");
objDivStyle.display = 'block';
}
function hideDiv(divName) {
var objDivStyle = eval("document.getElementById('" + divName + "').style");
objDivStyle.display = 'none';
}
</script>
När väl det är gjort så skriver du följade HTML-kod i ditt inlägg för att skapa det dolda "blocket":
<div id="valfritt_id" style="display: none;"> Bla bla bla... </div>
ID:et för själva "blocket" kan vara vad som helst (i detta fall "valfritt_id"), kom bara ihåg vad då det måste matcha länken senare. Mellan <DIV> </DIV>-taggarna (där jag skrivet bla bla bla...) är där du stoppar in allt du vill ha dolt.
För att sedan visa allt skapar du en helt vanlig länk fast som mål skrivar man:
<a href="javascript:visa('valfritt_id');"> Klicka här för att visa det dolda </a>
Som ni ser så ska alltså ID:et och texten i javascriptet vara samma ("valfritt_id" i mitt fall), stämmer inte de överens fungerar inte koden. Till er som inte skriver länkar för hand utan använder länk-knappen i editorn så ska "länkens url" endast vara javascript:visa('valfritt_id'); samt öppnas i samma fönster.
Det enklaste sättet för er som inte är så himla vana vid HTML och sånt är att skriv allt ni vill skriva, lägg in bilder, filmer, ja vad det nu är ni vill a dolt och gå sedan in i koden genom att trycka på "Infoga/redigera HTML-kod"-knappen / klicka på "Ändra redigerare" ner till höger och lägg till <div id="valfritt_id" style="display: none;"> precis före och </div> precis efter.
Sådär, lätt som en plätt, eller hur? :-)
Kommentarer
