[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 Kommentare

  1. 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

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

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

    AntwortenLöschen
  3. 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

    AntwortenLöschen
    Antworten
    1. 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 :D LG Ich hoffe ich konnte helfen <3

      Löschen
  4. http://www.be4marketing.com/2014/01/Furniture.transportation.company.in.Egypt.html
    شركة نقل عفش فى مصر

    AntwortenLöschen
  5. www.be4marketing.com/2014/02/best-Furniture-Transport-company-in-egypt.html
    افضل شركة نقل اثاث فى مصر

    AntwortenLöschen
  6. https://ifttt.comrecipes/147602-01284125989-01149357754

    افضل شركة نقل اثاث فى مصر

    AntwortenLöschen
  7. http://www.be4marketing.com/2013/12/Furniture-Transport-Company.html
    شركة نقل اثاث

    AntwortenLöschen
  8. http://www.be4marketing.com/2013/12/Furniture-Transport-Company.html
    شركة نقل اثاث

    AntwortenLöschen
  9. http://www.be4marketing.com/2013/12/Furniture.Transport.html
    نقل اثاث

    AntwortenLöschen
  10. https://ifttt.com/recipes/147602-01284125989-01149357754
    افضل شركة نقل اثاث فى مصر

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

    AntwortenLöschen
  12. Bitte hilf mir! In meinem Blog werden keine Kontaktavatare angezeigt und ich weiß nicht wieso :( Sieht total leer aus..

    AntwortenLöschen
  13. http://www.be4marketing.com/2013/12/Furniture.Transport.html
    نقل اثاث

    AntwortenLöschen
  14. http://www.be4marketing.com/2013/12/Furniture-Transport-Company.html
    شركة نقل اثاث

    AntwortenLöschen
  15. www.be4marketing.com/2014/02/best-Furniture-Transport-company-in-egypt.html
    افضل شركة نقل اثاث فى مصر

    AntwortenLöschen
  16. http://www.be4marketing.com/2014/01/Furniture.transportation.company.in.Egypt.html
    شركة نقل عفش فى مصر

    AntwortenLöschen
  17. 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

    AntwortenLöschen
  18. [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

    AntwortenLöschen
  19. 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

    AntwortenLöschen
  20. Was würde ich ohne diesen Blog nur machen:D Danke!!

    AntwortenLöschen
  21. 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 :(

    AntwortenLöschen
  22. 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

    AntwortenLöschen
  23. 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

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!