Posts mit dem Label HTML & CSS werden angezeigt. Alle Posts anzeigen
Posts mit dem Label HTML & CSS werden angezeigt. Alle Posts anzeigen

Drei Widgets nebeneinander einfügen



Hallo Ihr Lieben,

Heute zeige ich euch, wie man in die Minima Vorlage drei Widgets nebeneinander einfügen kann. Im Vorlagendesigner kann man zwar einen Footer mit drei Spalten einfügen, für die, die lieber mit der Minima-Vorlage arbeiten, haben diese Möglichkeit nicht.
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 »

Zitatbox gestalten

Hallo Ihr Lieben,

heute zeige ich euch, wie man den Zitatbox schöner gestalten kann. Außerdem habe ich euch 6 Varianten vorbereitet, die ihr so übernehmen oder abgeändern könnt.

Sucht im "HTML bearbeiten" nach:

.post-body blockquote {

Darunter könnt ihr nun beliebige CSS-Codes einfügen, die eure Zitatbox zu etwas besonderem machen. Mögliche Eigenschaften für euer Zitatbox findet ihr im CSS-Katalog.

Variante 1:

Mit einem Strich links.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}

Variante 2: 

Mit einem Rahmen.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
border: 1px solid #ea808b;
}

Variante 3:

Der erste Buchstabe ist anders als der Rest. Für diese Variante muss eure gewünschte Schriftart über </head> im HTML eingebaut sein (Wie das geht?). 
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
}
.post-body blockquote:first-letter {
font-family: 'Great Vibes';
font-size: 35px;
}

Variante 4:

Die Box ist mit einem Hintergrund versehen.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
background: url(https://3.bp.blogspot.com/-z17okhZHJX0/VeNHCJGXttI/AAAAAAAAJJg/PF7IYyJJw00/s320/squares4.jpg);
padding: 20px;
margin: 1em 0 1em 10px;
}

Variante 5:

Bei dieser Variante werden vor und nach dem eigentlichen Zitat Zeichen angehängt.
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}
.post-body blockquote:before {
content: '" ';
}
.post-body blockquote:after {
content: ' "';
}

 Variante 6:

Hier wird gezielt ein Hintergrund gesetzt, sodass ein Anführungszeichen links oben auftaucht.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
background: url(https://3.bp.blogspot.com/-lkaSq8Ynu4M/VeNKRBUSypI/AAAAAAAAJJ4/1saDDhCl8bY/s1600/quote.png) no-repeat;
background-position-x: left;
background-position-y: top;
}

Wo kann ich eine Zitatbox machen? 

Im Posteditor, wo ihr euren Post schreibt, könnt ihr die Zitatbox einsetzen. Ihr markiert einfach eure gewünschte Textstelle und klickt auf die "-Anführungszeichen oben in der Werkzeugleiste.
Um den Stil auch in einem HTML/Javascript-Widget zu benutzen, fügt ihr ein <blockquote> vor und ein </blockquote> nach den als Zitat anzuzeigenen Text ein.
Weiterlesen »

CSS-Bezeichnungen im Minima



Hallo ihr Lieben, 
Heute erkläre ich euch, was die einzelnen CSS-Bezeichnungen, die ihr beim „Layout gestalten“ seht genau bedeuten.

Welche Eigenschaften ihr in die jeweiligen Bezeichnungen (der korrekte Fachausdruck ist Selektor) verwenden könnt, seht ihr im CSS-Katalog.

Wenn ihr unter „Vorlage“ und „HTML bearbeiten“ euer Design verändern wollt, stößt man vorerst auf Begriffe, von denen man gar nicht genau weiß, was sie bedeuten. Natürlich kann man vieles übersetzen, jedoch bleibt oft die Frage „Was verändere ich damit denn eigentlich?“ im Kopf hängen. Um in Zukunft Bescheid zu wissen, zeige ich euch eine Definitionsliste, die ich nach persönlichen „Try & Fail“-Erfahrungen erstellt habe.

Die Selektoren sind aus der Minima-Vorlage entnommen, mit der die meisten Blog-Designer arbeiten. Die Vorlage ist nicht mehr direkt bei Blogger verfügbar, aber ihr könnt die Original-Version hier oder unsere bearbeitete Version hier herunterladen. Beachtet, dass ihr bei dieser Vorlage den Vorlagendesigner nicht mehr verwenden könnt!

Links seht ihr die Begriffe bzw. Selektoren, die ihr in eurer Minima-Vorlage findet und rechts die passenden Definitionen.




