Posts mit dem Label werden angezeigt. Alle Posts anzeigen
Posts mit dem Label werden angezeigt. Alle Posts anzeigen

Fremdes Design installieren


Hallo Ihr Lieben,

manchmal ist man nicht zufrieden mit dem eigenen Design und egal was man versucht, es funktioniert oder gefällt nicht. Die Lösung: ein Design von woanders her auf seinem Blog anwenden. Im Internet findet man sie überall, Blogdesigns für kleines Geld oder für lau. In diesem Post zeige ich euch, wie man sie richtig installiert und gebe euch Tipps beim aussuchen!

Wo finde ich Designs?

Für Blogger gibt es eine Menge Anbieter, hier sind meine Favoriten:
  • ThemeXpose - alle Designs sind kostenlos, für ein wenig Geld kann man die Credits entfernen.
  • MiraDesigns - Dort verkaufe ich meine Designs.
  • CopyPasteLove - Hier findet ihr auch einige kostenlose Designs.
  • Etsy - Dort findet ihr eine Menge Blogdesigns!
  • und noch viele andere Seiten!

Wie installiere ich ein Template?

1. Dafür sucht ihr euch ein Design aus und ladet es herunter.

Wenn ihr die Möglichkeit habt, eine Demo anzuschauen, dann tut das! Lieber erst anschauen und ausprobieren!


2. Entpackt die Datei.

In der Regel bekommt man beim Download nicht nur das Design, sondern noch eine ReadMe-Datei und eventuell noch eine Dokumentation, die euch beim Einrichten helfen soll. Um an diese Sachen heran zu kommen, müsst ihr die .zip-Datei entpacken.


3. Sucht nach der .XML-Datei.

Je nach dem, was für ein Design ihr gewählt habt und wie viele Variationen diese hat, findet ihr in dem entpackten Ordner eine oder mehrere .XML-Dateien. Diese beinhalten eure Designs.


4. Geht zu Blogger.com und öffnet die Vorlage-Seite. Rechts oben findet ihr BackUp/Wiederherstellung. Klickt darauf.



5. Macht zuerst ein BackUp, indem ihr auf "Vollständige Vorlage herunterladen" klickt.

Danach könnt ihr mit "Datei auswählen" die gewünschte .XML-Datei hochladen.


6. Lest euch die ReadMe-Datei und die Dokumentation durch.

Dort findet ihr weitere Hinweise, wie ihr das Design so einrichtet, damit sie alle Funktionen aus der Demo hat.


Darauf solltet ihr achten, wenn ihr ein fremdes Design benutzt:

  • Macht euch Gedanken, was ihr haben wollt! Die Auswahl an Designs ist riesig und manchmal verliert man sein Ziel aus den Augen. Brauche ich wirklich einen riesigen Slider? Ist eine Gallerie sinnvoll? Beachtet, dass je mehr Funktionen und Extras ein Template hat, desto länger wird er später brauchen um zu laden.
  • Ihr seid euch nicht sicher, ob ihr die Credits löschen dürft? Dann lest in der ReadMe-Datei oder fragt per Mail beim Designer nach. Kostenlose und günstige Designs setzen aber meistens voraus, dass ihr die Credits drin lasst.
  • Die Zukunft ist unterwegs online, also achtet darauf, dass eure Vorlage unter Responsive Design fällt. Ein Design, das responsive ist, reagiert auf die verschiedenen Ausgabegeräte, sodass sie auf dem Smartphone, Tablet und Desktop verschieden aussehen und trotzdem dem gleichen Design-Schema folgen.
Beispiel für Responsive Design

Weiterlesen »

Favicon einfuegen


Für alle, die sich schon immer gefragt haben, wie dieses kleine, komische Bild heisst, das ihr in dem Bild oben sehen könnt: Das nennt sich Favorite Icon, oder ganz kurz Favicon. Diese Grafik taucht auf, wenn jemand eine Seite zu den Lesezeichen bzw. Bookmarks hinzufügt.

Da bei Blogger Blogs immer nur dieses hässliche "B" zu sehen ist, hattet ihr bestimmt schon öfters das Bedürfnis, dieses kleine Bild neben den Tab-Titel eures Blogs zu ändern.

Weiterlesen »

{Minima Basics #2} Bloghintergrund ändern


Es wurde gefragt, wie man einen eigenen Hintergrund einfügen kann. Bei den neuen Vorlagen kann man zwar ein Bild hochladen, aber die Größe ist der Datei ist begrenzt und außerdem kann man nicht bestimmen, wie der Hintergrund sich verhält.
Bei der Minima-Vorlage, mit der ich am liebsten arbeite, kann man kein Bild hochladen - hierfür auch das Tutorial.

Weiterlesen »

Zähler für Kommentare & Posts


Wer von euch schon immer mal schnell sehen wollte, wie viele Posts und Kommentare sich denn eigentlich schon auf eurem Blog angesammelt haben, ist hier genau richtig. Diese kleine Statistik kann nämlich in Form eines Gadgets auf eurer Seite eingefügt werden.
Weiterlesen »

Automatisches "Read More"



Oder auch "Auto Read More". Im Internet gibt es viele englischsprachige Tutorials, wie man das auf seinem Blogger-Blog einbinden kann. Leider sehen die meisten dann so aus: Links klein ein Vorschaubild und rechts Text. Um die Bilder normal groß und den Text darunter zu haben, musste man bisher in allen Post manuell einen Jumplink setzen. Ich habe vor einiger Zeit herausgefunden, wie man das ganze automatisch machen kann, und nutze es schon eine Weile auf meinem Blog. Dafür habe ich den Code von BloggerSentral etwas umgeschrieben :)

