Georgia Lou Studios

Top and Footer Social Icons (Old)(Heyden)

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.

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.

Configure the Top Menu Gadget as described above for the sidebar gadget.

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.

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.

Configure the Top Menu Gadget as described above for the sidebar gadget.

In the example above, you would replace the # with your Facebook URL, i.e. http://www.facebook.com/mypage

If you would like to add different social media icons, you can visit the FontAwesome site to find the correct icon code.

EXAMPLE: Add a YouTube icon instead of a Tumblr icon.

Search the FontAwesome site for YouTube. You will find 3 icons to pick from. We will choose the YouTube Play icon.

Click on the icon of your choice to get the icon code. Our icon code is fa-youtube-play.

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>

Then we will change the name of the link below from Tumblr to YouTube. i.e. <span>YouTube</span>

Using this trick you can replace any of the icons with a different icon.

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.

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.