>>> CLEANING UP YOUR MENUBAR FIRST
After installing your template, Blogger automatically puts all kinds of widgets in your menubar that do not belong there. Some examples of these widgets are Adsense, Search, Featured Post, About Me etc.
Blogger also puts the drop down pages of the demo template in the menubar as well. And if you had an already existing blog, some of your former sidebar widgets might have been put in the menu bar section.
Unfortunately there is no way to prevent this. Now that you have installed the template let’s get rid of that junk first!
Blogger also puts the drop down pages of the demo template in the menubar as well. And if you had an already existing blog, some of your former sidebar widgets might have been put in the menu bar section.
Unfortunately there is no way to prevent this. Now that you have installed the template let’s get rid of that junk first!
Go to section Layout and remove all unnecessary widgets in the menu section - the original widgets that should be in there are:
• Social Icons
• Pages
• Dropdown Page 1
• Dropdown Page 2
• Blog Categories
Any other widgets that you see up there DO NOT belong in the menu section. You can either remove them (just click on their 'edit' button to open them and select ‘remove’), or you can give them a place in the sidebar if you want to keep them (by clicking on them with your mouse button and drag them to the sidebar section). Then push the orange button on top of screen that says ‘save arrangement’.
This is what your menubar should look like in section Layout after removing all the junk:
>>> CREATING REGULAR PAGES & ADDING THEM TO THE MENUBAR
Regular pages are pages like the About & Contact page that you see on the demo blog. They basically work like a blog post. You create them and fill them up with text and images.
This is how you make them and put them in the menu bar:
1. Go to section Pages
2. Select option New page
3. Give the page a title, fill it up with content and publish it
4. if you want to disable the comment option of a page, click on Options on the right and select "Don't Allow" for Reader Comments
5. Then go to section Layout, open the Pages widget and select the pages you want to display (check off their boxes)
6. Save changes
>>> CREATING DROP-DOWN MENUS & PAGES
What I described above was how to create a simple, regular page that is then put in the menu bar. Should you wish to add a drop-down page in the menu bar with drop-down options underneath it, this is how you do it:
1. Go to section Layout, open Dropdown Page 1
2. You will notice that the three demo drop-downs are already there - before adding your own drop downs remove the these by clicking on their 'delete' option
3. After deleting the demo drop downs, first change the title of your drop down page to whatever you want to call it
4. Then add your drop down sections one by one by filling out the ‘New Site Name’ and ‘New Site URL’ boxes for each drop down (you can link to websites outside your blog, but also to pages that you have created for your blog)
5. Click on the 'add link' 6. Add as many drop down links as you wish
7. Then save it all
>>> HOW TO LINK A DROP DOWN SECTION TO ONE OF YOUR PAGES
Should you wish to display one of your pages as a drop down instead of as a single page in the menubar, you will have to find the link to that page to create the drop down link. This is how you do that:
1. Go to section Pages
2. Hover with your mouse over the page that you created and published that you want to link to (it needs to be published, not just in draft form)
3. You will see a few options appear under the page title, one of them is ‘View’
4. Select the View option to view your created page
5. In the internet bar on top of screen you will now see a link appearing, that’s your page link
6. Copy this link and paste it in the New Site URL box in the drop-down menu that you are creating
>>> ADDING MORE THAN TWO DROP DOWN MENUS TO THE MENUBAR
The template comes with two already installed dropdown pages. Should you wish to use more than the two pre-installed dropdown pages, you can create new ones yourself:
1. Go to section Theme and select ‘Edit HTML’
2. Click on the button "Jump to Widget"
3. Select LinkList2 - you will end up in the section of the HTML code where Linklist 2 was made
4. Copy the full code for Linklist 2, from:
<b:widget id='LinkList2'..> to </b:widget> (including)
5. And directly under the code of the Linklist 2 widget, paste the code you've copied - the only thing you need to change is the text: LinkList2 to LinkList3 (you can't have two widgets with one ID)
6. Save the changes
7. Then close off your blog (go out of the Blogger Dashboard completely), the template just needs a few seconds to implement the coding changes you just made
8. Then go back to your Blogger Dashboard and select section Layout
9. You will see that your third dropdown page has appeared in the menu section , you can now use it and put links into it
Every time you want to add another dropdown menu to your menu bar, follow the same steps as described above.
>>> IF YOU DON'T NEED THE DROP DOWN MENUS
In case you don't want to use the two drop down menus, or you only want to use one of them, you can easily get rid of them:
1. Go to section Layout
2. Open the drop down menu that you want to get rid of
3. Now either remove it completely with 'remove' button
4. Or click on the 'delete' option of all the demo drop down sections - this way the drop down menu will not show itself on your menubar but it is still ready to use should you change your mind
>>> SELECT WHICH LABELS TO DISPLAY IN THE BLOG CATEGORIES TAB
The Blog Categories tab in your menu bar will automatically appear when you have added labels to your blog posts. It will show all categories/labels that you have used in your posts. You can let the Categories tab show all your labels if you wish, or select just a few main labels:
1. Go to section Layout and open the Categories widget
2. Click on "Selected Labels" -> Edit and select only the labels you want to have under Categories
3. Save the changes
>>> ADD THE SOCIAL ICONS TO THE MENUBAR
*** IMPORTANT NOTE ***
Due to a big software update of FontAwesome (the company that delivers the icon codes for the template), templates bought before January 20, 2019 can cause icons not to work properly. If you have bought a template from my store between July 2017 and January 20, 2019 and you are experiencing trouble with the icons, please contact me on Etsy and I will sort it out for you. Thanks!
INSTRUCTIONS FOR TEMPLATES BOUGHT AFTER JANUARY 22, 2019:
1. Go to section Layout and open the Social Icons widget in the menu section
2. The code for the social icons will already be displayed in this widget. In case the code is missing you can copy the social icon code that you will find in a text file in the zip-file you downloaded from Etsy, and paste it inside the widget
3. Replace the LINK text for each icon with the URL to that particular social page -> make sure you start your URL with the code HTTPS://
The entire link would look something like this:
HTTPS://WWW.INSTAGRAM.COM/YOURACCOUNTNAME
4. To remove icons you don't need, delete that particular line of code, let’s say you want to delete the instagram icon, then you delete this full line:
<a href='LINK' target='_blank'><i class='fab fa-instagram'></i></a>
5. To add more icons, visit https://fontawesome.com/icons?d=gallery&s=brands&m=free and find the icon you need
6. Click on the icon of your choice. For this instruction I am clicking on the Google icon:
7. In the screen that opens up you see the code of the icon displayed above the icon. in this case the code for the icion is fab fa-google
8. In your widget code, create a new line of coding for your new icon, it should look like this:
<a href='LINK' target='_blank'><i class='fab fa-ICON CODE’></i></a>
9. Then copy the name of your needed icon into the code. In my case of the Google icon it will look like this:
<a href='LINK' target='_blank'><i class='fab fa-google'></i></a>
10. Once you have put all the icons you need with the correct links to your social pages in the coding, you can save the changes, and the icons appear in your menu bar
11. Should you wish to use the envelop/email icon, the link that you have to put in the coding is not just your email address. The line should look like this:
<a href='mailto:YOUREMAILADDRESS' target='_blank'><i class='fas fa-envelope-o'></i></a>
• Social Icons
• Pages
• Dropdown Page 1
• Dropdown Page 2
• Blog Categories
Any other widgets that you see up there DO NOT belong in the menu section. You can either remove them (just click on their 'edit' button to open them and select ‘remove’), or you can give them a place in the sidebar if you want to keep them (by clicking on them with your mouse button and drag them to the sidebar section). Then push the orange button on top of screen that says ‘save arrangement’.
This is what your menubar should look like in section Layout after removing all the junk:
>>> CREATING REGULAR PAGES & ADDING THEM TO THE MENUBAR
Regular pages are pages like the About & Contact page that you see on the demo blog. They basically work like a blog post. You create them and fill them up with text and images.
This is how you make them and put them in the menu bar:
1. Go to section Pages
2. Select option New page
3. Give the page a title, fill it up with content and publish it
4. if you want to disable the comment option of a page, click on Options on the right and select "Don't Allow" for Reader Comments
5. Then go to section Layout, open the Pages widget and select the pages you want to display (check off their boxes)
6. Save changes
>>> CREATING DROP-DOWN MENUS & PAGES
What I described above was how to create a simple, regular page that is then put in the menu bar. Should you wish to add a drop-down page in the menu bar with drop-down options underneath it, this is how you do it:
1. Go to section Layout, open Dropdown Page 1
2. You will notice that the three demo drop-downs are already there - before adding your own drop downs remove the these by clicking on their 'delete' option
3. After deleting the demo drop downs, first change the title of your drop down page to whatever you want to call it
4. Then add your drop down sections one by one by filling out the ‘New Site Name’ and ‘New Site URL’ boxes for each drop down (you can link to websites outside your blog, but also to pages that you have created for your blog)
5. Click on the 'add link' 6. Add as many drop down links as you wish
7. Then save it all
>>> HOW TO LINK A DROP DOWN SECTION TO ONE OF YOUR PAGES
Should you wish to display one of your pages as a drop down instead of as a single page in the menubar, you will have to find the link to that page to create the drop down link. This is how you do that:
1. Go to section Pages
2. Hover with your mouse over the page that you created and published that you want to link to (it needs to be published, not just in draft form)
3. You will see a few options appear under the page title, one of them is ‘View’
4. Select the View option to view your created page
5. In the internet bar on top of screen you will now see a link appearing, that’s your page link
6. Copy this link and paste it in the New Site URL box in the drop-down menu that you are creating
>>> ADDING MORE THAN TWO DROP DOWN MENUS TO THE MENUBAR
The template comes with two already installed dropdown pages. Should you wish to use more than the two pre-installed dropdown pages, you can create new ones yourself:
1. Go to section Theme and select ‘Edit HTML’
2. Click on the button "Jump to Widget"
3. Select LinkList2 - you will end up in the section of the HTML code where Linklist 2 was made
4. Copy the full code for Linklist 2, from:
<b:widget id='LinkList2'..> to </b:widget> (including)
5. And directly under the code of the Linklist 2 widget, paste the code you've copied - the only thing you need to change is the text: LinkList2 to LinkList3 (you can't have two widgets with one ID)
6. Save the changes
7. Then close off your blog (go out of the Blogger Dashboard completely), the template just needs a few seconds to implement the coding changes you just made
8. Then go back to your Blogger Dashboard and select section Layout
9. You will see that your third dropdown page has appeared in the menu section , you can now use it and put links into it
Every time you want to add another dropdown menu to your menu bar, follow the same steps as described above.
>>> IF YOU DON'T NEED THE DROP DOWN MENUS
In case you don't want to use the two drop down menus, or you only want to use one of them, you can easily get rid of them:
1. Go to section Layout
2. Open the drop down menu that you want to get rid of
3. Now either remove it completely with 'remove' button
4. Or click on the 'delete' option of all the demo drop down sections - this way the drop down menu will not show itself on your menubar but it is still ready to use should you change your mind
>>> SELECT WHICH LABELS TO DISPLAY IN THE BLOG CATEGORIES TAB
The Blog Categories tab in your menu bar will automatically appear when you have added labels to your blog posts. It will show all categories/labels that you have used in your posts. You can let the Categories tab show all your labels if you wish, or select just a few main labels:
1. Go to section Layout and open the Categories widget
2. Click on "Selected Labels" -> Edit and select only the labels you want to have under Categories
3. Save the changes
>>> ADD THE SOCIAL ICONS TO THE MENUBAR
*** IMPORTANT NOTE ***
Due to a big software update of FontAwesome (the company that delivers the icon codes for the template), templates bought before January 20, 2019 can cause icons not to work properly. If you have bought a template from my store between July 2017 and January 20, 2019 and you are experiencing trouble with the icons, please contact me on Etsy and I will sort it out for you. Thanks!
INSTRUCTIONS FOR TEMPLATES BOUGHT AFTER JANUARY 22, 2019:
1. Go to section Layout and open the Social Icons widget in the menu section
2. The code for the social icons will already be displayed in this widget. In case the code is missing you can copy the social icon code that you will find in a text file in the zip-file you downloaded from Etsy, and paste it inside the widget
3. Replace the LINK text for each icon with the URL to that particular social page -> make sure you start your URL with the code HTTPS://
The entire link would look something like this:
HTTPS://WWW.INSTAGRAM.COM/YOURACCOUNTNAME
4. To remove icons you don't need, delete that particular line of code, let’s say you want to delete the instagram icon, then you delete this full line:
<a href='LINK' target='_blank'><i class='fab fa-instagram'></i></a>
5. To add more icons, visit https://fontawesome.com/icons?d=gallery&s=brands&m=free and find the icon you need
6. Click on the icon of your choice. For this instruction I am clicking on the Google icon:
7. In the screen that opens up you see the code of the icon displayed above the icon. in this case the code for the icion is fab fa-google
8. In your widget code, create a new line of coding for your new icon, it should look like this:
<a href='LINK' target='_blank'><i class='fab fa-ICON CODE’></i></a>
9. Then copy the name of your needed icon into the code. In my case of the Google icon it will look like this:
<a href='LINK' target='_blank'><i class='fab fa-google'></i></a>
10. Once you have put all the icons you need with the correct links to your social pages in the coding, you can save the changes, and the icons appear in your menu bar
11. Should you wish to use the envelop/email icon, the link that you have to put in the coding is not just your email address. The line should look like this:
<a href='mailto:YOUREMAILADDRESS' target='_blank'><i class='fas fa-envelope-o'></i></a>