Paramétrage du site Web Meta Geo Tagging (Blogger)

Paramètres méta-géolocalisés du site Web (Blogger) - Avant d'installer le balisage méta-géo sur le site html, nous devons d'abord comprendre les fonctions et les avantages du géo-étiquetage sur le site. Le balisage méta-géo intégré au site Web html vise en réalité à déterminer l'emplacement physique ou réel du site ( site de gestion de société ou de site Web). En plaçant des balises géographiques sur une page Web ou un flux RSS, vous avez fourni à l'utilisateur et au moteur de recherche des informations sur la position géographique du site. Le géolocalisation des métadonnées peut également faire référence à l'emplacement des pages et des objets de site, tels que des légendes de photos, des vidéos, etc.

L’avantage le plus évident des métadonnées de géolocalisation figurant dans l’en-tête du site est de minimiser ou de rationaliser le niveau de concurrence des sites de référencement Web sur les pages de résultats de recherche locales afin que les sites ou les entreprises proches (locales) aient la possibilité d’en savoir plus sur les résultats de recherche Google, par exemple. Les métadonnées de géolocalisation sont très efficaces si elles sont placées sur des sites commerciaux tels que des restaurants, des sites de voyage, etc. Le balisage méta géo est désormais considéré comme un outil de référencement local pratique, même si parfois les robots de recherche ignorent également les métadonnées de géolocalisation incorporées au site. Web en raison du faible niveau de précision de la localisation.

Exemple de métadonnées de géolocalisation

<meta content = "ID-KR" name = "geo.region" />
<meta content = "FRANCE" name = "geo.placename" />
<meta content = "1.130078; 104.052921" name = "geo.position" />
<meta content = "1.130078, 104.052921" name = "ICBM" />

Pour obtenir ou effectuer un méta-géomarquage avec un degré élevé de précision, je vous recommande vivement d'utiliser des outils en ligne tels que le Générateur de balises géographiques. Dans certains cas, le gestionnaire de site copie uniquement les métadonnées de balises géographiques à partir d'autres sites, puis les place dans l'en-tête de son propre site Web. Bien entendu, le comportement est incorrect et inutile pour le site Web, car le marquage méta-géo de la copie sera considéré comme inexact, le robot de recherche pourra donc l'ignorer.

Meta Geo Tag pour le contenu du site Blogger

Je pense que vous avez également remarqué la fonctionnalité de localisation sur le côté droit du post-blogger blogger. Le principe de la fonction de localisation de l'éditeur post-blogger est identique à celui de la fonction de méta-géolocalisation pour déterminer l'emplacement du contenu ou des publications de blogger. Les emplacements ciblés peuvent être spéciaux ou plus généraux, tels que ville, province ou pays, comme dans l’illustration ci-dessous;

La meilleure pratique pour déterminer l'emplacement géographique du contenu du site de blogueur consiste à l'ajuster au sujet de l'objet de l'article. Si vous écrivez à propos de Jakarta, l'emplacement géographique de l'article doit également être associé à l'emplacement de Jakarta. Si le contenu est une entreprise locale, l'emplacement doit être plus détaillé que l'emplacement physique de l'entreprise.

Si le site contient un contenu de lecture général, il ne fait pas de mal d'ajouter une balise d'emplacement à l'article ou nous pouvons ajouter une propriété plus générale de métadonnées og: locale qui est recommencée par Open Graph comme indiqué ci-dessous;

<meta property = "og: locale" content = "en_GB" />
<meta property = "og: locale: substitut" content = "xx_xx" />
<meta property = "og: locale: substitut" content = "xx_xx" />

La propriété og: locale est très générale et facultative pour tout objet tel que le contenu d'un article, les photos, l'audio et la vidéo. En général, son application est fortement recommandée. Vous pouvez combiner les trois méthodes de balise de géolocalisation ci-dessus pour augmenter la présence de sites Web et de contenu de site sur la page de résultats d'imbrication.

Je pense que cela est suffisant pour être utilisé comme référence pour comprendre le méta-marquage géographique et comment définir des métadonnées de balises géographiques sur la page du site Web. Vous voudrez peut-être en savoir plus sur le méta-géolocalisation ailleurs, mais je vous recommande vivement de l'apprendre en premier sur le lien officiel que j'ai joint à cet article pour appuyer la mise en œuvre du balisage méta-géo sur votre site.

Optimisation des widgets de publication populaires

Optimisation des widgets de publication populaires de Blogger - L’optimisation des widgets de publication populaires consiste à optimiser les performances des widgets et des moteurs de recherche en supprimant les CSS en ligne et en ajoutant des propriétés de texte alternatives (texte alternatif) à la vignette de publication populaire. Selon le principe du référencement (Search Engine Optimization), une image téléchargée sur un site Web doit comporter un texte alternatif afin que les robots d'exploration puissent reconnaître clairement l'image à afficher sur la page des résultats de la recherche lorsque quelqu'un tape des mots clés correspondant au texte alternatif de l'image.

Vous y avez peut-être vu de nombreux articles expliquant comment optimiser les widgets populaires de publication de blogueurs, mais ici, je vais expliquer en détail comment optimiser un widget affichant des publications populaires de sites de blogueurs afin d'améliorer le référencement ou les méthodes de référencement. Mais je dois d’abord souligner que vous devez tester votre site d’abord avec l’outil de vérification du référencement pour connaître la qualité des widgets de publication populaires utilisés. Faites attention aux résultats du test du site de référencement avant d’optimiser comme suit;

Un widget comme les publications populaires et d'autres widgets de publication qui affichent des images

les vignettes doivent avoir une alternative (alt text) afin que, conformément à la méthode de référencement, alt text informe le robot d'exploration ou le robot d'exploration Google, Bing et Yahoo des spécifications de l'image.

J'ai un peu expliqué que l'analyse robotique n'avait pas d'yeux et était daltonien. Reconnaître l'image d'un robot d'exploration ne s'appuie que sur un texte alternatif. S'il n'y a pas de texte alternatif sur une image, il est possible que l'analyse robotique lise l'image à l'aide de balises de titre sur un message, mais bien sûr ce n'est pas conforme au vrai comportement de "référencement".

Donc, fondamentalement, pour ajouter le référencement "qualité de widget de publication populaire" sur le moteur de recherche, il n'y a que deux manières, à savoir:

1. Ajouter un texte alternatif à la vignette du widget populaire
2. Supprimer les images miniatures de widgets

Les deux méthodes ci-dessus sont toutes deux utiles pour améliorer la qualité d'un site de blogueur, mais il est bien sûr préférable d'utiliser la méthode numéro 1, qui consiste à ajouter un texte alternatif au widget image, voir la raison et suivre les étapes.

Ajout de texte alternatif à un post populaire

1. Connectez-vous à Blogger> Modèle> Modifier le code HTML
2. Cliquez ensuite sur Passer au widget> sélectionnez le widget PopularPosts1.
3. Ouvrez le dossier du widget code HTML et recherchez le code ci-dessous.

<div class = 'item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b: with value = 'data: post.featuredImage.isResizable? resizeImage (data: post.featuredImage, 72, "1: 1"): data: post.thumbnail 'var =' image '>
<img alt = '' border = '0' expr: src = 'data: image' />
</ b: avec>
</a>
</ div>

Supprimez ensuite le code de bordure = '0' et remplacez le code alt = '' par le code expr: alt = 'data: post.title', afin que davantage de code soit également ajouté au code expr: title = 'data: post.title' pour qu'il devienne comme le suivant;

<img expr: alt = 'données: post.title' expr: src = 'données: image' expr: title = 'données: post.title' />

Enregistrez le modèle pour mettre fin aux étapes d'optimisation du widget populaire post blogger. Si vous vous sentez confus, veuillez consulter l'exemple d'image ci-dessous pour faciliter la navigation dans le code que vous recherchez.

Maintenant que votre widget de publication populaire a été optimisé et devient plus convivial, testez à nouveau votre site avec n'importe quel outil de vérificateur de référencement afin que le message manquant figurant sur le message populaire alt image post ait disparu (complet).

Un peu de connaissance supplémentaire, le code de bordure = '0' sur le widget de publication populaire sera considéré comme un css en ligne pouvant interférer avec l'analyse HTML ou DOM (Document Object Model), bien que le css en ligne soit en réalité un peu légitime et raisonnable, mais devrait l'être en css il doit être supprimé s'il n'endommage pas l'affichage, l'objectif est d'améliorer les performances du site, en particulier l'optimisation de la vitesse du site et le chargement du widget de publication populaire lui-même.

Je pense que cela est suffisamment clair pour comprendre ce que l’on entend par l’optimisation des widgets et étapes de publication populaires ou la manière d’optimiser les widgets populaires pour les rendre plus conviviaux. Donc, de ma part, j'espère que cela sera utile et ajoutera à la connaissance du doute, abonnez-vous à ce site si vous aimez cet article et obtenez des conseils de blogging intéressants dans le futur, rendez-vous à nouveau.

Formulaire de contact de widget

Widget Formulaire de contact réactif - Le formulaire de contact ou Contactez-nous est l'un des nombreux widgets importants qui doivent exister sur chaque page de site Web, y compris les sites de blogueurs. Les widgets de formulaire de contact sont des intermédiaires reliant les visiteurs aux gestionnaires de site. Les formulaires de contact (formulaires de contact) sont généralement utilisés pour envoyer message sous forme de critiques, suggestions, commandes de publicités et autres. En outre, ce formulaire de contact fonctionne également comme un filtre anti-spam ou un programme malveillant pouvant être envoyé par des visiteurs coquins au gestionnaire du site de messagerie.

La plate-forme blogger fournit en fait des widgets de formulaire de contact pour les sites de blog, mais l'affichage du formulaire de contact fourni est toujours très simple. Le gestionnaire de site "par défaut" doit personnaliser le style du formulaire de contact lui-même avec quelques ajouts css pour le rendre plus élégant.

Comment créer une page de formulaire de contact Blogger

1. Connectez-vous à Blogger et créez une nouvelle page "page".
2. Dans le coin supérieur gauche de l'éditeur de page, cliquez sur le mode html au lieu de composer.
3. Copiez et collez le script de formulaire de contact blogger ci-dessous, puis appuyez sur le bouton Publier.
4. N'oubliez pas de créer un titre sur votre page de formulaire de contact.

Les tutoriels sont plus faciles à appliquer par quiconque car ce script de formulaire de contact de blogueur avait auparavant été ajusté et conçu pour être facilement installé sur la page statique de ce dernier.

Spécification du widget de formulaire de contact

• 100% réactif et mobile friendly
• Aspect simple et élégant + facile à appliquer
• Notification prête d'envoi de messages (message de réussite, message d'échec et message de saisie)

Formulaire de contact de script (combinaison de scripts css, html et java)

<style scoped = "" type = "text / css">
#stlb {margin: auto; max-width: 100%;}
# ContactForm1_contact-form-name, # ContactForm1_contact-form-email {width: 100%; height: auto; margin: 5px 0; padding: 15px 0; background: #fff; color: # 444; frontière: solide 1px rgb (213) , 216, 220);}
# ContactForm1_contact-form-email-message {width: 100%; height: 200px; margin: 5px 0; padding: 15px 0; background: #fff; color: # 444; border: 1px solid rgb (213, 216, 220) ;}
# ContactForm1_contact-form-submit {float: right; background: # 404040; marge: auto; alignement vertical: milieu; curseur: pointeur; remplissage: 12px 20px; taille de la police: 14px; alignement du texte: centre; espacement des lettres : .5px; border: 0; width: 100%; max-width: 140px; border-radius: 3px; color: #fff; police-weight: 500; transition: toutes les facilités .2}
# ContactForm1_contact-form-submit: hover {background: # 00BE98;}
# ContactForm1_contact-form-error-message, # ContactForm1_contact-form-success-message {width: 100%; margin-top: 0px; background: # 404040; color: #fff; taille de la police: 13px; fonte-weight: 600 ; border-radius: 3px}
</ style>

<form id = "stlb" name = "contact-form">
<input id = "ContactForm1_contact-form-name" name = "name" espace réservé = "Name *" size = "30" type = "text" value = "" />
<input id = "ContactForm1_contact-form-email" name = "email" placeholder = "Email *" size = "30" type = "text" value = "" />
<textarea cols = "25" id = "ContactForm1_contact-form-email-message" name = "email-message" placeholder = "" rows = "5"> </ textarea>
<input id = "ContactForm1_contact-form-submit" type = "button" value = "Envoyer un message" />
<div style = "max-width: 222px; text-align: center; width: 100%;">
<div id = "ContactForm1_contact-form-error-message" ">
</ div>
<div id = "ContactForm1_contact-form-success-message">
</ div>
</ div>
</ form>
<script src = "https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type = "text / javascript"> </ script>
<script type = "text / javascript">
// <! [CDATA [
if } _WidgetManager._Init ('// www.blogger.com/rearrange?blogID\x3d7234936860206777062','//atomuu.blogspot.com','7234936860206777062');
_WidgetManager._RegisterWidget ('_ ContactFormView', nouveau _WidgetInfo ('ContactForm1', 'footer1', null, document.getElementById ('ContactForm1'), {'contactFormMessageSendingMsg': '<span style = "padding: 5px"> S ... . </ span> ',' contactFormMessageSentMsg ':' <span style = "padding: 5px 10px"> Votre message a été envoyé avec succès. Merci de nous avoir contacté </ span> ',' contactFormMessageNotSentMsg ':' <span style = "padding: 5px 10px"> Impossible d'envoyer le message. Veuillez réessayer ultérieurement. </ span> ',' contactFormInvalidEmailMsg ':' <span style = "padding: 5px 10px"> Une adresse email valide est requise. </ span > ',' contactFormEmptyMessageMsg ':' <span style = "padding: 5px 10px"> Le champ du message ne peut pas être vide. </ span> ',' title ':' Formulaire de contact ',' blogId ':' 7234936860206777062 ',' contactFormNameMsg ':' Nom ',' contactFormEmailMsg ':' Email ',' contactFormMessageMsg ':' Message ',' contactFormSendMsg ':' Envoyer ',' submitUrl ':' https://www.blogger.com/contact-form.do '},' display ModeFull '));
//]]>
</ script>

Les instructions

• Veuillez modifier le code marqué en gras rouge avec l'ID du site blogger et l'URL du site respectif.
• Modifiez également le message de notification texte indiqué en bleu si nécessaire.
• Placez tous les scripts de formulaire de contact css, html et java sur une seule page, comme décrit dans les étapes ci-dessus.
• Voir l'exemple de formulaire d'affichage "display" sur ce lien [Formulaire de contact de démonstration]

Remarque: votre code d'identification Blogger est visible dans la barre supérieure du navigateur, comme dans l'exemple suivant.

https://draft.blogger.com/blogger.g?blogID=7234936860206777062#editor/

Terminé, j'espère que ce tutoriel peut vous aider à créer une page "contactez-nous" sur votre site de blogueur. Suivez ce site de messagerie pour recevoir des notifications de nos derniers articles.

Thème Couleur Metag Tag Blogger

Balise méta Blogger de couleur de thème - Ce didacticiel aborde une méthode ou comment ajuster la couleur du thème du navigateur (Chrome, Firefox et Opera) avec le thème de blogueur associé à la méta-balise de couleur du thème. À l'ère d'Android, les navigateurs modernes ont pris en charge les réglages des couleurs de thème avec les sites Web à thème, notamment les sites de blogueurs. Peut-être avez-vous également remarqué que les sites géants tels que Facebook, YouTube et autres, accessibles via le navigateur Chrome, modifieront automatiquement la couleur de la barre d'adresse en fonction de la couleur de leurs modèles. L’ajustement ne se produit certainement pas, mais plutôt un thème de couleur de balise méta qui le régit. Nous allons maintenant le rendre similaire aux thèmes de blogueur en utilisant le "thème de méta couleur".

L'image ci-dessus est un exemple de site Web avant d'utiliser la couleur du méta-thème. Après l'utilisation de la couleur du méta-thème, un site Web équipé d'une couleur de méta-thème demandera au navigateur d'adapter l'apparence des couleurs au thème du site afin qu'il soit plus uniforme et plus magnifique.

Installation de la balise méta Couleur de thème sur Blogger

Fondamentalement, le navigateur explorera les couleurs sur le code HTML du site afin de pouvoir ajuster la couleur avec le modèle de site. Veuillez ajouter la couleur de thème de balise méta suivante au modèle html de votre site Web à l'emplacement exact du code <head> et </ head>, les méta suivantes. le tag.

<meta content = '# d32f2f' name = 'theme-color' />

Enregistrez le code méta ci-dessus et affichez les résultats via le ponel Android, faites attention au code "# d32f2f" et modifiez le code de couleur en fonction du code de couleur du modèle de site Web. La couleur du thème Meta prend en charge les navigateurs "appareils android" de Google Chrome, Firefox & Opera. La meilleure pratique consiste à modifier ou à ajuster la couleur du navigateur avec le site, en faisant correspondre (comme) le code de couleur à la couleur d'en-tête du site Web. Si le site utilise un menu supérieur, ajustez le code de couleur à la couleur du menu supérieur du site.

Remarque: La couleur de thème de balise Meta ci-dessus ne prend en charge que les navigateurs des appareils Google Chrome, Firefox et Opera sur les appareils Android. Si vous souhaitez appliquer la couleur de thème de balise méta qui prend en charge de nombreux périphériques et navigateurs, veuillez ajouter la couleur de méta-thème ci-dessous;

<! - Supportez Google Chrome, Firefox et Opera ->
<meta content = '# d32f2f' name = 'theme-color' />
<! - Supporte Windows Phone et Safari iOS ->
<meta content = '# d32f2f' name = 'msapplication-navbutton-color' />
<meta content = 'yes' name = 'apple-mobile-web-app-capable' />
<meta content = '# d32f2f' name = 'apple-mobile-web-app-status-bar-style' />

La couleur du thème de balise Meta est supérieure à la prise en charge de la personnalisation des couleurs de thème dans les navigateurs Google Chrome, Firefox et Opera sur les appareils Android, les navigateurs Windows Phone et iOS Safari. Pour soutenir les performances de la balise meta, vous devez utiliser le code de couleur "color hexadecimal".

Si le site Web utilise la plate-forme wordpress, n'hésitez pas à installer le code de couleur du méta-thème ci-dessus, car les balises méta ci-dessus ne sont pas spécifiques aux blogueurs, mais à toutes les plates-formes de sites Web. Vous pouvez en savoir plus sur cette couleur de méta-thème sur le développeur de Google [Ouvrir]. En plus de la couleur du thème, vous apprendrez également à définir la résolution de l'icône sur un appareil mobile (smartphone).

Telle est l'explication de la couleur du méta-thème blogueur et la ligne de conduite pour appliquer la couleur du thème de la balise méta sur blogger et wordpress. Si tout va bien utile et vous revoir, n'oubliez pas de suivre et de vous abonner.

Avantages et manières d'utiliser la balise DNS Prefetch

Avantages et manières d'utiliser les balises DNS Prefetch - Qu'est-ce que la prélecture DNS (Prefetching du système de noms de domaine)? DNS Prefetch est une méthode permettant d’accélérer le chargement de certains domaines marqués par des balises dns-prefetch sur une page Web. Le mécanisme DNS Prefetch donnera au navigateur l'ordre de terminer le plus tôt possible le plus tôt possible pour restituer chaque nom de domaine. Le navigateur s'en souviendra pendant un certain temps. Ainsi, lorsque les visiteurs navigueront automatiquement dans la page, le navigateur affichera les pages Web plus rapidement, car tous les liens externes contenant des tags dns. -prefetch est considéré comme étant entièrement chargé.

Compréhension simple de la prélecture DNS

Essentiellement, le navigateur chargera ou visitera tous les liens (hyperliens) trouvés sur les pages du site, ce qui, bien sûr, empêchera le navigateur de pouvoir afficher les pages Web au complet, de sorte que le comportement ne soit pas effectué par le navigateur de manière répétée, ce que le responsable du site doit ajouter. Dns-prefetch balises dans des sites HTML destinés à certains domaines.

Ainsi, le navigateur s'achèvera et rendra dès que possible une collection de liens externes lors de la première visite, tandis que lors de la deuxième visite ou de la page suivante, il n'aura pas à afficher la collection de liens marqués de balises dns-prefetch afin que les visiteurs puissent économiser environ 200 millisecondes.

Ce site utilise également des balises dns-prefetch pour accélérer le rendu de nos pages. Les balises dns-prefetch aident vraiment à améliorer les performances de chargement de cette page Web, mais il est très regrettable que la balise dns-prefetch ne fonctionne pas sur les anciens navigateurs. Actuellement, DNS Prefetch ne fonctionne que sur les navigateurs IE 9 et supérieurs, Google Chrome, Firefox version 3.5 et ultérieure et Safari version 5+.

Comment utiliser la balise DNS Prefetch sur un site Blogger

Pour utiliser les balises dns-prefetch de manière plus optimale sur les sites de blogger, je vous recommande vivement d'installer des balises dns-prefetch sur des domaines ou des liens permanents externes figurant sur les pages du site, par exemple des liens vers des images, des fichiers css externes et des scripts javascript externes, ainsi que des liens de base ou de base. les bases des tags dns-prefetch sur les sites de blogger.

<link href = '// www.blogger.com' rel = 'dns-prefetch' />
<link href = '// 1.bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// 3.bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// 4.bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// 2.bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// 28.2bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// www.google-analytics.com' rel = 'dns-prefetch' />
<link href = '// fonts.googleapis.com' rel = 'dns-prefetch' />
<link href = '// ajax.googleapis.com' rel = 'dns-prefetch' />
<link href = '// resources.blogblog.com' rel = 'dns-prefetch' />
<link href = '// feeds.feedburner.com' rel = 'dns-prefetch' />

Enregistrez le préfixe DNS dans la zone d'en-tête du site (entre les balises <head> et </ head>). Si, sur le site de Blogger, il existe des liens externes provenant d'autres ressources, veuillez ajouter la balise dns-prefetch au format suivant;

<link href = '// url-external' rel = 'dns-prefetch' />

Modifiez le texte url-external avec le lien cible et commencez toujours par la chaîne double "//". Sur la base des informations du projet Chrome, le navigateur se souviendra des 10 premiers domaines et commencera automatiquement à résoudre les noms de domaine dans la balise dns-prefetch au début du processus de démarrage. .

Si des annonces adsense sont présentes sur le site de blogueur, vous pouvez également ajouter des balises dns-prefetch comme suit:

<link href = '// pagead2.googlesyndication.com' rel = 'dns-prefetch' />
<link href = '// googleads.g.doubleclick.net' rel = 'dns-prefetch' />
<link href = '// tpc.googlesyndication.com' rel = 'dns-prefetch' />

Vous n'avez pas besoin d'ajouter toutes les balises dns-prefetch à tous les domaines (liens externes) présents sur le site. Sélectionnez des noms de domaine qui nécessitent un long temps de chargement. Vous trouverez ci-dessous un lien hypertexte pouvant figurer sur le site qui a été ajusté pour le tagup dns-prefetch.

<! - dns-prefetch Blogger ->
<link href = '// 1.bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// 28.2bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// 3.bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// 4.bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// 2.bp.blogspot.com' rel = 'dns-prefetch' />
<link href = '// www.blogger.com' rel = 'dns-prefetch' />
<! - dns-prefetch Google Analytics ->
<link href = '// www.google-analytics.com' rel = 'dns-prefetch' />
<! - dns-prefetch Google Services ->
<link href = '// themes.googleusercontent.com' rel = 'dns-prefetch' />
<link href = '// pagead2.googlesyndication.com' rel = 'dns-prefetch' />
<link href = '// googleads.g.doubleclick.net' rel = 'dns-prefetch' />
<link href = '// www.gstatic.com' rel = 'preconnect' />
<link href = '// www.googletagservices.com' rel = 'dns-prefetch' />
<link href = '// static.xx.fbcdn.net' rel = 'dns-prefetch' />
<link href = '// tpc.googlesyndication.com' rel = 'dns-prefetch' />
<link href = '// apis.google.com' rel = 'dns-prefetch' />
<! - dns-prefetch Bootstrap CDN ->
<link href = '// maxcdn.bootstrapcdn.com' rel = 'dns-prefetch' />
<! - dns-prefetch Google Fonts ->
<link href = '// fonts.googleapis.com' rel = 'dns-prefetch' />
<! - dns-prefetch Font Awesome ->
<link href = '// use.fontawesome.com' rel = 'dns-prefetch' />
<! - dns-prefetch Google CDN ->
<link href = '// ajax.googleapis.com' rel = 'dns-prefetch' />
<link href = '// resources.blogblog.com' rel = 'dns-prefetch' />
<link href = '// feeds.feedburner.com' rel = 'dns-prefetch' />
<! - dns-prefetch Microsoft CDN ->
<link href = '// ajax.microsoft.com' rel = 'dns-prefetch' />
<link href = '// ajax.aspnetcdn.com' rel = 'dns-prefetch' />
<! - dns-prefetch CDN JS ->
<link href = '// cdnjs.cloudflare.com' rel = 'dns-prefetch' />
<! - dns-prefetch Vimeo ->
<link href = '// player.vimeo.com' rel = 'dns-prefetch' />
<! - dns-prefetch Amazon S3 ->
<link href = '// s3.amazonaws.com' rel = 'dns-prefetch' />
<! - dns-prefetch BuySellads ->
<link href = '// s3.buysellads.com' rel = 'dns-prefetch' />
<link href = '// stats.buysellads.com' rel = 'dns-prefetch' />
<link href = '// cdn.adpacks' rel = 'dns-prefetch' />
<! - Dns-prefetch réseaux sociaux Github, YouTube, Facebook, Twitter, Pinterest, Linkedin et Google+ ->
<link href = '// github.com' rel = 'dns-prefetch' />
<link href = '// www.facebook.com' rel = 'dns-prefetch' />
<link href = '// connect.facebook.net' rel = 'dns-prefetch' />
<link href = '// plus.google.com' rel = 'dns-prefetch' />
<link href = '// twitter.com' rel = 'dns-prefetch' />
<link href = '// platform.twitter.com' rel = 'dns-prefetch' />
<link href = '// syndication.twitter.com' rel = 'dns-prefetch' />
<link href = '// r.twimg.com' rel = 'dns-prefetch' />
<link href = 'http://p.twitter.com' rel = 'dns-prefetch' />
<link href = 'http://cdn.api.twitter.com' rel = 'dns-prefetch' />
<link href = '// www.youtube.com' rel = 'dns-prefetch' />
<link href = '// www.pinterest.com' rel = 'dns-prefetch' />
<link href = '// www.linkedin.com' rel = 'dns-prefetch' />

Ainsi, l'explication et l'utilisation de la balise dns-prefetch (Domain Name System Prefetching) sur le site Web, en particulier sur le site blogger, vous permettent de répliquer l'utilisation de la balise dns-prefetch en regardant la source de ce site en appuyant sur le bouton Ctrl + U de la page d'accueil du site électricien Batam ou d'autres sites. qui pourrait utiliser dns-prefetch pour accélérer le chargement ou le chargement de leurs pages. j'espère que c'est utile et ajoute plus de connaissances et est désolé.

Comment voir le nombre de blogueurs seuls

Comment voir le nombre d'abonnés au blog seul - Un site de blog populaire compte certainement un grand nombre d'abonnés (abonnés), des centaines voire des milliers d'abonnés. Savez-vous que vous êtes un adepte du site blogueur que vous recevez de Feedburner ou mieux connu sous le nom de Suivi par courrier électronique ou Flux RSS. La question est quel est le nombre d'adeptes ou d'adeptes de votre site de blog actuel? Pour le savoir, voyons comment voir le nombre d'adeptes des sites de blogueurs obtenus à partir de Google feedburner (suivi du widget de messagerie électronique) ci-dessous;

Comment connaître le nombre d'adeptes de flux RSS

1. Connectez-vous d'abord au compte G-mail, puis
2. Visitez la page du tableau de bord Feedburner
3. Vous serez dirigé vers le tableau de bord RSS Feed (La page où vous voyez les statistiques et le nombre d'adeptes du site du blog)

Comme indiqué dans l'exemple suivant.

Description:

• La photo de gauche montre une liste de sites feedburner et le nombre de chaque suiveur de fil ou de blogueur.
• La photo de droite est une statistique de flux qui affiche le nombre de clics ou de vues générés par des flux ou des envois de messages envoyés aux abonnés du courrier électronique du site du blog.

Sur le tableau de bord de Feedburner (à gauche), il est connu que le nombre d'abonnés au blogging est de 289 abonnés. Dans le flux de statistiques (à droite), seul le nombre d'abonnés est de 83 abonnés (en moyenne), soit 289 abonnés actifs (voir flux). 83 suiveurs.

Maintenant, les amis blogueurs savent déjà comment connaître le nombre d'adeptes sur votre propre site de blog et lisent les statistiques sur le site de flux RSS ou Feedburner. Essayez donc de vérifier le nombre d'adeptes de votre site de blog pour être plus enthousiaste quant à la création de contenu (articles).

Comment obtenir des suiveurs de site Web

1. Installez le widget suivi par email sur le site du blog
2. Placez le widget de suivi dans une position stratégique (visible depuis n'importe quelle page)
3. Rendre le contenu (articles) utile (informatif).

Les contenus informatifs tels que le contenu des connaissances et les conseils et astuces usuels incitent plus facilement les lecteurs à suivre un site. Les visiteurs de sites de blogs seront donc ravis de suivre ou de suivre les sites de blogs par e-mail. C'est ainsi que j'ai expliqué RSS Feedburner, en particulier comment connaître le nombre d'abonnés au blog et consulter les statistiques de ses abonnés. Si tout va bien utile et augmenter les connaissances pour moi et tous les amis blogueurs. N'oubliez pas de suivre les courriels de ce site pour obtenir des informations sur Internet, les blogueurs, les ordinateurs et les sciences électriques (électricité).

Création d'une liste de couleurs de conception de matériau sur le blog

Création de listes de couleurs pour la conception de matériel sur des blogs - Le matériau de conception de couleur est une liste ou une liste de codes de couleur (html et css) couramment utilisée pour la conception de sites Web. Le matériau de conception de couleurs était auparavant plus convivial, appelé hexadécimal de couleur formats de couleur tels que # FF0000 ou RGB (255, 0, 0). Dans ce tutoriel, je partagerai la composition du script et la manière de créer une liste de matériaux de conception de couleurs sur le site de Blogger. Les avantages de créer une liste / une liste de couleurs sur les sites des blogueurs sont les suivants:

• Facilitez la tâche des gestionnaires de site et des maîtres blogueurs pour trouver les codes de couleur qui seront utilisés pour la conception du site ou pour la création de modèles.
• Ramener les visiteurs sur le site lui-même (installé ou fournir une liste de codes de couleur html)

Les concepteurs de modèles ou les blogueurs qui modifient la pertinence de leur site consultent généralement des sites fournissant un outil ou une liste de codes couleur hexadécimaux. Vous pouvez imaginer le nombre de visites sur votre site si les blogueurs savent que vos outils de conception de site sont également disponibles. Langung a abordé le sujet de la discussion, à savoir la création d’une liste de matériaux de conception de couleurs sur le blog.

1. Téléchargez le script de couleurs de conception des matériaux ici
2. Puis ouvrez le script ou ouvrez avec le bloc-notes
3. Sélectionner toutes les couleurs de conception de matériel de script et copier
4. Accédez à Blogger et créez une nouvelle page ou une nouvelle page.
5. Sélectionnez le mode html au lieu de composer
6. Collez le script dans le matériau de conception des couleurs et publiez-le.

Examinez l'exemple d'image ci-dessous pour vous assurer que les étapes permettent de créer une liste / un matériau de conception pour les couleurs.

Une fois que la liste ou la liste des matériaux de conception des couleurs a été créée et publiée avec succès, vous pouvez l'afficher dans la navigation sur le site afin que les visiteurs sachent que votre site fournit une liste des matériaux de conception des couleurs, comme j'ai affiché l'outil d'analyse syntaxique html dans ce menu supérieur.

Pour savoir comment "répertorier les couleurs de conception des matériaux sur le blog", veuillez vous reporter aux couleurs de conception des matériaux DEMO avant de l'appliquer. En plus des spécifications complètes suivantes:

Spécifications de conception des couleurs des matériaux

• 100% réactif
• Prêt sélecteur automatique et copie
• Il y a 256 couleurs différentes disponibles

Si tout va bien utile, et à bientôt, abonnez-vous et suivez-nous par courriel pour obtenir d'autres outils Web et des conseils intéressants sur les blogueurs et les gains en ligne, blogues heureux ...!

Comment réduire la charge de chargement des annonces Adsense

Comment réduire la charge du chargement des annonces Adsense - Dans chaque unité d'instructions adsense, le script est équipé d'un fichier javascript externe [<async src script = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </ script>] et si Sur un site Web installé, 4 espaces publicitaires installent également 4 scripts JavaScript AdSense externes. Cela ralentira certainement le chargement du site, car le navigateur visitera et chargera tous les fichiers JavaScript AdSense externes sans exception. Pour surmonter la lenteur du chargement, de nombreuses astuces peuvent être appliquées à un site Web sans enfreindre le droit applicable à l'éditeur adasnse.

Comment réduire la charge des annonces Adsense Comment réduire la charge du chargement des annonces Adsense

Comment réduire la charge de chargement des annonces (annonces)

Avant d’aborder le sujet de discussion et le didacticiel "Réduire la charge de chargement des annonces adsense", je vous recommande vivement de tester la vitesse de chargement du site Web avec l’analyseur de référencement + la vitesse via seocentro. Notez ensuite le score de vitesse de chargement et appliquez la méthode suivante. Après cela, veuillez réessayer le chargement du score de vitesse sur votre site Web.

Commencez par installer les instructions complètes relatives aux annonces automatiques liées aux unités sous la balise <head> html site.

exemple:

<tête>
<async src script = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" </ script>
<script>
(adsbygoogle = window.adsbygoogle || []). push ({
google_ad_client: "ca-pub-4209xxxxxxxxx",
enable_page_level_ads: true
});
</ script>

Ensuite, installez tous les autres blocs d'annonces sans utiliser le code javascript adsense externe <<async src script = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </ script> ", afin qu'il ressemble à la référence ci-dessous.

<ins class = "adsbygoogle"
style = "display: block"
data-ad-client = "ca-pub-42094xxxxxxxx"
data-ad-slot = "9872xxxxx"
data-ad-format = "auto"> </ ins>
<script>
(adsbygoogle = window.adsbygoogle || []). push ({});
</ script>

Après la finale, consultez le site et consultez quelques pages du site pour déterminer si toutes les annonces installées sont diffusées (fonctionnent pleinement). Si un espace publicitaire n'apparaît pas bien qu'il ait été actualisé, déplacez l'instruction adsense javascript externe vers le bas du site html, au-dessus de l'épilog body = </ body>.

Examinez et testez la vitesse de chargement du site Web. Outre les méthodes ci-dessus, il existe encore d'autres méthodes permettant de réduire la charge de chargement du site en raison de la diffusion d'annonces externes javascript, à la fois du code JavaScript externe d'Adsense et des annonces non Google, qui utilisent également du JavaScript externe en ajoutant du JavaScript interne. , l’objectif est de gérer du code JavaScript externe à partir d’annonces (Google et non Google) semblables à celles que j’applique à ce site, et que nous complétons ci-après;

<script type = 'text / javascript'>
(function () {var ad = document.createElement ('script'); ad.type = 'text / javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/ js / adsbygoogle.js '; var sc = document.getElementsByTagName (' script ') [0]; sc.parentNode.insertBefore (ad, sc);}) ();
</ script>

Remarque: Installez les instructions ci-dessus dans le site html dans la zone body (entre <body> ... et ... </ body>).

En ajoutant un script interne ci-dessus en tant que gestionnaire de script externe, les performances du navigateur en matière de chargement de tous les scripts de site externes seront plus faciles. Cette méthode similaire est très efficace pour réduire la charge de chargement des annonces et accélérer le processus de chargement des pages du site.

Si vous utilisez une plate-forme publicitaire autre que adsense, veuillez remplacer le lien javascript externe adsense marqué "vert" par le lien javascript externe à votre plate-forme publicitaire.

En fait, les deux méthodes ci-dessus sont principalement les mêmes, mais selon l'analyse, le site est chargé un peu plus vite et le score de rapidité augmente de 5 points si vous utilisez la deuxième méthode "utilisation d'un gestionnaire de javascript externe" par rapport à la première méthode "installation d'une annonce externe javascript" dans la zone du corps ou la tête. Ainsi, le didacticiel et des explications sur la manière de réduire la charge de chargement des annonces adsense et des annonces autres que Google. J'espère utile et à bientôt.

Meta Tags icône de site Web

Icône de site Web balises méta - Qu'est-ce que l'icône de balises méta de site Web? l’icône de balise méta wemsite est une méthode ou un moyen d’ajouter une icône de site Web aux onglets du navigateur et à d’autres endroits, avant la présence des smartphones et de nombreux types de navigateurs modernes, chaque site Web, comme un site de blogueur, utilise généralement une ligne de balises favicon.ico "<link href = '/ favicon. ico 'rel =' icon 'tapez =' image / x-icon '/> "pour ajouter l'icône de leur site Web à l'onglet du navigateur. Mais à présent, l’icône de balise méta comme celle-ci n’est pas maximale, même dans certains navigateurs. Pour que l’icône du site Web, en particulier celle du site blogueur, apparaisse dans de nombreux types de navigateurs, nous devons ajouter un type d’icône de balise méta avec une taille de site Web ou une taille d’icône différente.

À cette occasion, je partagerai l’icône de balise méta afin de faciliter l’apparition de l’icône ou du logo du site dans de nombreux navigateurs modernes et dans de nombreux endroits tels que les onglets de navigateur, les pages d’accueil, l’historique, l’histoire récente, les favoris (sites fréquemment visités) et d’autres, tels que vu dans l'exemple ci-dessous;

Si l'icône de l'application sur le site de Blogger utilise l'ancienne méthode, les navigateurs modernes ne peuvent pas afficher l'image de l'icône complète et ne sont marqués que par les initiales "B" ou par Blogger. Si l'application de l'icône du site utilise une nouvelle méthode, l'icône de l'image sera affichée intégralement en haute résolution. Le site est donc plus facilement reconnaissable, comme le montre la photo de droite.

Pour afficher l'icône du site Web de manière optimale dans de nombreux types de navigateurs, nous devons ajouter plusieurs versions de l'icône de balise méta ci-dessous dans la balise <head> du site Web, avec la taille ou la taille de l'icône pour empêcher les modifications d'échelle automatiques.

<rel link = "apple-touch-icon" tailles = "72x72" href = "url-icon-72x72.png">
<rel link = "apple-touch-icon" tailles = "76x76" href = "url-icon-76x76.png">
<rel link = "apple-touch-icon" tailles = "114x114" href = "url-icon-114x114.png">
<rel link = "apple-touch-icon" tailles = "120x120" href = "url-icon-120x120.png">
<rel link = "apple-touch-icon" tailles = "144x144" href = "url-icon-144x144.png">
<rel link = "apple-touch-icon" tailles = "152x152" href = "url-icon-152x152.png">
<rel link = "apple-touch-icon" tailles = "180x180" href = "url-icon-180x180.png">
<link rel = "icon" type = "image / png" tailles = "192x192" href = "url-icon-192x192.png">
<link rel = "icon" type = "image / png" tailles = "32x32" href = "url-icon-32x32.png">
<link rel = "icon" type = "image / png" tailles = "96x96" href = "url-icon-96x96.png">
<meta name = "msapplication-TileColor" content = "# ffffff">
<meta name = "msapplication-TileImage" content = "url-icon-144x144.png">

Remarque: toutes les icônes de balises méta ne doivent pas nécessairement être ajoutées au site Web. Vous pouvez uniquement choisir quelques balises méta pour représenter les navigateurs les plus couramment utilisés dans la zone cible du site. Les types de fichiers utilisés sont des fichiers png "icon.png".

Ce site Web, par exemple, utilise uniquement les 5 icônes de balises méta les plus utilisées pour prendre en charge les principaux navigateurs tels que Chrome, Firefox OS, Safari et Opera.

Application de l'icône de balise méta sur les sites Blogger

Ajoutez l'icône de balise Meta ci-dessous dans la zone <head> du site blogger, placez plus clairement le lien de la balise entre le code <head> et </ head> html sur votre site blogger, puis remplacez la clôture "#" par url_icon ou le logo du site.

<link href = '#' rel = 'icon' tailles = '192x192' />
<link href = '#' rel = 'apple-touch-icon' />
<link href = '#' rel = 'apple-touch-icon' tailles = '152x152' />
<link href = '#' rel = 'apple-touch-icon' tailles = '180x180' />
<link href = '#' rel = 'apple-touch-icon' tailles = '167x167' />

Réglage de la taille des données d'image

Pour ajuster la taille ou la taille icon.png à la taille spécifiée dans l'icône de balise meta (lien), vous n'avez pas besoin de créer et de télécharger de nombreuses images avec des tailles différentes. Il suffit de charger un (1) carré icon.png, par exemple: 5 cm x 5 cm avec une taille de données inférieure à 350 Ko, puis icon.png, nous le compresserons à l’aide de l’image de l’URL du blogspot pour correspondre à la taille spécifiée dans l’icône de balise méta. Sachez seulement que l’image URL de blogspot peut être utilisée comme un compresseur de taille d’image, faites attention à l’image d’URL ci-dessous.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBCMhNNulPafg0Hp9F12_eXfbptq07XMx-SE3YZ_H0SqW3y4f7pRrQ1OjE2vJtHUslDTDNJdjBE1NPNvw5DNQdHmmdoiD0TGJkIrKNwgB3isDV56M8TgH1Ohhqr9bQMx_00uzELstv5cc/s470/STLB.png

Modifiez s470 avec la taille de chaque balise d'icône, par exemple s192, s152, s180 et s167, ainsi la taille ou la taille du mage "icon.png" sera redimensionnée en fonction de la taille de l'icône de balise. Pour obtenir la taille normale icon.png, supprimez / s470 de l’image URL. Pour plus de détails, rendez-vous sur le site "Accueil", puis appuyez sur Ctrl + U pour savoir comment appliquer l’icône de la balise au site de Blogger.

Une fois la balise icon appliquée, veuillez consulter ou consulter votre site via un smartphone (Android ou Apple) avec les navigateurs Chrome, Opera et Safari, ainsi que consulter mon site si vous êtes un utilisateur d'iPhone.

Quelle est l'importance de l'icône de balise pour les sites Blogger?

L’icône ou le logo du site ajoutera de la valeur / du niveau au site lui-même. En outre, l’icône / le logo du site tend également à ajouter à la netteté du site afin de le rendre plus facile à reconnaître, l’icône ou le logo du site est également une marque ou un logo. décrire le contenu du produit ou du site Web. Les gens sont généralement plus susceptibles de reconnaître ou de mémoriser une marque que l’URL du site. Dans SEO (Serch Engine Optimation) Checker, un site Web qui a sa propre valeur et son attrait pour amener les visiteurs sur un site Web.

Si l'exploration est approfondie, l'optimisation de l'icône ou du logo sur le site Web peut être classée dans l'optimisation SEO hors page, vous pouvez en apprendre davantage sur les balises icon.png et sur la connaissance des navigateurs modernes sur les pages Google Develover et les développeurs Apple pour éviter les erreurs ou utiliser les balises Favicon Generator. pour obtenir la taille ou la taille de l’icône du site Web dans la plupart des navigateurs actuels.

Tout comme l'explication et comment appliquer la balise icon website sur le site de blogger, j'espère que cet article vous fournira des connaissances ou une compréhension de l'installation d'une icône de site Web, de la chance et du succès. Je ne m'ennuie pas de rappeler Follow and Subscribe sur ce site pour obtenir des informations à jour sur les blogs.

En savoir plus sur Google Sites

Apprendre à connaître les sites Google est plus proche - les sites Google sont la plate-forme de création Web fournie gratuitement par Google. Google a donc créé Google Drive en tant que site Web d’hébergement de fichiers, créé via la plate-forme de sites Google. Avant que les célèbres sites Google de cette plate-forme ne s'appellent jotSpot, qui était parfait en octobre 2006, jotSpot a été acquis par Google pour remplacer Google Page Creator. Maintenant "2018" Google a partagé la technologie sur sa plate-forme de création Web, "Google Sites" est devenu plus professionnel avec la fonctionnalité "dans un nouveau site" et une méthode très simple d'utilisation de sites Web pour créer un puzzle.

Les sites Google, à savoir la plate-forme de création Web fournie par Google à ses utilisateurs, connaissent Google Sites.

Google Sites

Quels sont les avantages et les utilisations des sites Google? La fonction principale des sites Google est de créer des sites Web de lutte civile (petits et moyens), chacun d'entre eux disposant d'un site Web. L'objectif est que chaque entreprise puisse facilement partager des activités et créer sa promotion de produit via son site Web.

Plateforme de support de Google Sites

Comme expliqué ci-dessus, Google a créé Google Drive en tant que site Web d'hébergement de fichiers créé via la plate-forme Sites de Google, ce qui permet aux utilisateurs de joindre tous les fichiers et fonctionnalités disponibles sur les lecteurs Google, tels que;

1. Google Docs (document)
2. Goole forme (forme)
3. Google Spreadsheet
4. Google Agenda et support
5. YouTube et Picasa

Ainsi, les utilisateurs seront plus flexibles dans la promotion de leurs produits / entreprises par le biais de vidéos, d’images, d’images de diapositives, d’adresses via Google Map sur une seule page Web. Bien sûr, cela minimisera ou réduira le coût de la promotion de votre produit / entreprise à la place! Vous trouverez ci-dessous un certain nombre de modèles de conception de sites Web pour la lutte civile auxquels vous pouvez faire référence avant de créer votre site Web professionnel / professionnel.

1. Exemple de site Web d'une entreprise de services
2. Exemple de site Web personnel
3. Exemple de site Web de restaurant / Caffe, et
4. Exemple de site de boutique / boutique

Adresse du site et exploration du site Web de Google Sites Index

Si en général l'adresse / l'URL ou le domaine d'un site Web est www.namabisnis.com, il est un peu différent de l'URL du site Web via Google Sites, mais si vous vous asseyez dans un cas de parayapan (analyse ou index), vous n'avez pas à vous inquiéter car les sites Web créés à partir de sites Google peuvent dans google (dans l'index) très bien. Exemple d'URL de site Web via des sites Google:

1. https://sites.google.com/view/name-business/beranda (page d'accueil du nouveau site)
2. https://sites.google.com/site/name-usaha/beranda (Accueil Sites classiques)
3. https://sites.google.com/view ou site / produit ou à propos, contact, galerie, etc. (URL de la page)

Eh bien, à partir de la clarification et du schéma ci-dessus, je pense que vous avez hâte de commencer à créer un site Web professionnel ou votre lutte contre les sites Google. Tout le monde peut créer un site Web sans coder jquery, html et css à l'aide de sites Google. Voir la section complète "Comment créer des sites Web à partir de sites Google".

Ainsi, la clarification du discours sur les sites Google "Apprendre à connaître les sites Google de plus près" suit ce site pour obtenir les dernières informations / articles sur les sites Google et des astuces d'utilisation que l'administrateur va approfondir dans le futur. A bientôt et toujours réussi.

Définition de l'anti-copie, coller la version complète

Paramètres complets de copie anti-copie version complète - Dans le monde numérique, de nombreux types de pâte anti-copie peuvent être utilisés pour protéger le contenu du site contre le plagiat (fabricant de pâte-collé). Mais installer un anti-copie coller va absolument rendre les visiteurs du site énervés, car ils ne peuvent pas citer le texte requis. Alors maintenant, je vais partager une colle anti-copie qui est plus flexible et peut être définie pour être inactive dans certaines parties. C'est autant que cet article, j'ai donné le titre complet anti-copier coller. Pour plus de détails, consultez la démo anti-copie intégrale anti-copie (anti-copie partielle).

Les avantages de cette version complète du collage anti-copie sont qu’elle ne charge pas le chargement du site, n’utilise pas de javascript externe (tiers) et peut être ajustée (flexible).

Comment installer la version complète Anti Copy Paste

Ajoutez ou enregistrez le code CSS anti-copie ci-dessous dans la zone CSS du site. Si vous utilisez la plate-forme Blogger, veuillez placer le code juste au-dessus du code]]> </ b: skin>.

.post-body {-webkit-touch-callout: aucun; -khtml-user-select: aucun; -moz-user-select: -moz-none; -ms-user-select: none; sélection de l'utilisateur: aucune; text-align: justifier;}

Le code anti-coller coller ci-dessus désactive le sélecteur de texte et un clic droit de la souris sur toutes les parties du site. Ensuite, pour désactiver le collage anti-copie dans certaines parties, veuillez ajouter le code CSS suivant et le positionner au-dessus du code]]> </ b: skin>.

blockquote, pre, b {-webkit-touch-callout: text; -khtml-user-select: text; -moz-user-select: texte; -ms-user-select: text; sélection de l'utilisateur: texte;}

Le code sert à désactiver le collage anti-copie en trois parties, à savoir la zone avec blockquote, la zone de pré-code (zone de code) et le texte en gras. Dans cette étape, la partie anti-copie collée est déjà installée et, pour la rendre plus intéressante, nous pouvons ajouter une navigation (sélecteur d’informations et copie) à la pâte anti-copie. Exemple d'information sélecteur et copie.

Pour créer un sélecteur d'informations comme dans l'exemple ci-dessus, ajoutez le code CSS ci-dessous et positionnez-le juste au-dessus du code]]> </ b: skin>.

b {position: relative; couleur: # 404040;}
b: before {position: absolute; content: 'DOUBLE CLICK TO SELECT | UTILISER CTRL + C POUR COPIER '; affichage: tableau; bas: 23px; gauche: 0; fond: # 4c4c4c; couleur: #fff; remplissage: 4px; bordure-rayon: 2px; taille de police: 75%; hauteur de trait : 1; opacité: 0; visibilité: cachée; transformation: échelle (0.8); indice z: 2; transition: toutes les .3s;}
b: survol: avant {transformer: échelle (1.0); opacité: 1; visibilité: visible; transition: tous .3s}

Le code affichera le sélecteur d'informations dans la section de texte en gras s'il est ignoré par la souris. Pour que les visiteurs du site sachent quelles parties peuvent être copiées et non. Enfin, enregistrez le modèle pour mettre fin à cette version complète de l'étape d'installation de l'anti-copier coller.

Ajout:

Si vous sentez toujours moins, la version complète anti-copie coller ci-dessus peut toujours être combinée avec un script anti-CTRL + U et un script anti-CTRL + P, en particulier pour les scripts anti-Ctrl + P, il n'est pas recommandé, car cela affectera le référencement du site. Je pense que la version complète anti-copie coller ci-dessus est suffisante pour déranger les plagiaires.

J'espère utile et bonne chance.

Vidéo Youtube intégrée réactive

Incorporer Youtube Video Responsive - Comment intégrer des vidéos youtube "intégrées" à un site Web pour être réactif? En gros, le code intégré "iframe" pour les vidéos youtube est très réactif sur de nombreuses tailles d'écran, mais le problème si vous utilisez le code incorporé youtube par défaut est généralement noir ou espace. barre au-dessus et au-dessous de la vidéo lorsqu’elle est visionnée sur un écran plus petit, tel qu’un appareil mobile.

Donc, pour surmonter ce problème, je vais partager une combinaison simple entre javascript, jquery, htlm et css, qui sert à éliminer les barres d'espace ou noires et à rendre l'affichage iframe de vidéos youtube plus réactif lors de l'intégration "embed" sur les pages Web. Voici le code youtube responsive jquery embed.

<script type = 'text / javascript'>
// <! [CDATA [
$ (document) .ready (fonction () {
$ ('iframe [src * = "youtube.com"] "). css ({" width ":" 100% "," height ":" 100% "," position ":" absolu "," haut ": "0", "left": "0"});
$ ('iframe [src * = "youtube.com"]')
.wrap ('<div style = "height: 0; width: 100%; position: relative; margin: 0 auto; padding-bottom: 56.25%; débordement: hidden"> </ div>');
$ ('iframe [src * = "youtube.com"] "). each (function () {
$ (this) .attr ("src")
});
});
//]]>
</ script>

Copiez et enregistrez le code de requête. Intégrez youtube responsive à la droite du tag </ body> dans le code HTML de votre site Web. le script / jquery gérera et ajustera les vidéos yrr de iframe youtube rapidement sans laisser d'espace ni de barre au-dessus et en dessous du vodeo youtube.

Pour son utilisation est très simple, après avoir enregistré le code jQuery dans la zone de corps ou la balise </ body> sur le site html, le code par défaut incorporer youtube peut être installé dans le message sans modifier le code "incorporé", mais la fonctionnalité de lecture automatique des vidéos doit être supprimée. tout d'abord, l'exemple suivant;

Le code par défaut youtube

<iframe width = "854" height = "480" src = "https://www.youtube.com/embed/Wwl1ZuLG80o" frameborder = "0" allow = "autoplay; encrypted-media" allowfullscreen> </ iframe>

Supprimez ensuite allow = "autoplay; encrypted-media" afin que la vidéo ne soit pas lue automatiquement, de sorte qu'elle devienne comme ceci;

<iframe width = "854" height = "480" src = "https://www.youtube.com/embed/Wwl1ZuLG80o" frameborder = "0" allowfullscreen> </ iframe>

Les paramètres de largeur et de hauteur de la vidéo iframe sur le code youtube emebed ne doivent pas être modifiés, car jquery gérera l’affichage des vidéos yrr iframe avec une grande responsabilité. Voir la démo dans la vidéo ci-dessous;

L'affichage ou l'affichage de la vidéo iframe ci-dessus a utilisé jquery pour définir la réponse. Il n'y a donc pas de barres noires (barre d'espace noire) visibles au-dessus ou au-dessous de la vidéo. Il y a quelque temps, j'ai expliqué comment retarder la sélection des vidéos yrrame iframe sur youtube. Dans cet article, je n'ai délibérément pas utilisé cette iframe sensible pour montrer la différence entre l'utilisation de jquery iframe réactif et de la technique de vérification différée [Check Here], bien que les deux scripts soient réellement utilisés. / defer iframe et jquery iframe reponsive javascript peuvent être combinés en une fonction à deux fonctions, à savoir affichage et accélération.

Donc, le tutoriel sur la façon de rendre responsive et 100% plein écran iframe youtube, espérons que ce script "responsive Embed youtube video" soit utile et ajoute à nos connaissances sur le codage et les blogs, je vous verrai de nouveau et vous remercie de votre visite.

Comment faire un bouton Suivre sur un blog

Comment créer un bouton de suivi sur un blog - Le bouton de suivi est l'un des widgets importants à installer sur un site de blog. Le bouton de suivi des blogueurs est souvent appelé une fonction rejoindre notre site (rejoindre ce site) comme une navigation qui permet aux visiteurs de suivre facilement les sites qu'ils aiment. Dans ce didacticiel, je vais expliquer comment faire en sorte que Blogger suive les boutons pouvant être placés dans différentes mises en page, comme ci-dessus la colonne de commentaires, la barre latérale, le menu de navigation et le bouton de suivi du message.

La méthode que j'utilise pour faire le bouton suivre est d'utiliser le lien de suivi qui se trouve sur les abonnés du widget (rejoindre ce site), ainsi le bouton suivant sera plus convivial et plus facile à appliquer. Il vous suffit de vous rendre dans le didacticiel pour créer le bouton de suivi de blogueur. La première chose à faire est de configurer un lien de site de blog Follow + id. Voir l'exemple ci-dessous.

https://www.blogger.com/follow.g?blogID=7234936860206777062

Le numéro d'identification marqué en gras est le numéro d'identification de mon site de blog. Merci de changer avec "l'identifiant" de chaque site de blog. Pour obtenir ou voir le "identifiant" du site de blog, connectez-vous à blogger, choisissez l'un des sites si vous avez plusieurs sites de blog. Ensuite, regardez l'adresse de la barre d'adresse de votre site de blog.

Une fois le lien suivi du site préparé, installez le lien suivant vers la présentation ou l’emplacement souhaité et affichez-le comme un bouton suivi (rejoignez-nous).

Installer le bouton Suivre en haut de la colonne de commentaires

1. Connectez-vous à blogger> Modèle> Modifier le code HTML
2. Recherchez le code de fermeture CSS qui est]]> </ b: skin>
3. Ajoutez le code CSS suivant juste au-dessus du code]]> </ b: skin>

