Menschen Wissenschaft Politik Mystery Kriminalfälle Spiritualität Verschwörungen Technologie Ufologie Natur Umfragen Unterhaltung
weitere Rubriken
PhilosophieTräumeOrteEsoterikLiteraturAstronomieHelpdeskGruppenSpieleGamingFilmeMusikClashVerbesserungenAllmysteryWillkommenEnglishGelöscht
Diskussions-Übersichten
BesuchtTeilgenommenAlleNeueGeschlossenLesenswertSchlüsselwörter
Schiebe oft benutzte Tabs in die Navigationsleiste (zurücksetzen).

Code- und Designerecke für Allmy Profile und Blogs

46 Beiträge, Schlüsselwörter: Hilfe, Profil, Blog, Tipps, Design, Code, Html, CSS, Tricks, Styling, Animationen + 14 weitere
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

10.07.2017 um 00:30
Auch hier:

Trotz des Allmy BBCodes "Code" wird der eigentlich iframe (Video Fenster) nicht korrekt als HTML-Element dargestellt. Der o.g. Code funktioniert als nicht wie gewünscht!

Deshalb hier ein Link mit dem Code zum downloaden bzw. öffnen und kopieren:

TV im Profil und Blog


melden
Anzeige
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

13.07.2017 um 02:50
Tooltip für Blog & Profil

Ein tolles Werkzeug, um deinen LeserInnen Infos zu einem Begriff zu liefern, ist der Tooltip (auch als "Quickinfo" bekannt).
Der Tooltip wird angezeigt, wenn mit dem Mauszeiger auf den Begriff gezeigt wird (hovern).

In diesem Basis-Code habe ich fünf verschiedene Arten von Tooltips eingebaut, die sich nach Lust, Laune und Können an dein Blog- oder Profil Layout anpassen lassen:

text

text link

bild

bild link

video


Der Code: Tooltip


So long...

t411109e t2bd9ebc t1cdf079eb t4dab98a4a


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

13.07.2017 um 04:27
Multicolumn für Blog und Profil

Du möchtest deine Artikel und Einträge im Blog oder Profil im Zeitungsstil posten? Dann ist Multicolumn genau das richtige Tool für dich:

multicolumn

Der Einsatz ist denkbar einfach:

Du setzt
<div class="multicolumn">DEIN TEXT</div>
und schreibst wie gewohnt deinen Beitrag. Den Rest erledigt der Code!


Grundeinstellungen:

-> Rahmen und Innenabstand der Box
-> Anzahl der Spalten
-> Abstand zwischen den Spalten
-> Trenner (Linie) zwischen den Spalten
-> Größe und Farbe des ersten Buchstaben

Natürlich lässt sich auch Multicolumn weiter aus- bzw. umbauen ;)

Der Code:

Spoiler
<style>

.multicolumn {
border: 1px solid #40404C; /* rahmen der box */
padding: 20px; /* innenabstand */
line-height: 120%; /* zeilenabstand */

-webkit-column-count: 3; /* anzahl der spalten einstellen */
-moz-column-count: 3;
column-count: 3;

-webkit-column-gap: 50px; /* abstand zwischen den spalten einstellen */
-moz-column-gap: 50px;
column-gap: 50px;

-webkit-column-rule: 1px solid #40404C; /* trenner: breite, art, farbe einstellen */
-moz-column-rule: 1px solid #40404C;
column-rule: 1px solid #40404C;
}

/* # erster buchstabe # */
.multicolumn:first-letter {
color: yellow; /* farbe */
font-size: 60px; /* schriftgroesse */
text-transform: capitalize;
line-height: 100%;
float: left;
padding: 0 5px 0 0;
}

</style>

<div class="multicolumn">
MEIN TEXT
</div>

<div class="multicolumn">
MEIN TEXT
</div>


Tipp:

Wenn du mit verschiedenen Anzahlen an Spalten oder anderen Layouts arbeiten möchtest, kopiere einfach den Code innerhalb des <style>, benenne die Klasse ".multicolumn" um in z.B. ".multicolumn2" für zwei Spalten, ".multicolumn3" für drei Spalten usw. und ändere die Werte.
Im HTML-Teil musst du dann nur noch "<div class="multicolumn">" entsprechend deiner benötigten Klasse ändern.

So long...

t2da9227 t411109e t2bd9ebc t1cdf079eb t4


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

01.10.2017 um 02:48
Background Image Slider für Blogs und Profile

Beim "Background Image Slider" handelt es sich um eine CSS-Animation, die es dir ermöglicht, statt - wie gewöhnlich -  eines einzelnen Hintergrundbildes einen automatischen Wechsel beliebig vieler Hintergrundbilder in deinem Blog oder Profil anzuzeigen.

Beispiel

Der Code als Text-Datei: Background_Image_Slider.txt (2,44 KB)

Die Parameter wie z.B. die Geschwindigkeit der Sequenzen (-> Dauer des Wechsels von einem zum anderen Bild) lassen sich leicht anpassen und mit weiteren Änderungen kann der Background Image Slider auch als "normaler" Slider verwendet werden.

So long...

t683b034 t2da9227 t411109e t2bd9ebc t1cd


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

25.02.2018 um 16:17
Wer immer wieder mal Codes zum Einbau von YouTube Videos ins Profil oder Blog benötigt und nicht lange suchen will, kann meinen neuen Online YouTube Video Coder nutzen:

up b752a0de1eaf yt coder start

Mehr dazu: https://www.allmystery.de/blogs/s_c/s_cs_youtube_video_coder

So long...

tebd1d80 t683b034 t2da9227 t411109e t2bd


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

25.02.2018 um 16:20
Eine coole Möglichkeit, zusätzlichen Content in dein Profil oder Blog einzubauen, ist das aufklappbare Off-Canvas Menü:

up 0ee9d9ee7de3 button

up bfe27e7e19d9 menue

Mehr: https://www.allmystery.de/blogs/s_c/offcanvas_menue

So long,

t93f1f989cef3 tebd1d80 t683b034 t2da9227


melden

Neuen Beitrag verfassen
Dies ist eine Vorschau, benutze die Buttons am Ende der Seite um deinen Beitrag abzusenden.
Bereits Mitglied?  
Schriftgröße:
Größe:
Dateien Hochladen
Vorschau
Bild oder Datei hochladen

Bleib auf dem Laufenden und erhalte neue Beiträge in dieser Diskussion per E-Mail.


Oder lad dir die Allmystery App um in Echtzeit zu neuen Beiträgen benachrichtigt zu werden:

Ähnliche Diskussionen

318 Mitglieder anwesend
Konto erstellen
Allmystery Newsletter
Alle zwei Wochen
die beliebtesten
Diskussionen per E-Mail.

Themenverwandt
Anzeigen ausblenden