Kategorie: blogdesign

Welcome to my new WordPress Blog!

blog_overviewHallo und herzlich Willkommen! Habt ihr gut hier her gefunden? Ich hoffe es! Denn wenn ich alles richtig gemacht habe, seid ihr hier automatisch auf meinem nigelnagelneuen self-hosted WordPress Blog gelandet. Ich habe schon so lange mit meiner Freundin Bine darüber gesprochen, wir haben die Vorteile gegen die Nachteile abgewägt und schlussendlich beschlossen: so, wir machen das jetzt einfach! Das schlagende Argument: was passiert mit unseren Blogs falls Blogger mal irgendwann nicht mehr ist? Katastrophe! Dann wäre einfach alles weg. Auf einem selbstgehostetem Blog bleiben alle Inhalte in meiner eigenen Datenbank, also unter meine Fitiche. Das ist beruhigend!

Bine ist schon vor kurzem umgezogen und ihr habt sicher schon alle eure Blogroll aktualisiert nech? Nun hatte ich nach meiner kürzlichen Mandel-OP und der damit verbundenen Bettruhe endlich mal Zeit, mich weiter mit dem Umzug zu beschäftigen, denn wenn schon Umzug, dann richtig nech? Die Software hatte ich ohnehin schon eine ganze Weile auf dem Rechner und die Installation auf dem eigenen Server war dank der vielen vielen Anleitungen im Netz kinderleicht. Ich berichte dazu aber noch mal detailierter, nun erst mal zu meinem neuen Zuhause. Soll ich euch rumführen?

design

Mein altes Blogdesign hat mir schon lange nicht mehr gefallen. Zu bunt, zu überladen, zu unstrukturiert, zu viel Blingbling, zu wenig Unterstatement. Ich wollte ein neues cleaneres Design welches nicht mit meinen Beiträgen oder Produkten konkurriert sondern sie vielmehr unterstreicht und besser hervorhebt. Also kam mit dem Umzug auch gleich ein komplettes Make-Over mit sich. WordPress selbst und unzählige Designer und Firmen bieten wiederum unzählige Themes, sprich Blog-Templates, zu geringen Gebühren an. Ich habe fast zwei volle Tage damit verbracht, die unterschidIchen Templates mit einander zu vergleichen. Es gibt wirklich sehr viele schöne. Besonders gefallen mir die Themes von Elmastudo, Bluchic oder Blogmilk (die auch schöne Themes für Blogger) haben. Ich habe mich letztendlich für ein Theme von Studiopress entschieden da es meine Bedürfnisse – vom Aufbau her – am ehesten erfüllt hat.

date_featured

Jedes Theme hat unterschiedliche, bereits integrierte Features, so kann man selber entscheiden was einem wichtig ist. Ich mochte unter anderem an meinem Template, dass über dem Headerbild noch eine zusätzliche Menüleiste integriert ist und auf der Startseite die letzten Beiträge in Kurzfassung gezeigt werden und darüber einige ausgewählte Posts mit einem kleinen Bildchen gezeigt werden. Das finde ich irgendwie nice to have.

comments

socialmedia_meAllerdings ist auch bei einem  gekauften Theme längst nicht alles in Stein gemeißelt, es lässt sich ganz viel mit wenigen CSS-Kenntnissen (Google mein Freund und Helfer) noch umstylen. Ausserdem haben Tausende an fleißigen Programmierhelden über 26.000 Plugins entwickelt mit denen man seinen Blog mit wenigen Klicks aufpeppen kann. Auch die vielen Tutorials und Anleitungen im Netz, zum Beispiel wie man einen Kommentarzähler (klickt mal auf die kleine Sprechblase rechts über diesen Beitrag, dann kommt ihr zu den Kommentaren) in eine eigene Grafik einbaut oder ein Rollover-Bild (wie zum Beispiel hier bei den Socialmediabuttons) erstellt helfen einem weiter.

readmore_breadcrumbAuf der Startseite sind die letzten Beiträge in Kurzform angezeigt. Mit einem Klick auf „Read More“ kommt ihr wenn ihr möchtet zum vollständigen Beitrag. Auf jeder Seite ist über dem Post in grau hinterlegt eine sogenannte Breadcrumb-Navigation angezeigt. Das heißt, ihr könnt immer ganz leicht wieder zurück navigieren oder die übergeordnete Kategorie durchforsten. In der Menüleiste unter dem Header werden die einzelnen Blog-Kategorien und statische Seiten angezeigt. Diese sind allerdings teilweise noch im Aufbau.

categoriesRechts in der Sidebar präsentiere ich ganz stolz meine Presse-Erwähnungen und schöne Shops die bei mir einen Bannerplatz gebucht haben. Auch hier gibt es Änderungen, die Anzeigen sind kleiner und noch mehr auf meinen Inhalt und Design ausgerichtet. Mehr dazu aber ein anderes Mal. Falls ihr aber jetzt schon gerne mit eurem Shop dabei sein möchtet, meldet euch gerne bei mir. Natürlich gibt es zur Feier des neuen Designs Einführungspreise!

sponsors_archiveIch hoffe es gefällt euch hier so gut wie mir und ihr fühlt euch weiterhin wohl. Ich bin dann mal wieder Kisten packen, denn es gibt ja noch den richtigen Umzug zu bewältigen! Ab Montag schreibe ich dann aus München. Ich freue mich sehr wenn der gewohnte Alltag einkehrt und ich wieder regelmässig posten kann.

Bis dahin liebe Grüße,

Eure Andrea

sorry…hier wird gerade geschraubt

blogmakeover jolijou

