Freitag, 11. April 2014

Willkommen zum Workshop!

Hallo ihr Lieben! Heute werden wir im DaWanda-Workshop "Pimp deinen Blog mit HTML" so einiges über Bloggestaltung lernen.


Ich bin übrigens Julia vom Kreativlabor Berlin, einem Label für herrlich farbenfrohe Schnittmuster für Groß & Klein. Hier könnt ihr mal hinter die Kulissen schauen.



Warum ich für euch diesen Workshop gebe? Ich habe lange als freiberufliche Webdesignerin gearbeitet und kenne mich daher bestens aus :)

Schatten oder Rahmen um Bilder entfernen

Bei vielen Blogger-Themes werden die Bilder automatisch mit einem Schatten oder Rahmen versehen. Diesen müsst ihr im Theme manuell entfernen.

Dafür geht ihr im Blogger-Dashboard auf "Vorlage" und dann auf "HTML bearbeiten".


Dann klickt ihr ganz oben im Code auf das Dreieck bei <b:skin> um die CSS-Angaben zu öffnen.


Dort drückt ihr nun Strg+F und sucht nach ".post-body img". Dort im Code seht ihr die Angaben für die Bilder in Beiträgen. Angaben mit "border" sind Rahmen, Angaben mit "shadow" sind Schatten.


Alle diese Angaben könnt ihr nun auskommentieren (und somit deaktivieren), um zu Testen ob damit schon die gewünschte Änderung erreicht werden kann. Wie ihr CSS-Angaben auskommentieren könnt, habe ich in diesem Beitrag ganz unten erklärt. In meinem Codebeispiel habe ich alle border und shadow-Angaben auskommentiert.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
/*border: 1px solid $(image.border.color); */
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
/*-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);*/

}

Die Rahmen sind nun verschwunden.


Um sie wieder zu aktivieren, könnte ich nun einfach wieder die Klammern zum Auskommentieren im Code entfernen.

Ein Menü aus Grafiken einbinden

Zuerst erstellst du deine Grafiken für das Menü mit einem Grafikprogramm und speicherst sie als JPG, PNG oder GIF. Die Grafiken müssen alle die gleiche Höhe haben.

Dann lädst du die Grafiken wie hier beschrieben in eine Seite hoch (die du nicht veröffentlichst), um die Bildpfade zu erhalten. Diese Pfade kopierst du dir heraus.

Dann gehst du auf "Layout" und oben im Header auf "Gadgets hinzufügen".



Wähle das Gadget "HTML JavaScript". Füge in das Feld "Content" deine Bildpfade hinein und verlinke sie. Wie du Bilder einfügst und verlinkst ist hier beschrieben:

Social Media Icons in die Sidebar einbinden
Grundlegende HTML-Codes

<a href="http://workshop-html.blogspot.de/p/about.html" ><img border="0" src="http://1.bp.blogspot.com/-A1PUZyW1uFQ/U0eteCmUTmI/AAAAAAAABWA/YDDXrqjmDkA/s1600/menu_about.gif" /></a>
<a href="http://workshop-html.blogspot.de/"><img border="0" src="http://4.bp.blogspot.com/-Jy9JF-SEwXQ/U0etdxemjJI/AAAAAAAABV8/D2RJd8DIHBw/s1600/menu_blog.gif" /></a>
<a href="http://workshop-html.blogspot.de/p/kontakt.html" imageanchor="1"><img border="0" src="http://4.bp.blogspot.com/-jdh0K-CSgV0/U0etd11U0qI/AAAAAAAABV4/vCnhYck_EeY/s1600/menu_kontakt.gif" /></a>
<a href="http://workshop-html.blogspot.de/p/alle-lektionen.html"><img border="0" src="http://1.bp.blogspot.com/-26Sp1Lukmm8/U0ete-qanKI/AAAAAAAABWU/WOjGsV7jSis/s1600/menu_lektionen.gif" /></a>
<a href="http://workshop-html.blogspot.de/p/mein-shop.html#h=2332-1397206896093"><img border="0" src="http://4.bp.blogspot.com/-Orl_2zVQqss/U0etezFWehI/AAAAAAAABWQ/nWFTlYDNOzo/s1600/menu_shop.gif" /></a>