.comments .rightx {font-size: 12px; position: absolute; $ endSide: 0; top: 0; hauteur de la ligne: 22px; max-height: 22px; remplissage: 4px 0 0 4px; margin- $ endSide: 0; background-color: # 333333; débordement: masqué; affichage: bloc;}
.comments .rightx a {display: inline-block; min-width: 75px; margin- $ endSide: 0; background-color: # 333333; text-align: center; color: #ffffff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; curseur: pointeur; décoration de texte: aucune; transformation de texte: majuscule;}

Enregistrez le modèle, puis recherchez le code <h4 id = 'commentaire-post-message'> ou <h4 id = 'commentaire-post-message'> <data: postCommentMsg /> </ h4> et remplacez-le par le code ci-dessous.

<h4 id = 'comment-post-message'>
<span class = 'subscr'> <data: postCommentMsg /> </ span>
<span class = 'rightx'> <b: if cond = 'data: top.commentLabel'>
<a href='https://www.blogger.com/follow.g?blogID=7234936860206777062'> Rejoignez-nous </a>
</ b: si>
</ span>
</ h4>

Changez le texte "Rejoignez-nous" en suivant Suivre ou Abonnez-vous selon vos goûts et changez le numéro d’identité "6093713042691745392" avec votre propre identifiant de site de blog. Enregistrez le modèle et affichez les résultats. Le bouton suivant apparaîtra au-dessus de la colonne de commentaire, comme indiqué dans l'exemple ci-dessous.

Remarque: <h4 id = 'comment-post-message'> <data: postCommentMsg /> </ h4> est un code "commentaire de message" unique et constitue le code par défaut pour les commentaires par défaut du blogueur. Si, précédemment, votre modèle de site de blog a été modifié ou utilisé avec 3 systèmes de commentaires (blogger-facebook-disqus), veuillez regarder l'exemple suivant [Cliquez sur Télécharger]

Ajouter un bouton Suivre dans le menu de navigation

<nav class = 'naviy' id = 'nav'>
<ul class = 'sf-menu' id = 'menunav'>
<li> <a href='add_url'> À propos de </a> </ li>
<li> <a href='add_url'> Contact </a> </ li>
<li> <a href='https://www.blogger.com/follow.g?blogID=7234936860206777062'> Rejoindre ce site </a> </ li>
</ ul>
</ nav>

Créer un bouton Suivre dans la barre latérale

1. Connectez-vous à Blogger> Mise en page> Ajouter un widget HTML
2. Ajoutez le code suivant puis enregistrez

<button onclick = "window.location = 'https: //www.blogger.com/follow.g? blogID = 6093713042691745392'" style = "couleur de fond: orange; couleur: blanc; hauteur: 30px; largeur: 201px; "> <b> Suivez-nous </ b> </ button>

Modifiez l'identifiant du blog et la couleur du bouton en fonction de vos besoins.

Ajouter un bouton Suivre dans un message

Pour ajouter un bouton Suivre dans l'article (article), la méthode utilisée est en fait la même que celle permettant de créer un bouton Suivre dans la barre latérale, c'est-à-dire en ajoutant un bouton d'élément au lien blog suivant. Vous pouvez essayer différentes variantes de boutons, comme dans l'exemple suivant.

<a href="https://www.blogger.com/follow.g?blogID=7234936860206777062" target="_blank"> <button> <b> Inscrivez-moi </ b> </ button> </a>

Voilà un certain nombre de façons de créer un bouton de suivi sur un blog (site blogueur), qui peut être ajusté et placé sur plusieurs mises en page. Merci de travailler dessus ou d'essayer votre propre expérience avec le lien de suivi de blogueur. Cette méthode peut également être appliquée aux sites de blog qui ont supprimé css bundlle (optimisation des aperçus vitesse par page), car généralement, la suppression de bundles css entraîne généralement le dysfonctionnement de certains widgets de blogueur, y compris les suiveurs de widgets.

Avantages:

1. Modifiez les abonnés du widget (rejoignez ce site) avec le bouton Suivre, cela ne vous charge pas du tout de charger le site.
2. Les boutons Suivre peuvent être placés à de nombreux endroits, notamment au-dessus de la colonne de commentaires, de la barre latérale, du menu de navigation, dans les publications de blogger et autres.
3. Évitez les sites de rendu en demi-tour bloqués
4. Et peut être varié avec de nombreux boutons de style css.

Voici le tutoriel sur la création d'un bouton de suivi de blogueur (bouton d'inscription) et préparez-vous à recevoir de nombreux suiveurs sur votre site de blog. Si vous voulez voir la démo, s'il vous plaît faites défiler jusqu'à la colonne des commentaires et abonnez-vous au site de blog d'électricien Batam. Disons simplement que votre abonnement est un bonus pour moi, enfin je dis merci de votre visite et espère que ce monument sera utile.

Partager les paramètres de la vignette Blogger

Paramètres de miniatures Share Post Blogger - Le problème qui se pose souvent lors de la publication de miniatures est la perte des images miniatures ou post-publication lorsque la page du site Web est partagée sur des médias sociaux. En effet, les médias sociaux des navigateurs tels que Twitter et Facebook ne trouvent pas Meta Open Graphs dans le site HTML. le web. Outre le problème de partage de miniatures que les développeurs de sites Web peuvent beaucoup se plaindre, il y a la mise en page (la position) des titres de sites Web jugés inappropriés. Les titres de site trop longs ne sont généralement pas beaux sur la miniature de publication car ils peuvent empêcher le public de se concentrer sur le titre du contenu (article).

Cet article partagera quelques astuces pour ajuster le partage des vignettes d’un site Web à l’aide du graphe méta-open. C’est l’astuce la plus simple pour définir la vignette "paramètres" de la publication afin de la rendre plus intéressante et plus visible sur les médias sociaux (twitter, gplus). et facebook).

