Button Generator

Zum Beginn wählt Ihr den Hintergrund für den Button aus (dieser kann dem Hintergrund Eurer Webseite entsprechen um so sehen zu können wie der Button wirkt). Dann könnt Ihr mittels der 3 Regler die Größe, die Breite und das Design der Ecken des Buttons einstellen.
Nachfolgend findet Ihr dann 7 verschiedene Farbeingaben mit denen Ihr die Farbe des Buttons, Hovereffekte und Texteffekte einstellen könnt.
Zum Schluß wählt Ihr dann noch eine passende Schriftfamilie aus und fertig ist der eigene erstellte Button.

Der CSS-Code (in der grauen Box, oder per Klick auf den Button sichtbar) wird in Echtzeit angepasst und braucht nur noch kopiert und in die eigene style.css eingefügt werden.
Natürlich könnt Ihr dann noch einige manuelle Änderungen wie Schriftart oder CSS-Klasse anpassen.

Um anschließend den erstellten CSS-Button auch in den HTML-Seiten aufzurufen braucht Ihr nur class=”button” innerhalb des Link-Befehles hinzuzufügen.

Hier geht es zu dem Button-Generator

Viel Spaß damit!

Warenkorb Bilder zum kostenlosen Download

Es gibt Warenkorb-Bilder für Warenkorb hinzufügen, Warenkorb entfernen, Bester Preis, mein Warenkorb und zum Warenkorb.
Viel Spaß mit den Warenkorb-Bildern.

Kostenloses Couponia Theme

Einige wichtige Features des Gutschein und Coupon-Theme für Wordpress:

• Einfache Eingabe der wichtigen Daten wie Gutschein-Code, Link, Bild und Laufzeit direkt bei der Artikelerstellung.
• Auf der Startseite können im Header 6 verschiedene Premium-Gutscheine mit Namen, Link, Bild und einer kurzen Beschreibung im Adminbereich eingestellt werden.
• Das Theme kann sowohl mit Logo als auch mit Titel und Beschreibung konfiguriert werden. Entweder oder.
• Der erste Navigationspunkt ist eine Kategorieliste, die bei einem Maushover aufgeblättert wird.
• Das Theme ist komplett Widget-ready, bzw. es werden die Widgets benötigt um alle wichtigen Informationen für den Besucher anzuzeigen. Dazu einfach z.B. die Widgets Kategorien, Tag-Wolke, letzte Artikel, … aktivieren.
• Durch die eingebaute Kommentarfunktion in Wordpress können alle Gutscheinartikel von den Besuchern kommentiert werden.
• Mittels IFrame-Einstellung können die Gutschein-Anbieter automatisch angezeigt werden. Ideal für Cookie-Tracking bei dem Besucher.
• Es wird nur das Plugin Wp-Pagenavi in dem Theme verwendet.
• Schlankes Design da auf Grafiken fast komplett verzichtet wurde.
• In dem Download-Paket ist eine Bedienungsanleitung mit beigefügt
• wo bekommt man passende Gutscheine her? hier eine kleine Übersicht zu passenden Gutschein Partnerprogrammen

Hier einige Screenshots des Couponia-Themes:

Screenshots des Couponia-Themes

Versionen:
Dies ist die erste Version des Couponia-Themes. Solltet Ihr bei einem Einsatz des Themes Fehler finden oder Verbesserungsvorschläge haben, dann teilt mir diese bitte per Kommentar mit und ich versuche diese so schnell wie möglich einzubauen.

Kostenloser Download:
Das Couponia Theme kann hier kostenlos heruntergeladen werden.
Note: There is a file embedded within this post, please visit this post to download the file.
Aktuelle Version: 1.13
Lediglich die 2 Links im Footer müssen gesetzt bleiben.

Aktuelle Info:
Dieses Theme wird leider nicht mehr weiterentwickelt. Wer jedoch dennoch ein Coupon/Gutschein Theme sucht, bzw. benötigt, dem empfehle ich das Coupon-Theme von Appthemes zu erwerben. Dieses Theme bietet viel mehr Funktionen als das Couponia-Theme.
Coupon-Theme | Demo

Empfehlenswerte weitere Plugins
Um das Theme von zu vollenden empfehle ich die Verwendung der folgenden Plugins:

• Yet Another Related Posts Plugin (automatische Anzeige weiterer ähnlicher Artikel unterhalb der verfassten Artikel)
• WpSEO (automatische Suchmaschinenoptimierung der Metatags)
• gd-star-rating Plugin (für Bewertungen der Gutschein-Artikel)

Changelog zur Version 1.13
************************
- Iframe kann nun über die Couponia-Optionen über alle Artikel ein- und ausgeschaltet werden

Changelog zur Version 1.12
************************
- Es wurden nun zwei feste Widgets hinzugefügt, mit denen es möglich ist Werbebanner auf der Startseite, den Tags, der Suche und in den Kategorien, sowohl oberhalb als auch unterhalb einzubinden. Ideal um einzelne Gutscheine zu bewerben oder z.B. Adsense einzubinden. Diese Widgets sind unter Design >> Widgets zu finden.
- Änderungen am CSS-Code