Wer mich kennt weiß, ich muss immer etwas verändern. Es war wieder mal Zeit für ein frisches neues, übersichtlicheres Blog-Outfit. Ich bin noch dabei, den Feinschliff zu machen deshalb kann es hier und da noch kleine Veränderungen geben. Endlich habe ich es auch geschafft, Banner für meine Seite zu gestalten. Ihr dürft sie gerne in eure Sidebar einbinden. Dazu einfach den Code in dem kleinen Feld unter dem jeweiligen Bild kopieren und in ein HTML/Javascript-Gadget in eurem Blog-Layout einfügen.

Aber vielleicht wollt ihr in euerer Sidebar auch eure eigenen Banner zum Teilen zur Verfügung stellen wie ich sie hier habe? Als kleine Entschädigung für die Bauarbeiten zeige ich euch hier den Code dafür. Diesen fügt ihr in ein HTML/Javascript-Gadget auf euren Blog ein. Ihr braucht dafür natürlich einen Banner und müsst diesen irgendwo im Netz hochladen (Dropbox, Blogger, etc…) weil ihr die URL dafür braucht.

Viel Spaß, Eure Andrea
xoxo

bloghelp III – blogroll seite

Vielleicht habt ihr sie schon gesehen, meine Blogrollseite? Ich mag ja die Blogger-Version mit den kleinen Miniaturbildchen sehr gerne, aber ich mag sie nicht so gerne bei mir in der Sidebar, deshalb habe ich sie auf eine Extraseite eingebaut.
In der heutigen Lektion zeige ich euch also wie das geht. Normalerweise ist es nämlich nicht möglich, ein Gadget auf einer Seite zu zeigen, da diese in XML und nicht in HTML programmiert sind. Aber mit ein paar Tricks geht es trotzdem relativ einfach. Als allererstes macht ihr aber bitte eine Sicherungskopie eures Blogs nech? Nur für alle Fälle.
Falls ihr noch kein Blogroll-Gadget installiert habt, fügt ihr im Dashboard unter „Layout“ ein neues Gadget hinzu.

Aus der Liste der möglichen Gadgets wählt ihr das Gadget „Blog-Liste“, daraufhin öffnet sich ein Popup-Fenster, da gebt ihr oben den gewünschten Blogroll-Titel ein und könnt entscheiden wie die Blogs in der Liste dargestellt werden sollen bzw. Blogs aus Goolge-Reader oder eurem Google-Profil hinzufügen/entfernen. Speichern nicht vergessen.

Das Blogroll-Gadget verschiebt ihr so, dass es unter dem Post-Gadget liegt.

Dann geht ihr im Dashboard auf „Seiten“ und erstellt eine neue Seite. Als Titel gebt ihr euren Wunschnamen, also Blogroll, meine Lieblinks, oder wie er sie eben nennen mögt, ein. Auf der rechten Seite seht ihr den Reiter „Seiteneinstellungen“. Dort klickt ihr „Optionen“ an und wählt „Leserkommentare nicht zulassen, bestehende ausblenden“. Die Seite speichern, bzw. veröffentlichen.

Als nächstes brauchen wir die URL der soeben erstellten Seite. Also einmal kopieren und in einem leeren Textdokument für später merken.

Nun zum Tricksen.

Eure Blogroll erscheint nun unterhalb der Posts bzw. unterhalb aller Seiten, aber das wollen wir ja nicht, sie soll ja nur auf der gerade erstellten „Blogroll-Seite“ erscheinen. Das müssen wir unserem Blog nun sagen. Also wechseln wir auf „Vorlage“ und wählen „HTML-Bearbeiten“, klicken im Popup-Fenster auf „Fortfahren“ und befinden uns im HTML Code. Dort ist es zunächst wichtig, dass wir das Kästchen „Widget-Vorlagen komplett anzeigen“ aktivieren.

Dann sucht ihr im HTML-Code nach eurer Bloglist…

 dazu gebt ihr in der Suchleiste BLOGLIST ein…bis ihr die Zeile <b:widget id=’BlogList1′ locked=’false‘ title=’blogroll‘ type=’BlogList‘> gefunden habt.

Darunter befindet sich die Zeile <b:includable id=’main‘>. Unter dieser fügt ihr nun den folgenden Code ein: <b:if cond=’data:blog.url == „XXXXXXX“‚> (die XXX mit der URL eurer Blogroll-Seite ersetzen).

Dann scrollt ihr etwas runter bis zum ersten Mal </b:widget> erscheint. Davor steht </b:includable>. Vor dieser Zeile fügt ihr </b:if> ein.

Damit habt ihr dem Bloglist-Widget gesagt, dass es nur auf eurer Blogroll-Seite erscheinen soll. Klickt auf Vorschau, wenn keine Fehlermeldung erscheint, auf veröffentlichen. Jetzt erscheint die Blogroll nur auf der Seite.

Allerdings sind da noch die ganzen Links der Voreinstellung der Seite. Jetzt wollen wir Blogger sagen, dass er das auf unserer schönen Blogroll-Seite nicht anzeigen soll. Auf geht’s.

Zurück zum HTML-Code. Dort suchen wir nach ]]></b:skin>. Dahinter fügen wir diesen Code ein:

<style type=’text/css‘>
<b:if cond=’data:blog.url == „XXXXXXX“‚>
.footer{display:none;}
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks, .blog-feeds, .blog-pager,
.post-icons, .date-header{display:none;}
</b:if>
</style>

(die XXX wieder mit der URL eurer Blogroll-Seite ersetzen)

Auf Vorschau klicken und wenn da keine Fehlermeldung erscheint, auf Veröffentlichen. Jetzt sind die ganzen Links, das Kommentarfeld und der Platz unter dem Titel verschwunden.

Fertig ist eure Blogroll-Seite 🙂 Viel Spaß!