5202

ein Blog über technische Fragen zu Blogger

Header-Wechsel auf unterschiedlichen Seiten-Typen

von
Als Spielerei für die Nacht habe ich kleines Script gebastelt, dass auf jedem Seiten-Typ ein anderes Header-Bild anzeigt. Blogger hat bekanntlich sieben Seitentypen, von denen drei wirklich wichtig sind: Nämlich 'statische Seiten', 'Index (Start) Seiten' und 'Item (Post) Seiten'. Jeder dieser Seiten könnt ihr über konditionelle Tags eine eigenes Layout geben. So weit so gut, aus Spass habe ich konditionellen Tags mit einem Script geschrieben, das das Header-Bild auf jeder dieser Seite wechselt. Wenn's jemand ausprobieren will, bitte erst in einem Test-Blog, nicht in eurem Haupt-Blog.

jQuery

Das Script ist jQuery und damit das funktioniert, müsst ihr zunächst das jQuery-Framework in euren Blog einbauen. Wie das geht, habe ich schon mal beschrieben, muss ich jetzt nicht wiederholen, oder?

Konditionelle Tags

Ihr sucht in eurem Blog diesen Tag:
<body expr:class='&quot;loading&quot;   data:blog.mobileClass'>
Direkt _darunter_ kommen die Konditionale Tags:
Item (Post) Seite
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
$(document).ready(function() { 
$(&quot;#Header1_headerimg&quot;).attr(&quot;src&quot;, &quot;http://goo.gl/SB5PG&quot;);}); 
</script>
</b:if>
Index (Start) Seite
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
$(document).ready(function() { 
$(&quot;#Header1_headerimg&quot;).attr(&quot;src&quot;, &quot;http://goo.gl/SB5PG&quot;);}); 
</script>
</b:if>
Statische Seiten
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
$(document).ready(function() { 
$(&quot;#Header1_headerimg&quot;).attr(&quot;src&quot;, &quot;http://goo.gl/SB5PG&quot;);}); 
</script>
</b:if>
Das einzige was ihr noch machen müsst, ist http://goo.gl/SB5PG gegen euren eigen Link auszutauschen. Das Script wechselt den Link zum Header-Bild aus, d.h. das funktioniert nur, wenn der Header tatsächlich ein Bild ist und nicht Hintergrund o.ä. Im Header muss "Anstelle von Titel und Beschreibung" angekreuzt sein, sonst funktioniert es nicht.

Anmerkungen

Falls irgendetwas nicht klappt oder unklar ist, fragt einfach in den Kommentaren nach. Falls alles klappt und klar ist, könnt ihr natürlich auch einen Kommentar hinterlassen :=)