Menü gestalten #1 ~ schlichtes Menü

Hallo ihr Lieben,

lange habt ihr auf diesem Blog nichts mehr von mir gehört. Es tut mir wirklich Leid. Als kleine Wiedergutmachung habe ich heute und morgen ein kurzes Tutorial für euch, die Gestaltung des Menüs betreffend.

Ihr kennt unter Garantie die "Standart-Menü-Einstellung" von Blogger und hier kommt eine Möglichkeit dies zu umgehen.

Am Ende wird das Ergebnis so aussehen:

Geht auf eurem Blog unter Layout -> Gadget hinzufügen -> HTML/JavaScipt.  Und dort fügt ihr diesen HTML-Code ein:

<center> 

<div style="font-family: 'Calibri', cursive;  font-size:200%; margin-top:10px;"> 

<a href="http://mariesweltkugel.blogspot.de/">Startseite</a> ~
<a href="http://mariesweltkugel.blogspot.de/p/rezensionen.html">Rezensionen</a> ~

<a href="http://mariesweltkugel.blogspot.de/p/hey-d.html">Hinter dem Blog</a>  

</div> 

</center> 

...

<center>: Es steht dafür, dass das Menü sich in der Mitte des Blogs befindet. Ihr könnt es auch mit "left" oder "right" eintauschen, dann befindet sich das Menü auf der jeweiligen Seite.

front family: steht für die jeweilige Schriftart in dem das Menü geschrieben wurde. Sucht euch einfach eine aus, die von Blogger vorgegeben wird. (Arial, Times New Roman,...)

front-size: Dies bestimmt die jeweilige Schriftgröße.

margin-top: Der Teil ist dafür zuständig, dass das Menü nicht zu nah am Header anliegt. Das heißt, je kleiner die Zahl, desto näher am Header.

Link: Diese Links führen zu der jeweiligen Seite.

Dieser Teil: Hier fügt ihr die jeweilige Bezeichnung/ den Namen der Seite ein.

Dieser Bereich: Betrifft das Zeichen zwischen den Worten. Ihr könnt auch andere Zeichen eingeben. Wie es euch gefällt.

~~> Das wäre es dann auch. Passt den Code einfach auf euren Blog an, fügt das Gadget genau an die ehemalige Stelle des alten Menüs ein und schon habt ihr das "schlichte Menü"

...

kleiner Tipp am Ende: Falls für euch das Menü zu nah am Postbeginn anliegt, fügt einfach unter Layout -> Gadget hinzufügen -> HTML/JavaScipt, genau unter dem Gadget des "schlichten Menüs ein. Ohne jegliche Schrift darin. Wenn dieses Gadget eine Überschrift fordert, dann findet ihr *Hier* die Lösung.

...

Das war es nun von mir. Ich hoffe, dass ich euch hiermit ein bisschen helfen konnte. Morgen kommt ein weiteres Menübeispiel.

[Tutorial]: Unterstrichenes Datum und Sidebar

Hallo an alle da draußen. :)

In dem heutigen Post möchte ich euch erklären, wie ihr das Datum und die Titel eurer Sidebar unterstreichen könnt.

Fertig sieht es dann so aus:

Diese Schritte sind dafür notwendig:

1. Geht auf euren Blog, Layout, HTML bearbeiten

2. Sucht h2 (Suchen: Strg, F drücken) und fügt direkt darunter diesen Code ein:

border-bottom: 1px solid #CCD4FC;

border-bottom: bestimmt die Lage des Linie

1 px: bestimmt die Dicke der Linie

solid: steht für eine durchgehende Linie

#CCD4FC: die Farbe der Linie

dotted = gepunktet

dashed = gestrichelt

solid = durchgezogen

Hier könnt ihr andere Farbe-Codes für die Linie auswählen: http://www.colorpicker.com

3. Abspeichern und fertig.

