Apparence du blog
- Par
- Le 11/10/2017
- Dans Blogger
- 60 commentaires
Il est possible de modifier certains paramètres de votre blog, afin de lui donner quelques airs plus personnels. Je peux par exemple citer la désactivation du fil d'ariane, la désactivation du résumé de billet sur l'accueil, l'ajout d'une modification lorsque l'on passe le curseur au dessus du billet, etc.
Hover sur l'illustration
Sur le thème Blogger, il n'y a pas d'animation lorsque vous passez le curseur au dessus de l'illustration d'un billet, sur l'accueil du blog. Je vous propose ici quelque chose de simple, mais efficace : un changement d'opacité. Voici le résultat en images :
Code à utiliser :
.media-object > a > img:hover {
opacity: 0.7; /* Opacité de l'image lorsque l'on a le curseur dessus */
transition: all 0.3s; /* Durée de la transition, pour éviter l'effet brutal */
}
Masquer le fil d'ariane
Le fil d'ariane est le chemin de la page sur laquelle vous vous trouvez. Par exemple, sur cette pages, le chemin est " Accueil > Blogger > Apparence du blog ". Même si cela peut être pratique, il arrive que ce ne soit pas très esthétique, en baissant la zone de contenu du billet.
Attention, cela affecte également le reste du site !
#main ol.breadcrumb {
display: none;
}Cacher le texte d'introduction
Encore une fois ici, ça n'est que du confort. Il se peut parfois que le texte d'introduction, s'il est formaté, ne s'affiche pas correctement sur l'accueil du blog. Nous pouvons alors sans soucis le cacher. L'exemple ci-dessous parle de lui même. Le texte d'introduction est configuré en titre 3 sur notre site, le style étant repris sur l'accueil, l'affichage n'est pas optimisé.
[data-addon="blog"] .media-content.clearfix {
display: none;
}
Cacher "Lire la suite"
Pour suivre avec le fait de masquer l'introduction du billet de blog, il est possible de cacher le bouton " Lire la suite ", qui peut créer un déséquilibre dans l'affichage.
.media-blog masonry .media-body > p:last-child {
display: none;
}Il est tout à fait possible de réduire la marge inférieure au titre, qui crée un manque de symétrie.
Code à utiliser :[data-addon="blog"] .media-heading {
margin-bottom: 0;
}Mettre en valeur un billet épinglé
Depuis quelques mois maintenant, il est possible d'épingler un billet de blog sur e-monsite ! Je vais vous proposer aujourd'hui de mettre en valeur en billet épinglé, même si actuellement la plupart des thèmes affichent déjà une épingle au dessus du billet. Attention cependant, ce code nécessite l'ajout de la police Font Awesome à votre site. Pour cela, rendez-vous dans Configuration > Réglages > Zones éditables, cliquez dans la zone Zone éditable du haut, puis cliquez sur le bouton <> Source. Collez-ensuite ce code et enregistrez :
.media.is-sticky .media-heading::before {
content: "\f08d";
margin-right: 8px;
color: black;
font-family: FontAwesome;
}
.media.is-sticky .media-heading {
text-transform: uppercase;
}ariane introduction illustration hover blogger
Articles similaires
-
Apprenez à personnaliser votre boutique e-monsite via du CSS.
-
Penchons nous cette fois-ci sur l'apparence du module forum. Comme tous les modules d'e-monsite, il est bien pensé et de base joli à voir. Mais comme tout service générique, il n'est évidemment pas personnalis…
-
Apprenez à mettre en avant le bouton PayPal, à améliorer l'espace commentaires, à ajouter des ombres à vos images, à centrer automatiquement un tweet, tout cela en CSS sur e-monsite.
-
Modifier la hauteur de l'entête, ajouter un fond au titre
Commentaires
-
- 1. albert Le 12/01/2018
Bonjour,
D'abords félicitation pour votre site.
J'aurais aimer savoir quel thème vous utilisiez pour ce site "truc & astuces... " car j'aime bien l'image qui disparait :-)
Vous écrivez "Depuis quelques mois maintenant, il est possible d'épingler un billet de blog sur e-monsite !" >> mais je ne vois pas comment faire, pouvez vous aussi m'éclairer ?
Merci
et Bonne Année 2018 -
- 2. albert Le 12/01/2018
Re...
J'ai trouvé le thème c'est blogger avec quelques arrangements.
J'ai trouvé aussi le moyen d'épingler un billet donc qui le met en première position, ce qui est une bonne astuce.
Seulement j'ai des soucis avec son code. Je l'ai placé au bon endroit comme vous le proposez mais... au dessus sur le site, il m'affiche la ligne de code uniquement, ce qui n'est pas très joli.
Pouvez-vous m'aider ?
Merci
Albert -
- 3. BenjaminD Le 17/01/2018
Bonjour !
Désolé pour le temps de réponse. Auriez-vous une capture d'écran à m'envoyer ? Pour mieux visualiser le soucis. Ou simplement l'URL (http:// ou https://) de votre site :) -
- 4. Online Wedding Dress Buy Le 28/06/2021
Excellent article. Keep posting such kind of information on your page.
Im really impressed by it.
Hey there, You've done an incredible job. I'll certainly digg it and personally recommend to my
friends. I'm confident they will be benefited from this web site. -
- 5. AsepaNox Le 14/03/2022
It is rather grateful for the help in this question, can, I too can help you something?
https://how6youtoknowc.org/map.php -
- 6. Idufwk8z8k Le 15/08/2022
Пoступило 84 226 p
Подробнее: https://docs.google.com/document/d/AAAtrucs-astuces-css.e-monsite.comBBB/view -
- 7. Idkihhdjon Le 05/09/2022
Поступила оплата на сумму: +2 747.00 RUR
Подробнее: https://docs.google.com/document/d/AAAtrucs-astuces-css.e-monsite.comBBB/view -
- 8. сео продвижение сайта Le 02/01/2023
I got this website from my friend who informed me regarding this site and at the moment
this time I am browsing this web page and reading very informative articles
or reviews at this place.https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332
https://vk.com/club216571129
https://vk.com/club217205332 -
- 9. услуга трезвого водителя пенза Le 03/01/2023
Нет причины бросать свой автомобиль возле клуба или ресторана, если немного выпили.
Зачем после бурной ночи, затем утром
возвращаться за машиной? Можно
просто заказать услугу трезвый водитель или обращайтесь в скайп
логин pokras7777 либо в телеграмм адрес (Трезвый водитель пенза)и мы доставим
ваш автомобиль к вашему дому -
- 10. продвижение сайт Le 12/01/2023
прогон хрумером кворк
Репетиция согласно основе микс
Сказать об этом, собственно ведь это прогон,
полагаю, далеко не нужно.
Впрочем, многие, допустимо, до самого этих времен никак не абсолютно осознают содержание исходной услуги.
К Примеру смотри, содержание прогона заключается
во этом, то что в посторонних сайтах, они называются донорами,
располагаются гиперссылки в вашинский веб-сайт, но данное, во собственную очередность,
положительно влияет в признаках вашего произведения во
искательских концепциях.
Кроме этого, то что около вам скапливается
справочная множество, совершается еще
также развитие веб-сайта во искательской выдаче согласно
разным запросам. Кроме Того совершается повышение также иных определенных
значимых характеристик. Чувство имеются некоторых разновидностей, я ведь побеседуем об прогоне согласно «микс
базе».
Таким Образом, вам сделали веб-сайт, что специализирован никак не только лишь с целью отечественных юзеров
сети интернет, но, допустимо, некто с целью их также совсем никак не специализирован,
находясь вычисленным только в иностранную аудиторию узы.
Продвигать его все без исключения точно также
следует, но, в случае если с целью данного применять только лишь основы
со донорами с «.ru» сектора сети интернет, целевая публика
вашего веб-сайта весьма никак
не вскоре выяснит относительно
ваше создание также станет выражать ко деревену заинтересованность.
В Случае Если ведь гиперссылки в вашинский веб-сайт
станут возникать в этих веб-сайтах, какие приезжают в жители других стран, возникнет также увеличение трафика
также развитие веб-сайта во этих поисковиках,
какими они используют.
Ко данному добавится также рост ко этим признакам, какие значимы с целью этих искательских концепций, но никак не с целью, к
примеру, «Яндекса»
ДЛЯ СВЯЗИ С НАМИ ПИШИТЕ В СКАЙП ЛОГИН ЛОГИН
POKRAS7777
ЛИБО В ТЕЛЕГРАММ
Ajouter un commentaire
Français
English
Español
Italiano
Deutsch
Nederlands
Portuguesa