Hallo, liebe Leser der Blogseite. Sie können für diese Aufgabe natürlich ein Plugin verwenden, aber es ist nicht so schwer, es selbst zu machen, und es wird weniger sein, zumal ich bereits ziemlich viele davon arbeite (siehe den Artikel unter dem angegebenen Link). Ich habe die Icons der sozialen Netzwerke übernommen, über die ich bereits ausführlich geschrieben habe (ich hoffe, dass Dimox nichts dagegen hat).
Und ich fand es auch für E-Mail geeignet.
Nachdem Sie alle notwendigen Gruppen und Seiten in sozialen Netzwerken erstellt haben, also alle notwendigen Links erhalten haben, können Sie sich über das Hinzufügen von Schaltflächen zur Site wundern. Sie können natürlich, passend zu meinem Beitrag dazu, für jedes soziale Netzwerk ein passendes Icon auswählen und es bei Bedarf in und auf die gewünschte Größe verkleinern.
Dies ist jedoch nicht die beste Option. Warum? Denn um jedes Bild des sozialen Netzwerks zu laden, wird eine separate Anfrage an Ihren Server gestellt. Wenn Sie ein Dutzend Symbole haben, bedeutet das zehn Anfragen, was in irgendeiner Weise eine zusätzliche Belastung für den Server und . verursacht. Solche Extravaganz steht uns nicht, zumal sie es schon lange ist.
Ich habe beschlossen, das Rad nicht neu zu erfinden (ein Sprite zu erstellen), sondern das Rad zu verwenden, das den Share42-Konstruktor erstellt (der Link zur Beschreibung der Arbeit damit ist oben angegeben). Darin können Sie die sozialen Netzwerke auswählen, deren Symbole Sie benötigen, und zusammen mit dem Code erhalten Sie ein CSS-Sprite, d. h. physisch eine Grafikdatei, die alle benötigten Symbole für soziale Netzwerke und Abonnements für den RSS-Feed (und ggf. E-Mail) enthält.
Ich habe vier Hauptnetzwerke und ein paar Symbole für Nachrichtenabonnements mit einer Symbolgröße von 24 x 24 ausgewählt, sodass mein Sprite so aussieht (allerdings hat es sich immer noch dorthin geschlichen, aber das spielt keine Rolle):
Jetzt haben wir alle Zutaten – Links zu Gruppen oder Seiten sozialer Netzwerke und Symbole für deren Anzeige auf der Website. Es bleibt nur noch, das alles richtig vorzubereiten, d.h. bilden. Da mein Blog auf WordPress basiert, füge ich den Schaltflächencode in eine der . In meinem Fall heißt es sidebar.php. HTML Quelltext Daraus ergibt sich eine sehr einfache:
Nun, das Interessanteste. Mit Hilfe legen wir fest, welcher Bereich unseres Sprites an dieser bestimmten Stelle als Hintergrund angezeigt wird (in unserem Fall wird dieser Hintergrund unter einem Hyperlink platziert). Es dauert sehr lange, zu erklären, wie das passiert, also lesen Sie den Artikel unter dem Link und alles wird klar (es gibt auch anschauliche Beispiele). Wenn Sie zu faul sind, experimentieren Sie einfach mit den Zahlen, die, wie Sie vielleicht bemerkt haben, nicht umsonst ein Vielfaches von 24 sind.
Ja, laden Sie die Sprite-Datei per FTP auf Ihre Site hoch und geben Sie im Hintergrund den Pfad dazu an (). Das ist alles. Wenn es nicht klappt, lesen Sie die Materialien auf den Links oben genauer durch, und wenn überhaupt nichts klappt, dann beschreiben Sie Ihre Situation in den Kommentaren (ausführlich – um den Code einzufügen, vergessen Sie nicht, ihn beizufügen PHP-Tags mit eckigen Klammern).
Viel Erfolg! Bis bald auf der Website der Blog-Seiten
Sie könnten interessiert sein
In letzter Zeit bittet jeder zweite (wenn nicht der erste) Kunde in den Anforderungen für die Entwicklung der Website darum, diese unbedingt mit sozialen Netzwerken zu verbinden. „Social“-Buttons auf der Website sind das wichtigste Instrument zur Gewinnung der Zielgruppe, zur Verbreitung von Inhalten und zur PR im Allgemeinen. Und völlig kostenlos!
Soziale Netzwerke stellen Codes für ihre Schaltflächen und Widgets zur Platzierung auf der Website bereit und fügen Anweisungen für deren Installation im Content-Management-System bei. Mit jedem CMS (Betriebssystem) können Sie sie installieren. Die Hauptsache ist, sie harmonisch in das Design Ihrer Website einzufügen.
Wenn sich Ihre Website an Personen richtet, die über beliebte soziale Netzwerke kommunizieren. Netzwerke, zum Beispiel Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest usw., und Sie möchten sie alle abdecken, um die Schaltflächen nicht für jeden von ihnen separat festzulegen, da sie sich in Größe und Größe unterscheiden können Für das Design empfehlen wir die Verwendung von Aggregationsdiensten. Hierbei handelt es sich um einfache und praktische Tools, mit denen Website-Besucher schnell Informationen mit ihren Freunden teilen können, unabhängig davon, welches soziale Netzwerk sie nutzen. Im Folgenden analysieren wir die beliebtesten Dienste.
Es gibt mittlerweile viele Möglichkeiten, der Website Schaltflächen für soziale Netzwerke hinzuzufügen, es gibt eine Auswahl und es gefällt. Auf der Seite spielen Social Buttons eine wichtige Rolle, mit deren Hilfe man, wie viele bereits wissen, jeden Eintrag schnell in einem der ausgewählten sozialen Netzwerke reposten kann. Social-Buttons für die Website werden mittlerweile überall und überall platziert, manchmal jedoch an der falschen Stelle.
Viele Menschen wissen bereits, wie entwickelt soziale Netzwerke mittlerweile sind und wie toll es ist, wenn Ihre Website über solche Schaltflächen verfügt, mit denen Sie Ihren Lieblingsbeitrag oder einen Teil eines Beitrags zu Ihrer Pinnwand hinzufügen können. Mit dieser Aktion kommentieren oder reposten Sie nicht nur Nachrichten, sondern geben auch ein zusätzliches Signal an Suchmaschinen.
Der Traum eines jeden Websitebesitzers, wenn alle seine Beiträge von den Lesern auf ihren Seiten in einem der sozialen Netzwerke erneut gepostet werden. Jetzt sind vor allem Vkontakte, Facebook, Twitter und Odnoklassniki gefragt. Ich würde auch LiveJournal, liveinternet und Blogger hinzufügen. Aus Gründen der Benutzerfreundlichkeit ist es wünschenswert, diese Schaltflächen zur Website hinzuzufügen.
Gerade Twitter verdient heute immer mehr Aufmerksamkeit, mit seiner Hilfe erscheinen Ihre Neuerscheinungen schneller im Suchmaschinenindex.
Wenn Sie der Eigentümer der Website sind, sollten Sie höchstwahrscheinlich über ein Liveinternet- oder LiveJournal-Konto verfügen. Um nicht jedes Mal neue Einträge zu diesen Diensten hinzuzufügen, spart das Vorhandensein ihrer Schaltflächen Zeit. Darüber hinaus nutzen viele Menschen diese Dienste und möchten Ihren Eintrag möglicherweise auch in ihrem Tagebuch erneut veröffentlichen.
Es gibt mehrere beste Möglichkeiten, einer Website schnell soziale Schaltflächen hinzuzufügen. Sie können dies mithilfe von Online-Diensten tun, die dabei schnell und einfach helfen. Oder direkt über jedes soziale Netzwerk einzeln. Hier hat jeder seine eigene Wahl. Früher habe ich die Schaltflächen über jedes soziale Netzwerk separat hinzufügen lassen, jetzt habe ich sie über den Dienst installiert.
Es gibt einen solchen Dienst, er heißt teilen42. Es wurde viel Material über ihn geschrieben, wie gut er ist und wie man ihn nutzt. Gut, aber für den durchschnittlichen Benutzer, der nichts davon versteht, wird es schwierig sein, damit umzugehen.
Für eine so kleine Beschäftigung, Ordner auf das Hosting zu kopieren und dann mit Stilen zu baden, fährt es sich jetzt nicht mehr. Es gibt andere Optionen, bei denen Sie den bereits fertigen Code ohne zusätzliche Ordner kopieren und einfügen müssen. Vergessen Sie also diesen Service.
Fügen Sie nur die grundlegendsten Social-Media-Schaltflächen hinzu, die die Mehrheit verwendet, und formen Sie nicht Dutzende unnötiger vergessener Schaltflächen.
Was Sie heute verwenden können, um soziale Schaltflächen für die Website hinzuzufügen:
Sie müssen sich wahrscheinlich nirgendwo anders einmischen, Sie können keine besseren Wege finden. Jede dieser Optionen ist auf ihre Art gut. Wenn Sie einen bequemeren oder attraktiveren Weg kennen, schreiben Sie bitte in die Kommentare.
Am Ende jedes Artikels müssen Schaltflächen für soziale Netzwerke eingefügt werden, damit der Seitenbesucher nach der Lektüre Ihren Eintrag optional erneut veröffentlichen kann. Er sollte sie nicht irgendwo am Ende der Seite suchen. Die meiner Meinung nach optimalsten Orte, an denen solche Schaltflächen platziert werden sollten, sind in der Seitenleiste und direkt am Ende jedes Eintrags.
Im Moment nutze ich selbst diesen Service, er hat mir gefallen. Neben der Bequemlichkeit bietet der uptolike-Dienst gegenüber anderen seiner Art mehrere Vorteile.
Für die Nutzung reichen Privilegien gegenüber anderen derartigen Diensten aus. In diesem Fall wird nur ein kleiner Code in Form eines Skripts und ein paar Zeilen mit Stilen hinzugefügt. Gleichzeitig gibt es keinen fremden Link, ich habe ihn über den Dienst für ausgehende Links überprüft. Wenn ich falsch liege, können Sie mich korrigieren.
Was kann der uptolike-Dienst sonst noch tun?
Die wichtigsten Einstellungen Wählen Sie aus, welche sozialen Schaltflächen für die Website Sie sehen möchten. Bei Bedarf können Sie die Liste öffnen und aus der Mehrheit noch ein paar weitere auswählen. Aktivieren Sie das Kontrollkästchen für Unterstützung. Danach werden auf Mobiltelefonen die Schaltflächen für soziale Netzwerke immer am unteren Bildschirmrand angezeigt.
Wählen Sie die horizontale Position, Größe und den Stil der Schaltflächen. Dekorieren Sie nach Belieben und fügen Sie einen Hover-Effekt hinzu. Es muss nichts mehr getan werden. Um einen Zählercode zu generieren, müssen Sie die Website-Adresse und das Postfach angeben. Unmittelbar danach erscheint ein Code zum Einfügen von Social Buttons auf der Website.
Wenn Sie eine WordPress-Site haben, öffnen Sie die Datei single.php und fügen Sie den fertigen Code direkt nach dem Ende des Seiteninhalts ein. Aktualisieren Sie die Seite und sehen Sie, was passiert. Es gibt nichts Schwieriges.
Wählen Sie die gewünschten Dienstsymbole aus. Twitter gibt es nur in Form von Symbolen, ohne Zähler. Wir wählen das Aussehen der Blöcke aus und unten befindet sich ein vorgefertigter Code zum Einfügen. Wie bereits erwähnt, fügt Yandex nichts anderes hinzu, alles ist bescheiden und geschmackvoll.
Bei dieser Methode müssen Sie jedes soziale Netzwerk separat öffnen und jede Repost-Schaltfläche separat konfigurieren. Um einen Facebook-Button hinzuzufügen, müssen Sie gehen Hier. Für Klassenkameraden und meine Welt müssen Sie Daten hinzufügen. Bei Twitter passiert alles auf . Um eine Vkontakte-Schaltfläche hinzuzufügen, gehen Sie zu diese Seite .
Sie erhalten vorgefertigten Code nur aus sozialen Netzwerken, ohne zusätzliche Skripte. Wahrscheinlich die beste Möglichkeit, einer Website Social-Media-Buttons hinzuzufügen. Die Schwierigkeit besteht darin, dass Sie jede Schaltfläche einzeln ausschneiden, dann alles an einer Stelle einfügen und CSS-Stile verwenden müssen, um es in einer Spalte auszurichten. Wenn Sie damit keine Probleme haben, können Sie es versuchen.
Um eine Vkontakte-Schaltfläche hinzuzufügen, klicken Sie auf Websites und Widgets verbinden. Unten finden Sie eine vollständige Liste aller möglichen Ergänzungen. Es besteht auch die Möglichkeit, der Seite Kommentare hinzuzufügen, an die Pinnwand zu schreiben, Ihre Gruppe, Empfehlungen und Umfragen hinzuzufügen, den Autor zu abonnieren und Links zu veröffentlichen. In unserem Fall wählen Sie „Links veröffentlichen“.
Es gibt nichts Kompliziertes, wir wählen den Stil des Buttons (mit oder ohne Zähler), schreiben den Text auf den Button, die Logo-Option und unten wird ein vorgefertigter Einbettungscode angezeigt. Ich selbst habe diese manuelle Methode zum Hinzufügen verwendet, aber im Moment versuche ich es mit einem Drittanbieterdienst. Mal sehen was passiert. Wenn es mir nicht passt, werde ich sofort wieder auf die manuelle Methode zurückgreifen.
Eine andere Möglichkeit, einer Site Schaltflächen hinzuzufügen, ist mit Pluso-Service. Der Service ist auch nicht schlecht, viele haben davon aufgefallen. Die Auswahl an Gestaltungsmöglichkeiten ist groß, neben dem Amateurbild gibt es auch große Bildgrößen. Die Möglichkeit, Netzwerke hinzuzufügen, steht anderen ähnlichen Diensten in nichts nach. Für die Installation sind keine Dateien erforderlich, nur Code.
Wählen Sie einen beliebigen Designstil und fügen Sie die erforderlichen Dienste hinzu. Etwas weiter unten wird ein fertiges Beispiel gezeigt, wie das alles auf der Seite aussehen wird. Symbole können auf groß, mittel oder klein eingestellt werden. Auch quadratische Icons für die Website oder rund, einzeilig oder zweizeilig, horizontal oder vertikal. Mit oder ohne Theke, ohne Hintergrund oder stellen Sie den Hintergrund so ein, dass er zu Ihrem Website-Design passt.
Nach all diesen Schritten finden Sie unten einen vorgefertigten Code zum Einfügen in die Seite. Wenn Sie auf der Hauptseite etwas einfügen müssen, stöbern wir in der Datei index.php. Wenn in allen Ihren Beiträgen, fügen wir den Code direkt nach dem Ende des Beitrags zur Datei single.php hinzu.
Wenn Sie in diesem Code nichts verstehen, was wo kopiert werden muss und wie das alles funktioniert, gibt es einen Ausweg. Wenn Sie über eine WordPress-Engine verfügen, können Sie ein Plugin installieren, das Ihnen Social-Media-Buttons bietet. Heutzutage gibt es einfach eine große Anzahl solcher Plugins. Gehen Sie zum Admin-Panel – Plugins. Sie können in die Suche nach Plugins sofort „Social Buttons“, „Social“ oder „VKontakte“ eingeben. Ich bin mir sicher, dass Sie etwas finden werden.
Unter den meisten ähnlichen Plugins für WordPress sind diese, wenn man sich die Bewertung ansieht, am häufigsten aufgeführt:
Tatsächlich gibt es viele solcher Plugins. Sie müssen sie installieren und herausfinden, welches Ihnen am besten gefällt, richtig funktioniert, was es anzeigt und wie Sie es für sich anpassen können. Schauen wir uns das Beispiel des ersten solchen Plugins Social Share Buttons für WordPress an.
Das Plugin selbst ist auf Russisch, damit wird es keine Probleme geben. Nach der Installation erscheint im Menü links ein neuer Button „Share Buttons“. In den Haupteinstellungen platzieren wir das Site-Logo und schreiben den Text vor die Social-Buttons.
Stellen Sie sicher, dass die Generierung von Metadaten aktiviert ist. Der Titel und die Beschreibung der Seite werden einbezogen. Richten Sie die Schaltflächen horizontal aus und wählen Sie, wo sie platziert werden sollen. Wir wählen nur in Beiträgen aus. Optional können Sie die erforderlichen Seiten ausschließen. Ganz unten müssen Sie den Spitznamen im Tritter angeben.
Wählen Sie auf der nächsten Registerkarte „Freigabeeinstellungen“ den Stil der Schaltflächen aus. Unten können Sie unnötige soziale Netzwerke aktivieren oder deaktivieren und Einzüge für den gesamten Block darüber oder darunter hinzufügen. Sie müssen nirgendwo zusätzlichen Code einfügen, das Plugin erledigt alles für Sie.
Sie haben die Wahl, welche Methode Sie verwenden. Fügen Sie Social-Media-Symbole über uptolike, Pluso oder über Yandex hinzu. Sie sollten das Plugin nicht sofort auf WordPress installieren, sondern versuchen, alles manuell oder mit Hilfe eines Dienstes zu erledigen.
Wenn Sie einen anderen guten Service oder eine Möglichkeit kennen, soziale Schaltflächen für die Website hinzuzufügen, wäre ich für den Kommentar dankbar.
Ein Überblick über inländische Designer und Skripte für Social-Network-Buttons für Websites sowie ausländische Analoga. Kurz, klar und deutlich.
2. Eine einfache Möglichkeit, Links zur Website zu erhalten – QIP.RU
Platzieren Sie eine Schaltfläche auf Ihrer Website und geben Sie Besuchern die Möglichkeit, den Inhalt der Website, der ihnen gefällt, zu Lesezeichen, Blogs und sozialen Netzwerken hinzuzufügen. Drei Schritte: Wo soll die Schaltfläche angeordnet werden (Website, Blogger oder WordPress), Schaltflächenstil (vorgefertigte Optionen) und Beschaffung der Schaltfläche.
3. Schaltflächen zum Hinzufügen von Inhalten zu sozialen Netzwerken – Pluso
Platzieren Sie Schaltflächen und ermöglichen Sie Besuchern, ihre Lieblingsseiten in sozialen Netzwerken zu teilen, auszudrucken, eine E-Mail zu senden und Lesezeichen hinzuzufügen.
4. Sozialer Aktivitätsdienst – UpToLike
Benutzerdefinierte Social-Media-Buttons mit der Möglichkeit, Farbe, Form, Größe und Spezialeffekte festzulegen. Weitere Features sind das PicShare-Bildfreigabe-Widget, die „Zitat“-Funktion und die individuelle Follow-Funktion.
5. Ein Knopf! - für alle Bookmarking-Dienste und sozialen Netzwerke
Wählen Sie die Schaltfläche „Ansicht“. Wo die Schaltfläche installiert wird: Website, Blogger oder WordPress. Fügen Sie eine Schaltfläche hinzu.
1. Schöne soziale Schaltflächen für die Website – goodshare.js
Anzeigetasten auf fast jedem Gerät. Sauberer Code. Kurzdokumentation. SEO-freundlich.
2. Skriptschaltflächen für soziale Lesezeichen und Netzwerke – Share42
Wählen Sie die Größe aus und markieren Sie die Symbole der Dienste, die Sie auf der Website verwenden möchten. Wählen Sie die gewünschten Optionen aus. Sehen Sie, wie es aussehen wird und/oder laden Sie das fertige Skript herunter. Installieren Sie das Skript auf einer WordPress-Site, Drupal usw.
3. Schöne Social-Like-Buttons mit jQuery – Social Likes
Like-Button-Skript mit Zählern im gleichen Stil für soziale Netzwerke: Facebook, Twitter, VKontakte, Odnoklassniki, Meine Welt, Google+ und Pinterest.
1. Schaltflächen zum Teilen – AddThis
Durch die Schaltflächen zum Teilen können Sie das Publikum der Website vergrößern, indem Sie über die verteilten Inhalte Besucher aus anderen Ressourcen und sozialen Netzwerken anlocken.
4. Social Sharing – Post.st
Holen Sie mehr aus dem Teilen in sozialen Medien heraus. Der Dienst wird den Besuchern den Prozess des Teilens in sozialen Netzwerken erleichtern, wodurch der organische Verkehr der Website erhöht wird.
5. Schaltflächen zum Teilen für jede Website – AddToAny
Holen Sie sich den Code für Social-Media-Schaltflächen für jede Website. Wählen Sie den Typ und Stil der Schaltflächen, geben Sie eine E-Mail und andere Optionen an oder wählen Sie eine der Plattformen: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad oder FeedFlare. Holen Sie sich den Tastencode.
| um 8:00 | Nachricht bearbeiten | 6 Kommentare |
Hallo liebe Freunde. Der heutige Artikel widmet sich der Erstellung eines Blocks sozialer Buttons ohne Dienste und Plugins. Und dieser Block enthält auch Schaltflächen, mit denen Website-Besucher die Seite ausdrucken, einen Link zum Artikel per E-Mail senden und Ihren Artikel mit einem Lesezeichen versehen können. Solche Schaltflächen sind heute auf fast jeder Website zu finden. Erst jetzt werden sie über Dienste oder Plugins implementiert. Und ich zeige dir, wie du es selbst machen kannst.
Dienste, die ich auf Kundenseiten und in meinem Blog genutzt habe – und . Diese Dienste erleichtern die Umsetzung der Aufgabe erheblich.
Und in diesem Block werden nur die notwendigen Bilder von Social Buttons verwendet, zusammengefasst in . Alle Stile sind auf ein Minimum beschränkt. Plus ein einfaches HTML-Framework.
Wir betrachten die klassische Version, bei der sich die Schaltflächen nach dem Artikel befinden.
Sie können dies tun, indem Sie entweder die Datei öffnen, die für die Anzeige von Artikeln verantwortlich ist (single.php) und dem Quellcode einen Block mit Social-Buttons hinzufügen. Alternativ kann dies über die Funktionsdatei des Themes (functions.php) erfolgen.
Ich zeige Ihnen beide Optionen und Sie wählen die für Sie passende aus.
Warnung: Erstellen Sie eine Sicherungskopie der Datei single.php, bevor Sie fortfahren!
Öffnen des WordPress-Administrationsbereichs "Aussehen" — "Editor" — „Einzelner Eintrag (single.php)“.
Suchen Sie im Quellcode nach der Stelle, an der die Ausgabe des Artikels endet und die Kommentare oder die Paginierung beginnen. An dieser Stelle müssen Sie den HTML-Code des Social-Buttons-Blocks einfügen.
Schauen Sie sich den Screenshot genau an und konzentrieren Sie sich auf die Codes, die für die Ausgabe des Artikels verantwortlich sindund Kommentare. Und fügen Sie den Code unten ein.
Natürlich wird es einige Unterschiede in Ihren Vorlagen geben, aber ich bin sicher, Sie werden es herausfinden, es ist nichts Kompliziertes daran. Und außerdem haben Sie eine Sicherungskopie, es gibt nichts, wovor Sie Angst haben müssen.
Und hier ist der HTML-Code des Blocks der sozialen Schaltflächen:
Code-Erklärungen: Es handelt sich um ein einzelnes Div mit der Klasse .share, das Links zu sozialen Netzwerken enthält. Der Link öffnet sich in einem separaten Popup-Fenster, hierfür ist diese Funktion onClick=window.open zuständig. Das Ersetzen eines Links zu einem Artikel erfolgt mit diesem Code. Jeder Link hat eine eigene Klasse, über die das Bild des Buttons zugeordnet wird.
Damit ist die Einfügung durch den Quellcode abgeschlossen. Und dann müssen Sie CSS-Stile hinzufügen.
Achtung: Bevor Sie beginnen, erstellen Sie eine Sicherungskopie Ihrer Datei „functions.php“!
Um diese Option nutzen zu können, müssen Sie die Datei „functions.php“ öffnen und ganz am Ende diesen Code hinzufügen:
/* Social-Buttons einfügen */ add_action("comments_template","soc_button"); Funktion soc_button() ( ?> Und achten Sie darauf, dass nach dem Einfügen des Codes keine Leerzeichen oder andere Zeichen vorhanden sind. Oder einfach den PHP-Code schließen?>. Andernfalls funktioniert die Website nicht mehr.Code-Erklärungen: Der Ort, an dem die Social-Media-Buttons platziert werden, wird durch den API-Schlüssel comments_template bestimmt. Dieser Schlüssel bestimmt die Stelle vor den Kommentaren. Der Social-Button-Code selbst ist in Back-Tags zum Öffnen und Schließen von PHP eingeschlossen. Im Code habe ich sie rot markiert. Das ist der ganze Trick beim Einfügen von HTML-Code in PHP über die Theme-Funktionen.
Damit ist diese Methode abgeschlossen. Fahren wir mit dem Hochladen von Bildern auf die Website fort.
Ich habe zum Beispiel mehrere Sprites mit Bildern von Social Buttons vorbereitet. Sie können sie herunterladen.
Das Sprite, das ich als Beispiel verwende, ist nur 3,97 KB groß und enthält nur die notwendigen Schaltflächen. Und da es sich um ein Sprite handelt, erfolgt nur eine Anfrage an die Datenbank und nicht für jede Schaltfläche einzeln.
Laden Sie Bilder herunter oder bereiten Sie Ihre eigenen vor und laden Sie sie auf Ihre Website hoch. Ich denke, das sollte kein Problem sein. Darüber hinaus ist ein Link zu diesem Sprite erforderlich, um Schaltflächen über CSS-Stile zu entwerfen.
Natürlich kann dieser Schritt auch als allererstes erledigt werden, aber ich bevorzuge es, zuerst alle komplexen technischen Arbeiten zu erledigen und dann mit den netten kleinen Dingen mit CSS-Stilen fortzufahren.
Öffnen Sie also die Datei style.css, die für das Design Ihrer Website verantwortlich ist. Und fügen Sie diese Stile ein:
Teilen Sie a ( display: inline-block; Vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") No-Repeat Scroll 0px 0px transparent;) .share a.vkontakte ( Hintergrund: url("http://test..png ") No-Repeat Scroll -168px 0px transparent; ) .share a.google (Hintergrund: URL("http://test..png") no-repeat scroll -252px 0px transparent; ) .share a.livejournal (Hintergrund: url("http://test..png") no-repeat scroll -336px 0px transparent; ) .share a.twitter ( Hintergrund: url("http://test..png ") no-repeat scroll -42px 0px transparent; ) .share a.mail ( Hintergrund: url("http ://test..png ") No-Repeat Scroll -294px 0px transparent; ) .share a.odnoklassniki ( Hintergrund: url("http://test..png ") No-Repeat Scroll -126px 0px transparent; ) .share a.pinterest (Hintergrund: url("http://test..png") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet (Hintergrund: url("http://test..png ") No-Repeat-Scroll -378px 0px transparent; ) .share a.evernote ( Hintergrund: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( Hintergrund: url("http://test.. png ") No-Repeat Scroll -462px 0px transparent; ) .share a.email ( Hintergrund: url("http://test..png ") No-Repeat Scroll -504px 0px transparent; ) .share a.print ( Hintergrund: url("http://test..png") No-Repeat Scroll -546px 0px transparent; ) .share a.digg (Hintergrund: url("http://test..png") No-Repeat Scroll -588px 0px transparent; ) .share a.spring (Hintergrund: URL("http://test..png") no-repeat scroll -630px 0px transparent; )
Code-Erklärungen: Die .share-Klasse definiert das allgemeine Erscheinungsbild des Blocks, die Größe jeder Schaltfläche, den Abstand und legt einen einheitlichen Hintergrund fest. Und dann hat jeder Link seine eigene Klasse und jedem dieser Links wird über die Hintergrundeigenschaft das Aussehen einer Schaltfläche zugewiesen. Die Schaltflächen werden als CSS-Sprite gerendert und jede Schaltfläche ist 40 Pixel breit und 40 Pixel hoch, mit 2 Pixel Abstand dazwischen, sodass Sie das Bild für jede Schaltfläche genau definieren können. Das heißt, die erste Schaltfläche wird als 0 angegeben, die zweite als 42 und so weiter. Im Code werden diese Werte orange angezeigt. Der Link zum Sprite wird ebenfalls orange hervorgehoben, Sie ändern ihn in den Pfad zu Ihrem Sprite.
Damit ist der gesamte Prozess der Erstellung Ihres Social-Button-Blocks abgeschlossen. Sie können sicher mit der Überprüfung fortfahren.
Und ich habe auch ein Video-Tutorial, in dem der gesamte Vorgang visuell dargestellt wird, die Stange zeigt die Bedienung der Tasten selbst. Beobachten und implementieren Sie es auf Ihren Websites und Blogs.
Das ist alles. Er hat die Aufgabe gemeistert. Ich wünsche euch allen viel Glück und bis bald bei neuen Artikeln und Video-Tutorials.
