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 :)
Read more ...

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.
Read more ...

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.


Read more ...

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:


Read more ...

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 :)






Read more ...

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.
Read more ...

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.

 
Read more ...

Wie kann ich mit meinem DIY-Blog Geld verdienen?

Ich begrüße dich recht herzlich zu meinem neuen Ebook für DIY-Blogger!

Möchtest du dein kreatives Hobby zum Beruf machen oder dir mit deinem Blog nebenberuflich etwas dazu verdienen? Dann bist du hier genau richtig.  

Schon lange träumst du davon, mit deinem DIY-Blog Geld zu verdienen oder ihn sogar zu deinem Hauptberuf zu machen. Du schreibst spannende Beiträge, tüftelst originelle Anleitungen aus und engagierst dich in der Nähcommunity. Du versuchst stets, dich zu verbessern, noch schönere Fotos zu machen, noch mehr Beiträge zu posten, neue Freebies zu gestalten, dich mit deinen Lesern zu vernetzen und und und.

Doch irgendwie geht es nicht voran. Deine Besucherzahlen steigen nur schleppend, die Werbebanner auf deinem Blog bringen nicht genug ein und wie du an lukrative Kooperationen mit Unternehmen kommst, ist für dich ein Buch mit sieben Siegeln. Vielleicht würdest du auch gern mal eine Anleitung in einem Magazin oder ein eigenes Buch veröffentlichen und endlich bekannt werden.  

All diese Gedanken kenne ich nur zu gut und kann dir versichern: Mir ging es genauso.

Als ich meinen Blog Kreativlabor Berlin startete, wusste ich nicht wohin die Reise gehen soll. Aber eins war klar: ich musste und wollte davon leben können. Meine Webdesign-Firma hatte ich aufgegeben und zurück in einen Bürojob wollte ich nicht. Und natürlich wollte ich meine kleine Tochter gut versorgen können.

Dieser Ehrgeiz trieb mich an. Wie kann ich es schaffen, meinen Blog zu verbessern und lukrative Kooperationenspartner auf mich aufmerksam zu machen? Womit kann ich Geld verdienen und wie stelle ich das an? Was macht einen guten DIY-Blog aus und wie geht man mit Anfragen von PR-Agenturen und Presseleuten um?

Oft habe ich meine Arbeit unter Wert verkauft. War froh über jede Anfrage und habe blind zugesagt, oft ohne jegliches Honorar. Ich nahm Anfrage über Anfrage an, weil ich dachte dass dann der Durchbruch käme. Als ich kurz vom Burnout war, zog ich einen Schlusstrich und beschloss:

 Ich möchte nicht mehr so weitermachen! Ich muss etwas ändern.

 Von nun an werde ich nicht mehr umsonst arbeiten. Ich erstelle keine Anleitungen oder Beiträge ohne Vergütung, ich kenne den Wert meines Blogs und meiner Arbeit. Wenn ein Unternehmen das nicht zu schätzen weiß, kommt eine Kooperation nicht für mich in Frage. Ich gebe mein Bestes, um meinen Blog und meine kreative Arbeit so gut wie möglich zu machen und für kooperierende Unternehmen ein zuverlässiger Partner zu sein. Dazu gehört auch, dass ich nicht alle Projekte annehmen kann und auf meine Gesundheit achten muss.

Zwei Jahre habe ich mit Recherchen und Tests verbracht, mir immer mehr Wissen angeeignet, dies und das probiert, und dabei viele Fehler gemacht. Ich habe meinen Blog immer weiter optimiert, meine Fotografie- und Schreibfähigkeiten verbessert, mich mit Marketing befasst und viel mit anderen Bloggern ausgetauscht.  

Dann war es plötzlich soweit: Ich konnte von meinem Blog-Business leben.

Knapp zwei Jahre nach dem Start meines Blogs fährt mein Business nun jeden Monat genug Geld ein, um davon meinen Lebensunterhalt zu bestreiten. In nur zwei Jahren habe ich zwei Buchverträge an Land gezogen, wurde zu Deutschlands kreativster DIY-Bloggerin gewählt, habe zahlreiche Interviews gegeben und mittlerweile mehr als 10000 Schnittmuster-Ebooks verkauft.

 Das erwartet dich in meinem Ebook:
  • Ich zeige dir Schritt für Schritt wie du deinen DIY-Blog zum Erfolg führen und deinen ganz eigenen Stil entwickeln kannst.
  • Du erfährst alles über Einnahmequellen speziell für DIY-Blogs und wie du diese in deinem Blog einbinden kannst. Außerdem verrate ich dir Tipps & Tricks zum Umgang mit Kooperationspartnern und wie du an spannende Projekte herankommst.
  • Ich verrate dir, wie du das Beste aus deinen Fotos und Texten herausholen und herausragende DIY-Anleitungen, Ebooks und Druckvorlagen erstellen kannst.
  • Du lernst außerdem wie du ein Gewerbe anmeldest, wie du deine Entwürfe schützen kannst und was die häufigsten Fehler von DIY-Bloggern sind.
  • Zusätzlich findest du im Ebook zahlreiche Interviews mit erfolgreichen DIY-Bloggern und Unternehmen aus dem DIY-Bereich, die von ihre Erfahrungen mit der gegenseitigen Zusammenarbeit berichten und dir viele Tipps und konkrete Ratschläge mit auf den Weg geben. Mit dabei sind unter anderem: DaWanda, makerist, Snaply, Luisa von Luloveshandmade, Dani von Gingered Things und viele mehr.


