Guten Tag, Freunde. Eine interessante Lösung zum Klicken auf ein Symbol, die Besucher nicht stört. Darin können Sie entweder wichtige Ankündigungen oder andere platzieren notwendige Informationen. Es wird nur angezeigt, wenn der Benutzer auf das Symbol klickt (in meinem Fall das Android-Symbol).

Der Code ist absolut unkompliziert, ohne Bibliotheken oder umfangreiche Skripte. Und es lässt sich problemlos im HTML/JavaScript-Gadget installieren. Das Bild selbst und der „Schließen“-Button sind im SVG-Format. Dieses „Design“ ist im Testblog oben rechts deutlich zu erkennen.

Demonstration
Alle Codes

Ich grüße sie

Blog-Spickzettel für Blogger zum Thema Erstellen, Einstellungen, Design und Bloggen auf der BLOGGER-Plattform Ich hoffe, dass Sie hier viele nützliche und interessante Informationen finden. Ich freue mich sehr über Ihr Feedback

.app-android-outer (
Breite: 50px;
Position: fest;
oben: 0;
rechts: 50px;
Z-Index: 9999
}
.app-android (
Breite: 50px;
Höhe: 55px;
Zeilenhöhe: 55px;
Rand: 0;
Textausrichtung: Mitte;
Position: relativ;
schweben rechts;
Cursor: Zeiger
}
.app-android svg (
vertikal ausrichten: Mitte;
Deckkraft: .7
}
.app-android:hover svg,
.app-android:focus svg,
.app-android:active svg (
Deckkraft: 1
}
.app-android:before (
Inhalt: "";
Position: absolut;
oben: 0;
unten: 0;
links: 0;
rechts: 0
}
.app-content (
Hintergrund: #fff url(https://2.bp.blogspot.com/-sSuAXU_yhVM/XPD3sxcQ8DI/AAAAAAABK4s/CusSSD-sJf8k_B6AuUkF4g5nkmivM6MEACLcBGAs/s300-rw/android-4.png ) keine Wiederholung unten links;
Breite: 300px;
Polsterung: 0;
Rand: 1px fest #ccc;
Rahmenfarbe: rgba(0, 0, 0, .2);
Zeilenhöhe: 1,3;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
Box-Shadow: 0 2px 10px rgba(0, 0, 0, .2);
Umriss: 0;
Position: absolut;
rechts: 50 %;
oben: 50px;
Rand rechts: -40px;
-webkit-Grenzradius: 2px;
Randradius: 2px;
-webkit-user-select: text;
Z-Index: 2;
Anzeige: keine;
}
.app-content h3 (
Rand: 0;
Polsterung: 5px 20px;
Farbe: #333;
Schriftgröße: 18px;
Schriftstärke: 700;
border-bottom: 1px solid #ccc;
Rahmenfarbe: rgba(0, 0, 0, .2)
}
.app-content-on(
Polsterung: 10px 20px 16px;
Farbe: #333;
Schriftgröße: 16px;
Schriftstärke: 400
}
.app-content-on svg (
vertikale Ausrichtung: -7px;
}
.app-content:before (
Inhalt: "";
Randfarbe: transparent;


Position: absolut;
rechts: 0;
Rand rechts: 30px;
Z-Index: 1;
Höhe: 0;
Breite: 0;
Rahmenfarbe unten: #ccc;
Rahmenfarbe unten: rgba(0, 0, 0, .2);
oben: -9,5px
}
.app-content:after (
Inhalt: "";
Randfarbe: transparent;
Rahmenfarbe unten: #fff;
Rahmenstil: gestrichelt, gestrichelt, durchgezogen;
Randbreite: 0 8,5px 8,5px;
Position: absolut;
rechts: 0;
Rand rechts: 30px;
oben: -8,5px;
Z-Index: 1;
Höhe: 0;
Breite: 0
}
.app-close-button(
Position: absolut;
Breite: 18px;
Höhe: 18px;
Zeilenhöhe: 28px;
Textausrichtung: Mitte;
oben: 7px;
rechts: 5px;
Hintergrund: 0 0;
Grenze: keine;
Cursor: Zeiger;
Polsterung: 0
}
.app-close-button:before (
Inhalt: "";
Position: absolut;
oben: -15px;
rechts: -15px;
unten: -15px;
links: -15px;
Cursor: Zeiger
}
.slideInUp(
-webkit-animation-name: slideInUp;
Animationsname: slideInUp;
-Webkit-Animationsdauer: 1s;
Animationsdauer: 1s;
-webkit-animation-fill-mode: Both;
Animationsfüllmodus: beides
}
@-webkit-keyframes slideInUp (
0% {


Sichtbarkeit: sichtbar
}
100% {

transformieren: TranslateY(0)
}
}
@keyframes slideInUp (
0% {
-webkit-transform: TranslateY(100%);
transform: TranslateY(100%);
Sichtbarkeit: sichtbar
}
100% {
-webkit-transform: TranslateY(0);
transformieren: TranslateY(0)
}
}
@media screen und (max-width:960px) (
.app-android-outer (
rechts: 80px
}
}
@media screen und (max-width:375px) (
.app-content (
Rand rechts: -75px
}
.app-content:after,
.app-content:before (
Rand rechts: 65px
}
}
@media screen und (max-width:320px) (
.app-content (
Rand rechts: -95px
}
.app-content:after,
.app-content:before (
Rand rechts: 85px
}
}

Kopieren Sie den gesamten fertigen Code und installieren Sie ihn im HTML/JavaScript-Gadget an einer beliebigen Stelle in Ihrem Blog-Layout. Das Symbol wird genau an der vorgesehenen Stelle platziert. Die grau markierte Zeile enthält ein durchscheinendes Hintergrundbild des Popup-Fensters selbst. Bei Bedarf können Sie es aus dem Code entfernen und den bevorzugten Haupthintergrund nach Ihrem Geschmack festlegen, indem Sie den Wert von „background: #fff“ auf den gewünschten Wert ändern.

Vielen Dank an alle für Ihre Aufmerksamkeit. Wir sehen uns.

Abonnieren Sie neue Spickzettel

Hallo Freunde. Ich möchte zeigen, wie einfach es ist, den allgemeinen Hintergrund des gesamten Blogs zu ändern. Obwohl der Hintergrund selbst im Abschnitt „Theme“ leicht angepasst werden kann. Dort können Sie vorgefertigte Hintergründe auswählen oder ein eigenes Bild hochladen und die entsprechenden Einstellungen vornehmen. Ich habe mich jedoch entschieden, Ihnen meiner Meinung nach eine einfachere Option anzubieten. Hier können wir die Größe des Hintergrundbildes selbst anpassen. Oder vielmehr seine Breite.

Kommen wir zur Sache. Anfangs sah mein Testblog so aus. Ich habe den Bereich (oder den Hintergrund der gesamten Leinwand) markiert, der in den Designeinstellungen angegeben wurde.

Jetzt werden wir es in dieses Bild ändern

Damit es ungefähr so ​​aussieht

Hier möchte ich Ihre Aufmerksamkeit lenken. Die Breite des Blogs beträgt in meinem Fall 1200 px. Die Abmessungen des Hintergrundbildes betragen 1450 x 950 Pixel. Das Bild füllte den gesamten Raum vollständig aus.

Wenn die Größe des Hintergrundbilds kleiner als die Größe der gesamten Blog-Leinwand ist, deckt es nicht den gesamten Raum ab und sieht wie ein Rand aus. Sieh den Unterschied

Es scheint auch durchaus akzeptabel zu sein. Manche Leute dekorieren Websites für die Feiertage auf diese Weise. Betrachten wir auf jeden Fall beide Optionen. Bei richtig ausgewähltem Hintergrund oder erstellt in einem beliebigen Editor können beide Optionen angepasst werden.

