• Home
  • Shop
    • WordPress Themes
    • Blogger Templates
    • Stock Images
  • Services
    • Blogger Services
      • Custom Blog Designs
      • Blogger Templates
    • WordPress Services
      • WordPress Themes
      • Theme Customization
      • Custom Designs
      • Website Design
    • Website Design
  • Blog
  • Tutorials
    • Blogger
    • WordPress
    • Social Media
    • Video Tutorials
    • Blogger Template FAQ
  • Videos
  • Portfolio
  • Cart
    • Email
    • Facebook
    • Instagram
    • Pinterest
    • Twitter
    • YouTube

BD Web Studio

Feminine WordPress Themes | Feminine Blogger Templates

How To Edit Sidebar Social Icons

Your new template is set up and pre-coded to use Font Awesome for the sidebar social icons. All you need to do is decide which icons you want, add your links, delete icons not needed.

Most templates come with the icons in place. All you need to do is edit the code a bit.

Step 1:

After you install your template visit your blog while logged into your Blogger account. Under the social icons you will see a tool icon, click this. You will then see all the code for the icons shown.

Edit Social Icons Blogger Template

In the code you will see URL-HERE – this is the part you will be editing and all you have to do is replace URL-HERE with the link to your social site for that icon. Each line has a title section this will tell you what social site to grab the link for.(title=”Pinterest”, title=”Instagram”, etc…..

Again, go through, look at each title= to see which social site it applies to and then replace the URL-HERE with your link for that social site (keep the quotation marks it is very important you do not remove those)

So, for example, on the first line we have title=Facebook – my Facebook url is https://www.facebook.com/bdwebstudio so mine would look like this

<a href=”https://www.facebook.com/bdwebstudio” title=”Facebook” target=”_blank”><i class=”fa fa-facebook”></i></a>

Β If your template did not come with pre-installed icons simply grab the code below and put it in a text editor:

<div id=”fawesomeicons”>
<a href=”URL-HERE” title=”Facebook” target=”_blank”><i class=”fa fa-facebook”></i></a>
<a href=”URL-HERE” title=”Twitter” target=”_blank”><i class=”fa fa-twitter”></i></a>
<a href=”URL-HERE” title=”Pinterest” target=”_blank”><i class=”fa fa-pinterest-p”></i></a>
<a href=”URL-HERE” title=”Instagram” target=”_blank”><i class=”fa fa-instagram”></i></a>
<a href=”URL-HERE” title=”Contact” target=”_blank”><i class=”fa fa-envelope”></i></a>
<a href=”URL-HERE” title=”Bloglovin” target=”_blank”><i class=”fa fa-heart”></i></a>
<a href=”URL-HERE” title=”Tumblr” target=”_blank”><i class=”fa fa-tumblr”></i></a>
<a href=”URL-HERE” title=”YouTube” target=”_blank”><i class=”fa fa-youtube”></i></a>
<a href=”URL-HERE” title=”RSS” target=”_blank”><i class=”fa fa-rss”></i></a>
</div>

Step 2:Add and delete icons.

TO DELETE ICONS

So let’s say you don’t use Tumblr then you would remove:

<a href=”URL-HERE” title=”Tumblr” target=”_blank”><i class=”fa fa-tumblr”></i></a>

Do this for any icons you don’t need from above. Be sure to backspace so no empty gaps are left after removing a line.

FOR EMAIL: I suggest creating a “contact” page and then linking to that page. It is always best to use a contact form for safety reasons.

 

TO ADD ICONS

Grab the code below and add it to the code you copied in step one (If you have not pasted the code from step 1 into a text editor do that now). Do this for each new icon you want to add.

<a href=”URL-HERE” title=”ADD ICON TITLE” target=”_blank”>ADD CODE HERE</a>

Now you will make 3 edits:

  1. URL-HERE
  2. Β title= add title in between quotation marks where it says ADD ICON TITLE
  3. Now head over to Font Awesome and look for the icon you need. Click on the icon. You will see an i class code, grab that and paste where it says ADD CODE HERE. (Be sure you remove the words add code here)

So that it looks like this:

<a href=”URL-HERE” title=”ADD ICON TITLE” target=”_blank”><i class=”fa fa-youtube”></i></a>

 

Step 3 – Add the code to your sidebar (If not already pre-installed)

Now copy all of the code from your text editor. Head over to your “Layout” page in Blogger and in the sidebar area click “Add a new Gadget”. Choose “HTML/Javascript” and paste the code in there and then click save. Feel free to drag it around wherever you would like.

Find Us Here:

  • Email
  • Facebook
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Let’s Be Friends!

#blackouttuesday πŸ–€b l a c k l i v e s m a t t #blackouttuesday πŸ–€b l a c k  l i v e s  m a t t e rπŸ–€ πŸ‘ŠπŸΏπŸ‘ŠπŸ½πŸ‘ŠπŸΎπŸ‘ŠπŸΌπŸ‘ŠπŸ»πŸ‘Š
In love with how @christyrouxphotography customize In love with how @christyrouxphotography customized our Wild & Free template to match her beautiful branding.  With her chic logo and color changes to match she has a completely customized site design that is stunning. Check out her new look and her amazing photography at: www.christyrouxphotography.com
.
.
.
.
.
.
.
#photography #abmlifeiscolorful #risingtidesociety #savvybusinessowner #thatsdarling #calledtobecreative #chic #thehappynow #creative #girlboss #love #darlingmovement #flashesofdelight #smallbusiness #mycreativebiz #theeverygirl #gold #creativevibes #blogdesign #blogtemplate #bloggertemplates #blogmode #instablogger #bloggerlife #bloggerstyle #blogging
Just here, trying my best to jingle all the way πŸ˜‰ .
.
.
.
.
.
.
.
#bnw #calledtobecreative #create #etsy #etsyseller #getit #girlboss #happy #inspire #instagood #instaquotes #lol #laughing #ladypreneur #lettering #funny #life #love #qotd #quoteoftheday #risingtidesociety #savvybusinessowner #thatsdarling #theeverygirl #me #thehappynow #typography #christmas #holidays #merrychristmas
Looking to share or find the best tips and tricks Looking to share or find the best tips and tricks for bloggers and savvy online business owners? Join or follow our Creative Bloggers Community board on Pinterest! We are only a few weeks in and already have over 1k pins full of awesome posts and info thanks to an awesome group of fellow creatives! Group boards are also a great way to promote your own content so if you have blog/business related blog posts to share send me a message and I will add you as a contributor πŸ€—
.
.
.
.
.
.
.
#blogtips #bloggerlife #bloggers #bloggerstyle #blogtutorials #blogging #blogmode #pinterest #calledtobecreative #chic #creative #darlingmovement #blogging #womensupportingwomen #communityovercompetition #womeninbusiness #flashesofdelight #getit #girlboss #happycreativelife #instablogger #love #abmlifeiscolorful #savvybusinessowner #shop #thatsdarling #theeverygirl #thehappynow #pink

Stay Updated!

  • Terms
  • WordPress TOU
  • Privacy Policy
  • About

Copyright © 2023 Β· BD Custom Theme on Genesis Framework Β· WordPress Β· Log in