Header verlinken
In diesem Tutorial möchte ich Ihnen zeigen wie es in den Designs Iceblue, Red, Butterfly und Colourful möglich ist den Header zu verlinken.Da die Möglichkeiten im Homepage-Baukasten begrenzt sind habe ich das Ganze mit dem Javascript-Framework jQuery umgesetzt.
Somit ist das Anklicken des Headers nur mit eingeschaltenem Javascript möglich.
1. Gehen Sie zu "Design einstellen"
2. Wählen Sie "Erweiterte Einstellungen"
3. Fügen Sie bei "Text über dem Design" den richtigen Code der folgenden Liste ein.
Es ist egal, wenn sich dort schon Code befindet.
Fügen Sie diesen Code einfach ganz am Anfang, vor dem ganzen anderen Code, ein.
Colourful:
<script type="text/javascript" src="https://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header2").css('cursor','pointer');
$("td.edit_header2").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header2").css('cursor','pointer');
$("td.edit_header2").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
Iceblue:
<script type="text/javascript" src="https://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header_full").css('cursor','pointer');
$("td.edit_header_full").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header_full").css('cursor','pointer');
$("td.edit_header_full").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
Red:
<script type="text/javascript" src="https://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header").css('cursor','pointer');
$("td.edit_header").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header").css('cursor','pointer');
$("td.edit_header").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
Butterfly:
<script type="text/javascript" src="https://img.webme.com/designs/globals/jquery.js"></script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header").css('cursor','pointer');
$("td.edit_header").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
$("td.edit_header").css('cursor','pointer');
$("td.edit_header").click(function() { document.location.href="URL"; });
});
// -- Ende verstecken -->
</script>
4. Ersetzen Sie in dieser Zeile
$("td.edit_header").click(function() { document.location.href="URL"; });
das URL mit der Zieladresse, auf die der Header verlinkt werden soll, beispielsweise http://www.homepage-baukasten.de/.
Damit würde die Codezeile so aussehen:
$("td.edit_header").click(function() { document.location.href="http://www.homepage-baukasten.de/"; });
5. Drücken Sie Speichern.
Für die Fortgeschritteneren unter Ihnen gehe ich den Code noch Zeile für Zeile durch. Leider kann ich den jQuery Code, wegen der Komplexität dieses Themas, nicht genau erklären. Aber es gibt genügend Tutorials im Internet dazu.
1.
<script type="text/javascript" src="https://img.webme.com/designs/globals/jquery.js"></script>
Diese Zeile bindet nur das Javascript-Framework jQuery, das später noch verwendet wird, ein.
2.
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
<!-- Verstecke fuer aeltere Browser --
Die erste dieser 2 Zeilen signalisiert dem Browser, dass ein Javascript-Code folgt.
Die 2. Zeile verhindert, dass es bei älteren Browsern zu Problemen kommt, indem sie den folgenden Code für diese Browser einfach auskommentiert.
3.
$(document).ready(function(){ //Wenn Seite vollständig geladen ist...
Man schaut, dass jQuery-Code immer erst nach dem vollständigen Laden der Seite ausgeführt wird. Diese Zeile bewirkt genau das.
4.
$("td.edit_header2").css('cursor','pointer');
Da es Benutzer gewohnt sind, dass bei anklickbaren Sachen das Symbol einer Hand erscheint, ändert diese Zeile den Cursor beim Überfahren des Headers in eine Hand.
5.
$("td.edit_header2").click(function() { document.location.href="URL"; });
Das ist die ausschlaggebende Zeile.
Sie sagt, dass bei einem Klick auf den Header diese Anweisung
document.location.href="URL";
ausgeführt werden soll.
Diese ändert die URL der gerade geladenen Seite auf die angegebene.
6.
});
Hier werden nur ein paar Klammern geschlossen, die vorher in Punkt 3 aufgemacht wurden.
7.
// -- Ende verstecken -->
</script>
</script>
Diese letzten beiden Zeilen sind sozusagen das Gegenstück zu Punkt 2.
Es wird zuerst den älteren Browsern signalisiert, dass sie jetzt wieder "aufpassen" dürfen und in der letzten Zeile wird dem Browser mitgeteilt, dass hier der Javascript-Code endet.
:-Kommentar zu dieser Seite hinzufügen: