I know what you’re thinking-where in the world did this come from? This doesn’t seem to fit the typical “healthy” or “new resolution” posts that you would expect. I know, I know, but stay with me for a minute. So many of my close friends have started blogs this past year, and I wanted to share something that really helped me-something that many of you may have on your to-do lists; a “how-to“ on installing those cute little icons/buttons on your blog.
As a disclaimer, while I am a total nerd/techy geek at heart, I am definitely not an expert by any means. I love this technologically-advanced age (parts of it), but I’m still somewhat in the dark and trying to catch up. That being said, when I created my blog, there were a few very specific elements that I wanted, so I researched and hunted until I found helpful links, blog posts, articles that could help me achieve what I was looking for. Installing social media icons on a blogreally helps in many ways: they tidy up the sidebar and put all of the ways people can connect with you in one place, they look very professional, and they make it much easier for people to connect with you on facebook, twitter, pinterest, and many other social media sites. I searched and searched for info on this subject for days and never could really find anything useful. Just when I was ready to pull my hair out and throw in the towel, I remembered that I have a brilliantfriend, Jen, who is amazing at all things “techy,” so I begged asked her to please help me out! She came up with a great HTML code that saved my life worked like a charm!
I am writing this post and sharing this code, just in case there are any others who are also having a difficult time figuring this stuff out. Hope it helps, and feel free to leave any comments or questions you might have! (Again, this code is only set up for blogs/websites hosted by Blogger.)
I am going to try to do this step-by-step, so hopefully it won’t be too overwhelming or confusing.
I am writing this post and sharing this code, just in case there are any others who are also having a difficult time figuring this stuff out. Hope it helps, and feel free to leave any comments or questions you might have! (Again, this code is only set up for blogs/websites hosted by Blogger.)
I am going to try to do this step-by-step, so hopefully it won’t be too overwhelming or confusing.
Step 1. Choose your social media icons.
You can find some here, here, or here. Icon Finder is a great resource as well. You can also google “social media icons” and it will pull up countless resources and sites to choose from.
*Note: Choose icons sets if possible, so that everything looks cohesive, and also pick icons that match or coordinate with the style and feel of your blog.
Step 2. Download the icons to your computer.
You can find some here, here, or here. Icon Finder is a great resource as well. You can also google “social media icons” and it will pull up countless resources and sites to choose from.
*Note: Choose icons sets if possible, so that everything looks cohesive, and also pick icons that match or coordinate with the style and feel of your blog.
Step 2. Download the icons to your computer.
Step 3. Upload the icons/images to an image hosting site. (I used Photobucket, and that is the way this particular code is written, so you’ll have to use that site if you want the code to work.)
Step 4. Sign in to your Blogger account, select the blog that you will be working on, and go to the “Layout” tab on your left. Click, then look at the layout of your blog and find a little rectangle that says “Add a Gadget.” Click on that, and a new window will pop up. Scroll down until you see “HTML/JavaScript.” Clicking on that will open a new window that says “Configure HTML/JavaScript.” You are doing great!! Easy, right?
In the “Title” bar, type in what you want your header to be. (Mine is “Connect & Socialize,” but feel free to personalize to your preferences.) After you’ve completed that, minimize that screen-we’ll come back to it later.
Step 5. Copy the code below (exactly), then reopen your “HTML/JavaScript” window, and paste into the space that says “Content.” (The first box’s code is designed for one individual icon, the second box contains code for four icons. Use one or all four, or customize to your blog’s needs.)
Step 4. Sign in to your Blogger account, select the blog that you will be working on, and go to the “Layout” tab on your left. Click, then look at the layout of your blog and find a little rectangle that says “Add a Gadget.” Click on that, and a new window will pop up. Scroll down until you see “HTML/JavaScript.” Clicking on that will open a new window that says “Configure HTML/JavaScript.” You are doing great!! Easy, right?
In the “Title” bar, type in what you want your header to be. (Mine is “Connect & Socialize,” but feel free to personalize to your preferences.) After you’ve completed that, minimize that screen-we’ll come back to it later.Step 5. Copy the code below (exactly), then reopen your “HTML/JavaScript” window, and paste into the space that says “Content.” (The first box’s code is designed for one individual icon, the second box contains code for four icons. Use one or all four, or customize to your blog’s needs.)
Step 6. Here’s where it gets a little tricky; stay with me. Choose which icon you want to appear first. Sign in to your Photobucket account and go to your album. Choose the icon that you want, click on it, then left-click on the image and choose “Open in a new window.” When that new window opens, the URL/web address at the top of the screen is the one that you want to copy and paste into your code. Leave that new window open, and go back to your “HTML/JavaScript Gadget window with your code, and delete what is written within the first set of parentheses: insert URL/web address of where you want to be directed to ONLY. Delete anything else, and the code will not work.
Step 7. (This is harder to explain/type than I originally thought!) Once you have deleted what is within the first set of parentheses, minimize the “HTML/JavaScript” Gadget window again, and go to the website that you want to be directed to (i.e. your facebook page, your twitter profile, etc.) Copy the URL/web address at the top of that screen. Reopen the window with your code, and insert that address within those parentheses. You are doing it! I promise, you’ll feel super smart when we’re done, and even more so when you realize that it actually works!
Step 8. You are going to do pretty much the same thing within the second set of parentheses. Delete everything that is written between them: insert URL/web address of the social media icon you want here
Now, go to the new window that you opened for your social media icon, and copy that URL/web address. Return to your window with the code, and paste the new address within those parentheses.
Step 9. Make sure that you save your work as you go-you definitely wouldn’t want to lose it!
Step 10. Repeat steps 5-7 for the remaining three icons.
Step 11. Save, then go to your blog and check it out! You should see all icons in your sidebar (wherever you placed the gadget in your blog layout), and when you click on one of them, it should take you immediately where you want to go!
I know that this can be so daunting and frustrating if this is your first time trying anything like this, but I promise that you really can do it, and you’ll be so thrilled with the results (and yourself) when you’re finished! (If you are really comfortable with coding and web design, please disregard all of the step-by-step instructions, I just really wanted to explain it all in detail to make it easy for anyone to be able to do it.)
I hope that this helped a little. Forgive me if it didn’t all make sense-I’m still learning too. Please feel free to leave comments or questions, and I’ll try to reply as best as I can.
0 comments:
Post a Comment