Dienstag, 25. April 2017

my blogger secrets: Tipps beim Post erstellen (die richtige Bildgröße, "Weiterlesen", optische Gestaltung)


Heute heißt es Endspurt, denn wir kommen zum dritten und letzten Teil meiner blogger secrets. Danke für euer Interesse an der ganzen Reihe, es hat wirklich Spaß gemacht, mit euch meine Tipps und Tricks zur Fotografie, zur Bildbearbeitung und nun zum Post erstellen zu teilen. Ohne weitere Umschweife geht es nun auch direkt los. 

Die richtige Bildgröße
Was ich immer wieder auf Blogs sehe, wenn ich über mein Smartphone surfe und dementsprechend die mobilen Ansichten der Websites zu sehen bekomme, sind unscharfe Bilder, die (jenachdem, was sie abbilden) nahezu unbrauchbar sind. Die meisten Blogger/Innen wissen vermutlich gar nicht, dass ihre Bilder auf der mobilen Website so unscharf und verpixelt sind, aber keine Sorge, ich bin ja da, Hilfe naht :D 

Was ist das Problem? Stellt eure Fotogröße im Blogpost nicht mehr auf X-large. Das ist zwar eine gemütliche Möglichkeit, Bilder perfekt der eigenen Blogbreite anzupassen, aber es bringt euch nichts, wenn man die Bilder übers Smartphone nicht mehr richtig erkennt. Stattdessen müsst ihr immer auf "Originalgröße" stellen, das bedeutet jedoch auch, dass ihr das Bild vorher selbst so verkleinern müsst, dass es an die Breite eures Posts angepasst ist. Später mehr dazu. Hier habe ich für euch einmal in zwei meiner letzten Posts die Bilder auf X-Large eingestellt und über mein Smartphonen jenen Post aufgerufen; im Vergleich dazu daneben ein Screenshot, wie es aussieht, wenn das Bild auf Originalgröße gestellt ist. Die Bilddateien sind ein und die selbe. Die Einstellung macht eben den Unterschied.
Vergleich der Bildeinstellungen "X-Large" und "Originalgröße". Links sind beide Bilder in X-Large, rechts sind beide Bilder in Originalgröße
Links: X-Large, rechts: Originalgröße
Ihr seht deutlich, wie unscharf die linke Ansicht ist. Tatsächlich ist es hier aber noch gar nicht soo schlimm, je nachdem, was ihr auf dem Bild zeigen wollt (z.B. Detailbilder), stört es dann aber doch, da Details einfach absolut nicht erkennbar sind und das Bild somit seinen Sinn auf der mobilen Website verfehlt. Wie könnt ihr ein Bild easy und schnell verkleinern? Ich nutze dafür Paint! 

Ihr öffnet euer Bild mit Paint und klickt dann auf "Größe ändern".


Es öffnet sich dann ein Dialogfeld, wo ihr eure gewünschte Größe angeben könnt. Am einfachsten ist es, indem ihr es mit einem Prozentsatz angebt. Tippt ihr "50" in die Felder, verringert sich die Größe des Bildes um 50 Prozent, gebt ihr 25 ein, verringert sich die Größe um 75% (!). Also je kleiner die Zahl, desto kleiner wird das Bild. 


Welche Zahl ihr als Faktor verwendet, müsst ihr ausprobieren auf eurem Blog. Ich fotografie mit einer Spiegelreflexkamera, meine Bilddateien haben also im Original eine sehr große Abmessung (5184x3456). Mein Faktor ist immer 15 und so passen die Bilder dann perfekt in meinen Blog von der Größe her. Ihr müsst da einfach verschiedene Maße ausprobieren, über die Postvorschau könnt ihr ja immer unverbindlich schauen, ob ein Bild zu groß oder zu klein ist, ohne den Post veröffentlichen zu müssen.

Und bevor vielleicht gerade bei Anfängern die Frage aufkommt, wie man denn bei Blogger die Bildgröße ändert im Post, auch hier nochmal ein Screenshot.