Dieses Tutorial funktioniert am besten mit der Minima-Vorlage. Schreibt es, falls es nicht so sein sollte. :)

Wie funktioniert's?

1. Javascript einfügen.
Um das ganze möglich zu machen, brauchen wir Javascript. Geht auf eurem Dashboard zu Vorlage und öffnet dort das HTML. Sucht dort nach </head> und fügt darüber folgenden Javascript-Code ein:
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -mit Vorschaubild, no -ohne Vorschaubild
summary_noimg = 630; //Anzahl der Buchstaben im Vorschau ohne Bild
summary_img = 310; //Anzahl der Buchstaben im Vorschau mit Bild
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<");
  for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
  }
  strx =  s.join("");
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2;
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
 strx = strx.substring(0,chop-1);
 return strx+'...';
}
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) {
   imgtag = '<span style="padding:0px 10px 5px 0px;margin:0 1em;"><img src="'+img[0].src+'" width="'+img_thumb_width+'%" /></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->
Die markierten Zeilen könnt ihr im Nachhinein ändern. In der Erklärung steht, was diese Werte machen.

2. Im HTML abändern
Jetzt müssen wir im HTML noch etwas ändern, damit der Code oben etwas bewirken kann. Dafür sucht ihr "post-body entry-content" und beim zweiten Ergebnis solltet ihr eine Zeile darunter folgendes finden:

(Die Zahlen links und die erste Zeile können je nach Vorlage variieren.)

Ersetzt <data:post.body/> mit:
<!-- Auto read more Start -->
<!-- http://www.BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Weiterlesen &#187;</a>
</b:if>
</b:if>
<!-- Auto read more End -->

3. Speichern und Blog neu laden. Und das war es auch schon. Am besten sieht das übrigens aus, wenn ihr die Bilder mindestens mit der gleichen Breite wie der Postbereich hochladet. Ich hoffe, dieses Tutorial kann euch helfen :)

Gutes Gelingen!

Ähnliche Posts


Weiterlesen »

Google Analytics in Blogger einbinden


Was ist Google Analytics?

Viele Firmen legen Wert auf eine Angabe von Eindeutigen Besuchern. Was sind eindeutige Besucher? Das ist die genaue Anzahl an Besucher, dabei wird jeder Besucher gezählt. Das heißt, diese Zahl lässt sich nicht manipulieren, indem einer fünfzig mal am Tag auf euren Blog geht, denn dann wird es nur einmal gezählt.
Anders ist es bei dem Begriff "Seitenaufrufe", den ihr bei Statistiken im Dashboard aufrufen könnt; da werden die anderen 49 Aufrufe mitgezählt.
Weiterlesen »

"Abonnieren Posts (Atom)" entfernen ♥



Hallo ihr Lieben :) Hier ist nach langer Zeit wieder Neele von vanillebrause.

Heute möchte ich euch zeigen, wie man den nervigen Schriftzug / Link "Abonnieren Posts (Atom)" unter eurem Blog entfernen kann. Das wurde schon mehrfach angefragt und ich finde auch, dass der Link nicht wirklich nützlich ist. Auf dem folgenden Foto seht ihr, was ich meine...

Weiterlesen »

[LinkWithin] "Das könnte Sie auch interessieren" einrichten ♥


Viele Blogs, die vor allem informativ bloggen (über neueste Trends, Beauty-Artikel etc.), also weniger persönliches zeigen, benutzen Link Within.
Link Within ist ein Widget, dass man auf dieser Seite erstellen kann. Sie hängen am Ende jedes Postes und zeigen weitere, ähnliche Posts, die ihr schon einmal veröffentlicht hat.
Weiterlesen »

Sidebartitel ausblenden


Heute zeige ich euch, wie man die Sidebartitel ausblenden kann. Dieser Post besteht aus zwei Teilen: Wie man alle Sidebartitel ausblendet und wie man nur bestimmte Titel ausblendet. Ersteres ist wirklich sehr einfach, bei zweiteres müsst ihr euch selbst ein wenig mit eurem Code beschäftigen ist es auch gar nicht so schwer :)
Weiterlesen »

Anzahl der Kommentare wieder anzeigen lassen ♥


