Créer le blog:
Utiliser le theme: simpleLe titre du site sera le titre H1 de la page, donc choisir avec soin les mots clés pour le SEO
Aller dans mise en page:
- Nav barre : modifier : désactiver
- Principale :
- nombre d'article par page 1
- décocher toutes les cases
- enregistrer
Aller dans thème :
Modifier le code html et copier dans le head :
<meta description='Description du site pour les moteur de recherche '/><meta content='wd26' name='author'/>
<meta content='wd26' name='copyright'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.6.1/css/all.css' integrity='sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP' rel='stylesheet'/>
Pour avoir la page d'accueil en version mobile sans que ça fasse les résumés des différents posts :
Attention, à faire avant de modifier le css, sinon ça enregistre le css dans le code et on peut plus y accéder par les parametres, mais uniquement par le code :/il faut modifier le code html :
aller dans la code et cliquer dedans n'importe où puis ctrl F et chercher :
<div class='mobile-post-outer'>
puis insérer juste aprés le bloque de redirection javascript ci-dessous avec le liens de redirection javascript vers la page d'article qui correspond exemple :
<!-- redirection de la page d'accueil mobile -->
<script>
document.location.href="https://pack-eco-plus.blogspot.com/2019/08/site-exemple-pack-eco-plus.html?m=1";
</script>
<!-- fin de redirection de la page d'accueil mobile -->
Attention, ne pas oublier le ?m=1 à la fin qui montre bien que c'est une page mobile !
Attention aussi de bien mettre l'adresse de l'article qui sert de page d'accueil, pas l'url général ! exemple :
pas :
https://pack-eco-plus.blogspot.com?m=1
mais bien :
https://pack-eco-plus.blogspot.com/2019/08/site-exemple-pack-eco-plus.html?m=1
Si ça marche pas, verifies que tu n'est pas un message d'erreur, il demande de fermer une balise <meta>, tu lui ferme la dernière, et ça marche
Aller dans personnaliser :
- mise en page : pas de colonne
- Largeur de page mini 500px (ça permet de faire suivre le site en rapetissant la page)
- avancé : ajouter le fichier css :
body, .content-inner, .column-center-inner{
padding:0 !important;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 99% !important;
max-width: 99.9% !important;
_width: 99.98% !important;
}
#main, .content-outer {
margin:0px;
}
.main-inner{
margin:0;
padding:0;
}
.columns-inner{
margin-top:0;
}
/* pour rendre blogger sans ses fioritures génantes */
#header, .footer-outer, #blog-pager, .blog-feeds, .post-title, .tabs-outer, .post-footer{
display:none;
}
img {
border : 0 !important;
}
.post-body img {
border : 0 !important;
padding: 0;
}
Créer la page d'accueil
Attention ne pas utiliser le mode html pour modififer le fichier sinon ça fout des <br /> de partout et ça casse la mise en page !!!J'ai essayer plusieur systeme, comme enlever les lignes vide etc. mais ça ne marche pas, par exemple, il met systématiquement un br apres la balise nav !
Copier l'intégralité du contenu des sections
de la div container-fluid jusqu'a la balise </body> (non incluse évidemment !)
Attention, avec blooger, même sans utiliser la largeur de page complette, il faut utiliser "container-fluid" et pas "container" pour bootsrap, sinon ça fait systématiquement du scrolling à droite !
Ne pas oublier d'ajouter les lignes javascript :
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- lazy load image pour un chargement des images uniquement quand on scroll -->
<script type="text/javascript">
(function($){
$.fn.lazyload = function(){
$(window).scroll(lazyload);
lazyload();
}
function lazyload(){
var winScrollTop = $(window).scrollTop();
var winHeight = $(window).height();
$('img.lazy').each(function(){
var imgOTop = $(this).offset().top;
if(imgOTop < (winHeight + winScrollTop)){
$(this)
.attr('src', $(this).data('src'))
.removeClass('lazy')
.removeAttr('data-src');
}
});
}
})(jQuery);
$(document).ready(function(){
$(document).lazyload();
});
</script><!-- fin lazy load -->
- Pour que la lazy load des images fonctionne, il faut que les balises images soit définies comme suit :
- <img src="img/blank.gif" class="lazy" data-src="fichierImage.jpg" alt="description de l image">
Il faudra peut-etre ajouter un div enveloppant pour ajouter des marges ou du padding aux pages qu'on voudrait ajouter.
Ajouter votre propre css
Aller dans thème : personnaliser : avancé : ajouter votre fichier css
Copier votre code cssPenser à changer l'url pour le background-image du : container qui permet l'effet paralaxe du a propos de nous et celui du ruban et a faire les quelques réglages pour la barre de nav et l'image d'en tête.
Comme pour une voiture, on mets les niveaux a porté d'oeil. J'ai donc positionné ces css en tête de fichier pour ne pas perdre de temps.
Attention !
Certain css de blogger peuvent venir interferer avec le votre sur des class similaire :
exemple nav qui est une class de blogger et une class de bootsrap
il faudra ajouter !important; pour que votre code prenne le dessus.
exemple :
.navbar{
position: fixed !important;
top: 0 !important;
z-index: 999 !important;
width: 100% !important;
padding-bottom:4.5% !important;
left:0 !important;
}
Pour le reste de la mise en page mobile :
Aller dans theme et choisir :
Cliquez sur Oui, afficher le modèle mobile sur les mobiles.
Choisissez Personnaliser dans la liste de choix des modèles disponibles.
Faire les média query pour l'affichage mobile et les tablettes dont le menu gêne les mettre dans le fichier css !
Attention les tablette ne sont pas reconnu comme mobile, elles n'ont donc pas le ?m=1 à la fin
exemple :
/******************** media queries entete et nav p et partenaires *****/
@media (max-width: 1000px)
{
.menu-icon img{
width: 20% !important;
}
.navbar-brand{
display: none;
}
.navbar-nav{
font-size:80% !important;
position : absolute;
top: 0;
right: 0;
}
.navbar-right{
background-color : rgba(0, 0, 0, 0.15);
top:42px;
}
.navbar-toggle{
position:absolute !important;
top:1% !important;
right: 5% !important;
}
.img-en-tete .titreH1{
position: absolute;
top: 5%;
left: 25%;
font-size: 2.2em;
color: white;
}
.img-en-tete h2{
position: absolute;
top: 22%;
left: 10%;
font-size: 2em;
color: white;
}
.img-en-tete{
width:101% !important;
padding-left:4px !important;
padding-right:0 !important;
}
.btn-header{
top: 80%;
left: 55%;
}
p {
font-size: 1.5em;
}
.logo-partenaires{
display: grid;
grid-template-columns: auto auto !important;
padding: 6%;
}
}
@media (max-width: 767px)
{
.navbar-nav{
background-color : lightgray;
font-size:2em !important;
position:relative;
}
}
/*fin media query */
Pour verifier ce que ça donne sur le pc, on peut en ajoutant la ?m=1 à la fin de l'url
exemple :
https://wd26-pack-eco.blogspot.com/?m=1