Sascha-Oertlin.com
workablogic
Abonniere meinen Feed
Schnapp mein Feed!
Bleibe immer auf dem neuesten Stand und abonniere den kostenlosen Feed.
Folge mir!
Immer informiert bleiben! Werde mein Follower!
Google Group beitreten
Friend Connect
Trete der ständig wachsenden Community bei.
Facebook Fan werden
Werde Fan!
Werde mein Fan bei Facebook



How To – Css Formatierung der Related Posts


In diesem Tutorial werde ich euch zeigen, wie man dem Plugin Related Posts eine eigene Css Klasse zuweisen kann. Wir werden anschließend diese Klasse in das Template eures Blogs einbauen, so dass ihr eure Anzeige der Related Posts selber so formatieren könnt, wie es euch gefällt.

Der erste Schritt

Der erste Schritt ist der einfachste. Man fügt den folgenden Css Code einfach in die Css Datei ein, die für das Aussehen der Seite zuständig ist. In den meisten Fällen ist das die “Style.css”. Einige Ausnahmefälle gibt es natürlich immer, aber ihr wisst was ich meine.

/*
Custom set of CSS classes to display related posts.
http://www.sascha-oertlin.com
2008 Feb 07
*/

.rel-posts
{
width:430px; height:auto; border:1px solid #B3B3B3;
margin-right:10px; float:left;
}

div.rel-posts p:first-child
{
background-color:#82a0bc; color:#ffffff; padding:5px;
font-size:100%; border-bottom:1px solid #B3B3B3; margin:0
}

div.rel-posts ul li
{
text-indent:0px; font-size:100%;
}

Es gibt drei markierte Punkte (ja die fetten!) die ihr ändern könnt, um das Aussehen der Related Posts an euer Template anzupassen.

Die width Eigenschaft gibt dabei die Breite an. Die möglichen Werte werden hier in px(Pixel) angegeben. Ihr solltet möglichst darauf achten die Breite nicht über die Artikelspalte hinaus auszudehnen.

Die Eigenschaft background-color gibt die Hintergrundfarbe der Titelzeile an und der Wert color gibt die Farbe an, in der die Links dargestellt werden.


Nachdem dieser Code in der Gesichts-CSS gespeichert wurde, steht er für unsere Anwendung zur Verfügung. Im nächsten Schritt bauen wir diese Klassen in unser Template ein.

Formatierung

Wir öffnen also die Template Datei Single.Php, die für die Darstellung unseres Artikels zuständig ist. Wenn ich richtig informiert bin, dann ist diese in jedem Theme vorhanden, man muss also nicht erst suchen. Folgenden Code suchen wir raus:

<?php
  if( function_exists(’rp_related_posts’) )
    rp_related_posts( ‘<br /><h3>Verwandte Beiträge:</h3>’ );
?>

Diese Funktion ruft die Verwandten oder ähnlichen Beiträge auf. Derzeit ist sie aber noch, ich sage mal nackt. Wir verpassen diesem Code jetzt die Optik und kleiden sie dafür in ein Div-Tag ein. Das sieht dann wie folgt aus:

<div class=”rel-posts”>
<?php
  if( function_exists(’rp_related_posts’) )
    rp_related_posts( ‘<br /><h3>Verwandte Beiträge:</h3>’ );
?>
</div>

 

Damit hat man eigentlich schon alles geschafft. Die Related Posts, Ähnliche Beiträge oder Verwandte Themen haben jetzt ihre eigene Klasse und können nach belieben formatiert werden. Ich hoffe es hat ein wenig geholfen. Anregungen und Kritik bitte sofort in die Kommentare. Wie das ganze Aussehen kann, sehr ihr ein Stückchen weiter unten. Und vergesst nicht zu voten!

 


Kommentieren

Infos zur Freischaltung von Kommentaren

Ich habe ein paar Regeln für die Kommentarfunktion aufgestellt. Kommentare mit folgenden Merkmalen werden nicht freigeschaltet oder vor der Freigabe entsprechend editiert:

  • Als Name wurde ein Keyword eingegeben
  • In URL oder Kommentar wurde ein Referrallink eingebaut
  • Der Kommentar dient nur als Werbung
  • Der Kommentar ist vulgär oder beleidigt andere Kommentatoren
  • Der Kommentar dient offensichtlich nur dem Zweck einen Backlink zu erlangen
  • Links zu Porno- Rechtsradikalen oder Gewaltverherrlichenden Seiten werden gelöscht - Ich bin der Admin! Ich habe diese Macht!
  • Die Bereitstellung von Werbekommentaren geschieht ausschließlich auf Basis der AGB, die in den Links zu finden ist.
  • Mit der Veröffentlichung von Werbung via Kommentar, erklären Sie sich durch das Absenden des Kommentars mit den Bedingungen für die Platzierung einer Werbeanzeige und den AGB von Sascha-Oertlin.com einverstanden.

Ich hoffe ihr habt Verständniss für diese Regeln. Sascha-Oertlin.com ist kein Platz um Werbung und verbalen Durchfall abzuladen.

 
Blogstats
433 Beiträge bisher
0 Kommentare bisher
20572 Besucher dieses Jahr
5626 Besucher diesen Monat
313 Besucher heute
Statistik Tool installiert am 01.09.09
Alle Artikel anschauen
Partner & Sponsoren
Sascha-Oertlin.com
ADCELL


Blog Marketing
teliad - Der Marktplatz für Textlinks


Sascha-Oertlin.com
Sascha-Oertlin.com



Letze Kommentare
    Archiv
    Buttons
    Blogverzeichnis - Blog Verzeichnis bloggerei.de www.beliebtestewebseite.de Blog Top Liste  by TopBlogs.de BlogPingR.de - Blog Ping-Dienst, Blogmonitor blogoscoop Blogs.Add to Technorati Favorites
    Bloggeramt.de Web Directories List Bloggers & Blogging Blogs - BlogCatalog Blog Directory Counter Geld verdienen Bookmark & Share Icerocket http://www.wikio.de