**Simply Improve Your Blogger Web site with a Complete Desk of Contents**
Streamline navigation and enhance person expertise by including a top-level desk of contents to your Blogger web site. This indispensable function permits guests to shortly entry particular sections of your content material, enhancing engagement and lowering the time spent scrolling by way of prolonged pages. Whether or not you are working a weblog, sharing data in a data base, or showcasing merchandise in a web based retailer, a desk of contents is a useful software for organizing and presenting your content material in a user-friendly method. On this article, we’ll present step-by-step directions on the right way to effortlessly add a desk of contents to your Blogger web site, empowering you to create a seamless person expertise in your guests.
**Step 1: Activate the Desk of Contents Gadget**
Start by logging into your Blogger dashboard and navigating to the “Format” part. Click on on the “Add a Gadget” button and choose “Desk of Contents” from the checklist of accessible devices. Drag and drop the gadget to the specified location in your web site, usually at first or finish of the sidebar. By default, the desk of contents will show an inventory of all headings (H1-H6) discovered on the web page.
**Step 2: Customise the Desk of Contents**
As soon as the desk of contents gadget is added, click on on the “Configure” hyperlink to customise its look and habits. You may alter the title of the desk of contents, change the indentation degree (variety of areas earlier than every heading), and choose whether or not to incorporate hidden headings (headings with the show: none CSS property). Moreover, you possibly can allow or disable the “auto-update” function, which routinely updates the desk of contents when the web page content material modifications.
How one can Add a High Bar to Your Blogger Web site
A high bar is a skinny, horizontal navigation menu that sits on the very high of your web site. It is a good way to offer quick access to vital pages in your web site, corresponding to your private home web page, about web page, contact web page, and weblog. Including a high bar to your Blogger web site is straightforward and may be performed in only a few minutes.
- Sign up to your Blogger account and open the weblog you need to add a high bar to.
- Click on on the “Format” tab.
- Within the “Web page parts” part, click on on the “Add a gadget” button.
- Choose the “HTML/JavaScript” gadget from the checklist of accessible devices.
- Within the “Title” discipline, enter a title in your high bar. For instance, you might enter “High Bar”.
- Within the “Content material” discipline, enter the next HTML code:
<div id="top-bar">
<ul>
<li><a href="/">Residence</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/weblog">Weblog</a></li>
</ul>
</div>
- Click on on the “Save” button.
- Your high bar will now be added to your web site.
Folks Additionally Ask
How do I alter the fashion of my high bar?
You may change the fashion of your high bar by enhancing the HTML code within the HTML/JavaScript gadget. For instance, you might change the font dimension, coloration, or background coloration of the highest bar.
How do I add a emblem to my high bar?
You may add a emblem to your high bar by importing a picture to your Blogger account after which including the next HTML code to the HTML/JavaScript gadget:
<img src="/path/to/picture.png" alt="Your emblem" />
How do I add social media hyperlinks to my high bar?
You may add social media hyperlinks to your high bar by including the next HTML code to the HTML/JavaScript gadget:
<ul>
<li><a href="https://www.fb.com/yourpage"><img src="/path/to/facebook-icon.png" alt="Fb" /></a></li>
<li><a href="https://www.twitter.com/yourpage"><img src="/path/to/twitter-icon.png" alt="Twitter" /></a></li>
<li><a href="https://www.instagram.com/yourpage"><img src="/path/to/instagram-icon.png" alt="Instagram" /></a></li>
</ul>
