Spoiler Box

Um ewig lange Texte zu vermeiden, könnt ihr einen Spoiler benutzen (besonders gut kommt sowas bei Film- oder Buchrezensionen ;)). Dazu fügt ihr folgenden Code in den Post-html ein:

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">dein Titel <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px/Größe des Buttons;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Text für Button'; }" type="button"> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;background: #transparent none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: Schriftfarbe innerhalb des Spoilers; line-height: 1.5em;"><div style="display:none;">hier deinen Text<br /></div></div></div>

Zur Veranschaulichung:

so sieht es aus

Hier kommt euer Text rein! :)

Im sichtbaren Post-Bereich könnt ihr auch in das Kästchen schreiben. Dieser Text ist dann auch ohne Klick auf den Button sichtbar.

Viel Spaß damit!

Rahmen um Bilder entfernen

Damit der graue (oder weiße, schwarze...) Rahmen um die geposteten Bilder verschwindet, müßt ihr wieder ein bißchen eure html-Kenntnisse erweitern. ;)

► Design
► HTML bearbeiten
► unter dem Abschnitt /* Posts folgendes suchen:

-moz-box-shadow: 0  0  $ (image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0  0  $ (image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0  0  $ (image.shadow.spread) rgba(0, 0, 0, .2);
► nun ersetzt ihr das $ durch none

Der Code sollte dann folgendermaßen aussehen:

-moz-box-shadow: none(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: none(image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: none(image.shadow.spread) rgba(0, 0, 0, .2);

Nun ist der Rahmen um gifs und Bilder entfernt.


Anmerkung: Die Werte beziehen sich auf die Awesome Inc. Vorlage! Möglich ist, das in anderen Vorlagen andere Werte angegeben sind. Das könnt ihr außer Acht lassen!

Bild mit Link

Hier der Code, um ein Bild mit einem Link zu versehen. Bei Klick wird man auf eine andere Seite weitergeleitet:

<a href="LINK" target="_blank"><img src="BILD-URL" </a>


Wer noch einen Tooltip dabei haben möchte nehme diesen Code:

<a href="LINK" target="_blank"><img src="BILD-URL" title="TEXT BEI MOUSEOVER"></a>


Sollte sich der Link nicht wie gewünscht in einem neuen Fenster öffnen, dann schaut bitte hier nach: html: Link in neuem Fenster öffnen

Wer seinen Link im selben Fenster geöffnet haben will, nehme diese Änderung vor:

<a href="LINK" target="_self"><img src="BILD-URL" </a>

Counter

Ich werde hier gar nicht anfangen Links von Seiten zu posten, die kostenlose Counter anbieten! ;) Das sind einfach viel zu viele, und jeder hat ja bekanntlich einen anderen Geschmack. Wer Counter sucht wird allein unter dem Schlagwort "Counter" oder "Webcounter", "Hitcounter" etc. zahllose Treffer landen!

Ich erkläre euch nur den Unterschied der zwei unterschiedlichen Zähler-Arten:

❀ Willkommen! ❁

Hallo Blogger- & 

Schnickschnack-Freund!

Hier findest Du alle möglichen Tutorials zum Thema 

Blogger/Blogspot & Blog-Verschönerung!

Lies auch die ☛Infos zum Blog, 

damit ich hier den Text abkürzen kann! ;)

Wenn Du Fragen hast, poste diese unter dem jeweiligen Thema 

und hilf mit, damit das Blog übersichtlich bleibt.

✏Du findest, hier fehlt ein Tutorial? 

✏Du hast ein Problem, bei dem Du nicht weiter kommst? 

✏Du hast eine Idee, über was man Tutis erstellen könnte? 

✏Du kennst Webseiten, die tolle Gadgets & Schnickschnack anbieten?

Dann her damit! 

Scheu Dich nicht mir zu schreiben! :o)

Ich biete auch Basics für absolute Anfänger an. 

Auch hier gilt: keine Angst zu fragen! 

Man kann nicht alles sofort verstehen - 

und ebenso wenig kann man sofort alles haben und können. 

Ich wünsche Dir einen angenehmen Aufenthalt!

P.S.: sollte hier nervige Werbung erscheinen oder ein Link nicht mehr richtig funktionieren, bitte ich um einen "Pieps", damit ich die Links überprüfen und ggf. entfernen kann! 

Danke für Deine Mithilfe! :o)

Corner Pets

Auf dieser Seite findet ihr eine Auswahl an süßem Schnickschnack!

Ob baumelnde Häschen oder schnieke Kühe, die aus der Ecke gucken...

Link in Kommentarfeld einfügen

Vorweg: Dies ist keine Anleitung, um wild mit Links um sich zu schmeißen!

Manchmal bietet es sich ja an - beispielsweise weil man auf seinem Blog das oder ein ähnliches Thema ebenfalls schon mal niedergeschrieben hat - einen Link in einem Kommentarfeld bei einem anderen BloggerIn zu hinterlassen.

Kommentarfelder bieten jedoch nur eine begrenzte Anzahl an möglichen Tags und erlauben keine html-Codes. Mit diesem kurzen und knappen Code könnt ihr einen Link ins Kommentarfeld einsetzen:

<a href="URL">TEXT</a>

url = Link-Adresse / Text = der sichtbare Text*

*Beispiel: eine Webseite über Kaninchen soll verlinkt werden, so könnt ihr als Text "Kaninchen" eingeben

nach oben Beförderungs-Button

Aktive BloggerInnen werden's kennen: man möchte, das auch ältere Posts gelesen werden und erweitert die Post-Anzeige auf der Startseite auf 7, auf 10, auf 15... und das Blog wird länger und länger und länger... Ist man dann mal unten angekommen, geht das lästige Ziehen der Scroll-Leiste los: Maustaste gedrückt halten, Krämpfe bahnen sich an.

Doch dem kann natürlich Abhilfe geschaffen werden!^^ Mit einem einfach Button, bei dessen Betätigung man direkt wieder zum Anfang der Seite gebeamt wird. Praktisch, dekorativ und individuell anpassbar! Und das Beste daran: es ist echt easy!

Alles beginnt mal wieder mit einem Code:

Header Gadget

Vor einiger Zeit habe ich meinen Header bearbeitet. Allein mit der Bildgröße habe ich ein wenig rumgespielt, und als ich dann nach einer gewissen Weile gedankenlos auf "löschen" geklickt habe, war mein Header - inkl. Blog-Titel & Beschreibung - verschwunden. Gelöscht eben. ;)

Über das Hilfeforum habe ich nichts erreicht - nein, man wußte angeblich nicht einmal, wovon ich spreche.

Heute jedoch war ich erfolgreich. Selbst ist die Frau!^^ Wem es also so oder ähnlich ergangen ist und nun verzweifelt nach seinem Header-Gadget/-Widget sucht, der gehe bitte in den ➨ Design-Bereich und klicke auf ➨ Gadget hinzufügen. Auf der 2. Seite der gängigen Gadget-Liste findet ihr dieses hier:

➨ Seitenkopfzeile

Dies ist das Header-Gadget.

Et voilà! Da ist es wieder! :o)

Tutis - eine Info nebenbei

Da ich unheimlich gern blogge und mein Blog (Hauptblog findet ihr hier - klick) ständig in Bewegung ist, somit sehr lebendig, bin ich immer auf der Suche nach tauglichen Codes, mit denen ich mein Blog nicht nur übersichtlich(er) und schöner gestalten kann, sondern probiere auch einfach gerne mal was Neues aus, auch wenn der Sinn & Zweck stellenweise dann doch eher fraglich und spielerischer Natur ist.

Die Seiten, von denen die ursprünglichen Codes stammen, werden so gekennzeichnet:

Bei Klick auf diesen Smilie wird man automatisch zu der Webseite 

des ursprünglichen Anbieters weitergeleitet!

Allerdings werde ich keine Banner von diesen Seiten verlinken, da das ganze Geblinke und die nervigen Einblendungen Webseiten unübersichtlich und unbequem gestalten.

Ein Grund, warum ich das alles hier in diesem Blog vereine: um dieser endlosen Sucherei ein Ende zu bereiten! :o) Davon ab ist nicht jeder dem Englischen mächtig - und der google Übersetzer spuckt nicht wirklich eine verständliche Übersetzung aus (wortwörtlich ja, aber eben nicht sinngemäß!).
Auch biete ich eine individuelle Gestaltung der Links an, sofern möglich. Dabei gilt:
Textpassagen in Links, die nicht geändert werden dürfen, sollten nicht geändert werden! ;) Respekt gegenüber dem Urheberrecht sollte schon sein.

Ihr könnt gerne jederzeit eine Frage äußern hinsichtlich einer Blog-Funktion etc. Ich werde mich kundig machen und euch ein Tutorial dazu anbieten. Bei individuellen Schwierigkeiten solltet ihr jedoch zuerst das Hilfeforum aufsuchen, denn es lohnt nicht wirklich für jeden Pillepalle gleich ein Tuti anzulegen! ;)

Bedenkt auch, das die unterschiedlichen Vorlagen von Blogger unterschiedliche Funktionen anbieten, und somit gewisse Anleitungen ein wenig anders gehandhabt werden müssen! Die Tutis funktionieren in jedem Blogger-Blog, könnten allerdings manchmal auch angeglichen werden müssen.

Numerierte Seiten-Navigation/ Einbau

Um eine numerierte Seiten-Navigation zu erstellen,
benötigt ihr drei Teile:

neue Schriftart auf PC installieren

Klingt kompliziert, ist aber gar nicht so schwer! ;) Zuerst einmal sucht ihr euch im Net eine schöne Schriftart aus - auch hier darauf achten, das sie gratis zum download bereit stehen (nennt sich dann "free/ freeware/ free for personal use"). Eine tolle Seite mit richtig coolen Fonts (=Schriftarten) ist z. B. diese hier 1001 Fonts.

Wenn ihr die Schriftart gedownloaded habt, landet sie meistens in den "eigenen Dateien". Dort gibt es einen

Uhrzeit einstellen

Damit in euren Posts die richtige Uhrzeit angezeigt wird, geht ihr auf

↬ Design
↬ Einstellungen
↬ Formatierung
↬ Zeitzone und gebt dort ein (GMT + 01:00) Berlin

Um in den Kommentaren die richtige Uhrzeit angezeigt zu bekommen, geht ihr ebenfalls auf

↬ Einstellungen
↬ Kommentare
↬ Format des Zeitstempels - dort könnt ihr auswählen, in welchem Format der Kommentar angezeigt werden soll (z. B. Datum & Uhrzeit/ Monat, Wochentag & Uhrzeit etc.)

Hintergrund bei Bildern entfernen

Bei einigen Vorlagen gibt es die Möglichkeit, über den Vorlagendesigner die ►Hintergrundfarbe und die ►Rahmenfarbe auf "transparent" zu schalten.

In Vorlagen, in denen es diese Option nicht gibt, ist es unablässig ein wenig im html-Bereich zu friemeln, wenn man den lästigen Rahmen/Hintergrund bei seinen Bildern/gifs wegbekommen möchte.


► Design
► html bearbeiten
► unter dem Abschnitt /* Posts folgendes suchen:
     .post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);

► an der Stelle "background: $(image.background.color);" dieses Zeichen "$" durch transparent ersetzen. Die Zeile muß dann so aussehen:
     background: transparent; (image.background.color);

Vor dem Abspeichern bitte erst in der Vorschau anzeigen lassen, ob es funktioniert!

Tooltip erstellen (Text bei Mouseover)

Lange hab ich gesucht - nun hab ich es endlich geschafft. Und deshalb - das Internet ist voll von Fragen nach einem Tooltip - hier meine kleine Anleitung, wie ihr einen Text für ein Bild bei Mouseover erstellen könnt. Natürlich ganz ohne elend lange Java-Scrips und ohne Fummelei im html-Bereich! ;)

Hintergrund nicht mitscrollen

Bei einigen Vorlagen im Vorlagendesigner ist die Option bereits gegeben, das der Hintergrund nicht mitscrollt. Doch wenn man sein eigenes Bild als Hintergrund einfügt, scrollt dieser meist mit. Hier die - ziemlich simple - Einstellung, wie ihr nur die Posts scrollt, aber nicht den Hintergrund! :)

html: Link in neuem Fenster öffnen

Immer wieder "gern" gesucht, manchmal gefunden, manchmal aufgegeben: die Frage nach dem Öffnen eines Links in einem neuen Tab (=Fenster). Die wohl einfachste Lösung lautet

 ➨ href="http://LINK" target="_blank"

Da mit _blank der Name einer Webseite angegeben wird, die nicht existiert, öffnet sich der Link automatisch in einem neuen Fenster. Der Code _blank funktioniert aber nicht an jeder Stelle - zum Beispiel in einigen Menüformen etc.

Was also tun?
Man bennent das neue Fenster einfach um - somit also der nicht existierenden Adresse einen neuen Namen geben. Ob das nun _soda (in meinem Fall) oder _dingens oder auch _zuckerschnute ist, spielt dabei keine Rolle.

That's it! :o)

in Post Schriftart einfügen, die nicht vorgegeben ist

Über den Vorlagendesigner habt ihr die Möglichkeit, eine Schriftart für eure Posts auszuwählen. Auch gibt es die Option im Post-Feld selber, noch einige Schriftarten zu benutzen. Wollt ihr allerdings eure Posts dann und wann anders gestalten - zum Beispiel einen Text besonders hervorheben - müßt ihr folgendes tun:

Anzeige "kein neuer Post" entfernen

Wenn ihr ein Blog erstellen wollt, in den ihr keine Posts einstellt - z. B. um dieses Blog als Blogroll zu benutzen (klick) - erscheint oben in der Mitte des Blogs das Feld "kein neuer Post" o. ä. Hier zeige ich euch, wie ihr diese Anzeige entfernen könnt.

Schwierigkeitsgrad bei den Tutorials

Die Schwierigkeitsstufen für die Tutis:

❢ leicht
❢❢ mittel
❢❢❢ für Erfahrene


Damit das Blog übersichtlich bleibt, werden die Schwierigkeitsstufen nicht in der Tag-cloud angezeigt (Menü rechts oben)! Wenn ihr allerdings auf "Blogger Tutis" klickt, wird unter jedem Post der Schwierigkeitsgrad angezeigt. Diesen könnt ihr, da als Label eingeteilt, anklicken und alle Posts mit dieser Schwierigkeitsstufe anzeigen lassen.

edit: vorläufig geändert! Die Schwierigkeitsgrade werden nun im Menü angezeigt.

Profil (nicht) anzeigen

Oft bin ich auf die Frage gestoßen: "kann ich in mehreren Blogs von mir verschiedene Namen anzeigen lassen?" Nein, definitiv nicht! Ich habe es selber auch schon versucht (war ja klar *g) und letztendlich dann doch nach einer Antwort im Hilfeforum gesucht. Es gibt nur die Möglichkeit, mehrere google-Konten anzulegen und sich dort immer anders zu nennen. Dann muß allerdings auch das jeweilige Blog an den betreffenden google-Account übertragen werden. Doch das ist hier jetzt nicht das Theme. Somit ist das also durch. ✔

Dann gibt es noch die Möglichkeit, sein Profil (hier "über mich" genannt) anzeigen oder nicht anzeigen zu lassen. Vorweg der Screenshot zum besseren Verständnis:

klick zum Vergrößern

Wenn ihr einen ✔ bei "in diesem Blog anzeigen" setzt, wird euer Profil im Blog angezeigt und ihr könnt das Gadget an die Stelle schieben (Design-Bereich), wohin ihr es haben wollt. Wollt ihr also kein Profil anzeigen lassen, nutzt es nichts, einfach den Haken wegzumachen. In diesem Fall solltet ihr das Profil-Gadget einfach löschen (unten rechts besteht diese Option).

Wissenwertes über Gadgets

Wenn ihr euch im Internet ein wenig umschaut, werdet ihr bei Blogs und Homepages immer wieder auf Schnickschnack stoßen: Widgets, die einen geradezu anlachen, die sagen zu scheinen "ich will auch auf dein Blog!"!

Bei all diesen Gadgets reicht es schon, wenn man darauf klickt, man wird automatisch auf die Seite weitergeleitet, auf der man sich an all diesen Widgets gütlich tun kann. :)

Doch Vorsicht ist geboten: Webseiten in anderen Sprachen denen man nicht mächtig ist, sollten besser umgangen werden. Der google-Übersetzer übersetzt zwar wortwörtlich, aber leider nicht sinngemäß! So kann schon mal ein "free" (frei, gratis) an der falschen Stelle übersetzt dem Besucher vermitteln, all die hübschen Gadgets wären kostenlos. Um ungewollten Kosten vorzubeugen solltet ihr nur Widgets von Webseiten downloaden/Codes kopieren, wenn ihr ganz sicher seid, das diese auch wirklich kostenlos sind! (Außer natürlich Geld spielt bei euch keine Rolle ;))

Es gibt in der Tat Gadget-Anbieter, die teilweise kostenlose, teilweise aber auch kostenpflichtige Widgets anbieten! (Designer wollen ja auch Kohle verdienen *g)

html Gadget

Ehe ihr all den Schnickschnack in euren Blog einfügt, wäre es vermutlich gut zu wissen, wie genau das geht ;)

Geht bitte in ➨ Design
dort auf ➨ Gadget hinzufügen
ein Fenster öffnet sich und ihr klickt an
➨ HTML/JavaScript

Den html-Code, den ihr kopiert haben solltet, fügt ihr einfach dort ein. Dann auf "speichern" ➨ fertig! Nun könnt ihr dieses Gadget auch im Designbereich hin- und her-, rauf- und runterschieben wie ihr wollt und es dort platzieren, wo es euch am besten gefällt! :)

klick zum Vergrößern :)

klick drauf um so ein Dingens zu kriegen ;)

Wer's gebrauchen kann: klick drauf! ;)
(diverse Kawaii-Motive zur Auswahl)

Den Text kann man selber eingeben, und zwar hier:


"...
8192_134217728.widget" flashvars="textanda=füge hier Deinen Text ein" wmode="tra..."


Zwei Typen stehen zur Auswahl: einmal um das Gadget in die Sidebar (=Seitenleiste) zu integrieren, der andere Code wird links eingesetzt, so dass das Gadget oben in der Ecke erscheint.

Menüleiste

Die Menüleiste bei Blogger nennt sich ganz ordinär auch "Tab-Leiste". Aaah sooo! wir ein mancher jetzt bestimmt sagen, und das Problem hat sich von alleine gelöst. ;)

Eingestellt wird diese Tab- oder Menüleiste über den Vorlagendesigner: dort findet ihr links im Abschnitt unter ➨ 'Erweitert' die Möglichkeit zur Bearbeitung. Angezeigt wird die Leiste allerdings nur, wenn ihr zuvor schon Seiten erstellt habt! ;) Dies könnt ihr über ➨ neuer Post ➨ Seiten bearbeiten machen.

Numerierte Seiten-Navigation

Whoooa! Schon ewig habe ich nach diesem Gadget gesucht! Ich konnte meinen Augen kaum trauen, als ich tatäschlich über ein Blog gestolpert bin (ein Blogger-Blog auch noch *o*), bei dem dieses herrliche Gadget Anwendung findet. Jupp, ein aktuelles, lebhaftes Blog!

Da es allerdings bei mir nicht angezeigt wird, werde ich erst mit mehreren Post, die meine Seite zu füllen haben, sehen können, ob es tatsächlich "da" ist, ob es existiert, nicht nur eine Legende einer längst abgelaufenen und hinfällig gewordenen Blogger-Widget-Seite ist! ;)

Somit bleibt mir nur: bloggen was das Zeuch hält! :P

Wie der Name schon sagt...

... obwohl ich mir keinen zulegen wollte, komme ich mittlerweile wohl doch nicht umhin: ich brauche einen Friemel- und Testblog! ;) Es gibt so viele tolle Widgets (=Gadgets), die über html funktionieren... Da ich keine Lust habe, immerzu in meinem Hauptblog rumzufriemeln (denn der html-Bereich dort ist höchst sensibel ;)), benötige ich somit unbedingt und unumgänglicherweise einen Friemelblog.

In diesem Sinne: frohes Friemeln! :P