Es ist zwar bei jedem Bild ein zusätzlicher Schritt, jedoch geht dieser sehr schnell und wenn man sowieso immer mit dem gleichen Gerät die Fotos macht, muss man ja auch nicht jedes Mal aufs Neue mit dem Größenfaktor bei Paint rumprobieren. Und ich finde, es lohnt sich, denn so kommen auch meine mobilen Leser in den Genuss knackig scharfer Bilder :)
"Weiterlesen", ohne selbst den HTML-Code zu ändern
Ein weiteres Gadget, das heutzutage kaum noch wegzudenken ist, ist das "Weiterlesen", "Read More" und wie man es sonst noch nennen kann. Bedeutet, dass wenn Leser auf die Startseite des Blogs kommen, die Posts nicht alle in voller Länge angezeigt sind, sondern immer nur ein kurzer Teil des Anfangs. Über einen weiteren Klick erreicht man dann den Post in voller Länge. Somit hat man eine gebündeltere Startseite. Praktische Sache, definitiv. Viele Leute binden das "Weiterlesen"-Gadget über ihren HTML-Code ein, das ist aber nicht nur kompliziert, sondern hat auch den Nachteil, dass man vorab feste Parameter angeben muss, zum Beispiel, nach wievielen Worten der Post dann unterbrochen wird, in welchen Maßen und Größen Bilder angezeigt werden usw. Möchte man die außerdem irgendwann wieder ändern, müsste man die jeweilige Stelle im HTML-Code erst einmal wiederfinden, was gerade für Anfänger nahezu unmöglich ist. 

Einfacher und unabhängiger ist man, wenn man die hauseigene Blogger-Funktion dafür nutzt. Diese ist Standardmäßig aktiviert, ihr müsst sie nicht selbst aktivieren. Ihr müsst bzw. könnt lediglich bei Blogger auf Layout gehen und dann bei "Blogposts" (oder so ähnlich, kann bei jeder Vorlage anders sein) auf "Bearbeiten", es öffnet sich ein neues Fenster. Direkt oben könnt ihr dann beim Punkt "Linktext der Post-Seite" eingeben, was bei eurem Weiterlesen-Gadget stehen soll. Ob "Weiterlesen", "read more", "Weiter" oder "Lies mehr", eurer Fantasie ist dabei keine Grenze gesetzt.



Was ihr nun bei jedem Post, den ihr schreibt, machen müsst, ist an der Stelle, wo der Bruch sein soll, also wo dann der Link "Weiterlesen" (oder was auch immer) erscheinen soll, einen sogenannten "Jump Break" einzufügen. 


Dieser Jump Break muss von euch bei jedem Post, den ihr schreibt, von selbst gesetzt werden, er setzt sich nicht automatisch. Mag für manche ein Nachteil sein, ich sehe darin den Vorteil, dass ihr den Jump Break zielgesetzt da hin machen könnt, wo ihr wollt. Außerdem könnt ihr so viele Bilder wie ihr wollt davorsetzen oder aber auch gar kein Bild. Ihr seid völlig frei. 

Optische Gestaltung
Möchtet ihr Textstellen in eurem Post hervorheben, müsst ihr euch nicht nur auf fett, kursiv, unterstrichen und durchgestrichen beschränken. Auch müsst ihr nicht immer alles über den HTML Code machen. Blogger bietet von alleine schon viele nützliche Funktionen oben in der Leiste beim Post schreiben an. Das kursive große F, das links als erstes steht, gibt euch die Möglichkeit, aus einer kleiner Anzahl von Schriftarten auszuwählen. Ich mache Zwischenüberschriften in letzter Zeit gerne in einer anderen Schrift, als meiner Standardschrift Arial (so auch in diesem Post). Die beiden T's daneben geben euch die Möglichkeit, die Größe zu ändern. 

Was ich auch gerne mal aus gestalterisches Mittel nutze, sind solche Zwischenüberschriften:

Ich bin eine Beispiel-Überschrift 
Hierfür müsst ihr bei "Texthintergrundfarbe" (das Symbol, das aussieht wie eine Filzstiftspitze) den Schrifthintergrund in einer anderen Farbe einstellen, ich persönlich finde schwarz gut, aber man kann natürlich auch jede andere Farbe wählen. Dazu müsst ihr dann auf dem Symbol links daneben noch die Schriftfarbe anpassen, denn schwarze Schrift auf schwarzem Hintergrund kann man nicht lesen usw. 
Auch hier heißt es einfach nur wieder: Werdet kreativ mit dem, was euch gegeben ist! :) Wer Lust, Ahnung und Zeit hat, kann natürlich auch ganz viel über den HTML-Code anpassen, aber hiermit wollte ich euch einfach mal zeigen, dass vieles auch ganz einfach ohne große Kenntnisse geht :)
Wie hat euch die Reihe abschließen gefallen? Von welchem Post konntet ihr am meisten mitnehmen? Das würde mich sehr interessieren :)
 
 photo sign_zps0izpyskn.png

