Dienstag, 24. März 2009

Blogger: Text zum Email-Icon (Weiterempfehlung) anpassen

Bei Blogspot-Blogs kann man eine Option einfügen, die es einem Blog-Leser ermöglichen soll, einen bestimmten Blog-Beitrag (Blog-Post) per Email an einen Bekannten etc. weiterzuempfehlen.

Unterhalb des Posts wird dazu ein "Briefumschlag-Icon" angezeigt.
Bei überfahren des Icons erscheint der Text "Post per Email senden".

Um diesen Hinweis etwas hilfreicher zu gestalten, kann man im Blog-Template einen weiteren Text hinzufügen.

Achtung: Bei Änderungen am Template bitte vorher immer eine Sicherung erstellen.

Im Layout-Editor geht man auf "HTML bearbeiten" und aktiviert das Kästchen "Vorlagen zum Erweitern von Widgets"

Mit der Browser-Suche (STRG + F) sucht man nach dem Eintrag post-icons. Erst wird ein CSS-Eintrag gefunden, mit weitersuchen den nächsten Eintrag finden.

In meinem Template sieht der Code so aus:

<data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->


Man fügt jetzt nur zwischen den beiden Zeilen

<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>

und

</a>

den gewünschten Hinweis-Text ein:

<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/> Diesen Beitrag per Email weiterempfehlen
</a>

Der gesamte Code-Teil sieht nun so aus:

<data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/> Diesen Beitrag per Email weiterempfehlen
</a>
</span>
</b:if>
<!-- quickedit pencil -->

Blogger-Email-Icon-Text-anpassen

Die Mail die über eine gesonderte Blogger-Seite bearbeitet und gesendet wird, sieht so aus:

Blogger-Email-Icon-Mail

NoodleGei.blogspot.com

Ähnliche Beiträge zum Thema/Kategorie:



6 Kommentar(e) zum Beitrag:

Kessi hat gesagt…

Unglaublich, was man alles machen kann.... :) - ich werde mich ab morgen ran machen und mit HTML-Programmierung anfangen, das ist mein nächstes Lehrheft (eigentlich eher ein richtig fettes Buch....) :-), wenn ich das durch habe, werde ich alle Deine HTML-Tipps nacharbeiten *g... vorher bin ich da eher noch etwas zu unkess... lach.... liebe Grüße - Kessi

NoodleGei hat gesagt…

Hi Kessi,
das hat aber weniger mit HTML und mit Programmierung zu tun.

Blogger-Templates sind eine Mischung aus HTML, CSS und einer "Eigenkreation" von Blogger.
Im Template werden bspw. Loops (Schleifen) und IF-Abfragen genutzt. Das geht schon mehr in Richtung Programmierung, hat aber nichts mit HTML/CSS zu tun.

HML/CSS wird einfach nur geschrieben und NICHT programmiert!

Aber, ich kann dir und natürlich allen anderen ;-), nur empfehlen, sich mit den Grundlagen zu HTML und CSS zu beschäftigen!

Zu bedenken ist auch, dass viele Lehrbücher zu HTML, viel zu viel alten Schrott enthalten.
Bspw. werden Layout-Aufgaben mittels HTML beschrieben (Tabellen), dieses wird aber heutzutage mit CSS vorgenommen.
Es werden auch Tags beschrieben, die vom Standardisierungs-Konsortium W3C, nicht mehr empfohlen werden.
Online-Tutorials können und sind es z.T. auch, viel aktueller.
Z.B.:
HTML und vieles andere

HTML und CSS

Verwirrend ist auch, dass bestimmte "Befehle" (Tags) in HTML und CSS gleichartig sind und man als Anfänger die Unterschiede nicht erkennt.

PS: Die Kenntnisse über das OSI-Referenz-Modell sind auch wichtige Grundlagen. Wichtig ist nur, dass das OSI-Modell es nur theoretisch geschafft hat. Die Europäer haben es mal wieder vermasselt. Viel zu akademisch aufgeblasen und die praktischen Umsetzungen waren nur Flops.

Die Amis haben daraus das praktische TCP/IP-Modell gemacht und das Ding war ein Selbstläufer und ist heute die Grundlage für das WWW ;-).

Kessi hat gesagt…

Wow, Du bist der Hammer!! Danke :)) - und hey, Du liest ja bei mir mit :)). Das freut mich! Ach, ich werde fleissig sein und mich mit all den Grundlagen befassen, damit ich Dir nachher als "Noodlegei"-Assistentin helfen kann, lach...
Liebe Grüße - Kessi

NoodleGei hat gesagt…

Hi,
klar lese ich auch bei Stammlesern/-Kommentatoren mit ;-).

Schau mal zum Thema Online-Journalismus den Bericht zu den "Mainzer Tage der Fernsehkritik 2009" an:

Interessantes zum Onlinejounalismus

Die ersten 10-15 Minuten das übliche, dann wird es wirklich gut. Aus meiner Sicht ...

kidshome-trier hat gesagt…

Hallo,
ich bin ganz neu in der Bloogerwelt.
Und als ich jetzt auf deinen beitrag gekommen bin, wollte ich es gerne in meinen Blog setzen.
Doch in meinem Layout HTML gibt es kein " post-icons".
Hast du einen Tipp.

Ich möchte gerne links am Rand ein paar Bilder udn den Flickr Link setzen.

Über einen Tipp würde ich mich sher freuen
Vielen Dank
miriam

NoodleGei hat gesagt…

Hallo Miriam,

du hast in deinem Template den Eintrag post-icons auch drin!
Du musst jedoch noch das "Weiterempfehlen per Email" in deinem Blog aktivieren:

In den Layout-Editor gehen >> Seitenelemente, dann unter Blog-Post bearbeiten, aus dem Auswahlfenster den Punkt "Links für E-Mail-Posts anzeigen" anklicken und speichern.

Bei dem suchen im Template, unbedingt das Kästchen "Vorlagen zum Erweitern von Widgets" aktivieren.

Kommentar veröffentlichen

Kommentare bitte fair und im rechtlich erlaubten Rahmen verfassen!
Die Kommentare und ggf. hinterlassene URLs werden von mir überprüft. Kommentare die für blaue Pillchen, Glücksspiele, bestimmte Bilder/Videos, Abzocker-Dienste usw. werben, werden gelöscht.

Kommentare von SEO-Link-Builder sind ebenso unerwünscht!

In den Kommentare können die HTML-Tags für:
kursiv = <i>Testwort</i>
fett = <b>Testwort</b>
Links = <a href="http://www.deineURL.de/">Link Text</a>
genutzt werden. Einfach die o.g. Beispiele kopieren und mit den eigenen Werten ersetzen.

  © Blogger template Columnus by Ourblogtemplates.com 2008

Back to TOP