Mithilfe des Ebooks kannst du deinen DIY-Blog aufs nächste Level heben und damit lukrative Kooperationen an Land ziehen. Lass dich inspirieren!



 
Read more ...

Montag, 7. April 2014

Grundlegende CSS Codes

Eine umfangreiche Sammlung aller CSS-Codes findet ihr unter http://www.css4you.de/

Backup

Bevor ihr das CSS eurer Seite bearbeitet, erstellt erstmal eine Sicherheitskopie eurer Vorlage. Klickt dafür im Blogger-Dashboard rechts oben auf "Backup / Wiederherstellung":


Es erscheint dann ein Popup wo ihr das Backup herunterladen könnt.



Schriftart, Schriftgröße und Schriftfarbe ändern

Um die Schriftart eures Blog zu ändern, klickt im Blogger-Dashboard auf "Vorlage" und dann auf "HTML bearbeiten". Drückt Strg+F und sucht nach "body {". Hier werden CSS-Angaben, die für die gesamte Seite gelten, eingefügt.

Der Code sollte in etwa wie folgt aussehen:

body {
font-family: Arial, Helvetica sans-serif;
font-size: 10pt;
line-height: 13pt;
color: #888;
}



Das sind die Angaben für Schriftart, Schriftgröße, Zeilenabstand und Schriftfarbe. Wenn ihr dort die Werte verändert, wirkt es sich auf die gesamte Seite aus. Für Schriften gibt es folgende mögliche Angaben:

Schrifteigenschaften (bei Klick auf die einzelnen Eigenschaften gibt es noch weitere Infos zu den Werten, die ihr pro Eigenschaft vergeben könnt)


Farben anpassen


Farben werden mittels folgender Codes angeben:

color: #555;
background-color: #fff;


Alle Infos und Werte findet ihr hier: Farben

CSS-Angaben auskommentieren

Wenn ihr eine kleine Änderung ausprobieren wollt, könnt ihr auch einfach den CSS-Code auskommentieren. Dann bleibt er im Code, aber wird für die Seite nicht mehr ausgelesen. Um einen Code auszukommentieren, muss er zwischen einem Schrägstrich & Sternchen eingebettet sein:

/* Ich bin auskommentiert */

Wenn ihr das /* */ dann wieder entfernt, wird der Code wieder aktiviert. Ich verwende das z.b. um zu testen, wie sich eine kleine Änderung von Abständen / Schriftgrößen auswirkt oder um die ursprüngliche Größe eines Elementes zu "speichern" so dass ich sie dann später wieder zurück ändern kann, z.b. so:

.box {
font-size: 11pt;  /* vorher 10pt */
background-color: #fff;
width: 500px; /* vorher 250px */
}


Read more ...

Grundlegende HTML-Codes

Hier möchte ich euch ein paar grundlegende HTML-Codes zusammenfassen. Wenn ihr tiefer in das Thema einsteigen wollt bzw. Infos zu einem bestimmten Code sucht, schaut doch mal bei selfHTML vorbei.

Bild einbinden

Ein Bild wird immer über das so genannte <img>-Tag eingebunden. Der HTML-Code für ein Bild sieht so aus:

<img src="URL der Bildquelle" width="300" height="200" alt="Bildtitel" border="0" />

Die URL muss dabei immer absolut sein, d.h. inklusive http:// am Anfang. Wenn ich z.b. diesen Code in die HTML-Ansicht dieses Beitrags eingebe...

<img src="http://www.kreativlaborberlin.de/wp-content/themes/klb2014/images/kreativlaborberlin.jpg" border="0" width="229" height="107" alt="Kreativlabor Berlin" />

... wird mein Logo anzeigt:


Kreativlabor Berlin

Um ein Bild in Blogger hochzuladen, könnt ihr oben über dem Textfeld einfach auf das Foto-Icon klicken und ein Bild von eurer Festplatte wählen.

Link setzen


Ein Link hat immer folgende Struktur

<a href="Link-URL" target="_blank">Link-Titel oder Bild</a>

Die URL muss dabei immer absolut sein, d.h. inklusive http:// am Anfang. Mit target="_blank" definiert ihr, dass die Seite in einem neuen Fenster geladen wird.

Wenn ich z.b. diesen Code in die HTML-Ansicht dieses Beitrags eingebe...

<a href="http://www.kreativlaborberlin.de/" target="_blank">Mein Blog</a>

wird im Beitrag ein Link zu meinem Blog eingebunden:

Mein Blog