Kommentare:

  1. Ahhhh das mit dem Jump Break ist ja toll, denn sowas wollte ich haben...vielen, vielen lieben Dank für den tollen Post! Ich würde mich total freuen, wenn du noch mehr solcher Posts machst! :-*

    viele liebe Grüße
    Melanie / www.goldzeitblog.de

    AntwortenLöschen
    Antworten
    1. Liebe Melanie, Ahh freut mich, dass ich dir helfen konnte und dass dir die Reihe so gut gefallen hat :) Momentan ist erst einmal kein weiterer Teil geplant, aber ich behalte mir dein Interesse auf jeden Fall im Hinterkopf und werde auf jeden Fall nochmal einen weiteren Part machen, wenn sich genügend Tipps ansammeln :*

      Löschen
  2. Ich fande die Reihe total klasse, besonders der Post zur Fotografie, weil ich da selbst noch ziemlicher Anfänger bin! :)
    Ich finde es immer schön, wenn erfahrene Blogger ihre Tips und Tricks auch weitergeben, ist ja alles keine Hexenkunst :D

    Liebe Grüße,
    Denise
    Fräulein Pompidou

    AntwortenLöschen
    Antworten
    1. Liebe Denise, freut mich total, dass dir die Reihe gefallen hat :) Da hast du recht, so schwer ist das ganze eigentlich nicht! :) Liebe Grüße

      Löschen
  3. Liebe Mona,
    ich finde diese Reihe wirklich super, ich habe gerade auch das "weiterlesen!" tutorial nebenbei gemacht als ich deinen Post gelesen habe, gut zu wissen :D
    Ich fand diesen Post und die Bildbearbeitung am interessantesten, danke für deine Mühe!
    Liebste Grüße <3

    AntwortenLöschen
    Antworten
    1. Hallo liebe Therese <3 Freut mich total, dass es dir gefallen hat, und danke für dein Feedback :) Hach haha was für ein Zufall :D Liebe Grüße an dich <3

      Löschen
  4. Hallo meine Liebe,
    toller Beitrag, wie immer <3 Ich mag die ganze Reiher sehr und möchte mich da gar nicht unbedingt auf einen Teil beschränken, da ich überall etwas tolles für mich rausziehen konnte, hier zum Beispiel nochmal alles über den Jump Break - finde das auch sehr vorteilhaft, wusste aber nicht wie man das selbst einbindet sondern hatte das schon vorinstalliert :)
    Ich wünsche dir einen wundervollen Tag <3
    Juli von Lebenlautundleise

    AntwortenLöschen
    Antworten
    1. Hallo liebe Juli <3 Danke für dein liebes Feedback <3 Freut mich auch, dass du aus allen Teilen etwas nützliches für dich finden konntest :) Danke dir und ganz liebe Grüße :)

      Löschen
  5. Danke für die interessante Reihe ♥

    Oh je, ich glaube meine Bilder sind in der mobilen Ansicht auch unscharf - ich will aber auch, dass die Bilder größer werden, wenn man sie auf dem Blog anklickt :D

    Lieber Gruß ♥

    AntwortenLöschen
    Antworten
    1. Danke für dein liebes Feedback <3 Oh na gut, wenn die größer werden sollen, bringt die Originalgröße für dich natürlich nichts :/ Finde es aber auch einfach doof gemacht von Blogger, denn an sich ist die Xlarge Funktion ja eigentlich total praktisch.. :/ Liebe Grüße :) <3

      Löschen
  6. Liebe Mona, oh je, der Beitrag war sicher sehr zeitintensiv, aber auch sehr nützlich, danke dafür! Mir hat die ganze Reihe gut gefallen. Bildbearbeitung fand ich vielleicht für mich am spannendsten, weil ich mich ja Null damit auskenne. Auf jeden Fall hast Du sicher so einigen helfen können, dass sie ihren Blog nun besser kennen und welche Möglichkeiten dahinter stecken. Liebe Grüße <3

    AntwortenLöschen
    Antworten
    1. Hallo liebe Andrea :) Ja, der war tatsächlich sehr zeitintensiv, allerdings habe ich ihn über einige Tage immer mal nebenbei gemacht, die Screenshots gemacht usw., deswegen kam mir das gar nicht so lange vor :) Liebe Grüße und danke für dein Feedback <3

      Löschen
  7. Mega spannend, vor allem das mit dem weiterlesen... das wollte ich auch mal ändern, aber so gefällt es mir irgendwie auch. Mach weiter so! Voll professionell! 👍🏻

    AntwortenLöschen
    Antworten
    1. Hallo liebe Vanessa, na dann weißt du ja jetzt, wie es geht hihi :) Danke für dein liebes Feedback :)

      Löschen
  8. Hallo liebe Mona,
    Jaaaa ich muss ja zugeben, dass ich mir noch gar nicht ao viele Gedanken über die Bildgröße gemacht, ups 😅 Aber deine Tips sind mal wieder Gold wert, das muss ich beim nächsten mal gleich mal testen 😊
    Liebe Grüße

    AntwortenLöschen
    Antworten
    1. Hallo liebe Steffi :) Freut mich, dass dir die Tipps gefallen haben :D Danke für deine lieben Worte und viel Spaß beim ausprobieren :) Liebe Grüße an dich

      Löschen
  9. Die Reihe war echt eine super Idee von dir, liebe Mona! :)
    Das mit den unscharfen Bildern wusste ich gar nicht. Vermutlich weil ich schon immer die Bilder verkleinere und dann in Originalgröße verwende, haha. Finde es super, dass du diese Screenshots zur Veranschaulichung verwendet hast! :)
    liebste Grüße,
    Nina ♥

    http://captivatingplace.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Danke liebe Nina :) Ach na siehst du, da warst du mir und auch vielen anderen schon nen Schritt voraus :D Ich mache das mit der Originalgröße erst seit ca. einem halben Jahr :) Und schön zu hören, dass dir das mit den Screenshots gefallen hat <3 Liebe Grüße

      Löschen
  10. Tolle Tipps! Ich bin auch ein großer Fan des Read More Gadgets!
    Liebe Grüße
    Sarah

    AntwortenLöschen
  11. Das mit der Größe ist tatsächlich neu für mich. Das werde ich morgen dann direkt mal abchecken ob das bei mir auch so ist. Wäre ziemlich ärgerlich.
    Die restlichen Tipps kannte ich zwar schon. Aber schön, dass du es für alle zusammenfasst. :)

    -xx, Carina
    www.redsunbluesky.blogspot.de

    AntwortenLöschen
    Antworten
    1. Hallo liebe Carina, Danke für dein Feedback :) Viel Spaß beim ausprobieren <3

      Löschen
  12. nice post and lovely blog :)
    Kisses,
    Tijana

    http://itsmetijana.blogspot.rs/

    AntwortenLöschen
  13. Wie? Was? Schon zu Ende? Schade :)
    Die Reihe hat mir unglaublich gut gefallen, vielen Dank Mona!
    Und mir ist gerade aufgefallen, dass ich dieses "weiterlesen" mal wieder benutzen könnte...ich hatte vor [irgendeiner] Bloggerumstellung ein schönes Design mit diesen Vorschauen gebastelt - und nach der Umstellung war es so zerschossen [und ich nicht html-begabt], dass ich es nicht mehr hinbekommen habe, muss direkt mal schauen =)

    AntwortenLöschen
  14. Was für tolle Tipps! Das mit der Smartphone Ansicht und der Bildgröße wusste ich noch gar nicht, werde ich demnächst aber drauf achten!

    Laura♥
    sparklingpassions.de

    AntwortenLöschen
  15. Das sind echt wieder tolle Tipps :)

    Ich habe mein Weiterlesen mit HTML und Css gemacht :)

    ShellyAbdallahs.Blogspot

    AntwortenLöschen

Euer Lob und eure konstruktive Kritik sind herzlich Willkommen.
Bitte nutzt meine Kommentarfunktion nicht als reine Werbeplattform für euren Blog; Links, welche inhaltlich mit meinem Post zusammenpassen, sind hingegen gerne gesehen! ♥
Eure Kommentare bzw. Fragen beantworte ich über die Kommentarfunktion meines Blogs, schaltet also die Benachrichtigung ein oder schaut wieder vorbei.
♥♥♥