Cinq façons de masquer la barre de navigation de blogger / Prévenir les rapports malveillants

708次阅读
Aucun commentaire

共计 2321 个字符,预计需要花费 6 分钟才能阅读完成。

Cinq façons de masquer la barre de navigation de blogger / Prévenir les rapports malveillants

Différentes façons de masquer la barre de navigation

Dans les plateformes de blogs, de nombreux utilisateurs souhaitent supprimer la barre de navigation par défaut ou y apporter des modifications personnalisées afin de rendre la page plus concise ou de répondre à leurs besoins en matière de design. Voici quelques méthodes courantes pour masquer la barre de navigation :

Méthode 1 : masquer la barre de navigation via CSS

La façon la plus simple de le faire est de trouver dans le fichier CSS du modèle de blog, l'élément corps avant la balise et ajoutez le code suivant :

css复制代码#navbar-iframe {display:none !important;}

Ce code sera transmis par l'intermédiaire du affichage:aucun pour masquer la barre de navigation, où l'option !important La priorité de ce style est assurée, ce qui empêche d'autres styles de remplacer ce paramètre. Après avoir appliqué ce code, la barre de navigation ne sera plus affichée, mais la disposition de la page ne changera pas et il n'y aura pas d'espace blanc supplémentaire.

Méthode 2 : masquer complètement la barre de navigation et supprimer les espaces blancs

Si vous souhaitez non seulement masquer la barre de navigation, mais aussi supprimer l'espace occupé par la barre de navigation pour éviter un espace vide en haut de la page, un code plus complet peut être utilisé :

css复制代码#b-navbar,
#navbar,
#Navbar1,
#space-for-ie {height: 0px; visibility: hidden; display: none;}
body #header {margin-top: 0px !important;}
#navbar-iframe {display: none;}

Ce code a plusieurs fonctions :

  1. faire passer (un projet de loi, une inspection, etc.) affichage : aucun Complètement caché. #b-navbar, #navbar, #Navbar1, #space-pour-ie et d'autres éléments possibles de la barre de navigation.
  2. utiliser visibilité : cachée Masquer l'élément en passant le paramètre hauteur : 0px Supprimer la hauteur de ces éléments.
  3. body #header {margin-top : 0px !important;} Cette ligne de code supprime l'espace blanc supérieur qui peut apparaître lorsque la barre de navigation est masquée.

Méthode 3 : Glisser pour masquer la barre de navigation

Si vous préférez un effet de glissement pour cacher la barre de navigation, vous pouvez utiliser le code suivant :

css复制代码#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Ce code utilise la fonction opacité définit la transparence de la barre de navigation à 0ce qui la rend invisible dans son état initial. Lorsque l'utilisateur passe la souris sur la zone, la transparence devient 1La barre de navigation s'affiche. Cette méthode permet d'obtenir un effet de transition en douceur, plus conforme aux besoins de la conception moderne des sites web.

Méthode 4 : masquer complètement la barre de navigation et les interstices

Si vous souhaitez simplement masquer la barre de navigation et qu'elle n'occupe pas d'espace, vous pouvez ajouter une nouvelle section dans la rubrique corps étiquettes après #Page Ajoutez le code CSS suivant devant la balise :

css复制代码.Navbar {
    visibility: hidden;
    display: none;
}

Ce code cache le .Navbar et par l'intermédiaire de l'élément affichage : aucun Veillez à ce qu'il ne prenne pas de place et à ce que la page soit plus claire.

Méthode 5 : masquer via JavaScript

Une autre approche, plus souple, consiste à ajouter un code script via des éléments HTML/JavaScript qui permettent de masquer la barre de navigation par un effet de jeu ou de diapositive. Voici une solution courante :

  1. Ajouter un élément “HTML/JavaScript” aux paramètres du modèle.
  2. Collez le code JavaScript suivant dans cet élément :
html复制代码<script src="http://blogger-ext2.googlecode.com/files/jquery.pack.js" type="text/javascript"></script>
<script src="http://blogger-ext2.googlecode.com/files/blogger_ext2-core-0.6.3.pack.js" type="text/javascript"></script>
<script>
  // Blogger NavBar设置
  BloggerExtOptions.hide_navbar = true; // true = 隐藏导航栏
  BloggerExtOptions.fade_navbar = true; // true = 启用滑动隐藏效果
</script>

Ce code est transmis par l'intermédiaire du BloggerExtOptions.hide_navbar = true Configurez la barre de navigation cachée à l'aide de l'option BloggerExtOptions.fade_navbar = true L'effet de masquage des diapositives est activé pour permettre aux utilisateurs de voir l'animation de la barre de navigation lorsqu'ils passent la souris dessus.


Icônes de site web personnalisées

Outre le masquage de la barre de navigation, de nombreux utilisateurs de blogs souhaitent personnaliser les icônes de leur site. Pour ce faire, ils peuvent ajouter des fichiers d'icônes personnalisés. En général, les fichiers d'icônes sont .ico vous pouvez la définir en suivant les étapes ci-dessous :

  1. Dans la section En-tête> Ajouter le code HTML suivant à la section : html copy code<link rel="Shortcut Icon" href="图标地址"> <link rel="Bookmark" href="图标地址">
  2. commandant en chef (militaire) "Adresse de l'icône" Remplacez l'URL par l'URL de votre icône personnalisée. Par exemple, si votre fichier d'icône est stocké dans le répertoire http://example.com/favicon.icoSi le code n'est pas au bon endroit, le code doit être le suivant : html copy code<link rel="Shortcut Icon" href="http://example.com/favicon.ico"> <link rel="Bookmark" href="http://example.com/favicon.ico">

Une fois cette configuration mise en place, lors de la visite de votre site web, l'onglet, la barre d'adresse ou la barre de signets du navigateur affichera l'icône que vous avez spécifiée à la place de l'icône par défaut.


résumés

Grâce à ces méthodes, vous pouvez masquer la barre de navigation, ajuster la mise en page ou personnaliser les icônes selon vos besoins, afin que votre blog corresponde davantage à vos besoins personnels en matière de design. Chaque méthode a ses propres scénarios applicables, et vous pouvez choisir la manière la plus appropriée d'apporter des modifications en fonction de vos besoins réels. J'espère que ces méthodes vous aideront à mieux personnaliser et optimiser votre blog !

正文完
 0
Monsieur wang
版权声明:本站原创文章,由 Monsieur wang 于2024-11-17发表,共计2321字。
转载说明:Sauf mention contraire, ce site est publié sous licence CC BY 4.0. Veuillez indiquer l'auteur de la reproduction "Technology Lao Wang" et le lien de la source originale, toute reproduction sans attribution, suppression de la source ou comportement de lavage est considérée comme une violation du droit d'auteur.
Recommandation de RackNerd pour un VPS rentable AI Préféré par les constructeurs de sites web débutants Stable seulement 10+ Movers Recommandation VPS