I've gotten lots of requests for a tip on how to create a social media gadget, similar to the one at the very top of my sidebar. Facebook, Pinterest, and Twitter are all easy avenues for you to introduce your blog to new readers. It's important to give your blog as much exposure as possible.
What I like about this gadget is that it allows for me to pack a lot of information into a small space. A cluttered sidebar takes forever to load. Bulky gadgets can cause your readers to lose interest in your sidebar before they get to the stuff that you really want them to check out.
Before you begin:
1. This tip can be super tricky. You probably won't "get it" the first time. It requires lots of patience and persistence. Go slow. If you don't get it right the first time, walk away, then come back later and start completely from scratch.
2. Find and download a set of social media icons that include everything you're wanting for your gadget. Check out this beautiful set of icons over at Craftiments. A search for "free social media icons" will yield pretty good results, too. Look for icons with transparent backgrounds. They all need to be the same size and shape for a somewhat painless installation. My gadget was created with icons from different sets. It took quite a bit of trial and error (and hitting my head against the wall!) to make them all fit. :)
3. Make sure that the place you wish to install the gadget is wide enough to accommodate it. For example: My social icons gadget is approximately 280px wide. My sidebar is bigger than that, so I know that it will fit.
4. You'll need html codes for all of the icons. If you need html codes, you can get them from an online photo storage site, like Photobucket. Click here for help with this. For each icon, you'll want to replace the url that follows <a href=" with the url to where you want your readers to go when they click on it.
Creating the gadget:
1. Open a new word processing document on your computer. You can use any program, such as Word, Works, or Notepad.
2. Copy and paste all of the icon codes that you wish to include in the gadget into the document, one right after the other. Put them in the order you wish for them to appear. The rightmost icon needs to be at the very bottom, the leftmost at the top. It should look like a big paragraph. Here's what the code for my social icons gadget looked like at this stage:
Installing the gadget:
2. Be sure that you are in html mode. If the upper right corner of the box says Rich Text, then you are in in the right mode. If it says Edit HTML, you'll need to click on that link to be in html mode.
3. Copy the code that you created above and paste it into the gadget. Add <center> to the very beginning of the code and </center> to the very end if you want it to be centered in your sidebar. SAVE.
4. View the gadget on your blog. Then edit it and tweak it to get it to look the way you want it to. Are your icons all bunched together? Try adding a space ( ) or two between each icon. The finished code for my gadget up at the top of my sidebar looks like this:
here for help.
Can't get this tip to work for you? Start over from scratch, taking your time to read through each step. If you miss one tiny character or if you add one tiny invisible space, the gadget will probably not work. Make sure that your sidebars are big enough to accommodate the width of all of your icons.
Did you install your social media icons another way? I'd love to know how you did it! :)
Side-by-Side Sidebar Buttons (ads, etc.)
Promote Your Blog With Pinterest
Spacing in Sidebars