Samstag, 5. April 2014

Blogbeiträge mit Übersichts-Seiten strukturieren

Um deine Beiträge besser zu strukturieren und für deine Leser auffindbar zu machen, kannst du auch Übersichtsseiten zu bestimmten Themen erstellen.

Ein tolles Beispiel dafür findest du zb. bei luloveshandmade mit ihrer Übersicht zum Thema "Parties".


Um eine solche Übersichtsseite zu erstellen, erstellst du erstmal zu jedem Beitrag, den du dort verlinken möchtest, eine Grafik mit der gleichen Größe, z.b. alle als Quadrat oder alle als Rechteck mit den selben Pixelmaßen.

Wenn du keine Grafiken verwenden möchtest, kannst du auch mit HTML & CSS farbige Boxen erstellen, wie in der Übersichtsseite auf diesem Blog zu sehen:



Lege dir zunächst eine neue Seite an. Klicke dafür in deinem Blogger-Dashboard im linken Menü auf "Seiten" und dann oben auf den Button "Neue Seite".

Dort fügst du dann entweder deine Grafiken ein und verlinkst jede einzelne von ihnen zum jeweiligen Blogbeitrag, oder du fügst einen kleinen HTML-Code ein um farbige Boxen zu erstellen.

Wechsle dafür in die HTML-Ansicht der Seite (Button oben links).


Füge für eine Box folgenden Code ein:

<div class="lektion"><a href="http://workshop-html.blogspot.de/2014/04/blog-layout-andern-und-anpassen.html">Blog-Layout ändern und anpassen</a></div>

Den Link ersetzt du durch den Link zum jeweiligen Beitrag und den Linktitel mit dem Titel des Blogbeitrags. Du kannst soviele <div>-Boxen wie du möchtest aneinanderreihen. Damit die <div>-Boxen später nebeneinanderstehen, musst du noch einen CSS-Code im Blogger-Dashboard unter  "Vorlage" einfügen:

.lektion {
width: 138px;
height: 80px;
text-align: center;
background: #e8ecd1;
float: left;
margin: 0 10px 10px 0;
padding: 20px;
font-size: 130%;
}

Kommentare :

  1. Hallo Julia
    Erstmals möchte ich mich für diesen Workshop-Blog bedanken. Konnte schon viele Sachen brauchen...
    Nun funktioniert aber irgendwas nicht und ich weiss nicht, was ich falsch mache.
    Ich möchte gerne meine Blogeinträge strukturieren und etwas übersichtlicher gestalten. Wenn ich aber wie von dir erklärt, den HTML-Code anpasse, kommt immer die Meldung: Tag ist beschädigt: A-Code kann nicht übernommen werden.

    Kannst du mir sagen, was ich falsch mache?

    Lieben Gruss und vielen Dank
    Nadja von www.muntanellina.ch

    AntwortenLöschen
  2. Hallo Julia!
    Super Erklärung für die Verlinkung.

    Leider klappt das bei mir mit den Boxen noch nicht wirklich. Es stehen bis jetzt nur die Texte untereinander.

    Kannst du mir dies mit dem CSS-Code vielleicht nochmal genauer erklären. So für Dummies :-)

    Das wäre wirklich super.

    LG Steffi

    AntwortenLöschen