body {}
Grundlegende Eigenschaften des Blogs
a:link {}
Eigenschaften der Links
a:visited {}
Eigenschaften der bereits besuchten Links
a:hover {}
Eigenschaften der Links, wenn man mit der Maus darüberfährt
a img {}
Eigenschaften der Bilder, die sich im Blog befinden und eine Verlinkung aufweisen


/* Header
-----------------------------------------------*/
/* Oberer Teil
-----------------------------------------------*/
#header-wrapper {}
Eigenschaften des Header-Bereichs
#header-inner {}
Eigenschaften für die Dinge, die sich im Header befinden
#header {}
Grundlegende Eigenschaften des Headers
#header h1 {}
Eigenschaften für Blogtitel im Header
#header a {}
Eigenschaften aller Links im Header (inkl. Blogtitel)
#header a:hover {}
Eigenschaften aller Links im Header (inkl. Blogtitel), wenn man mit der Maus darüberfährt
#header .description {}
Eigenschaften für die Blogbeschreibung unter dem Header
#header img {}
Eigenschaften für das Headerbild


/* Outer-Wrapper
----------------------------------------------- */
/* Hauptteil
----------------------------------------------- */
#outer-wrapper {}
Eigenschaften für den Gesamten Bereich (Sidebar+Haupbereich)
#main-wrapper {}
Eigenschaften für den Hauptbereich (Postbereich)
#sidebar-wrapper {}
Eigenschaften für den Sidebar-Bereich


/* Headings
----------------------------------------------- */
/* Überschriften
----------------------------------------------- */
h2 {}
Eigenschaften für Sidebartitel, Datum und “Überschrift” im Postbereich


/* Posts
-----------------------------------------------*/
/* Postbereich
-----------------------------------------------*/
h2.date-header {}
Eigenschaften für das Datum
.post {}
Eigenschaften für den Postbereich
.post h3 {}
Eigenschaften für Posttitel & Seitentitel auf der Startseite und (vor allem) auf der Postseite/Seite
.post h3 a, .post h3 a:visited, .post h3 strong {}
Eigenschaften für den Posttitel auf der Startseite
.post h3 strong, .post h3 a:hover {}
Eigenschaften für den Posttitel auf der Startseite, wenn man mit der Maus darüber fährt
.post-body {}
Eigenschaften für den einzelnen Postbereich
.post-body blockquote {}
Eigenschaften für Zitate
.post-footer {}
Eigenschaften für den unteren Teil des Posts
.comment-link {}
Eigenschaften für den Link zu den Kommentaren
.post img, table.tr-caption-container {}
Eigenschaften für die Bilder im Postbereich
.tr-caption-container img {}
Keine Angabe*
.post blockquote {}
Eigenschaften für die Zitate
.post blockquote p {}
Eigenschaften für Absätze in den Zitaten


/* Comments
----------------------------------------------- */
/* Kommentare
----------------------------------------------- */
#comments h4 {}
Eigenschaften für die Überschrift oberhalb des Kommentarbereichs
#comments-block {}
veraltet - keine Funktion**
#comments-block .comment-author {}
veraltet - keine Funktion**
#comments-block .comment-body {}
veraltet - keine Funktion**
#comments-block .comment-footer {}
veraltet - keine Funktion**
#comments-block .comment-body p {}
veraltet - keine Funktion**
.deleted-comment {}
Eigenschaften der gelöschten, sichtbaren Kommentaren
.feed-links {}
Keine Angabe*
#blog-pager-newer-link {
Eigenschaften für den Link "Neuere Posts" am Ende des Blogs
#blog-pager-older-link {}
Eigenschaften für den Link "Ältere Posts" am Ende des Blogs
#blog-pager {}
Eigenschaften für den Link "Startseite" am Ende des Blogs


/* Sidebar Content
----------------------------------------------- */
/* Sidebar
----------------------------------------------- */
.sidebar {}
Grundlegende Eigenschaften für die Sidebar
.sidebar ul {}
Eigenschaften für alle ungeordneten Listen der Sidebar
.sidebar li {}
Eigenschaften für alle Punkte in den Listen der Sidebar
.sidebar .widget. .main .widget {}
Eigenschaften für alle Gadgets in der Sidebar und im Postbereich
.main .Blog {}
Eigenschaften für den Postbereich


