Installing social media icons on a blogger blog

Today, let's run through how to install social media icons on a blogger blog. All templates we offer here at Bella Lulu Ink include social media icons, and installing them is less complicated than you might think. 

We have a youtube video tutorial you can check out if you prefer that:

Alright, let's get started if you're a tutorial-on-paper sorta person, like me:

Start from your layout mode in your Template Designer. It looks like this:

Depending on your template and a few other factors, you may have an empty Javascript/HTML gadget waiting for code, like you can see above, where it says "Follow Macy." Let's pretend for the sake of this tutorial that you do not. We need to add one. Hit the Add a Gadget button:

Screen_Shot_2014-06-21_at_10.58.58_AM.jpeg

Then you'll get a window like this, and you'll look for the HTML/Javascript gadget and hit the plus button next to it:

Grab the code below and paste one line for each icon you want. For this tutorial, I am going to do four buttons:

Now we need to populate that code. Let's go ahead and host our images somewhere. Photobucket is what I always recommend because it's free and easy. If you don't already have a Photobucket account, run over and create one really quickly here

Go ahead and upload the icons you want here:

Once your photos are uploaded, we'll need to grab their direct link. You'll find that on the right side of your screen once you're in the actual icon you want to use. Go ahead and copy the direct code of the first image you'd like to use:

Now we're going to past that into our HTML/Javascript gadget that we've got pulled up. It goes in the "http://Image Direct Link Goes Here" spot. Simply delete what's between the two quotation marks (making sure to LEAVE the quotation marks there) and replace it with the code you just copied:

Now we need to add the URL for that image. In the example above, my first icon is facebook. So I need to add the URL to my own facebook page in the spot that says "URL Goes Here" making sure to leave the quotations here, too. It's important to have the "http://" or "https://" of your URL, so I recommend just grabbing the URL from your browser window and copying it and pasting it into this code to make sure you have the right formatting.

 

Repeat that process for each icon. If you're using an email or contact button, instead of a URL, you'll type in:

mailto:youremailaddress@email.com (replacing with your own email address but keeping it in that exact format). 

 

Now remove the spaces between each set of code to make sure the icons are placed correctly on your template.

If you want to center your icons, add the following code at the very beginning of your existing code:

<center>

And this code at the very end:

</center>


Hit save and view your work! You rock!

Chelsea Hibbard

Greenville, SC