13 février 2015

Blogger : améliorer l'apparence des affichages dynamiques

 Salut les Floches! Aujourd'hui nouveau tutoriel où je vous donne quelques astuces pour améliorer un peu l'apparence de votre blog Blogger si vous avez choisi un modèle "affichage dynamique".

Les possibilités de personnalisation sont très limitées lorsqu'on choisit ce type de modèle mais on peut quand même réaliser quelques petits arrangements. Puisque le code html n'est pas aussi modifiable que sur un modèle classique, on va faire tous ces ajustements dans le code CSS, et ne prenez pas peur car c'est encore plus facile!

Dans l'interface Blogger, vous vous rendez sur Modèle > Personnaliser > Avancé 
Tout en bas dans la seconde colonne on trouve "Ajouter le fichier CSS"



Il suffira maintenant de coller les codes dans cette partie, l'un après l'autre.

Cacher le bouton qui permet de changer le type d'affichage dynamique

 /* Hide the views on the main page */
#views { display: none !important; }

Cacher le Gadget Dock 

/* Hide the gadget Dock */
#gadget-dock { display: none !important; }
Forcer l'afficher du Gadget Dock

#gadget-dock{
position: fixed !important;
right: 0px !important;
}

Placer le Gadget Dock  à gauche

.gadget-container {
-moz-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-webkit-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-ms-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-o-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
margin-right: 100% !important;
right: -100px !important;
left: 0px !important;
}
.gadget-container:hover, .gadget-item.ss:hover, .gadget-item:hover .gadget-container, .gadget-selected .gadget-container {
right: auto !important;
}
#gadget-dock:hover, #gadget-dock.gadget-notifying, #gadget-dock.gadget-opening{
left: 0px !important;
}
#gadget-dock {
-moz-transition: left 0.15s ease-in-out 0s;
-webkit-transition: left 0.15s ease-in-out 0s;
-ms-transition: left 0.15s ease-in-out 0s;
-o-transition: left 0.15s ease-in-out 0s;
left: -40px;
}
Forcer la barre de menu du haut

#header .header-drawer.sticky{
margin-top: 0px !important;
position: fixed !important;
top: 65px !important;
-moz-transition: top 0.0s linear 0.0s !important;
-webkit-transition: top 0.0s linear 0.0s !important;
-ms-transition: top 0.0s linear 0.0s !important;
-o-transition: top 0.0s linear 0.0s !important;
}
Mettre une bannière en haut du blog (header)
 
#header .header-drawer.sticky, #header .header-drawer  {
top: 134px;
}
  
#header .header-bar{
height: 165px;
}
  
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 165px;
}
  
#header-container {
height: 205px;
}
  
.viewitem-panel .viewitem-inner {
top: 100px;
padding-bottom: 120px !important;
height: auto !important;
}
  
#header-container #header.header .header-bar span.title{
background: url(http://URL DE VOTRE IMAGE DE BANNIERE)
no-repeat center;
margin-left: auto !important;
margin-right: auto !important;
height: 165px;
}


!!!
 
IMPORTANT : A chaque changement de modèle, le code CSS disparaît complètement 
(même si vous avez sauvegardé votre modèle et que vous le retéléchargez, 
votre code CSS ne sera pas rétabli)

Une fois votre code CSS complet avec toutes les modifications voulues, 
copiez-collez l'ensemble du code et sauvegardez-le dans un fichier Word ou autre en cas d'effacement involontaire! 

*

Il en existe bien d'autres, n'hésitez pas à faire une recherche sur Google en incluant toujours "dynamic views" pour tomber uniquement sur des tutoriels qui fonctionnent sur les modèles dynamiques. La plupart des blogs qui en proposent sont anglophones.
Un blog à mettre dans vos favoris (en anglais) : Southen Speakers
*
 Les autres tutoriels que vous avez peut-être manqué :

 Organiser un concours sur son blog
 Insérer une signature automatique sur Blogger

*

Vous avez aimé? Abonnez-vous!
Instagram Famest Google+Bloglovin'  Inspilia Newsletter 
Naviguer par catégories :   
MODE BEAUTÉ CULTURE FOOD MAISON
BeautéModeVoyages, musique, films, séries, livres, sorties...MaisonNourriture, alimentation, thésHTML Map   Florence



DP Generic Banner 728 x 90


2 commentaires:

  1. Coucou !
    Sur mon ancien blog (WaoW&MiaM) j'avais aussi choisi l'affichage dynamique. J'ai bien aimé au début et j'ai lâché l'affaire : pas assez fun et personnalisable à mon goût. J'espère que ça ne te fera pas le même effet :/
    Bisous
    La Brune.

    RépondreSupprimer
  2. Ton billet est vraiment très utile. Merci beaucoup.
    Je n'aimais pas tellement l'idée que mes visiteurs puissent changer mon affichage.

    Tu conseilles quelles dimensions pour la bannière ?
    J'ai fait plusieurs essais et je ne suis pas très contente du résultat. Mais je suis déjà bien contente de savoir comment mettre une bannière.

    RépondreSupprimer