Ce qui devrait être fait pour créer une miniature de partage de publication intéressante et importante est, veuillez ajouter la balise méta ci-dessous au site Web html, Positionnez la balise méta entre les balises <head> et </ head>, ce qui est plus approprié pour la placer sous le code de fermeture </ titre>.

<b: if cond = 'data: blog.metaDescription! = "& quot"'>
<meta expr: content = 'data: blog.metaDescription' property = 'og: description' />
<meta expr: content = 'data: blog.metaDescription' name = 'twitter: description' />
<meta expr: content = 'data: blog.metaDescription' itemprop = 'description' />
</ b: si>
<b: si cond = 'data: blog.postImageUrl'>
<meta expr: content = 'data: blog.postImageUrl' property = 'og: image' />
<meta expr: content = 'data: blog.postImageUrl' name = 'twitter: image' />
<meta expr: content = 'data: blog.postImageUrl' itemprop = 'image' />
<b: else /> <b: if cond = 'données: blog.postImageThumbnailUrl'>
<meta expr: content = 'data: blog.postImageThumbnailUrl' property = 'og: image' />
<meta expr: content = 'data: blog.postImageThumbnailUrl' name = 'twitter: image' />
<meta expr: content = 'data: blog.postImageThumbnailUrl' itemprop = 'image' />
</ b: si> </ b: si>
<! - Métadonnées Facebook ->
<meta expr: content = 'data: blog.title' property = 'og: nom_site' />
<meta expr: content = 'data: blog.pageTitle' property = 'og: title' />
<meta content = 'article' property = 'og: type' />
<meta expr: content = 'data: blog.url' property = 'og: url' />
<meta content = '218168578325095' property = 'fb: app_id' />
<meta content = '100002549773049' property = 'fb: admins' />
<! - Métadonnées Twitter ->
<meta content = 'summary_large_image' name = 'twitter: card' />
<meta expr: content = 'data: blog.pageTitle' name = 'twitter: title' />
<meta content = '@ atomu' name = 'twitter: site' />
<meta content = '@ atomu' name = 'twitter: créateur' />
<meta content = '1200' name = 'twitter: image: width' />
<meta content = '800' name = 'twitter: image: height' />
<link href = 'https: //twitter.com/atomu' rel = 'me' />
<! - Balisage d'auteur et d'éditeur Google ->
<link href = 'https: //plus.google.com/+atomu' rel = 'author' />
<link href = 'https: //plus.google.com/+atomu' rel = 'éditeur' />
<! - Balisage Schema.org pour Google+ ->
<meta expr: content = 'data: blog.pageTitle' itemprop = 'name' />

