How to Configure Header and Navigation Bar
Header Logo and Title
-
Go to the Blogger dashboard > select the Layout menu.
-
Find the section titled Header Logo and Title.
-
Click the edit button (pencil icon) in the Header Gadget (Page Header Gadget).
-
A Header configuration pop-up will appear.
-
In the Blog Title field, enter the name of your blog.
-
In the Blog Description field, enter a description of your blog.
-
In the Image section, there are two options. Choose between Enter image URL or Upload image from computer. Here is the explanation:
- Insert image URL: You need to paste the URL of the uploaded image into the Image URL field. Example:
https://blogger.googleusercontent.com/img/a/AVvXsEiznaccEizbKNE6my-Snr4-osnpzEkdJ_erg8a3xkSOdQFn9PzpKm_yOha5RWvvi6psLF4eCyGM7DjCWv1BqseB6irKLlrRV7F0YbeqIy3QrtTYTL8ePX12FbeRHwcbvkL0a_QHDpCi8GN6-wy-j-iDFj7j8j8qLsG27xjDCQCPNlpLJl77RZSZPzRe4Q=s614 - Upload image from computer: You need to upload a new image from your computer by clicking the Browse button and selecting the logo image you want to use.
- Insert image URL: You need to paste the URL of the uploaded image into the Image URL field. Example:
-
Done
Primary Navigation Drawer
Search Bar and Search Button
The Search Bar element consists of a Submit Button, Search Input, Clear Search Input Button and Close Search Button.
On the desktop screen, a search bar will appear. While on the mobile screen, the search bar will be hidden and a toggle button will appear which is useful for opening the search bar. In addition, the button to close the search bar will only appear on the mobile screen.
The button to clear the text in the search input will appear if you write something into it.