HaSi digital supporten: Das HaSi bleibt Eselsohr

Ihr könnt uns supporten, indem ihr auf unsere Situation aufmerksam macht. Wer eine eigene Homepage besitzt, kann beispielsweise auf dieser unser „HaSi bleibt – Eselsohr“ einbinden. Eine Demo von unserem digitalen Eselsohr findet ihr auf dieser Seite am oberen rechten Rand. Fahrt einfach mal mit der Maus darüber 😉

Anleitung:

Als erstes müsst ihr folgenden HTML-Code in den <head>-Bereich einbauen.

<style type="text/css">
<!--
div#akct {
	position: fixed; top:0px;
	right: 0px;
	z-index: 100000;
	width:113px;
	height:88px;
	background-image: url(https://hafenstrasse7.noblogs.org/files/2018/01/hasi-bleibt-ecke-zu.gif);
	background-repeat: no-repeat;
	background-position: right top;
	border:none;
	padding:0;
	margin:0;
	text-align: right;
}

div#akct img {
	border:none;
	padding:0;
	margin:0;
	background: none;
	box-shadow: none;
}

div#akct a#akpeel img {
        width: 113px;
        height: 88px;
}

div#akct a, div#akct a:hover {
	text-decoration: none;
	border:none;
	padding:0;
	margin:0;
	display: block;
	background: none;
	box-shadow: none;
}

div#akct a#akpeel:hover {
	position: fixed;
	top:0px;
	right: 0px;
	z-index: 100000;
	width:500px;
	height:500px;
	display: block;
	background-image: url(https://hafenstrasse7.noblogs.org/files/2018/01/hasi-bleibt-open.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

-->
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
		right: -1px;
</style>
<![endif]>
<![endif]-->

Anmerkung:
Falls ihr die Möglichkeit habt, könnt ihr natürlich, anstatt den CSS-Code über HTML <head>-Bereich zu integrieren, den CSS Code aus dem oberen Block herauskopieren und in euer Stylesheet (CSS-Datei) einfügen (Aber ohne die HTML Tags).
Diese Möglichkeit bieten auf etwas umständliche Weise auch auf WordPress basierende Seiten (wie z.B. blogsport.de, noblogs.org, blackblogs.org u.a.) an. Unter Design -> „Individuelles CSS“ kann eigener CSS-Code eingefügt werden. Aus dem oberen Code Block muss folgender Teil in das Stylesheet übernommen werden.

div#akct {
	position: fixed; top:0px;
	right: 0px;
	z-index: 100000;
	width:113px;
	height:88px;
	background-image: url(https://hafenstrasse7.noblogs.org/files/2018/01/hasi-bleibt-ecke-zu.gif);
	background-repeat: no-repeat;
	background-position: right top;
	border:none;
	padding:0;
	margin:0;
	text-align: right;
}

div#akct img {
	border:none;
	padding:0;
	margin:0;
	background: none;
	box-shadow: none;
}

div#akct a#akpeel img {
        width: 113px;
        height: 88px;
}

div#akct a, div#akct a:hover {
	text-decoration: none;
	border:none;
	padding:0;
	margin:0;
	display: block;
	background: none;
	box-shadow: none;
}

div#akct a#akpeel:hover {
	position: fixed;
	top:0px;
	right: 0px;
	z-index: 100000;
	width:500px;
	height:500px;
	display: block;
	background-image: url(https://hafenstrasse7.noblogs.org/files/2018/01/hasi-bleibt-open.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

Als nächstes müsst ihr folgenden HTML-Code in den <body>-Bereich einbauen
(Aber Vorsicht. Content-Management-Systeme wie WordPress bieten häufig einen visuellen Editor um die Eingabe zu erleichtern. Dieser muss so eingestellt sein, dass reiner HTML-Code akzeptiert wird – z.B. in WordPress im Editor oben rechts von „Visuell“ auf „Text“ umschalten):

<div id="akct" ><a id="akpeel" href="https://hafenstrasse7.noblogs.org/hasi-bleibt/" 
target="_blank" title="HaSi bleibt!"/><img src="https://hafenstrasse7.noblogs.org/files/2018/01/Akvst.gif" alt="HaSi bleibt!"></a></div>

Lizenz: CC-BY-SA