[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