Enregistrez le modèle et affichez les résultats, en indiquant que la "vignette de publication" sera modifiée après la disparition de la mémoire cache du site Web dans le navigateur, généralement 1 x 24 heures ou 2 jours maximum après l'application de la balise META ci-dessus.

Si auparavant le site Web comportait déjà un graphe méta ouvert comme celui mentionné ci-dessus, il n’était pas nécessaire de les remplacer tous. Apportez quelques modifications aux balises META, comme ci-dessous, pour définir les vignettes de publication les plus pertinentes.

Thumbnail Share Post (médias sociaux Twitter)

Rechercher et trouver la ligne de code suivante sur le site Web html

<meta content = 'summary' name = 'twitter: card' />

Puis remplacez le code par;

<meta content = 'summary_large_image' name = 'twitter: card' />

Ensuite, supprimez les propriétés width et height de l’image afin que l’image (miniature de publication) sur les réseaux sociaux Twitter soit plus grande et plus visible.

<meta content = '1200' name = 'twitter: image: width' />
<meta content = '800' name = 'twitter: image: height' />

Thumbnail Share Post (Médias sociaux Facebook)

Rechercher et trouver une ligne de code pour les balises META suivantes sur le site Web HTML;

<meta expr: content = 'data: blog.pageTitle' property = 'og: title' />

