Tipps & Tutorials, tutorial

[LinkWithin] Widget anpassen

Heute zeige ich euch, wie ihr das LinkWithin anpassen könnt. Normalerweise kann man nur die Anzahl der vorgeschlagenen Posts und den Hintergrund (light oder dark) bestimmen. Mit diesem Tutorial könnt ihr den Satz “Das könnte Sie auch noch interessieren”, die Position des Widgets und das Aussehen ändern.

“Titel” ändern

Dafür müsst ihr zu Dashboard → Vorlage → HTML bearbeiten. Sucht im Blogger-Code nach </head> und fügt folgendes darüber hinzu:
<script>linkwithin_text='More Posts'</script>

“More Posts” könnt ihr mit einem Satz eurer Wahl ersetzen, aber ersetzt nicht die Anführungszeichen! Danach speichern und schon seit ihr fertig 🙂

Widget an einer anderen Stelle anzeigen lassen

Dafür braucht ihr nur eine Zeile Code:
<div class="linkwithin_div"></div>

Diesen könnt ihr, wenn ihr euch im HTML auskennt, einfügen. Es funktioniert auch, wenn ihr diesen Code in einen HTML/Javascript-Widget (Dashboard → Layout) packt und dieses dann verschiebt. Zum Beispiel kann man damit auch das Widget in die Sidebar positionieren und sie dann noch nur auf Postseiten anzeigen lassen. Ist auf jeden Fall eine nette Spielerei!

Design ändern

Wer sich mit CSS auskennt, dem muss ich wohl nicht mehr sagen, dass das Aussehen des Widgets sich ändern lässt. Sucht unter Dashboard → Vorlage → HTML bearbeiten nach ]]></b:skin>, dort könnt ihr folgende CSS einfügen.
Alternativ könnt ihr das CSS auch in das Widget einfügen, wo sich der LinkWithin-Code befindet. Dafür fügt ihr einfach <style>…</style> am Ende des Widgets ein und ersetzt … mit eurer CSS.
Eigenschaften für den Titel ändern:
.linkwithin_text {
color: #dd3344;
font-family: ‘Arial’, sans-serif;
font-size: 18px;
}

Hintergrund bei Hover ändern:
.linkwithin_posts a:hover {
background: #dd3344 !important;

}

Statt Farbe geht auch ein Hintergrund:

.linkwithin_posts a:hover {
background: url(http://www.bildhoster.de/deinBild.png) repeat fixed !important;
}

Striche zwischen Vorschlägen entfernen:

.linkwithin_img_0 div, div.linkwithin_img_0, .linkwithin_img_1 div, div.linkwithin_img_1, .linkwithin_img_2 div, div.linkwithin_img_2, .linkwithin_img_3 div, div.linkwithin_img_3, .linkwithin_img_4 div, div.linkwithin_img_4, .linkwithin_img_5 div, div.linkwithin_img_5, .linkwithin_img_6 div, div.linkwithin_img_6, .linkwithin_img_7 div, div.linkwithin_img_7, .linkwithin_img_8 div, div.linkwithin_img_8, .linkwithin_img_9 div, div.linkwithin_img_9, .linkwithin_img_10 div, div.linkwithin_img_10, .linkwithin_img_11 div, div.linkwithin_img_11, .linkwithin_img_12 div, div.linkwithin_img_12, .linkwithin_img_13 div, div.linkwithin_img_13, .linkwithin_img_14 div, div.linkwithin_img_14, .linkwithin_img_15 div, div.linkwithin_img_15, .linkwithin_img_16 div, div.linkwithin_img_16, .linkwithin_img_17 div, div.linkwithin_img_17, .linkwithin_img_18 div, div.linkwithin_img_18, .linkwithin_img_19 div, div.linkwithin_img_19, .linkwithin_img_20 div, div.linkwithin_img_20 {border:0 !important; }

Posttitel bei Vorschläge individualisieren:

.linkwithin_title {
color: #dd3344 !important;
font-family: ‘Arial’, sans-serif !important;
font-size: 13px !important;
line-height: 14px !important;
text-align:center;
text-decoration: none;
}

Und den dazugehörigen Hover ändern:

.linkwithin_title:hover {
color: #000 !important;
font-weight: bold !important;
}

An manchen Stellen ist !important sehr wichtig, da hier teilweise vorgegebenes CSS mit der eigenen überschrieben werden muss. Wer sich nicht ganz sicher ist, was was ist, kann sich diese Liste mit den wichtigesten CSS-Befehlen anschauen.

Ich hoffe, ich konnte euch helfen!

Eure Mira

26 Comments

  1. Karmesin

    27. March 2014 at 7:41

    Danke für dieses Tutorial! Mich würde interessieren, ob man irgendwie beeinflussen kann, welche Beiträge das Widget zeigt. Bei mir zeigte es nämlich auch welche an, die inzwischen längst gelöscht sind.

    Liebe Grüße
    Karmesin

  2. Anonym

    3. April 2014 at 17:47

    Tolles Tutorial und sehr ausführlich beschrieben :).
    Ich finde deinen Blog übrigens sehr schön.

    Lg Nathalie
    http://chaos-n-beauty.blogspot.de/

  3. phie

    5. April 2014 at 11:39

    Ich hab eine Frage, die ihr bestimmt schon mal beantwortet habt, aber ich kann es nicht finden 🙁 Und zwar, wie schaffe ich es dass mein Post nicht komplett dargstellt wird auf der Startseite, sondern dass es so ist hier auf eurem blog auch dass man nur 1 Foto und einen Absatz text sieht und dann auf "weiterlesen" klickt damit der gesamte Post kommt.
    Wäre der Hammer wenn mir das jemand erklären könnte! 🙂

    Liebe Grüße
    Phie

    1. sunnyslifestyleblog

      23. April 2014 at 10:09

      Hey ! Das ist ganz einfach. Es gibt wenn du deinen Post schreibst oben in der Leiste in der auch Schriftart, Größe, Farbe etc. stehen ein Zeichen, das wie ein Blatt Papier, welches durchschnitten wurde, aussieht. Das nennt sich Jump-break. Klick einfach darauf und dann kannst du per Drag-und-Drop den Platz wo das "Weiterlesen" hinkommt bestimmen. Bei Blogger ist es vorab so eingestellt, dass dann da nicht "Weiterlesen" sondern sowas wie "weitere Informationen" steht. Das kann man mit CSS ebenfalls ändern. Bei mir sieht das zur Zeit so aus:http://sunnyslifestyleblog.blogspot.de/ Wenn du wissen möchtest, wie das geht dann schreib mich per E-Mail an (findest du bei mir unter Kontakte) sonst wird dieses Kommentar echt zu lang 😀 LG Ich hoffe ich konnte helfen <3

  4. Sigi

    10. April 2014 at 18:41

    Hallo Mira,
    ganz herzlichen Dank für deine supertollen Anleitungen,hat alles bestens funktioniert.
    Liebe Grüße
    Sigi

  5. papillon en liberté

    16. April 2014 at 0:23

    Bitte hilf mir! In meinem Blog werden keine Kontaktavatare angezeigt und ich weiß nicht wieso 🙁 Sieht total leer aus..

  6. Sarah

    27. April 2014 at 16:45

    Bei mir werden immer nur 4 ähnliche Post's angezeigt! Kann ich das irgendwie ändern, dass mehr angezeigt werden, weil das sieht bisschen doof aus, weil es nur dreiviertel der Blogpost-Breite hat…
    GLG Sarah

  7. Felix H

    1. May 2014 at 17:55

    [class^=linkwithin_img] {
    border: none !important;
    }
    [name^=linkwithin_link] {
    border: none !important;
    }

    Damit lassen sich die Striche ebenso entfernen und ist wesentlich kürzer 😉
    LG

  8. ♥susanne♥

    15. June 2014 at 10:21

    Hmmmmm, wo genau muss der Code für die Striche denn hin? Irgendwie geht das bei mir gar nicht.

    ebenso wird im aktuellen Post nur eine Wortliste der anderen Posts angezeigt, bei allen aneren Posts ist eine Vorschau da
    Liebe Grüße
    susanne

  9. Nina

    31. July 2014 at 13:57

    Was würde ich ohne diesen Blog nur machen:D Danke!!

  10. Alina

    5. August 2014 at 12:49

    Super vielen lieben Dank! <3

  11. Lara s Blog

    20. December 2014 at 20:48

    Wie bekomme ich das LinkWithin überhaupt auf meinen Blog 🙁 Das ist ja jetzt nur die erklärung wie man es anpasst aber ich muss es erst mal einfügen aber check einfach nicht wie 🙁

  12. Nina H.

    26. January 2015 at 16:02

    ich finde das head nicht!? :O

  13. Christin

    17. April 2015 at 9:09

    Hallo,

    wie aktuallisiert man Linkwithin. Ich habe es mitlerweile aus meinem Blog genommen, da es nur ältere Post angezeigt hat bis zu einem gewissen Post. Weiter hat es nicht mehr geladen.
    Kannst du mir helfen? Meine neue Notlösung macht so unschafte Bilder.
    Vielen Dank und viele Grüße
    Christin

  14. textpoterie

    7. September 2016 at 15:37

    hallo, wie ändere ich bei WordPress den Titel meines Widgets?

    bei mir zeigt es ´more post´ nicht an…

    danke für deine Hilfe! lg christine @textpoterie

Leave a Reply