Post Titel in einer Seite bei Blogger Blogspot darstellen
Wie kann man nur alle Post Titel bei Blogger Blogspot anzeigen lassen? Wie kann man alle Post Titel in einer extra Seite bei Blogger Blogspot anzeigen lassen? Wie lassen sich die Post Titel in einer Blogger Blogspot Seite farblich gestalten?
Wer sich schon etwas intensiver mit seinem Blogger Blogspot Blog auseinander gesetzt hat, wird bemerkt haben, dass es nicht sehr viele Möglichkeiten gibt, nur die Post Titel anzeigen zu lassen.
Eine Möglichkeit wäre das Gadget Blog-Archiv zu verwenden. Leider lassen sich die Post Titel nicht ohne Zeitangabe (Jahr, Monat, usw.) anzeigen.
Aber immerhin nur die Post Titel lassen sich nun über das Gadget Beliebte Posts anzeigen. Überall wo sich in der Template Vorlage unter Layout >> Gadget hinzufügen findet, kann man sich die Post Titel anzeigen lassen. Dazu wählt man unter Layout >> Gadget hinzufügen >> Beliebte Posts: entfernt dort die Haken bei Miniaturansicht und Snippet >> speichern. Die Miniaturansicht gibt dann, wenn vorhanden, verkleinerte Bilder des Posts aus. Snippet zeigt die ersten Zeilen des Posts als kleinen Textausschnitt an.
Hat man nun aber schon sehr viele Artikel geschrieben und möchte diese über das Gadget Beliebte Posts anzeigen lassen, wird man vielleicht enttäuscht feststellen, dass die Anzeige auf 10 Posts limitiert ist. Aber es würde auch nicht viel Sinn machen zum Beispiel 100 Posts in der Seitenbar oder am Blogende (im Footer) anzeigen zu lassen, weil die Seite nach unten immer länger wird und man ewig nach unten scrollen muss. Für die Nutzerfreundlichkeit eines Blogs ist dies eher ungünstig, besonders weil viele Webseiten mit mobilen Geräten angesurft werden und auf kleinen Bildschirmen sind sehr lange Webseiten ein wenig lästig.
Ja, und damit sind auch schon fast die Möglichkeiten zur Anzeige der Post Titel erschöpft. Nun gibt es aber einen kleinen Trick wie man die Post Titel auf einer Seite (page) anzeigen lassen kann. Im Blog Menü findet sich die Rubrik Seiten (links), diese lassen sich für eine Über Mich Seite, ein Impressum usw. nutzen. Man kann nun aber in einer eigenständigen Seite alle Post Titel übersichtlich untereinander anzeigen lassen. Dazu werden 2 Dinge nötig sein: es wird etwas Html Code + das Script zum blogeigenen Feedaufruf zum Anzeigen der Post Titel in eine Seite eingefügt und um etwas das Design abzuändern wird etwas CSS in den Vorlagendesigner eingefügt.
1. Seite anlegen und Code einfügen
- es wird die neue Blogger Oberfläche verwendet, wer sie noch nicht benutzt, kann sie im Dashboard (ganz oben) unter Neue Blogger-Oberfläche testen aktivieren
- bei Blogger.com einloggen und wie bei jeder Veränderung am Blog unbedingt eine Sicherung vom Template und vom Blog (alle Artikel & alle Kommentare) anfertigen – wenn es nicht funktioniert kann man beide Dateien wieder hochladen
- Template sichern: beim entsprechenden Blog zu Layout >> Backup/Wiederherstellung (oben rechts) >> Vollständige Vorlage herunterladen
- Blog sichern: beim entsprechenden Blog zu Einstellungen >> Sonstiges >> Blog exportieren (ganz oben) >> Blog herunterladen
- entsprechenden Blog und die Rubrik Seiten aufsuchen
- Neue Seite >> Leere Seite und unter Seitentitel (oben) einen Namen (z.B. Artikel, Artikel-Archiv, usw.) vergeben
- unter Seiteneinstellungen >> Optionen kann man noch (wer möchte) Leserkommentare – Nicht Zulassen Erstellungsmodus wählen, dann werden keine Kommentare unter dieser Seite angezeigt und es wirkt übersichtlicher
- am Editor finden sich 2 Tabs für den Schreibmodus (oben links: Verfassen, HTML), dort auf HTML und folgenden Code einfügen:
function listemall(json){
var listhis='<ol>';
for(var i=0; i<json.feed.entry.length; i++){
var posttitle=json.feed.entry[i].title.$t;
for(var k = 0; k < json.feed.entry[i].link.length; k++){
if (json.feed.entry[i].link[k].rel == 'alternate') {
var postlink = json.feed.entry[i].link[k].href;
}
}
listhis+='<li><a href="'+postlink+'">'+posttitle+'</a></li>';
}
listhis+='</ol>';
document.getElementById('listes').innerHTML=listhis;
}
</script>
<script
src=http://www.bloggerlatein.blogspot.com/feeds/posts/default?max-results=100&alt=json&callback=listemall></script>
Die blaue Markierung mit der eigenen Blogadresse ersetzen. Bei der roten Markierung wird die Anzahl der anzuzeigenden Post Titel eingestellt.
Dann auf Seite Veröffentlichen, die Seite schließt sich automatisch, wird unter Seiten angezeigt und man klickt auf den Seiten Titel und die Seite mit den Post Titeln sollte angezeigt werden. Im Test sah es so aus:
Wer nun aber so gar nicht mit Ziffern kann und diese nicht angezeigt bekommen möchte, kann auch einen anderen Stil wählen, dazu wird eine winzige Änderung am HTML Code notwendig
Oben angeführter HTML Code:
function listemall(json){
var listhis='<ol>';
for(var i=0; i<json.feed.entry.length; i++){
var posttitle=json.feed.entry[i].title.$t;
for(var k = 0; k < json.feed.entry[i].link.length; k++){
if (json.feed.entry[i].link[k].rel == 'alternate') {
var postlink = json.feed.entry[i].link[k].href;
}
}
listhis+='<li><a href="'+postlink+'">'+posttitle+'</a></li>';
}
listhis+='</ol>';
document.getElementById('listes').innerHTML=listhis;
}
</script
<script
src=http://www.bloggerlatein.blogspot.com/feeds/posts/default?max-results=100&alt=json&callback=listemall></script>
Die lila Markierung (ol) definiert die Auflistung der Post Titel in Form einer Nummerierten Liste. Indem man nun die zwei ol in zwei ul umändert kann man sich die Post Titel als Aufzählungsliste anzeigen lassen. Das sieht dann so aus:
Der schon geänderte HTML Code dafür:
function listemall(json){
var listhis='<ul>';
for(var i=0; i<json.feed.entry.length; i++){
var posttitle=json.feed.entry[i].title.$t;
for(var k = 0; k < json.feed.entry[i].link.length; k++){
if (json.feed.entry[i].link[k].rel == 'alternate') {
var postlink = json.feed.entry[i].link[k].href;
}
}
listhis+='<li><a href="'+postlink+'">'+posttitle+'</a></li>';
}
listhis+='</ul>';
document.getElementById('listes').innerHTML=listhis;
}
</script>
<script
src=http://www.bloggerlatein.blogspot.com/feeds/posts/default?max-results=100&alt=json&callback=listemall></script>
2. Die Veränderungen des Designs werden nun über den Vorlagendesigner getätigt.
- Vorlage >> Live im Blog >> Anpassen >> Erweitert >> CSS hinzufügen (in der zweiten Spalte etwas nach unten scrollen)
CSS zur Änderung der Hintergrundfarbe (hier blau):
#listes {
background:#A4D3EE;
}
An der rot markierten Stelle wird nun die Farbe definiert, eine Farbtabelle gibt es z.B. HIER und der Farbcode wird in der Spalte HEX ausgewählt und ersetzt.
CSS zum Ausblenden der Aufzählungszeichen:
#listes ul{
list-style:none;
}
Bei der rot markierten Stelle ist es nun wichtig zu wissen, ob man im HTML Code (der in die Seite eingefügt wurde) ul oder ol stehen hat. Wer ul dort stehen hat verwendet ul, und ol wer ol dort stehen hat.
CSS zur Änderung der Post Titel Farbe (hier weiß):
#listes ul a:link{
color:#FFFFFF;
}
Bei der rot markierten Stelle ist es nun wichtig zu wissen, ob man im HTML Code (der in die Seite eingefügt wurde) ul oder ol stehen hat. Wer ul dort stehen hat verwendet ul, und ol wer ol dort stehen hat.
CSS zu Änderung der Schriftgröße der Post Titel:
#listes ul{
list-style:none;
font-size:15px;
}
Bei der rot markierten Stelle ist es nun wichtig zu wissen, ob man im HTML Code (der in die Seite eingefügt wurde) ul oder ol stehen hat. Wer ul dort stehen hat verwendet ul, und ol wer ol dort stehen hat. An der blau markierten Stelle den Wert für die Schriftgröße ändern.
CSS um die Post Titel fett anzuzeigen:
#listes ul{
font-weight:bold;
}
Bei der rot markierten Stelle ist es nun wichtig zu wissen, ob man im HTML Code (der in die Seite eingefügt wurde) ul oder ol stehen hat. Wer ul dort stehen hat verwendet ul, und ol wer ol dort stehen hat.
Dieses Beispiel sieht dann so aus:
Der CSS Code dazu:
#listes {
background:#A4D3EE; << blauer Hintergrund
}
#listes ul{
list-style:none; << Aufzählungszeichen ausgeblendet
font-size:15px; << Schriftgröße der Post Titel
font-weight:bold; << Schrift der Post Titel in Fettschrift
}
#listes ul a:link{
color:#FFFFFF; << Farbe der Post Titel weiß
}
Bei der rot markierten Stelle ist es nun wichtig zu wissen, ob man im HTML Code (der in die Seite eingefügt wurde) ul oder ol stehen hat. Wer ul dort stehen hat verwendet ul, und ol wer ol dort stehen hat.
Das Beispiel für dieses Design sieht dann so aus:
1 Kommentar:
Hallo,
ein bischen rumwerkeln musste ich doch. Bei mir wurde nämlich erst gar nix angezeigt. Irgendwann bin ich aber darauf gekommen, dass mein Testblog nur für Autoren freigegeben war und das bedeutet, dass deswegen auch kein Feed gelesen werden kann!
Wenn also unter Einstellung der Zugriff für die Blogleser auf Alle steht, dann funzt es ! :-)
Schöne Grüße
Naddel
Kommentar veröffentlichen