Seit einiger Zeit stehen auf einigen Blogs nur "Kommentare:". Viele fragen mich um Rat, aber das einzige, was ich sagen kann, ist: Das liegt an Blogger und ihren Aktualisierungen. Eigentlich sollte das Problem mit der Zeit vom Bloggerteam behoben werden. Wer aber nicht warten kann, zeige ich hier, wie man das Problem ganz schnell und einfach lösen kann.
Weiterlesen »

Datum unter Posttitel ♥


Heute zeige ich euch eine ganz simple Methode, wie ihr das Datum unter den Postitel und neben andere Punkte wie Autor, Kommentare und Labels bringt. Dafür braucht man nicht mal HTML-Grundwissen! Hier könnt ihr euch ein Beispiel ansehen.
Weiterlesen »

Back to Top - Version 2 ♥♥


Hallo ihr Lieben,

willkommen zu einem neuen Post auf Copy Paste Love. Heute werde ich euch zeigen, wie man einen Back-to-Top Button zu seinem Blog einfügt. Es taucht erst auf, wenn man ein wenig gescrollt hat, hat einen schicken Hover-Effekt und scrollt sanft hoch. Der Code ist von Matt Varone, hier könnt ihr es euch anschauen. Dieses Tutorial wurde so geschrieben, dass ihr es in Blogger einfügen könnt.

Weiterlesen »

Die Navbar


Heute kommt ein ganzer Sammelpost heraus. Wir hatten mittlerweile 3 Tutorials zu dem Thema und statt eine vierte heraus zu bringen, werde ich alle in einem zusammenfassen. Die Themen dieses Posts seht ihr im Titelbild.
Weiterlesen »

Simple Suchfunktion ♥


Ihr mögt die Google-Suchfunktion als Widget genauso wenig wie ich?
Dann habe ich eine einfache und ansehnliche Lösung für euer Problem :)
Wenn ihr euch ein wenig mit HTML auskennt, könnt ihr das Suchfeld ganz einfach innerhalb eures Designs platzieren, ihr könnt aber auch ein HTML-Widget erstellen und den Code dort einfügen.

Weiterlesen »

Post-Titel und Datum zentrieren ♥♥♥



In diesem Tutorial zeige ich euch, wie ihr den Post-Titel und die Datumsangabe zentrieren (oder auch nach rechts ausrichten) könnt. Lasst euch von den Bildern nicht irritieren, die Bilder sind noch von der alten Vorlage, aber der Inhalt ist gleich!

Weiterlesen »

Persönliche Unterschrift einbinden ♥


Diesmal zeigen wir euch, wie ihr eure Signatur einfach in eure Posts automatisch einfügen lässt, ohne sie jedes mal selber hinein zu kopieren. Bei älteren Posts werden jedoch keine Signatur hinzugefügt, diese Funktion wird erst ab dem nächsten Post angewendet!
Weiterlesen »

Alternative zum LinkWithin: Simples "Related Posts" ♥


LinkWithin ist an sich eine schöne Idee, um Leser auf andere ähnliche Posts aufmerksam zu machen. Persönlich finde ich jedoch die großen Thumbnails störend, vor allem wenn man gar nicht so viele Bilder bloggt. Darüber hinaus ist es nicht gerade dezent und subtil, weswegen LinkWithin für uns nicht erdenkbar war. Zum Glück haben wir eine tolle, simple und vor allem dezente Alternative gefunden, die nur auf der Postseite erscheint, und das Einbauen ist gar nicht so schwer!

Weiterlesen »

Suchen & Finden mit dem neuem HTML-Editor ♥


Viele von euch schreiben mir, dass sie diese und jene Tutorials nicht machen können, da ihr HTML-Editor anders aussieht. Dabei hat sich der HTML-Code gar nicht verändert, sie wird nur etwas anders dargestellt. Jedoch kann ich verstehen, dass der neue Editor etwas gewöhnungsbedürftig ist und man damit nicht viel finden kann - außer man weiß, wie!
Weiterlesen »

Leuchtende Augen mit Photoshop ♥


Schon öfters habt ihr nachgefragt, wie man denn "dieses Leuchten" in den Augen hinbekommt, das man auf vielen Bildern sieht. Meistens ist die Antwort "gutes Licht beim Fotografieren ist die beste und einfachste Methode". Stimmt auch, dennoch kann man das ganze auch bei Photoshop herstellen oder alternativ verstärken, was ziemlich oft Teil einer Beautyretusche ist.
Weiterlesen »

Header mit Mouseover ♥♥


Heute zeige ich euch, wie man einen Header hinkriegt wie hier: mit Mouseover.

So schwierig wie es aussieht ist es gar nicht, aber jeder Informatiker wird mit mir schimpfen, da es schon in die Kategorie "Bad Coding" (dt.: schlechtes Programmieren) fällt. Es geht auch richtig, dauert aber etwas länger und hat den gleichen Effekt. Also, Hauptsache es funktioniert, nicht?

Weiterlesen »
 
Lass dir dein Blogdesign von mir gestalten!