/* Profile
----------------------------------------------- */
/* Profilgadget
----------------------------------------------- */
.profile-img {}
Eigenschaften für das Bild im Profilgadget
.profile-data {}
Eigenschaften für die Überschrift im Profilgadget
.profile-datablock {}
Eigenschaften für die Überschrift im Profilgadget
.profile-textblock {}
Eigenschaften für den Text im Profilgadget
.profile-link { }
Eigenschaften für die Links im Profilgadget


/* Footer
----------------------------------------------- */
/* Unterer Teil des Blogs
----------------------------------------------- */
#footer {}
Eigenschaften für den unteren Teil des Blogs




Zum Schluss ein kleiner Hinweis: Wenn ihr eine Minima-Vorlage verwendet findet ihr alle Begriffe. Benutzt ihr eine neue Vorlage, werdet ihr diese wahrscheinlich nicht alle so vorfinden, wie sie hier aufgelistet sind. Trotzdem dürfte die Liste eine hilfreiche und nützliche Sache beim Designen eures Blogs sein.


*Keine Angabe: bedeutet, dass ich für diesen Begriff keine Funktion herausgefunden habe. Wenn ihr mehr wisst, dürft ihr die Liste gerne ergänzen.

**veraltet - keine Funktion: bedeutet, dass diese Selektoren vermutlich nicht mehr gebraucht werden und wenn, dann sehr selten.
Weiterlesen »

Textstellen hervorheben


Heute zeige ich euch eine einfache Methode, wie ihr euren Text aufpeppen und einige Textstellen hervorheben könnt.

Gestalten

Wir fügen im "HTML bearbeiten" über "]]></b:skin>" folgenden Code ein:
b{
...
}

i{
...
}

u{
...
}
Die ... könnt ihr nun durch beliebige CSS-Codes eintauschen. Im CSS-Katalog findet ihr passende Code-Schnipsel.

Noch kurz zur Erklärung:
  • b bedeutet fett
  • i bedeutet kursiv
  • u bedeutet unterstrichen

Verwendung

Im Post-Editor:

Wollt ihr die Gestaltung im Post verwenden, könnt ihr eure Textzeilen markieren und folgende Punkte im Post-Editor anklicken:
Im Editor selbst seht ihr eure Formatierung nicht, dafür aber in der Vorschau und im veröffentlichten Post.

In HTML/Javascript-Widget:

Fügt um euren gewünschten Textstellen, je nachdem was ihr gerne hättet, folgendes ein:
<b>Dein Text</b>
<u>Dein Text</u>
<i>Dein Text</i>
Ihr könnt das auch im Fließtext verwenden, in etwa so:
Der Text hier ist normal, aber ab <b>hier sieht es anders aus</b>. Jetzt ist es wieder normal.

Viel Spaß beim ausprobieren!

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 »

Der CSS-Katalog


Da viele Tutorials Grundkenntnisse in CSS voraussetzen, habe ich hier ein CSS-Katalog erstellt, welches an sich kein eigenes Tutorial ist, sondern als Begleitmaterial für andere Tutorials dient.

Achtung: Dieser Post ist nicht dafür geeignet, CSS in seiner Gesamtheit zu erlernen.

Benutzen von CSS

CSS ist für das Aussehen jeder Webseite verantwortlich (nicht verwechseln mit dem Aufbau!). Im Prinzip ist die Sprache sehr einfach. Ihr braucht einen Selektor (Adressat), den ihr ansprecht und eine Anweisung bestehend aus Attribute und Werte zuweist. Im Grunde sieht ein CSS-Code so aus:
Selektor {
Attribut: Wert;
}
Dem angesprochenen Selektor kann man unendlich viele Anweisungen, also Attribute und Werte geben. Der Selektor ist abhängig vom HTML, denn CSS ist dafür da um HTML-Elemente zu gestalten.

Einfache Attribute von CSS

Je nach dem ob ihr ein Block-Element (div-Elemente, Bilder) oder ein Schrift-Element (a-Elemente, span-Elemente) gestalten wollt, gibt es verschiedene Attribute. Manche kann man auch bei beidem einsetzen. Im folgenden gehe ich auf einfache Attribute ein und welche Werte man jeweils einsetzen kann.

Höhe und Breite (nur Block)

width | height: [Zahlen-Wert mit Größeneinheit];

Erklärung der Größeneinheiten:

  • px = Pixel
  • em = Höhe der verwendeten Schrift
  • % = Prozentsatz - relativ zum Elternelement (Element, indem sich das bearbeitete Element befindet)
  • auto = wird ohne Maßangabe benutzt, damit sich das Attribut sich an das andere vorgegebene Attributwert anpasst (zB. width ist fest vorgegeben, dann kann mit height:auto; die Höhe sich anpassen, damit das Bild nicht verzerrt wird). Funktioniert nur bei Bilder.

