Blog Love // Social Media Buttons

Hello friends!  I’m starting a new series called “Blog Love,” which is going to be a Blog How-To topic featured once a month.  Considering I am a self-taught Photoshopper, with virtually no HTML/coding experience, I was a bit overwhelmed when researching how to design parts of the blog the way I wanted it to look.  I first identified some of the elements that attract me to the blogs that I read on a daily basis (custom headers, social media buttons, etc.), and then I did a bit of research to see how I might be able to incorporate those elements into my blog.

Through trial and error, I’ve been discovering tips, tricks, widgets, and other such things that have made my blogging design experience a bit more fun.  So as I learn, you learn!  I will try to present the information I find in an easy and readable way so that someone who is new to blogging, or blog designing, can take my advise and run with it!  Enjoy! 

SocialMediaButtons


{ Social Media Buttons }

Before you can start customizing, you first need to search Google Images for “Social Media Buttons” until you find the perfect fit for your blog personality!  Then you need to download your icons and save them wherever you store the images used on your blog.  (<– I saved the images onto my computer hard drive and then uploaded into WordPress Media.)  Not only did I love the whole custom color set from Craftiments, but I also found the tutorial the easiest to understand and follow, so I am adapting from it to show what worked for me.

Rather than just giving you code to copy and paste, I figured I’d break it down a bit and teach you so that you can add a bit of html to your blog design repertoire.  But if you just want to copy and paste and get it over with, I promise not to hold it against you!  You can just scroll on down to the bottom of this post.

{ WordPress }

From your WordPress Dashboard, go to Appearance > Widgets, and click and drag the “Text” Widget from the box on the left to your sidebar box on the right. It will open up a blank box.

Now it is time to write the code. To make the code easier to understand, it has been dissected into its essential parts (using my Twitter button & code):

SocialMediaCode

  1. Inside the <a> tag, you link to your social media profile page using the href attribute.  href=”URL of your social media profile
  2. Add target=”_blank” to open the link in a new browser window.
  3. Inside the <img> tag, you link to your social media icon image using the src attribute.  src=”URL of your social media icon image”
  4. Add height and width attributes to specify the size of your image in pixels.  This is where you resize your icon to fit your blog.  You can make the icon smaller, but I would not recommend  going larger than its original size.  height=”height in pixels” width=”width in pixels”
  5. The alt attribute is required in the <img> tag.  It specifies alternate text for an image in the event the image cannot be displayed.  For example, the user has a slow internet connection, or in the case of a blind person using a screen reader.  alt=”text describing what the button does”

Twitter

{ Blogger }

According to Craftiments (since I obviously do not have a Blogger.com platform), the sequence below is how you would customize for Blogger.
From your Blogger Dashboard, go to Design, then click “Add a Gadget.” Select “HTML/Javascript” from the menu. It will open up a blank box.
  1. Open the Dashboard and click on your blog’s name.
  2. Click Layout located in the list on the left side of the screen.
  3. Click Add a Gadget located above the sidebar.
  4. A new window will open.  On the Basics tab, scroll down to find HTML/JavaScript and select it.
  5. Add a title if you want one.  In Content type your button code as shown below.
  6. Click Save.  Back in the Layout screen, drag your new button gadget to the location where you want it in the sidebar.   Click Save Arrangement in the upper right corner of your screen.

SocialMediaCode2

{ Customize! }

Ready…Set…Customize!  Now that you understand the parts of the code, you may copy and paste, and fill in your info where appropriate.  Continue adding images and links until you have added all of the social media buttons you want!  And don’t forget to test all of your links because one incorrect character is all you need to send your readers to the wrong place!  You may also have to play around a bit with the height and width to find the best fit for your sidebar; I ended up with 40 x 40 to fit three buttons across into two neat rows.  Once you have added all of your buttons, and tested the links, select “SAVE.”  Then go check out your site!
<a href=”URL of your social media profile” target=”_blank”/>src=”URL of your social media icon image” height=”desired height in pixels” width=”desired width in pixels” alt=”text describing the button“/></a>
Did you find this tutorial helpful?
Jen
Advertisements

2 thoughts on “Blog Love // Social Media Buttons

  1. this is fabulous! my latest post is also about spreading some blog love! these are great tips –i’ve been struggling to figure this out myself. thanks!

  2. What a great series! Thanks for posting this. I actually had a designer do all my html and blog work because I am clueless, for the life of me!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s