Weiterlesen jetzt auf Knopfdruck und per CSS
Kaum ein Blogger wird wohl nicht hin und wieder dem Template bzw. Outfit seiner Seite zu Leibe rücken. Mich reizt es immer wieder, neue Funktionen auszuprobieren, Plugins durch php-Codes zu ersetzen und – last but not least – immer mal etwas frischen Wind in das Blogdesign bringen.
Letzteres liegt mir gerade ein bisschen am Herzen, obwohl mir erstaunlicherweise mein Smoky-Template immer noch sehr gut gefällt. Aber d. h. nicht, dass man es nicht verbessern könnte – obwohl der visuelle Eindruck meist mit einem sehr subjektiven Empfinden einhergeht, wie mal wieder sehr eindrucksvoll die Kommentare auf Eriks Webmaster-Zentrale zu dem Beitrag über sein neues Blog-Logo dokumentieren.
Was für ein Button soll es denn sein?
Mir gefielen immer schon die plastischen Buttons auf anderen Blogs sehr gut und so beschloss ich, diese auch nach und nach in meinem Blog umsetzen. Auf keinen Fall aber sollten es Grafikbuttons sein, sondern ich wollte sie in CSS umsetzen. Nun ist die manuelle Umsetzung des Borderradius’, der Schatteneffekte des Textes und der Kanten schon ein wenig aufwendig, wie ich an meiner Rebus-Seite bereits erfahren musste. Das war zwar ein schöner Lerneffekt für mich, aber warum kompliziert, wenn es auch einfacher funktioniert.
Tools erleichtern das Webmaster-Dasein
Per Zufall bin ich auf den Link eines Button-Generators gestoßen, der so supereinfach zu bedienen ist, so dass ich auch prompt meine bunte Blogwelt mit einem CSS-Button bestückt habe. :-)
Button per CSS einbinden
Als ich den Button nach meinen Wünschen in dem Button-Generator erstellt hatte, brauchte ich nur draufklicken und schon wurde automatisch ein Code generiert. Diesen habe ich dann kopiert und in die style.css meines Themes eingefügt. Ein wenig habe ich den Button noch angepasst:
- die padding-Werte verändert, weil er mir etwas zu wuchtig war und die Schriftgröße verkleinert;
- den Wert float: right vergeben und
- um folgenden Code ergänzt
myButton a { text-decoration:none!important; color:#7a787a; }!important deswegen, da trotz des Attributes none der CSS-Wert (das Unterstreichen von Text) für sämtliche Verlinkungen in meinem Blog umgesetzt wurde.
Der Code sieht nun so aus:
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffedff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffedff;
box-shadow:inset 0px 1px 0px 0px #ffedff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f5f2f5), color-stop(1, #dbdbdb) );
background:-moz-linear-gradient( center top, #f5f2f5 5%, #dbdbdb 100% );
background:-moz-linear-gradient( center top, #f5f2f5 5%, #dbdbdb 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f2f5', endColorstr='#dbdbdb');
background-color:#f5f2f5;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #adadad;
display:inline-block;
color:#7a787a;
font-family:Trebuchet MS;
font-size:13px;
font-weight:bold;
float:right;
padding:3px 14px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.myButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dbdbdb), color-stop(1, #f5f2f5) );
background:-moz-linear-gradient( center top, #f5f2f5 5%, #dbdbdb 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f2f5',
background-color:#dbdbdb;
}.myButton:active {
position:relative;
top:1px;
}
.myButton a {
text-decoration:none!important;
color:#7a787a;
}Einbindung in der index.php
Der Grundstein ist also gelegt, anschließend musste ich noch die index.php (ebenfalls zu finden in dem Verzeichnis des eigenen Templates) ändern. Bei mir sah der Wert für den Weiterlesen-Link erst einmal so aus:
<div class="postmetadata">
<p><a href="<?php the_permalink() ?>">weiterlesen</a></p>
</div> 
Damit nun der Button angezeigt wird, muss ich diesen Code um den folgenden ersetzen:
<div class="myButton">
<p><a href="<?php the_permalink() ?>">weiterlesen >></a></p>
</div> 
Eine kleine Ergänzung war noch erforderlich
Nun erscheint der Button an der gewünschten Stelle, aber was muss ich feststellen? Die Horizontallinie, die für eine optische Trennung der Beiträge sorgen soll, war verschwunden und der Button in die Anzeige der Kommentaranzahl gerutscht.
Ah okay, diese war in der CSS-Regel für postmetadata definiert. Daher habe ich für die Linie eine eigene CSS-Klasse angelegt …
.hr-entry {
border-bottom: 2px solid #E0DBDB;
padding: 25px 10px;
width:100%;
}… und den Wert in der index.php direkt unter den div-Code des Buttons hinzugefügt:
Edit
Gegebenenfalls müssen ebenfalls die archive.php und search.php angepasst werden.
Mir gefällt der Button unheimlich gut und ich finde, er macht schon was her. Was meint ihr? Ich überlege ja noch, ob es sich an anderer Stelle ebenfalls anbietet, solch einen Button einzubauen. Mal schauen, wenn es mich packt … ;-)
Hey Sylvi,
also mir gefallen die Weiterlesen-Buttons bei dir jetzt auch sehr gut! Macht doch nochmal ein bisschen mehr her als so ein einfacher Text mit Pfeil.
Ich habe erst vor kurzem bei mir das Kommentarformular mal überarbeitet und da kommt jetzt einer der Buttons vom RedTeamDesign zum Einsatz (http://red-team-design.com/just-another-awesome-css3-buttons/). Wenn ich mich recht erinnere bin ich sogar durch einen Tweet von dir darauf aufmerksam geworden.
Gefällt mir eigentlich auch sehr gut, aber vielleicht muss ich auch mal ein bisschen mit dem Button-Generator rumspielen, weil ich (fällt mir gerade auf) gar keinen “Weiterlesen”-Link habe. Ich selbst komme ja ganz gut ohne klar, aber ob das jeder (der nicht unbedingt in der Bloggosphäre zuhause ist) versteht, dass man die Überschriften anklicken muss!?!
Liebe Grüße und Danke für die “Erinnerung”
Leon
Hej Leon,
lach … stimmt, die Seite hatte ich ja sogar getwittert und habe sie jetzt glatt noch einmal gespeichert. Ich fand an der verlinkten Seite in meinem Beitrag die Funktionen mit den Schiebereglern so praktisch und die Farbauswahl über den ColorPicker.
Jetzt wo Du es sagst: ich war letztens auf einer Seite, da fiel es mir auch auf – der fehlende Weiterlesen-Link/Button. Kann sogar sein, dass das Deine Seite war ;-) Und genau, das was Du jetzt sagst, ging mir auch durch den Kopf:
Ich würde ihn auf jeden Fall noch einbauen.
Und … gerne geschehen ;-)
Lieben Gruß
Sylvi
*lästermodus*: Boah, ist dat schön, watt is der Button schööön… ;-))
Sorry, mir war grad so danach. Aber so ein Button gibt natürlich wirklich mehr her…
Huhu Fischkopp,
ja gell? Bin ja baff über diesen starken Gefühlsausbruch … und das aus dem hohen Norden! :-D
Ich hab schon gesehen, Du hast auch wieder fleißig an dem Outfit Deiner Seite gewerkelt – gefällt mir sehr gut und wenn ich sagen darf – besser als das Vorherige.
Gruß Sylvi
Sylvi, ich komme aus dem Staunen nicht mehr raus. Was ist nur aus der Sylvi geworden, die laufend Fehlermeldungen hatte? ;-)
Inzwischen entwickelst du dich ja zum echten Web-Profi :) Ich glaube, ich muss den Eintrag in meiner Blogroll überarbeiten, wo ich geschrieben habe, dass du Probleme mit der Technik hättest ;-)
Hej Cujo,
najaaa … ich glaube, dass ich nicht wesentlich mehr Fehlermeldungen erhalte als jeder andere PC-Besitzer und Webseitenbetreiber. Ich kann es nur eben nicht für mich behalten und schon mal gar nicht, wenn ich es beheben konnte. ;-)
Also wenn ich nicht genau wüsste, was in der Beschreibung Deiner Blogroll steht, wäre ich ja jetzt fast beleidigt (von wegen Frauen und Technik ;-) ). Aber ich weiß ja, dass die Beschreibung über meine Seite in Deiner Blogroll etwas diplomatischer klingt … :mrgreen:
Gruß Sylvi
Was die Sylvi wieder alles kann *erstaunt guck*
Finde Deinen neuen Button auch ganz fein, wenngleich ich den Textlink auch schick fand ;-)
Lieben ich-traue-mich-ja-nie-im-Code-herumzufuhrwerken-Gruß
Erdbeere
P.S. Aber wozu hat man einen Testserver, höre ich Dich schon sagen *smile*
Hahaha … genau Erbeere :-D. So eine Testseite ist schon Gold wert. Wobei ich jetzt leider zu meiner Schande gestehen muss, dass ich die Änderungen direkt im Backend über den Editor vorgenommen habe *schäm*.
Aber wozu hat man Verzeichnissicherungen? Zur Not lade ich die entsprechende css- oder php-Datei (falls ich sie verhunzt habe) ganz schnell wieder hoch ;-)
Du-weißt-doch-…-Augen-zu-und-durch-Gruß ;-)
Sylvi
Ja, ich weiß! Und werde demnächst auch aktiver. So ein zwei CSS Angelegenheiten gefallen mir nämlich überhaupt nicht in meinem Blog.
Lieben meine-komischen-H1-n-Auszeichnungen-beispielsweise-Gruß
Erdbeere
P.S. War sehr nett gestern, trotz der miserablen Übertragungsqualität :-)
Ui, da bin ich ja mal gespannt, ob sich bei Dir demnächst was tut :-)
Ich fands auch total klasse :-D Ach und irgendwie gehört das doch fast dazu, dass es nie sofort und zu 100 % funktioniert und daher war ich gar nicht sooo erstaunt.
Außerdem sind wir schließlich facebook-geschädigt und somit Kummer gewöhnt ;-)
— Man in Sachen Facebook kommt einiges neues auf uns zu. Ich habe mir gerade die F8 angesehen. Profile gibt es bald keine mehr, stattdessen eine Timeline, in der Du Dein gesamtes Leben, bis hin zum Livetracking niederlegen kannst. Das ganze wird per Jahresstrahl in der rechten Seite angezeigt.
Beispiel: 1989 hat Sylvi dies gemacht, 2005 das. Aktuell befindet sich unser Sylvikind im Park beim Joggen. Warte jetzt hier noch schnell automatisch das Foto vom Finish auf die Timeline gestellt und die gläserne Sylvi ist perfekt. Dies erwartet uns in den kommenden Wochen und Monaten *hüpf*
Bleibt zu hoffen, das man das meiste irgendwie von sich abwenden kann bzw. die neuen Social Apps, die uns diese Timeline-Vergnügen bescheren, auch irgendwie zu bremsen sind *erstaunt guck*
So das war das wichtigste von der Facebook Keynote in Kürze zusammengefasst :-)
Lieben auf-bald-Gruß
Erdbeere
Ich habe mich mittlerweile ein bisschen erkundigt, kann mir aber ehrlich gesagt zum jetzigen Zeitpunkt noch nicht vorstellen, wie das umgesetzt aussehen soll. Ich find Facebook jetzt bereits schon etwas überladen, noch mehr brauche ich eigentlich nicht.
Ganz lieben Wochenendgruß
Sylvi