How to Add Social Media Buttons in Blogger // Getting Technical

If you've been around here, you've probably witnessed at least one reference to my complete lack of technological know-how.  (Most recently here.  I don't know much, but I can shamelessly link back to my own posts with the best of them.)  I would love to have the kind of brain that can read HTML like it was English and care about details enough to have everything just how it's supposed to be, but I have the opposite of that brain.  The result is that, in order to keep my blog in one piece of something that kind of resembles a blog, I've spent lots of time Youtubing different Blogger formatting techniques and Googling "How to easily blahblahblahblahah on blogger" or "shortcut for a asfkjas;lkjf widget."  Pro tip:  throwing an "easy" in front of just about any blog thing that you Google (or Bing, if you're into that) saves lots of time.  

If you're as averse to computery stuff as me, you'll appreciate this method of doing things.  It involves no know-how in regards to HTML code whatsoever and doesn't take too long - for me, the hardest part was finding social media buttons that I liked!  You can watch the video that I learned this stuff from here , or if you prefer words I've got the steps written out for you!  Happy blog layouting!

Step 1 | Download social media buttons that you like. 
Surf Pinterest and all the internet places for social media icons.  I prefer the free kind; here are some of my personal favorites:  these, these, these, and these.  You can make your own, too, if you can't find anything to fit your blog or are feeling adventurous.  That's what I did, using Picmonkey.   Once you've picked out the perfect style for your blog, download the icons and save them so that you can easily find them again. 

Step 2 | Insert the icons as picture in a blog post. 
In Blogger, start a new blog post.  In the top left corner of the new post window, just below the title of your blog, there are two buttons:  Compose and HTML.  The default setting for creating a blog post is the compose option, so click the HTML button to switch to HTML mode.  (This keeps the icons aligned correctly and eliminates unneeded space between the images.)  Insert all of the social media buttons that you're going to use in our blog layout.  

Step 3 | Link images to your social media pages. 
Switch back to compose mode by clicking the button in the top lefthand corner of the window.  You should now be able to see the images that you have inserted into your blog post.  Now, link each icon to its appropriate social media page.  (For example, navigate to your Twitter profile page on your computer.  Copy the text that appears in the search bar when you are on your profile page.  In the blog post with the social media icons, click on the Twitter icon.  Then, click the Link button in the toolbar.  In the window that appears, paste the URL to your Twitter profile in the box labeled, "To what URL should this link go?" and click OK.)  Do this for all of the social media icons that you will be using.  

Step 4 | Insert icons into blog layout. 
Keep your new blog post open.  Open up Blogger again in a separate window.  From the Blogger home page, click the drop down arrow for the blog that you are inserting your social media icons into and select layout.  In the layout editing page, click a box that says "Add a Gadget" in the area of your blog that you want your social media icons to appear.  Choose the "HTML/Java script" option from the list of gadgets (it's the 11th one down.)  Click back to your new blog post and switch to HTML mode.  Copy the entire HTML code and paste it into the "Content" box of the HTML/Java script gadget window and click save.  Your social media buttons should now appear on your blog and will navigate to your social media accounts when you click on them! 

Step 5 | Not publishing or deleting your new blog post.
Save your new blog post as a draft so that the code for your icons is available in case of emergency.  I named my post "Social Media Icons - Do Not Publish Or Delete!!!" and that's working pretty well so far.  

I hope this was helpful to you!  If you have any questions or if I've left anything out, please let me know so that I can fix it. 

Allie