Beispiele:

width: 50px;
height: 5em;
width: 100%;
height: auto;

Rahmen (Block, Schrift)

border-top | border-right | border-bottom | border-left: [Zahlen-Wert mit Größeneinheit] [Art des Rahmens (double, dashed, dotted, solid)] [Farbe];

Erklärung der Werte:

  • dashed = gestrichelt
  • dotted = gepunktet
  • double = doppelter durchgehender Strich
  • solid = durchgehender Strich

Beispiele:

border-top: 1px solid #000000;
border-left: 3px dashed rgb(174, 255, 7);
border-right: 5px dotted #ffffff;

Hintergrundfarbe (Block, Schrift)

background-color: [Farbe];

Beispiele:

background-color: #ffffff;
background-color: rgb(0, 0, 0);

Schrift-Attribute von CSS

Im folgenden werden CSS-Attribute gezeigt, die nur auf Schriften anwendbar sind (h1 bis h6, a und span Elemente).

Schriftgröße

font-size: [Zahlen-Wert mit Größeneinheit];

Beispiele:

font-size: 5em;
font-size: 15px;

Schriftfarbe

color: [Farbe];

Beispiel:

color: #ccdd66;

Textformatierung

text-align: [center, left, right oder justify];

Erklärung der Werte:

  • center = zentriert
  • left/right = links/rechts
  • justify = Blocksatz

Beispiel:

text-align: left;

Schriftformatierung

text-transform: [uppercase, lowercase, capitalize, none];

Erklärung der Werte:

  • uppercase = alles in Großbuchstaben
  • lowercase = alles in Kleinbuchstaben
  • capitalize = erster Buchstabe groß, Rest klein
  • none = keine Formatierung

Beispiel:

text-transform: uppercase;

Schriftart (nur Schrift)

font-family: [Schriftname], [alternative Schriftart];

Wie ihr eine Schrift einbindet, wird hier in den ersten 3 Schritten erklärt: http://www.copypastelove.de/2011/11/schriftart-bei-posttitel-andern.html

Beispiel:

font-family: 'Verdana', sans-serif;

Zeichenabstand (nur Schrift)

letter-spacing: [Zahlenwert mit Größeneinheit];

Erzeugt Abstand mit der angegebenen Größe.

Beispiel:

letter-spacing: 0.5em;
letter-spacing: 1px;


Diese Liste wird natürlich aktualisiert. Falls ihr etwas gerne wissen wollt, lasst es mich in den Kommentaren wissen!
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 »

Kommentare auftrennen



Hey ihr Lieben,

Ich zeige euch, wie man die Kommentaranzahl und den Kommentarlink getrennt anzeigen lassen kann. Besonders schön sieht das aus, wenn unter den Postfooter nicht viel steht und die einfache Kommentaranzeige unterhalb des Posts optisch schnell verloren geht.

Weiterlesen »

Suchfeld als Overlay


Hallo zusammen :)
Ich bin Myri aus dem KreaTief und darf euch heute wieder einen Gastpost präsentieren. Diesmal zeige ich euch, wie ihr ein Suchfeld in einem Overlay über dem Post platziert.

Aktuell könnt ihr euch das gerade auf meinem Blog ansehen, oder in einer vereinfachten Form im Demo, das ich geschrieben habe.

See the Pen Search Field Popup by Myri (@bekreatief) on CodePen.


Ein Suchfeld. Es darf vor allem auf einem vollen Blog nicht fehlen, aber oft braucht es so viel Platz. Das war der Grund, der mich dazu gebracht hat, mich auf die Suche zu begeben, nach einer Alternative zum Suchfeld irgendwo im Blog, wo man es auch nicht übersieht.
Im WWW habe ich ein paar coole Lösungen gefunden, wie etwas Suchfelder, die wachsen, sobald man sie anklickt, aber das war es noch nicht ganz. Diese Idee kam mir dann bei der Arbeit, als eines der Wordpress Themes, an denen ich arbeitete mit einem solchen Suchfeld ausgestattet war. Es war Liebe auf den ersten Klick.
Leider war das Script im Theme selbst nicht ganz so schön und voll mit Zeug, was ich nicht brauchen konnte. Also habe ich einfach eine einfache Version selbst geschrieben.

