Georgia Lou Studios

Welcome to the Help Center!

Top & Footer Social Icons (Updated)(Jolie)

Follow

This video tutorials covers setup of both the top bar and footer social icons widgets. See below for Step-by-Step written directions as well.

Top bar Social Media Icons

Some themes include a top bar social media icons gadget. This gadget displays the social network icons in the top menu bar.

  1. In the Layout configuration page, the TOP MENU SOCIAL ICONS gadget appears at the top of the layout on the top or right side of the nav bar.
  2. Configure the Top Menu Gadget as described above for the sidebar gadget.
  3. NOTE: Sometimes there are layout issues on the Layout page due to the way Blogger displays sticky elements. You may need to drag a gadget out of the way to reach a gadget that is hidden beneath it (like the header widget). Just drag the widget into the sidebar. Once you are done configuring your widgets make sure you click on the Clear button at the top. DO NOT save the arrangement until the widgets are back in their proper place. If you do this, you will need to re-upload the template to restore their proper places.

 

Footer Social Media Icons (Felicity, Justine, Sophie)

This gadget displays the social network icons in the top menu bar.
  1. In the Layout configuration page, the FOOTER SOCIAL ICONS gadget appears at the top of the layout on the top or right side of the nav bar.
  2. Configure the Top Menu Gadget as described above for the sidebar gadget.

 

Footer Social Icons (Ashleigh, Peyton, Kiersten, Heyden, Victoria, Natasha, Jolie, Phoebe)

The Footer Social Icons for these templates are different than the Top Bar and Sidebar icons.

  1. Go to the Blogger Dashboard > Layout page.
  2. Scroll to the bottom of the page where you will find the yellow Footer section.
  3. The footer social gadget should have been automatically installed.
  4. Open the text file called footer_social_icons.txt found in the Widgets folder inside  the template folder that you downloaded.new1.pngnew2.png
  5. Replace the # in each section with your full Social Network URL.
  6. Example: <a href=’#’ target=’_blank’>
    <i class=’fa fa-facebook’> </i>
    <span>Facebook</span>
    </a>
  7. In the example above, you would replace the # with your Facebook URL, i.e. http://www.facebook.com/mypage
  8. If you would like to add different social media icons, you can visit the FontAwesome site to find the correct icon code.
  9. EXAMPLE: Add a YouTube icon instead of a Tumblr icon.
  10. Search the FontAwesome site for YouTube. You will find 3 icons to pick from. We will choose the YouTube Play icon.
  11. Click on the icon of your choice to get the icon code. Our icon code is fa-youtube-play.
  12. To use this code in our social icons gadget, we will replace the Tumblr code which is fa-tumblrwith the YouTube code so it looks like this:  <i class=’fa fa-youtube-play’></i>
  13. Then we will change the name of the link below from Tumblr to YouTube. i.e. <span>YouTube</span>
  14. Using this trick you can replace any of the icons with a different icon.
  15. To remove a particular icon, make sure you remove the whole icon section from the <a href=’#’ target=’_blank’> to the next </a>. You can add an extra icon by cutting and pasting the same section beneath the final icon section. Then changing the icon code and link name. Max number of icons should be around 8 to look good.
  16. Click the  Edit link at the right hand side of the footer socialgadget box. TheConfigure HTML/JavaScript window will open. Copy and paste ALL of the text from the footer_social_icons.txtfile into the Configure HTML/JavaScript window.
  17. Click the orange Save button to put your changes into effect.
Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk