Wednesday, August 29, 2012

How to Add Custom Social Media Buttons to Your Blogger



When I design blogs for customers I always include social media icons.  One of the most important elements to include on any website is a set of branded social media icons.  I think the icons work best when posted on your page near the top or as close as you can get.


1.  The first step is to find social media icons you like or create your own...FOR my customers I have already created them for you.  Here are some neat sites to find icons...
http://webdesignledger.com/freebies/the-best-social-media-icons-all-in-one-place
http://icondock.com/free/vector-social-media-icons
http://www.hongkiat.com/blog/free-social-media-icon-sets-best-of/

2.  Upload your files to a site like Photobucket, flicker, gmail photos or your WordPress media library.  Whatever you have will do

3.  Locate the image URLs of your new icons before advancing to the next step. You’ll need to include the URLs for each social media icon you plan to add to your site.

4.  Now it is time to write the button code.  Log on to blogger....Go to your LAYOUT page.  and on the side bar add a HTML gadet and write the following code.

Now just repeat over and over in your code box for each button your have.  If your media buttons are weird sizes...you can resize by addeing the following wording after the (") marks and before the / in the above code. (see how it is toward the end....  I think the icons shoud be set at 50x50.  It keeps your icons in a neat little line...but you decide...check out mine at the top of my page on the left side.


......"width="50" height="50".....

This same HOW to works for ANY image you uwant to add to your blog....



4 comments:

  1. Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.

    ReplyDelete
  2. Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.

    ReplyDelete
  3. Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.

    ReplyDelete
  4. "Here's a link to our share buttons: https://shareaholic.com/pub...
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    http://www.thesocialmediaha...
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help."

    ReplyDelete