Folgend möchte ich euch zeigen, wie ihr eine Lupe in eurem Seitengadget platziert, die dann als Schalter für das Overlay dient.



1. Testblog

Ich empfehle immer einen Testblog, vor allem wenn ihr noch nicht so vertraut mit dem Code seid, solltet ihr das ganze zuerst in einem Testblog versuchen und erst wenn es dort geklappt hat, übernehmt ihr das für euren richtigen Post. Ich benutze im Beispiel mein Minima Responsive Template, aber das sollte mit jedem Template funktionieren. Falls ihr das Seiten-Gadget nicht verwendet, könnt ihr das ganze natürlich auch manuell machen, aber dazu gleich mehr. Startet also euren Testblog und wechselt dann in die HTML-Ansicht.





2. jQuery & Font Awesome

Für die Lupe verwenden wir eine Icon-Schrift. Mein Favorit ist Font Awesome, das lässt sich am einfachsten integrieren.

Ihr sucht nun nach

<b:skin>

und fügt oberhalb davon die aktuellste Version ein, in meinem Fall ist das 4.1.0

<!-- Font Awesome -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css' rel='stylesheet'/>

Das javaScript läuft mit jQuery. Falls ihr das nicht schon in eurem Blog habt, müsst ihr das hinzufügen. Google hostet das netterweise für uns, wir müssen also nur noch einen Link platzieren.

Sucht in eurem Blog nach

</body>

und direkt obererhalb davon fügt ihr folgendes ein:

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3. JavaScript

Als nächstes kommen wir zum Javascript. Das ist ziemlich simpel und sagt im Grunde bloss, dass sich das Overlay öffnen soll, wenn wir die Lupe anklicken und wenn wir ausserhalb des suchfelds oder auf unser x klicken, soll sich das overlay wieder schliessen.

Das kopieren wir unter den jQuery-Link, den wir eben platziert haben.

<script>
$(document).ready(function(){
 $('a[href="#search"]').on('click', function(event) {                    
  $('#search').addClass('open');
  $('#search > form > input[type="search"]').focus();
 });            
 $('#search, #search button.close').on('click keyup', function(event) {
  if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
   $(this).removeClass('open');
  }
 });            
});
</script>



4. Markup

Okay, als nächstes kommt das Markup für unser Overlay. Das könnt ihr an beliebiger Stelle einfügen.
ich habe beschlossen es ans Ende des Blogs zu stellen, also einfach oberhalb des jQuery-Scripts.

In unserem Markup haben wir ein Suchfeld, mit einer Schliessen-Taste.
Ihr braucht darin nichts anzupassen, ausser ihr wollt z.B. den Text ändern, der angezeigt wird, bis man anfägt zu tippen. dafür ändert ihr was zwischen dem placeholder (placeholder="Platzhaltertext")steht.

<div id="search"> 
 <span class="close">X</span>
 <form role="search" id="searchform" action="/search" method="get">
  <input value="" name="q" type="search" placeholder="type to search"/>
 </form>
</div>



5. CSS hinzufügen

Okay, als nächstes kommt die CSS. Hier definieren wir wie das ganze aussehen soll.
Ich habe bei den wichtigsten Stellen kommentare hinzugefügt, die euch erklären sollen, was wir machen.

/* Search Style */ 
#search {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Hintergrundfarbe des Overlays */
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
      -moz-transform: translate(0px, -100%) scale(0, 0);
       -ms-transform: translate(0px, -100%) scale(0, 0);
         -o-transform: translate(0px, -100%) scale(0, 0);
           transform: translate(0px, -100%) scale(0, 0);    
    opacity: 0;
    display: none;
}

#search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
       -moz-transform: translate(0px, 0px) scale(1, 1);
       -ms-transform: translate(0px, 0px) scale(1, 1);
        -o-transform: translate(0px, 0px) scale(1, 1);
            transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
    z-index: 106;
    display: block;
}

/* Suchfeld Style */
#search input[type="search"] {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -51px;
    width: 60%;
    margin-left: 20%;
    color: rgb(255, 255, 255); /* Schriftfarbe */
   background: transparent;
   border-top: 1px solid rgba(255, 255, 255, .8); /* Rand oben */ 
   border-bottom: 2px solid rgba(255, 255, 255, .5); /* Rand unten */
   border-left: 0px solid transparent;
   border-right: 0px solid transparent;
    font-size: 40px; /* Schriftgrösse */
   font-family: Josefin Sans; /* Schriftart */
    text-align: center; /* Textausrichtung */
    outline: none;
   padding: 10px;
}
  