Wenn ihr ein Bild verlinken wollt, kopiert ihr einfach den gesamten Bildcode (wie oben beschrieben) statt des Link-Titels hinein:

<a href="http://www.kreativlaborberlin.de/" target="_blank"><img src="http://www.kreativlaborberlin.de/wp-content/themes/klb2014/images/kreativlaborberlin.jpg" border="0" width="229" height="107" alt="Kreativlabor Berlin" /></a>

Und ihr erhaltet ein verlinktes Bild :)

Kreativlabor Berlin


Zeilenumbruch


Einen Zeilenumbruch macht ihr mit dem Code

<br />

Du kannst auch mehrere davon hintereinander platzieren für mehr Abstand :)



Wenn der Text am obigen Bild „klebt“


Möglicherweise hat das Bild per CSS einen "float" befehl bekommen, d.h. der Text fließt um das Bild. Um das floating aufzuheben, schreibe in deinen HTML-Code folgende Zeile:
<div class="clear"></div>


Read more ...

Aktionsbuttons in Beiträge einbinden

Ein Aktionsbutton ist einfach eine Grafik, die ihr euch mit einem Grafikprogramm bastelt (z.B. Photoshop oder GIMP). Die Grafik ladet ihr dann über den Upload-Button oberhalb des Inhaltsfeldes in euren Beitrag hinein.


Dann ist die Grafik im Beitrag eingebunden. Jetzt muss sie nur noch verlinkt werden. Wechselt dafür in die HTML-Ansicht eures Beitrags, in dem ihr oben Links neben "Verfassen" auf "HTML" klickt.

Um die Grafik hat Blogger automatisch einen Linkcode eingefügt. Ihr müsst also nur die URL im Link ändern.


Ich habe z.b. die URL zu meinem Blog eingefügt:

<a href="http://www.kreativlaborberlin.de/shop" target="_blank"> ... </a>

Und hier ist der verlinkte Aktionsbutton:


Read more ...

Bilder in die Sidebar einbinden (z.b. Banner)

Um Bilder in die Sidebar einzubinden gibt es 2 Möglichkeiten

Einbindung mittels Gadget


Klicke im Blogger-Dashboard auf "Layout" und "Gadget hinzufügen".



Wähle das Widget "Image", in dem du das + Zeichen klickst.


Dann öffnet sich ein Popup, in dem du ein Bild von deiner Festplatte hochladen kannst. Außerdem kannst du eine URL angeben, auf die das Bild verweisen soll, sowie weitere Einstellungen vornehmen. Klicke dann auf "Speichern" und dann nochmal auf "Vorlage speichern".



Schon ist dein Bild in der Sidebar eingebunden und verlinkt :)


Read more ...

Eine Bildergalerie einbinden

Eine Bildergalerie kannst du in deinem Blogger-Blog entweder in die Sidebar mithilfe eines Gadgets einbinden, oder direkt in einem Blogbeitrag.

Slideshow in der Sidebar

Für eine Sidebar-Slideshow gibt es in Blogger ein Gadget. Klicke im Blogger-Dashboard auf "Layout" und dann auf "Gadget hinzufügen".


Wähle das Gadget "Diashow", in dem du auf das + Zeichen klickst.

Es öffnet sich ein Popup, indem du deine gewünschten Einstellungen vornehmen kannst.

Klicke anschließend auf "Speichern" und dann nochmal auf "Layout speichern". Die Slideshow ist nun in deinem Blog eingebunden.


Bildergalerie in einen Blogbeitrag einbinden

Die Fotos sollten alle die gleiche Höhe haben! Lade die Fotos einzeln über den Bildupload-Button über dem Beitragsfeld hoch ...



... und gib allen die gleiche Größe (klein oder mittel).



Wenn die Bilder fertig hochgeladen sind, wechselst du in die HTML-Ansicht deines Beitrags, indem du oben links den Button "HTML" klickst.


Hier fügst du in jedem <img>-Tag die CSS-Klasse "galerie" hinzu:

<img border="0" class="galerie" src="http://2.bp.blogspot.com/-UYUFiNz9AME/U0K4QZTsdgI/AAAAAAAABPI/NN7vz1yJebg/s1600/1396776962-658.jpg" height="150" width="200" />

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


Hier suchst du dir nun den Teil mit den CSS-Angaben für deinen Blog heraus. Drücke dafür Strg+F und suche nach ".post". Du landest nun mitten im CSS-Code und kannst nun einfach die neue CSS-Klasse ".galerie" hinzufügen.

Gib diesen Code in die CSS-Datei ein und klicke dann auf "Virlage speichern":

.galerie {
float: left;
margin: 0px 10px 10px 0;
width: 240px;
height: auto;
}

Wenn deine Bilder nun noch nicht nebeneinander stehen, schau nochmal in der HTML-Ansicht deines Beitrags nach, ob dem Bild oder den Bild-umfassenden Links eventuell ein "clear: both;" enthalten ist. Wenn ja, lösche es raus (ich habe sicherheitshalber alle Angaben bei style="" entfernt.


Und fertig ist deine kleine Galerie :)

 


Read more ...