Keine besonderen Fähigkeiten erforderlich.

1. Wählen Sie das gewünschte Bild aus und kopieren Sie dessen Adresse.
2.Kopieren Sie den Code unten und legen Sie die Adresse Ihres Bildes fest

3. Gehen Sie zur Registerkarte „Theme – HTML bearbeiten“, suchen Sie nach ]]> und installieren Sie den fertigen Code über dieser Zeile.

Das Ergebnis wird beim Betrachten des Themas sichtbar. Wenn Sie damit zufrieden sind, können Sie gerne klicken speichern und bewundern Sie die neue Vorlage.

Ich wiederhole es noch einmal. Für den Fall, dass das Bild so war kleinere Größen Breite des Blogs oder völlig unsichtbar ist, müssen Sie den Breitenwert im Code festlegen. Fügen Sie nur eine Zeile hinzu und es sah so aus

Körper(
Hintergrund: URL (http://www.clipartbest.com/cliparts/9iz/EnR/9izEnR56T.png)
No-Repeat-Oberteil fixiert;
Hintergrundgröße: 100 %;
}

Mit Hintergrundgrößenwert: 100 %; Sie können herumspielen und es in ein kleineres ändern, bis Sie das erreichen, was Sie wollen.

Mit solch einfachen Handgriffen können Sie unterschiedliche Hintergründe für verschiedene Feiertage, Jahreszeiten oder Ihre Stimmung erstellen.

Vielleicht hast du es verpasst

Alles Gute und bis bald.

Hallo an alle. Heute stelle ich Ihnen einen Code vor, der ein Bild erscheinen lässt, wenn Sie mit der Maus über einen Link fahren. Es gibt viele Möglichkeiten, Links zu gestalten. Aber dies wird eine originelle Lösung für thematische Blogs sein. Oder um eine separate Nachricht zu erstellen. Sie können jederzeit ein Bild auswählen, das zum gewünschten Thema und Design passt.

Sie können die Live-Demo direkt unten sehen. Der Übersichtlichkeit halber habe ich Links zu einigen Seiten meines Blogs bereitgestellt. Sie werden sie selbstverständlich in Ihre Seitenadressen ändern. Bilder und Text bzw.

Hier ist der Code selbst.

Liebe „Linktext“-Leser, ein frohes neues Jahr 2020, Linktext. Beginnen Sie mit einem neuen Aufschwung, zu höheren Höhen im Leben und einem guten Bankkonto-Linktext. Bringen Sie Harmonie im Geschäft und viel Glück in Ihrem Privatleben!

.Bühne(
Anzeige: Tabellenzelle;
vertikal ausrichten: Mitte;
}
.tabled, .middled (
Textausrichtung: Mitte;
Rand: 0 automatisch;
}
.Jumbo(
Schriftgröße: 150 %;
vertikale Ausrichtung: -25px;
transformieren: rotieren (8 Grad);
}
.jumbo:erstes Kind (
-Webkit-Animation: Wave 10s unendliche Leichtigkeit;
Animation: Welle 10s unendliche Leichtigkeit;
}
.jumbo:last-child (
-Webkit-Animation: Wave 15s unendliche Leichtigkeit;
Animation: Welle 15s unendliche Leichtigkeit;
}
@keyframes Welle (
0 % ( transformieren: drehen (8 Grad); )
25 % ( transformieren: drehen (15 Grad); )
75 % ( transformieren: drehen (-10 Grad); )
100 % ( transformieren: drehen (8 Grad); )
) @-webkit-keyframes wave (
0 % ( -webkit-transform: rotieren(0deg); )
50 % ( -webkit-transform: rotation(10deg); )
100 % ( -webkit-transform: rotieren(0deg); )
}
P(
Schriftgröße: 110 %;
Schriftfamilie: Helvetica, sans;
maximale Breite: 24em;
Rand: 0 automatisch;
text-align: justify;
Farbe: #00695C;
Schriftstärke: leichter;
Zeilenhöhe: 1,5em;
}
A (
Farbe: #ccc;
Textdekoration: keine;
Rand unten: einfarbig dünn #f7901d;
}
a:hover (
Farbe: #f7901d;
}
.boo (
Position: relativ;
}
.boo:before, .boo:after (
Position: absolut;
Übergang: alle 0,15 Sekunden nachlassen;
}
.boo:before (
oben: -75px;
links: -70px;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
.boo:after (
oben: -115px;
rechts: -70px;
-Webkit-Übergangsverzögerung: 0,05 s;
Übergangsverzögerung: 0,05 s;
-webkit-transform:rotateY(180deg) scale(0);
-moz-transform:rotateY(180deg) scale(0);
-o-transform:rotateY(180deg) scale(0);
-ms-transform:rotateY(180deg) scale(0);
transform:rotateY(180deg) scale(0);
}
.boo:hover:before (
oben: -140px;
-webkit-transform:rotate(15deg) scale(1);
-moz-transform:rotate(15deg) scale(1);
-o-transform:rotate(15deg) scale(1);
-ms-transform:rotate(15deg) scale(1);
transform:rotate(15deg) scale(1);
}
.boo:hover:after (
-webkit-transform:rotateY(180deg) scale(0.7);
-moz-transform:rotateY(180deg) scale(0.7);
-o-transform:rotateY(180deg) scale(0.7);
-ms-transform:rotateY(180deg) scale(0.7);
transform:rotateY(180deg) scale(0.7);
}
.boo:before, .boo:after (
Inhalt: url("Link zum Bild. png");
}

Kopieren Sie den gesamten Code, nehmen Sie die notwendigen Einstellungen vor und installieren Sie ihn im Nachrichteneditor im HTML-Modus an der gewünschten Stelle. Das Beispiel enthält 3 Links. In jedem Fall können Sie eine solche Zeile entfernen oder hinzufügen

"Link Text")

Und von ganzem Herzen wünsche ich Ihnen allen ein frohes neues Jahr. Lächeln, Freude, Gesundheit, Wohlstand für Familie und Freunde. Güte und Frieden für Ihr Zuhause!!!

ALLEN EIN FROHES NEUES JAHR 2020!!!

Hallo zusammen. Die Navigation in Standard-Blogger-Vorlagen fällt überhaupt nicht auf. Nicht jedem wird das kaum wahrnehmbare Panel am Ende der Seite auffallen. Daher kann es sein, dass ein neuer Besucher den Link zu vorherigen oder nächsten Blogartikeln nicht sieht.
Es gibt viele Navigationsstile. Doch dies ist nicht das erste Mal, dass ihnen gesagt wird, dass vielen von ihnen „befohlen wurde, lange zu leben“. Und die Site-Navigation ist vielleicht das grundlegendste Element. Daher werde ich Links zu Artikeln bereitstellen, in denen ich bereits Navigationsdesignoptionen veröffentlicht habe, und einen weiteren funktionierenden Code anbieten. So wird es unter den Blogbeiträgen aussehen.

Die heutige Version sieht recht elegant aus. Zeigt eine nummerierte Liste von Seiten im Panel an und zeigt die vorherigen und nächsten Seiten korrekt an.

Zur Installation müssen Sie zunächst diesen Code kopieren

//1J "+i+\" 1H \"+g+"";7 1f=L(i)-1;5(i>1)(5(i==2)(5(l=="s") (6+=\" \"+Q+\"\")e(6+=\" \"+Q+\"\"))e(5(l=="s")(6+=\" \"+Q+\"\")e(6+=\" \"+Q+\"\")))5(E>1)(5(l=="s")(6+=\" 1\")e(6+=\" 1\"))5(E>2)(6+=\"...\")1m(7 m=E;m