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:
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 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:email@example.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:
And this code at the very end:
Hit save and view your work! You rock!