Vijf manieren om de blogger navigatiebalk te verbergen / Kwaadaardige rapporten voorkomen

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

Verschillende manieren om de navigatiebalk te verbergen

In blogplatforms willen veel gebruikers de standaard navigatiebalk verwijderen of er aangepaste wijzigingen in aanbrengen om de pagina beknopter te maken of aan hun ontwerpwensen te voldoen. Hier zijn enkele veelgebruikte manieren om de navigatiebalk te verbergen:

Methode 1: Verberg de navigatiebalk via CSS

De eenvoudigste manier om dit te doen is om in het CSS-bestand voor de blogtemplate de optie lichaam voor de tag en voeg dan de volgende code toe:

css kopieer code #navbar-iframe {display:none !important;}

Deze code wordt doorgegeven via de weergave:geen om de navigatiebalk te verbergen, waar de belangrijk Garandeert de prioriteit van deze stijl en voorkomt dat andere stijlen deze instelling overschrijven. Na het toepassen van deze code wordt de navigatiebalk niet meer weergegeven, maar de opmaak van de pagina verandert niet en er is geen extra witruimte.

Methode 2: Verberg de navigatiebalk volledig en verwijder witruimte

Als je niet alleen de navigatiebalk wilt verbergen, maar ook de ruimte die wordt ingenomen door de navigatiebalk wilt verwijderen om een lege ruimte bovenaan de pagina te voorkomen, kun je een uitgebreidere code gebruiken:

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

Deze code doet verschillende dingen:

1. passeren (een wetsvoorstel of inspectie enz.) weergave: geen Volledig verborgen. #b-navigatiebalk, #navbar, #Navbar1, #-ruimte-voor-ie en andere mogelijke navigatiebalkelementen.
2. gebruikmaken van zichtbaarheid: verborgen Verberg het element terwijl je de hoogte: 0px Verwijder de hoogte van deze elementen.
3. body #header {margin-top: 0px !important;} Deze regel code verwijdert de bovenste witruimte die kan ontstaan door het verbergen van de navigatiebalk.

Methode 3: Schuif om de navigatiebalk te verbergen

Als je de voorkeur geeft aan een schuivend effect om de navigatiebalk te verbergen, kun je de volgende code gebruiken:

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

Deze code maakt gebruik van de opaciteit stelt de transparantie van de navigatiebalk in op 0waardoor het in de beginstand onzichtbaar wordt. Wanneer de gebruiker met de muis over het gebied beweegt, wordt de transparantie 1De navigatiebalk wordt weergegeven. Deze methode kan een vloeiend overgangseffect bereiken, meer in lijn met de behoeften van modern webdesign.

Methode 4: De navigatiebalk en tussenruimten volledig verbergen

Als je alleen de navigatiebalk wilt verbergen en niet wilt dat deze ruimte inneemt, kun je een nieuwe sectie toevoegen in de lichaam labels na #Pagina Voeg de volgende CSS-code toe voor de tag:

css kopieer code .Navbar {
    zichtbaarheid: verborgen;
    weergave: geen;
}

Deze code verbergt de .navigatiebalk element en via de weergave: geen Zorg ervoor dat het geen ruimte inneemt en de pagina schoner maakt.

Methode 5: Verbergen via JavaScript

Een andere, meer flexibele aanpak is om scriptcode toe te voegen via HTML/JavaScript-elementen waarmee de navigatiebalk kan worden verborgen via een set- of dia-effect. Dit is een veelgebruikte oplossing:

1. Voeg een “HTML/JavaScript” element toe aan de sjablooninstellingen.
2. Plak de volgende JavaScript-code in dit element:

html kopieercode 


  // Blogger NavBar instellingen
  BloggerExtOptions.hide_navbar = true; // true = navigatiebalk verbergen
  BloggerExtOptions.fade_navbar = true; // true = schuifeffect verbergen inschakelen
</script

Deze code wordt doorgegeven via de BloggerExtOptions.hide_navbar = true Stel de verborgen navigatiebalk in met de BloggerExtOptions.fade_navbar = true Slide hide effect is ingeschakeld zodat gebruikers de animatie van de navigatiebalk kunnen zien wanneer ze met de muis over de balk bewegen.

Aangepaste websitepictogrammen

Naast het verbergen van de navigatiebalk willen veel bloggebruikers ook de pictogrammen van hun site aanpassen. Dit kan worden gedaan door aangepaste pictogrambestanden toe te voegen. Gewoonlijk zijn pictogrambestanden .ico formaatpictogram, kunt u dit instellen door de onderstaande stappen te volgen:

1. In het sjabloon van de blog <head> Voeg de volgende HTML-code toe aan de sectie: html kopieercode<link rel="Shortcut Icon" href="图标地址"> <link rel="Bookmark" href="图标地址">
2. opperbevelhebber (militair) "Icoonadres"." Vervang de URL door de URL van je aangepaste pictogram. bijvoorbeeld als je pictogrambestand is opgeslagen in de http://example.com/favicon.icoAls de code niet op de juiste plaats staat, dan moet de code er als volgt uitzien: html copy code<link rel="Shortcut Icon" href="http://example.com/favicon.ico"> <link rel="Bookmark" href="http://example.com/favicon.ico">

Nadat dit is ingesteld, zal bij het bezoeken van je website het tabblad, de adresbalk of de bladwijzerbalk van de browser het door jou opgegeven pictogram weergeven in plaats van het standaard pictogram.

samenvattingen

Met deze methoden kunt u de navigatiebalk verbergen, de paginalay-out aanpassen of de pictogrammen naar wens aanpassen, zodat uw blog beter aansluit bij uw persoonlijke ontwerpbehoeften. Elke methode heeft zijn eigen toepasselijke scenario's en je kunt de meest geschikte manier kiezen om wijzigingen aan te brengen op basis van de werkelijke behoeften. Ik hoop dat deze methoden je kunnen helpen om je blog beter aan te passen en te optimaliseren!