So, das war es dann auch von mir für heute. Anregungen habe ich mir für diesen Tag von DIESER Seite geholt, allerdings den Code von meinem eigenen Blog genommen und versucht es ein wenig übersichtlicher zu gestalten.

Schönes Kommentar Gadget

Hallo :)

Heute möchte ich euch zeigen, wie ihr dieses Kommentargadget in euren Blog einbauen könnt:

Zur Info: Es zeigt den Namen der Kommentatoren an, die am meisten, zweit-meisten... kommentieren, usw...

1. Klickt auf euren Blog, Layout, Gadget hinzufügen und zum Schluss HTML/Java Script öffnen.

2. Fügt in das neu geöffnete Fenster diesen Code ein:

<!-- Top commentators widget v1 Start -->

<script type="text/javascript">

function getYpipe(feed) {

document.write('<ol>');

var i;

for (i = 0; i < feed.count ; i++)

{

var href = "'" + feed.value.items[i].link + "'";

if(feed.value.items[i].link == "")

var item ="<li>" + feed.value.items[i].title + "</li>";

else

var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ol>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?

YourBlogUrl=http://einbisschenklein.blogspot.de/

&ExcludedNick1=Marie

&ExcludedNick2=Isiii

&ShowHowMany=4

&_callback=getYpipe

&_id=23022d7836bf2dd3c10a329feb9be26a

&_render=json"

type="text/javascript"></script>

Bei DEM gebt ihr die URL eures Blogs ein.
Mit dem grün gefärbten gebt ihr am besten euren Namen ein. Diese Namen ignoriert das Gadget dann.
Ihr könnte natürlich &ExcludeNick2 löschen, wenn kein weiterer Name ignoriert werden soll.
Zum Schluss gebt ihr HIER ein wie viele Kommentatoren angezeigt werden sollen. Bei mir steht 4, ihr könnt aber auch 5, 10 oder 123.723 eingeben. :)

3. Abspeichern und richtig einsortieren!

Das war es dann auch. Nicht zu schwer und mit wenigen Handgriffen erledigt.

Wünsche euch noch einen wunderschönen Tag.

3 kostenlose Bildbearbeitungsprogramme

Heute möchte ich über eines meiner Lieblingsthemen sprechen: kostenlose Bearbeitungsprogramme.

Wir kennen doch alle Photoshop, eines der wohl besten Bildbearbeitungsprogramme das ich kenne. Es gibt natürlich auch noch andere geniale Bearbeitungsprogramm die zudem kostenpflichtig sind, aber ich war immer steht´s auf der Suche nach kostenlosen guten Programmen und tadaa… hier habe ich euch gleich 3 tolle Bearbeitungsprogramme aufgelistet, die ich gefunden, ausgetestet und euch nun vorstellen kann.
 

1. Picasa

Informationen zum Download

Vorher - Nachher
 

Positives

·         Relativ einfach zu verstehen

·         Unterteilung in Ordner, übersichtlicher

·         schöne, ausreichende Bearbeitungsmöglichkeiten

·         einfache Herstellung von Collagen

Negatives

·         Erstellen von Filmen hat Mängel am Fluss der Abläufe

·         Schwerer kleinere Collagengrößen einzustellen

·         Creative Kit wurde leider eingestellt, dort gab es tolle Schriftzüge

 

Ø  Ich benutze es meist, wenn ich ein wirklich schön gestaltetes Bild haben möchte. Die Bearbeitungsmöglichkeiten sind, bis auf die Schriftarten, am besten.

 

2. PicMonkey

Seite

Bildnachweis

Vorher - Nachher - Schriftbeispiele



Vorher

Nachher

Schriftbeispiele

Positives

·         Schöne Schriften

·         Zusätzlich zu Standartbearbeitungsmöglichkeiten gibt es viele Extras, die immer erweitert werden

·         Sehr einfach Collagen zu erstellen

·         Das einfachste zu verstehende Programm von diesen 3

Negatives

·         Leider zum Teil kostenpflichtig

·         Man muss jegliche Bilder im Internet hochladen

 

Ø  Das ist eine Möglichkeit schnell und auch relativ gut Bilder zu bearbeiten. Ich benutze es sehr häufig aufgrund der verschiedenen Möglichkeiten in Bezug auf Schriftarten und verschiedenen Stempeln.
 

3. GIMP

Informationenzum Download

(Ich habe die zweite Version ausgetestet)

 

Vorher - Nachher - Hintergrundbeispiel

Vorher

Nachher (Hintergrund unsichtbar)

Hintergrund

Positives

·         Wie Paint, nur besser

·         Ganz anders als die anderen 2, andere Bearbeitungsmöglichkeiten

·         Gute Grundlage für das weitere Bearbeiten später mit anderen Programmen

·         Möglichkeit des Erstellen eines unsichtbaren Hintergrundes ist gegeben

Negatives

·         Sehr schwer zu durchschauen, benötigt viel Zeit bis man das Wichtigste verstanden hat

Ø  Einfach was ganz anderes. Ich persönlich erstelle mit diesem Programm mir diverse Hintergründe oder Header für meinen Blog und lasse ungewollte Hintergründe unsichtbar werden.

...

 

So, das war mein kurzer Bericht. Ich weiß, so ausführlich war es zunächst nicht, aber es sollte auch nur eine kleine Bewertung werden. Vielleicht werde ich irgendwann sie näher belichten. Heute bleibt es erst einmal bei der kurzen Übersicht.

 

Hilfe, das Gadget fordert eine Überschrift.

Hallo. 

Heute habe ich mich mit einem Thema auseinandersetzen, mit dem ich mich schon lange beschäftigt habe: Das man bei einigen Gadgets Überschriften einfügen MUSS.

Mich hat das oft gestört und vielleicht geht es ja dem Ein oder Anderen auch so.

Es ist eigentlich ganz simple. Ihr benötigt nur diesen HTML-Code:

<a href=""></a>

Und fügt diesen anstatt des Titels ein. Voilá das war es. Wahnsinnig schwierig, ich weiß. :P

Ich hoffe trotzdem, dass ich jemandem von euch helfen konnte.

Kurze Blogvorstellung: Hallo :D

Hallo J

Das ist er wohl, der erste Post auf meinem Blog.

Ich bin gerade ein wenig wortkarg, das ist natürlich nicht so vorteilhaft, wenn man endlich den Blog ‚eröffnen‘ möchte, aber na gut…

Also habe ich mich aus diesem Grund nun für einen weitaus einfacheren Weg der Vorstellung entschieden: Ein kleines Frage-Antwortspiel.

Kurze Vorstellung deinerseits?

Gut, das hier wird ganz kurz und knapp abgehandelt. Ich heiße Marie, bin 16 Jahre alt und eigentlich nicht sonderlich begabt im Umgang von HTML-Bearbeitung. Keine gute Voraussetzung für einen Tutorial-Blog, oder? Aber dazu komme ich nachher noch einmal näher.

Was hast du hier vor?

Also wie schon gesagt, ich möchte hier einen Blog gestalten das anderen Bloggern zum verschönern ihrer Blogs hilft. Mit einfachen Tipps, Links zu hilfreichen Seiten und anderen Dingen rund um die Blogbearbeitung.

Hattest du nicht gesagt, dass dir das Bearbeiten von HTML und Sonstigem dir nicht liegt?

Ja, das habe ich. Allerdings habe ich in den letzten Jahren immer mehr dazu gelernt und einfach Lust darauf diese Erfahrung zu teilen. Ich weiß noch wie ich vor einiger Zeit angefangen habe und diverse Dinge austesten musste und das zu erreichen was ich wollte. Diesen Weg möchte ich für einige von euch erleichtern.

-----

Ok, ok. Das war ein WIRKLICH kurzes Frage-Anwort-Spiel, aber gut… mir fallen einfach keine weiteren Fragen ein. Ich bin leider nicht der fantasievollste Mensch. -.-