/* x-Link */
#search .close {
    position: fixed;
    top: 15px;
    right: 15px;
    opacity: 1;
    font-size: 27px;
   color: #fff;
}

#search .close:hover{
  cursor: pointer;
}

Und das fügt ihr oberhalb von ]]></b:skin> ein, oder im Vorlagendesigner bei CSS hinzufügen (oder in einem HTML-Gadget, dann aber die Style-Tags nicht vergessen).

Und speichern.

6. Link setzen

Nun, im Grunde ist das einzige Kriterium für den Suchlink, dass er nach #search führt. Ihr könnt also irgendwo einen Link platzieren, der das als Linkziel hat.
Wie gesagt, ich platziere ihn im Seitengadget, weil wahrscheinlich die meisten von euch das benutzen.
Das HTML von meinem Link, würde allerdings so aussehen. Font-Aweseome Icons werden in i-Tags platziert.

<a href="#search">
  <i class="fa fa-search"></i>
</a>

Okay, geht zu Layout und öffnet euer Linkgadget.



Dort wählt ihr externen Link hinzufügen und fügt folgendes ein:







Fertig!

Und dann seid ihr fertig!





Fragen, Probleme?

Wie immer stehe ich bei Fragen oder Problemen zur Verfügung. Schreibt über die Kommentare oder über das Kontaktformular auf meinem Blog.

Ich hoffe euch gefällt das Ergebnis und vielleicht finde ich ja demnächst ein paar Blogs mit einem Suchfeld-Overlay :)






Weiterlesen »

Automatisches "Weiterlesen"


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

Weiterlesen »

Datum aufspalten & gestalten



***UPDATE***
Bitte beachtet die Änderungen, ich habe den ganzen Teil ab CSS angepasst!


Also, ich bin Myri und mittlerweile kennt ihr mich vielleicht, ich bin die, die immer wieder die Tutorials schreibt, die Leute zur Verzweiflung bringen... aber ich helf auch ganz gern bei Problemem aus ^^
In diesem Tutorial geht es darum das Datum spannender zu gestalten.
Weiterlesen »

[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.

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 »

Schriftart für Posttitel ändern


Hallo Ihr Lieben,

Wir zeigen euch heute, wie Blogspot-Blogger und Bloggerinnen eine andere Schriftart beim Posttitel einbinden können, die man unter Vorlagendesigner nicht findet.

Weiterlesen »

{Minima Basics #1} Breite und Größe anpassen


Heute zeige ich euch den ersten Teil der Minima-Basic-Tutorials. In diesem Tutorial wird nichts Blogger-spezifisches gezeigt, sondern nur, wie man mit CSS die Breite der Layout-Container an seine eigenen Wünsche anpasst.

Ein ähnliches Tutorial existiert schon, behandelt aber weit aus mehr als nur die Breite von Minima. Wer mit der Simple-Version arbeitet, kann die ältere Version bei Gelegenheit ja mal ausprobieren - ich bin mir nämlich nicht mehr sicher, ob sie noch funktioniert.

Weiterlesen »

Wie erstelle ich ein Menu: Responsives 1-Level-Menu (Teil 10) ♥♥♥

Hallo zusammen :)
Hier ist mal wieder Myri und ich möchte euch heute ein einfaches responsives Menü vorstellen. Und damit ihr sehen könnt, wie das Ergebnis aussieht, habe ich ein klitzekleines (tonloses) Video für euch, was euch das Ergebnis gleich mal demonstriert.



Weiterlesen »

Individuellen Pinterest-Hover-Button


Heute zeige ich euch, wie man einen Button über eure Bilder legt, mit dem man innerhalb von wenigen Sekunden die Bilder auf Pinterest teilen kann. Pinterest eignet sich perfekt für kreative Köpfe, die ihre Kreationen zeigen und andere wiederum weiter "pinnen". Wenn es euch nichts ausmacht, dass eure Bilder auf Pinterest landen, ist es auch perfekt, um euren Blog zu promoten!

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 »

Grafiken (zB. Social Icons) einbinden


Hallo Ihr Lieben,

heute kommt mal wieder ein längeres Tutorial von mir, indem ich euch zeige, wie man allgemein Grafiken, die man irgendwo heruntergeladen hat, auf seinem Blog einbinden kann.
Weiterlesen »
 
Lass dir dein Blogdesign von mir gestalten!