Avoir de discuter des modèles Blogger, vous devez créer un site Web réactif à utiliser dans Blogger. Votre site web doit être réactif sur les appareils mobiles, les tablettes, et les ordinateurs de bureau. Si vous ne savez pas comment créer un site web réactif, suivez ce guide.
Utilisez les requêtes multimédias, utilisez correctement la propriété et la valeur CSS dans les modèles du blog.
Avant de passer à Blogger, vous devez disposer d'un code HTML et CSS du site web. Pour créer des modèles Blogger, il n'est pas nécessaire d'utiliser beaucoup de JavaScript.
Comment créer un modèle Blogger réactif
Voulez-vous créer un modèle de Blogger BlogSpot réactif adapté à tous les appareils mobiles, tablettes, les ordinateurs de bureau et PC portable soi-même développé ?
Voici une astuce qui vous permettra de concevoir un modèle de Blogger très réactif dans quelques codes avec HTML5 et CSS3.
1) Allez dans les modèles Blogger pour modifier » le code HTML
Si vous installez déjà un thème dans un Blogger, supprimer ce thème.
Vous pouvez ajouter la première impression de chaudière HTML.
2) Collez ce code HTML de base
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Website Name</title></head><body> </body></html>3) Collez ce code sous <head>
<b:skin><![CDATA[ /*Your all CSS goes here*\ ]]> </b:skin>Avant de passer à l'étape suivante, vous devez ajouter au moins une section sous le corps.
4) Ajoutez une section sous le corps
<b:section id = "unique id"/>Si vous utilisez CSS et HTML, vous connaissez évidemment l'ID et la classe. Il est très utile sur n'importe quelle plate-forme.
5) Maintenant, enregistrez votre thème
Si votre t'aime avec succès, alors
félicitation! et et si votre thème affiche une erreur, vérifier la syntaxe du code HTML. J'ai fait aussi mal dans ce processus. Essayez d'écrire quelque chose en utilisant la balise P, H1 sous les corps.
6) Rafraîchir la page
Actualiser la page HTML d'édition, il y a automatiquement du code généré bizarrement comme ci-dessous
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='UTF-8'/> <meta content='width=device-width, initial-scale=1.0' name='viewport'/> <title>Website Name</title> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section id='unique id'/> </body> </html>Avant de passer à l'étape suivante, vous devez comprendre les concepts de base de section et de Widget. Le widget et les types de gadget dans Blogger. Si vous êtes la mise en page incontournable des blogueurs, vous pouvez trouver le widget pour l'en-tête, l'article de blog, le pied de page, le plugin, de médias sociaux, la section à propos, etc.
Vous pouvez utiliser le widget dans les modèles de Blogger pour<header>, voir cet exemple ci-dessous :
<b:section id = 'header'> <b:widget id = 'header1' type = 'header'></b:widget></b:section>7) Collez le seul code HTML d'en-tête et de pied de page sous le corps
Si vous n'avez pas de code HTML et CSS pour l'en-tête, la section héros et le pied de page, j'ai fourni le code que vous pouvez utiliser pour vous entraîner.
8) Collez l'en-tête et le pied de page CSS sous <!CDATA[ contient tous les CSS]]>
<!CDATA[
.header{background-size:black;
height:4vw;
}
.ul li a{ list-style:none;
text-decoration:none;
}
]]>
9) Maintenant voir votre blog
Après avoir coller les codes HTML sous les cors de CSS à l'intérieur du CDATA. Mais une chose que vous devez comprendre, vous avez au moins une section. Après avoir enregistrer les modèles, regardez votre site web de blog.
Si vous utilisez des images pour votre blog, héberger vous images en ligne gratuitement.
Vous pouvez utiliser un blog Blogger pour héberger vos images. Télécharger simplement vous images et copier l'adresse de l'image.
10) Ajoutez JavaScript maintenant
Il est maintenant quand décoller du JavaScript à l'aide du balise de script. Il n'y a pas beaucoup de JavaScript dans un blog Blogger. Nous avons utiliser JavaScript Dallas barre de recherche comme, ‹headet›
Il dépend de vous combien JavaScript utilisé. Mais javascript hareng un utilisateur interactif est fait que votre Blogger n'est pas un blogueur, c'est qui en fait un site web est-il important aux yeux de vos lecteurs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
11) créer une barre de recherche exploitable à l'aide de la barre de recherche des blogueurs
Créer une barre de recherche exploitable dont vous avez besoin pour utiliser la barre de recherche des blogueurs. En utilisant la barre de recherche du Blogger, tous les contenus a été cherché.
Vous devez donc supprimer toutes les div de la barre de recherche du HTML nous devons maintenant ajouter un vers 10h et une section pour la barre de recherche.
Vous devez fournir la même classe lorsque vous ajoutez une barre de recherche
<b:section id ='bsection-search-container' class="search-container">
<b:widget type ='Blogsearch' class="Blogsearch1">
</b:widget>
</b:section>
Vous dedans une section utilisée en HTML, car votre CSS n'applique pas les style dans les autres classes
Après avoir ajouter un visa et une section, votre barre de recherche a été remplacée par la barre de recherche de Blogger. Vous pouvez facilement modifier cette barre de recherche et supprimer toutes les propriétés de la barre de recherche qui se trouve.
Après avoir ajouter un widget une section, votre bas de recherche a été à remplacée par la barre des blogueurs, vous pouvez facilement modifier cette barre de recherche les supprimer toutes les propriétés de la barre de recherche qui y trouvent.
12) Rafraîchir la page
Vous devez actualiser la page d'édition HTML après avoir ajouter le widget et la section. Maintenant, tous les codes de la barre de recherche s'affiche. Vous pouvez ajouter l'espace réservé pour votre barre de recherche.
13) Copiez-le code CSS pour pour la version mobile
Il est maintenant temps de créer un modèle de blogueur réactif pour les appareils mobiles, copier toutes les requêtes multimédias de l'éditeur des taxes et collez-les sur ce CDATA.
14) Maintenant, ajouter une condition sous le corps
C'est la condition lorsque l'utilisateur sur une barre de recherche quelles données seront affichées là-bas et lorsque l'utilisateur clique sur les étiquettes, quel type de données est affiché. Nous devons donc ajouter une condition qui aide à afficher les données appropriées.
<b:class cond = 'data:view.isHomepage' name = 'home-page'/>
<b:class cond = 'data:view.isSingleItem' name = 'item-view'/>
<b:class cond = 'data:view.isLabelSearch' name = 'label-view'/>
<b:class cond = 'data:view.isSearch and !data:view.isLabelSearch' name = 'search-view'/>
15) Ajoutez une condition au-dessus de la vue de l'article
Dans un blog Blogger, vous devez cocher quelque chose lorsque les utilisateurs visite la publication et recherche quelque chose c'est votre blog. Vous devez donc ajouter des conditions pour cela. Nous devons masquer la section héros, l'en-tête et bien plus encore.
16) Ajoutez ce code au-dessus de l'en-tête et de la section héros
<b:if cond='data:blog.url! = data:blog.homepageUrl'>
<!-- Header Wrapper -->
<div class='top-bar'>
</b:if>
Sous la condition ‹b:if› ci-dessus, les données ne s'affichent seront pas lorsque l'utilisateur visitera le menu des publications, mais s'afficheront sur la page d'accueil.
17) Ajoutez maintenant le code HTML et CSS de la publication et du formulaire de contact
Il est maintenant temps de passer à l'étape suivante, ajoutons un widget des publications et des formulaires de contacts populaire. Si vous ne l'avez pas, ne vous inquiétez pas, ce n'est pas nécessaire. Merci vous avez ensuite vu toutes les étapes.
Maintenant, copier tous le code HTML et collez-le tous le message. Cela dépend de l'endroit où vous pouvez afficher les publications populaires, les publications en vedettes, les publications aléatoires. Mais ils montrent la publication populaire, les formulaire de contact au-dessus du pied de page.
Collant dans les codes HTML au-dessus du pied de page. Et coller également le code CSS de la publication populaire et du formulaire de contact.
Si je veux afficher les publications populaire uniquement sur la page d'accueil, donc si la condition ça fils uniquement sur la page d'accueil, pas dans les publications. Mais nous devons changer la condition b: if. Parce que nous ne pouvons afficher la page d'accueil uniquement. Dans la condition sur dessus, nous ne voulons pas afficher dans la section de publication ou la section de recherche.
18) Ajoutez un widget formulaire de contact
Adieu ton de formulaire de contact Blogger dispose d'un budget de formulaire de contact, nous n'avons donc pas besoin de code HTML pour bénéficier ce formulaire de contact. Nous ajoutons simplement un lit 10h et une section pour cela dans le code HTML de notre blog Blogger.
<b:if cond ='data:blog.url== data:blog.homepageUrl'>
<b:section id ='bsection-contact' class='contact-container'>
<b:widget type ='ContactForm' id='ContactForm1'>
</b:widget>
</b:section>
</b:if>
19) Le Widget de Blog
Maintenant, c'est la partie la plus importante du modèle de Blogger. Vous devez écrire des articles dans Blogger et ajouter des étiquettes.
Ajouter un widget pour un article de blog dont vous avez besoin pour copier et coller tous les codes d'un article de blog dans un CDATA.
Vous devez ajouter uniquement la division des articles de blog et ajouter une section là-bas.
Étape pour ajouter du widget sur Blogger
a) Allez pour éditer le code HTML
b) Faites défiler sur la fin de l'enquête
c) Copiez collez uniquement la division d'un article de blog
d) Voir l'exemple ci-dessous
<div class="wrapper">
<div class="posts-wrapper">
<b:if cond='data:view.isHomepage'>
</b:if>
<b:section id="bsection-blog">
<b:widget id="Blog1" type='Blog'>
</b:widget>
</b:section>
</div>
</div>
Maintenant, tous les messages s'affichent. Vous pouvez obtenir tous les styles des blogs fourni par le Blogger. Nous devons changer notre style de blog. Nous pouvons inspecter les blogs et voir les cours là-bas. Pour plus d'information veuillez lire attentivement cet article comme vous pouvez le lire....
20) Widget de publication populaire
Nous devons ajouter un widget de publication populaire pour les articles qui populaires après l'article de blog. Nous devons donc ajouter un widget de publication populaire sur notre blog. Nous devons remplacer les classes de notre article populaire de Blogger par notre article populaire.
<!-- End of blog section -->
<div class="wrapper">
<b:section id="bsection-popular-posts" class="popular-posts-container">
<b:widget type='PopularPosts' id="PoularPosts1">
</b:widget>
</b:section>
</div>
21) Créez une page et liens
Après avoir créer un article populaire, me devant ensuite travailler sur la page. Nous voulant montrer à propos de nous, la politique de confidentialité, les conditions générales, nous contacter et bien plus encore.
Tous les cours
Dans cette astuce de blog, vous apprendrez à terminer le processus de création de modèle de Blogger à partir de zéro. Dans cette astuce, nous allons créer un site web c'est bloqué à l'aide d'un éditeur de texte Visuel studio et ajouter un Widget, une section, etc.
Merci d'avoir suivi ce tutoriel pour rendre votre modèle