Changelog zur Version 1.10
************************
- überarbeitete Bedinungsanleitung
- Anpassungen am Code
- Hinzugefügte Möglichkeit der IFrame-Anzeige der Gutschein-Anbieter (ideal für Monetarisierung)

Changelog zur Version 1.01
************************
- Text ohne Bild links am Kasten hängend ist abgestellt.
- Gutscheincodes nun direkt unterhalb der Überschrift
- Direkteingabe der Felder Laufzeit, Code, Link und Thumbnail in separate Felder bei der Artikelerfassung (es müssen keine benutzerdefinierte Felder mehr selbst angelegt werden)
- Einbau Breadcrumb in die Artikel-Seiten (SEO)
- Text in den Widgets ist nun nicht mehr großgeschrieben

Auf der nachfolgenden Grafik sind alle RSS Icons im Überblick zu finden und können anschließend kostenlos heruntergeladen werden.

RSS-Grafiken zum kostenlosen Download

Mit einen Klick kann der Download erfolgen:
Note: There is a file embedded within this post, please visit this post to download the file.

Viel Spaß mit den RSS Grafiken.

Der Code für die Einblendung der erstellten Grafik in der rechten oberen Ecke ist relativ simple und sollte am besten direkt nach dem BODY-Tag eingebunden werden.

<div style="position:fixed;z-index:99;top:0;right:0;">< a href="http://www.zielurl.de" title="Beschreibung">< img border="0" src="http://www.grafik-url.de/grafik.gif" /></div>

Im Vergleich zu dem Pagepeel, dass nach dem Scrollen auf der Webseite nicht mehr zu sehen ist, wird dieses Angebot immer in der rechten oberen Ecke angezeigt, auch wenn der Besucher auf der Seite nach unten scrollt.

Ein Beispiel für eine solche Grafik, die in der rechten oberen Ecke eingeblendet werden könnte, wäre z.B.:

Beispiel-Grafik, in diesem Fall ein Rabatt-Angebot

Die Anwendungs- und Einsatzmöglichkeiten sind umfangreich. Sonderangebote in Shops, Rabatte auf Dienstleistungen, Vorstellung neuer Produkte oder Bewerbung von Affiliate-Angeboten, all das kann damit beworben werden.

Wir wünschen viel Erfolg

Solltet Ihr noch andere Elemente auf dem grünen Button-Hintergrund benötigen, dann teilt mir diese bitte hier als Kommentar mit. Die Vorlage ist abgespeichert und kann somit auch noch mit anderen Elementen versehen werden.

Smile-Button zum Download

Bei vielfachen Wunsch können diese Buttons auch noch mit einer anderen Hintergrundfarbe dargestellt werden.
Note: There is a file embedded within this post, please visit this post to download the file.

Aus diesem Grund habe ich einmal einige Grafiken rund um dieses Thema erstellt.

Puzzle und Zahnrad Grafik

Note: There is a file embedded within this post, please visit this post to download the file. ]]> http://www.softeffekt.de/puzzle-grafiken-18/feed/ 0 http://www.softeffekt.de/zweifarbige-rahmen-mit-css-14/ http://www.softeffekt.de/zweifarbige-rahmen-mit-css-14/#comments Thu, 23 Apr 2009 13:06:40 +0000 admin http://www.softeffekt.de/?p=14 Mit einem einfachen CSS-Trick lassen sich Rahmen, etwa um Boxen, in zwei verschiedenen Farben darstellen. Das Ergebnis sind optisch sehr ansprechende Boxen.
Um es etwas genauer zu veranschaulichen ist hier ein Bild des zweifarbigen Rahmens, mit sehr kräftigen Farben.

Die Grafik der Beispiel-Box besitzt zuerst einen weißen Rahmen, gefolgt von einem schwarzen Rahmen.

Optisch etwas ansprechender sieht die Box dann mit den folgenden Farben aus.

CSS-Code für den zweifarbige Rahmen
Der Code für die HTML-Seiten sieht für das Beispiel wie folgt aus:
<div class="block2"><div class="block">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div></div>

In die style.css müssen die folgenden Zeilen eingefügt werden:
.block2 {margin:1px;padding:1px;border:1px solid #dadada;width:212px;}
.block {padding-left:5px;padding-right:5px;border:1px solid #ffffff;background:#f3f3f3; width:200px;}
Hier mss natürlich die Breite für das eigene Design angepasst werden.

Fertig! Viel Spaß mit dem Experimentieren an diesem kleinen CSS-Codeschnipsel.

CSS Template

Die 3 verschiedenen Varianten sind unter dem Demolink zu betrachten.

Hier kann das Template kostenlos heruntergeladen werden:
Note: There is a file embedded within this post, please visit this post to download the file.

Hier das Button-Sortiment im Überblick:

Blue Button Sortiment im Überblick

Zum Download aller Buttons:
Note: There is a file embedded within this post, please visit this post to download the file.