Klicke dann auf "Speichern". Das Grafikmenü ist nun auf deinem Blog eingebunden.



Zweite Menüleiste über dem Header einbinden

Klicke im Blogger-Dashboard auf "Vorlage" und "HTML bearbeiten".


Drücke Strg#F und durchsuche den Code nach "region-inner header-inner".



 Dort findest du die Zeile:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

und änderst die Angaben wie folgt:

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>

Klicke dann auf "Vorlage speichern". Gehe dann wieder ins Blogger-Dashboard und klicke auf "Layout". Über dem Header hast du nun einen neuen Link "Gadget hinzufügen".


Klicke auf "Gadget hinzufügen" und wähle dann das Widget "HTML / JavaScript" hinzu.



Klicke das + und füge den HTML-Code für die gewünschten Links in das Feld "Content" ein. Du kannst natürlich auch Bilder verlinken. Wie man Links setzt habe ich hier erklärt.


Über deinem Header ist nun das zweite Menü eingebunden:



Signatur unter jedem Blogbeitrag anzeigen

Gestalte dir deine Signaturgrafik mit einem Grafikprogramm. Lade die Grafik dann in eine Seite hoch, um den Bildpfad zu erhalten. Wie du ein Bild in eine Seite hochlädst, erkläre ich in diesem Beitrag. Kopiere dir dann den Bildpfad hinaus, der in etwa so aussieht:

<img border="0" src="http://3.bp.blogspot.com/-HtSkrdkvAns/U0ef-cP-hZI/AAAAAAAABUg/_IIufss51tE/s1600/julia.gif" />

Klicke im Blogger-Dashboard auf "Vorlage" und dann "HTML bearbeiten".


Dann drückst du Strg+F und suchst nach "jump-link". Direkt im Anschluss an diese div folgt die div "post-footer". Füge dort folgenden Code nach der div "jump-link" und vor der div "post-footer" ein (wie in der nachfolgenden Grafik zu sehen):

<div class='signatur'><img border="0" src="http://3.bp.blogspot.com/-HtSkrdkvAns/U0ef-cP-hZI/AAAAAAAABUg/_IIufss51tE/s1600/julia.gif" /></div>


 Die Signatur ist nun unter jedem Blogpost eingebunden :)







Bilder genauso breit anzeigen wie den Text

Klicke im Blogger-Dashboard auf "Vorlage" und dann auf "Anpassen".

Dann klickst du im linken Menü auf "Breite anpassen".

Nun kannst du die Werte entsprechend anpassen. Um z.b. deine Beiträge mit 650 Pixeln Breite anzuzeigen, muss der Wert für "Gesamter Blog" minus "Rechte Sidebar" genau 650 ergeben.

Die Maße gelten jeweils inklusive der Abstände im Layout, also z.b. dem Abstand zwischen Beiträgen, Trennlinie und Sidebar.


Eure Grafiken für den Blog schneidet ihr dann mit einem Grafikprogramm auf genau die gewünschte Breite der Beiträge zurecht (z.b. 650 px). Wenn ihr sie dann einbindet und auf "Originalgröße" klickt, sind sie genauso breit wie der Inhalt.

Donnerstag, 10. April 2014

Überschriften bei Sidebar-Gadgets entfernen

Bei einigen Sidebar-Gadgets kannst du die Überschrift einfach weglassen, also beim Erstellen des Gadgets nicht ausfüllen.

Sollte das nicht funktionieren, kannst du die Überschrift per CSS ausblenden.

Gehe dafür in deinem Blogger-Dashboard auf "Vorlage" und dann "HTML bearbeiten".


Dann klickst du ganz oben im Code auf das Dreieck bei <b:skin> um die CSS-Angaben zu öffnen.



Gib in deinem CSS-Code folgende Zeile ein:

.widget h2 {
display: none !important;
}



Die Überschriften in der Seitenleiste sind nun verschwunden.