find-templates - newsticker

newsticker

animierter Newsticker

22.02.12 | neue Strandbilder das schöne Wetter genutzt und am Strand fotografiert. In der Bildergalerie nun 14 neue Bilder.
19.01.12 | neue Videos ein Video vom Hafenfest und vom Feuerwerk nun eingebunden. Zu finden unter "meine Videos".
16.01.12 | Auto zu verkaufen günstig, nur kleiner Werkstattbesuch notwendig.
jetzt auf Facebook jetzt auch auf Facebook zu finden. Lasst den "like-Button" krachen ^^ facebook.de/xflensburger

Schritt 1 : Der CSS-Code

• mit dem CSS-Code bekommt Newsticker gewünschtes Aussehen
• auf "Eigene Seiten editieren" und gewünschte Seite auswählen
• im Editor (Werkzeugleiste) oben links auf "Quellcode" klicken
• zu Beginn (als erstes) dann folgenden Code einfügen

<style type="text/css">
<!--

/* Gesamte News-Box */
#newsbox{
	height: 230px;
	width: 400px;
	overflow: hidden;
	padding: 6px 10px 14px 10px;
        background-color: #FFFFFF;
        border: 1px solid #c9c9c9;
        border-radius: 8px; }

/* News-Felder */
#newsbox li{
	height: 70px;
	padding: 5px;
	list-style-type: none;}

/* Linkfarbe */
#newsbox a{ color: #000000;}

/* Aussehen News-Titel */
.news-title {
	display: block;
	font-weight: bold;
	margin-bottom: 4px;
	font-size: 11px; }

/* Aussehen Newstext */
.news-text {
	display: block;
	font-size: 11px;
	color: #666666; }
		
/* Grafiken im Newsticker */
#newsbox img {
        width: 80px;
        height: 60px;
	float:left;
	margin-right: 14px;
	padding: 4px;
	border: 1px solid #c9c9c9; }

-->
</style>

Schritt 2: Der Javascript-Code

• mit dem Javascript-Code wird die "Animation" ermöglicht
• auch mit im Seiteninhalt einfügen
• nach dem CSS-Code, also nach dem --></style>

Schritt 3: Der HTML-Code des Newstickers

• hier passen wir die Überschriften an
• hier fügen wir gewünschte Inhalte ein
• Grafikgröße hier 80 x 60 Pixel
• ebenfalls mit in den Seiteninhalt einfügen :

<br />
<br />

<ul id="newsbox">

<li>
<img src="GRAFIKADRESSE.jpg" alt="Bild" />
<a href="/Seite.htm" class="news-title"> Hier News-Titel 1 </a>
<span class="news-text"> Hier Beschreibung News 1 </span>
</li>
	
<li>
<img src="GRAFIKADRESSE.jpg" alt="Bild" />
<a href="/Seite.htm" class="news-title"> Hier News-Titel 2 </a>
<span class="news-text"> Hier Beschreibung News 2 </span>
</li>
	
<li>
<img src="GRAFIKADRESSE.jpg" alt="Bild" />
<a href="/Seite.htm" class="news-title"> Hier News-Titel 3 </a>
<span class="news-text"> Hier Beschreibung News 3 </span>
</li>

<li>
<img src="GRAFIKADRESSE.jpg" alt="Bild" />
<a href="/Seite.htm" class="news-title"> Hier News-Titel 4 </a>
<span class="news-text"> Hier Beschreibung News 4 </span>
</li>

</ul>

<br />
<br />
<br />

• ersetze /Seite.htm durch die Seitenadresse, auf die verlinkt werden soll
• bei Grafikadresse die URL vom Bild einfügen (die http://.............jpg)