Ajoutez ensuite juste en dessous du code de la balise META suivant:

<b: si cond = 'data: blog.pageName'>
<meta expr: content = 'data: blog.pageName' property = 'og: title' />
</ b: si>

Le code de la balise méta sert à indiquer au navigateur de médias sociaux Facebook d'afficher uniquement le titre de la page (titre de l'article) et de masquer le titre du site à partir de la miniature de publication.

Veuillez partager cet article sur plusieurs types de médias sociaux pour voir la miniature de démonstration en direct partager ce message du site. Les paramètres que j'applique sont plus ou moins les mêmes que ceux décrits ci-dessous. Vous pouvez remplacer les balises méta existantes par des balises méta que j'ai partagées ci-dessus.

Remarque: modifiez vos identifiants Facebook, Twitter et Google Plus qui ont été marqués en gras avec votre propre identifiant et votre nom d'utilisateur.

Tout comme "Partager les paramètres de miniatures post Blogger", nous espérons que cela est utile et qu’il peut vous aider à ajuster la taille de l’image et le titre affiché dans le partage des miniatures de votre site Web. N'oubliez pas de vous abonner si cet article aide vraiment.

Hreflang Meta Tag et comment appliquer

Hreflang Meta Tag et comment l'appliquer - hreflang tag est un attribut de langue utilisé sur une page de site Web. Il permet de donner des ordres ou d'accéder aux robots d'exploration (crawlers) afin de traduire la langue principale d'un site dans une langue donnée. En outre, la balise méta hreflang est également utilisée en guise d'alternative au traducteur html du site. Ainsi, lorsque vous accédez au site Web à partir d'un "pays ciblé", le modèle ou la navigation sur le site affichera la langue spécifique en fonction de la balise hreflang appliquée.

L’avantage de la balise hreflang elle-même est d’optimiser le référencement, en particulier l’optimisation de la langue du site pour le ciblage international et régional et de faciliter la compréhension des utilisateurs "visiteurs" des pages Web telles que les langues de navigation, les pieds de page, les barres latérales, etc.

Comment installer le tag Hreflang

La balise hreflang pour le contenu ou les pages de sites Web est généralement placée dans la zone d’en-tête html de la rubrique "en-têtes de balises <head> et </ head> du site. Par défaut, l’installation de la balise hreflang est la suivante;

<head>
<link href = 'http: //en-gb.example.com/page.html' hreflang = 'en-gb' rel = 'substitute' />
<link href = 'http: //en-us.example.com/page.html' hreflang = 'en-us' rel = 'substitut' />
<link href = 'http: //en.example.com/page.html' hreflang = 'en' rel = 'substitute' />
<link href = 'http: //de.example.com/page.html' hreflang = 'de' rel = 'substitute' />
<link href = 'http: //www.example.com/' hreflang = 'x-default' rel = 'substitute' />
</ head>

L'application de la balise hreflang "by google" comme ci-dessus est destinée à la traduction de certaines pages. Si vous êtes un utilisateur de blogueur et souhaitez traduire l'ensemble de la page du site, vous devez associer la balise hreflang aux métadonnées du site. C’est l’une des fonctionnalités des sites de blogueurs: les balises hreflang s’appliquent facilement et gratuitement sans avoir à installer des plugins spéciaux comme Wordpress.

Hreflang tag blogger

<lien expr: href = 'data: blog.url' hreflang = 'en-gb' rel = 'substitute' />
<lien expr: href = 'data: blog.url' hreflang = 'en-us' rel = 'substitute' />
<lien expr: href = 'data: blog.url' hreflang = 'en' rel = 'substitute' />
<lien expr: href = 'data: blog.url' hreflang = 'de' rel = 'substitute' />
<lien expr: href = 'data: blog.url' hreflang = 'x-default' rel = 'substitute' />

Enregistrez ou placez la balise hreflang sous le code <head> sur votre site de blog. Si vous souhaitez utiliser davantage de balises hreflang, veuillez ajouter la ligne de balise hreflang au code du pays de destination.

Faire du ciblage international dans la console de recherche

Assurez-vous que vous avez ajouté le site à Google Webmaster ou à la console de recherche, ouvrez l'onglet Recherche de trafic dans la console de recherche, puis sélectionnez Ciblage international. Dans l'onglet "pays" du pays, sélectionnez l'audience du site "pays cible".

Console de recherche de ciblage international

Ensuite, dans l'onglet de langue, un avertissement "votre site ne comporte pas de balise hreflang" peut-être déclenché. Ne paniquez pas car si un nouveau tag hreflang est ajouté ou qu'un nouveau site est ajouté, ce sera comme ça, soyez patient en attendant que le robot explore "google crawler". En explorant le site, le processus peut prendre 7 à 10 jours. En attendant l’exploration du site, vérifiez que vous avez correctement et correctement installé la balise hreflang sur l’en-tête du site.

Questions sur le tag hreflang

Quelle est la fonction de la balise hreflang = 'x-default'? Réponse: la balise hreflang = 'x-default' sert à indiquer au moteur de recherche la langue par défaut du site Web lorsque le robot d'analyse ne trouve pas de balise hreflang adaptée à certains pays.

Les sites en indonésien doivent-ils utiliser la balise hreflang = 'id-id'? Réponse: hreflang = 'id-id' n'est pas utilisé. La balise hreflang des sites locaux ou régionaux a été représentée par la balise hreflang = 'x-default'. Si le site Web est en indonésien, la balise hreflang = 'x-default' demandera au robot d'exploration l'affichage et la lecture de sites en indonésien, ainsi que de sites Web en Malaisie et dans d'autres pays.

Quels types de tags hreflang sont utilisés par les sites Web "bloggers"? Réponse: Il n’ya pas eu d’enquête de grande envergure, mais, selon le tag hreflang le plus utilisé, admind est semblable à l’exemple ci-dessus ou à cette ligne seulement;

<lien expr: href = 'data: blog.url' hreflang = 'x-default' rel = 'substitute' />

Les sites Web qui utilisent uniquement une ligne de balises hreflang = 'x-default' ne seront pas traduits (affichés et lus dans la langue d'origine ou par défaut). Cependant, il convient de noter que tous les moteurs de recherche ne supportent pas hreflang = 'x-default', certains moteurs de recherche tels que Bing ne supportent pas les annotations rel = "alternate" hreflang = "x".

Ce site utilise uniquement une ligne de balises hreflang = 'x-default' car, selon une source, la balise hreflang a rencontré un problème. Nous avons donc choisi de ne pas traduire le site en installant une ligne de balises hreflang = 'x-

Ce site utilise uniquement une ligne de balises hreflang = 'x-default' car, selon une source, la balise hreflang a rencontré un problème. Nous avons donc choisi de ne pas traduire le site en installant une ligne de balises hreflang = 'x-default' même si Google l'a déjà réparer le petit dérangement.

Ainsi, l'explication des "balises méta hreflang et de la manière de les mettre en œuvre", espérons que cet article puisse aider et accroître les connaissances de chacun d'entre nous, à bientôt.