I swear I will have some kind of house related goodness for you next week...it's just really hard when we are NEVER home!
In the mean time, you may have notice the addition of social media icons at the top of the ol’ sidebar that look like this…
It took me way longer to install them than it should have. Mainly because I have zero skills when it comes to html code. Luckily, the husband does. He thinks it’s funny that I can write a blog but have no clue about html. Thank you, Blogger!
Today I am going to share with you how to add social icons to your site. It’s easy. If you have all of the information in one post instead of piecing it together from 100 posts. This is for my reference as much as it is yours.
If you already know how to do this or just don’t care…enjoy a nice photo of Ike eyeing Nate’s Big Mac…because it makes me laugh…
Back to social media icons…for dummies…
Step #1: Search and download icons that you like…
I used
Icon Dock. Other options include
HandyCons or
Web Designer Ledger. I guess you can also design them…but this tutorial is for dummies..like me. You can also Google them individually….like I did for my Pinterest icon.
Step #2: Upload your files to Photobucket…
Photobucket is critical because it gives your image a home on the web that is important in the coding.
Step #3: Add a html gadget…
If you are using Blogger (if not, I can not help you…dummies, remember)…click the Design tab, click Add a Gadget, then add a HTML/Javascript gadget.
Step #4: Copy the code below, paste in the html gadget box, edit for your site…
<a href=”
Add your social media direct link here”><img src="
Add you Photobucket direct link here"/></a>
My facebook code looks like this…
<a href="
http://www.facebook.com/decorandthedog%22><img src="
http://i1225.photobucket.com/albums/ee382/decorandthedog/facebook.png%22/></a>
Step #4: Repeat for each additional social media site…
Just keep repeating this code for each social media site. Easy. The code for my first two buttons looks like this…
<a href="
http://www.facebook.com/decorandthedog%22><img src="
http://i1225.photobucket.com/albums/ee382/decorandthedog/facebook.png%22/></a>
<a href="
http://twitter.com/#!/decorandthedog"><img src="
http://i1225.photobucket.com/albums/ee382/decorandthedog/twitter.png%22/></a>
Step #5: Check out your awesome new buttons on your blog and pat yourself on the back for being so awesome…
Maybe eat some ice cream too…or a Big Mac. Well, maybe you don’t get ice cream….because I made it easy for you….just frozen yogurt or a grilled chicken sandwich for you.
Any questions? Are you interested in more “Dummies are Blogging” tutorials (avoiding copy right issues)? Now I want chicken nuggets....
I swear I will have some kind of house related goodness for you next week...it's just really hard when we are NEVER home!
In the mean time, you may have notice the addition of social media icons at the top of the ol’ sidebar that look like this…
It took me way longer to install them than it should have. Mainly because I have zero skills when it comes to html code. Luckily, the husband does. He thinks it’s funny that I can write a blog but have no clue about html. Thank you, Blogger!
Today I am going to share with you how to add social icons to your site. It’s easy. If you have all of the information in one post instead of piecing it together from 100 posts. This is for my reference as much as it is yours.
If you already know how to do this or just don’t care…enjoy a nice photo of Ike eyeing Nate’s Big Mac…because it makes me laugh…
Back to social media icons…for dummies…
Step #1: Search and download icons that you like…
I used
Icon Dock. Other options include
HandyCons or
Web Designer Ledger. I guess you can also design them…but this tutorial is for dummies..like me. You can also Google them individually….like I did for my Pinterest icon.
Step #2: Upload your files to Photobucket…
Photobucket is critical because it gives your image a home on the web that is important in the coding.
Step #3: Add a html gadget…
If you are using Blogger (if not, I can not help you…dummies, remember)…click the Design tab, click Add a Gadget, then add a HTML/Javascript gadget.
Step #4: Copy the code below, paste in the html gadget box, edit for your site…
<a href=”
Add your social media direct link here”><img src="
Add you Photobucket direct link here"/></a>
My facebook code looks like this…
<a href="
http://www.facebook.com/decorandthedog%22><img src="
http://i1225.photobucket.com/albums/ee382/decorandthedog/facebook.png%22/></a>
Step #4: Repeat for each additional social media site…
Just keep repeating this code for each social media site. Easy. The code for my first two buttons looks like this…
<a href="
http://www.facebook.com/decorandthedog%22><img src="
http://i1225.photobucket.com/albums/ee382/decorandthedog/facebook.png%22/></a>
<a href="
http://twitter.com/#!/decorandthedog"><img src="
http://i1225.photobucket.com/albums/ee382/decorandthedog/twitter.png%22/></a>
Step #5: Check out your awesome new buttons on your blog and pat yourself on the back for being so awesome…
Maybe eat some ice cream too…or a Big Mac. Well, maybe you don’t get ice cream….because I made it easy for you….just frozen yogurt or a grilled chicken sandwich for you.
Any questions? Are you interested in more “Dummies are Blogging” tutorials (avoiding copy right issues)? Now I want chicken nuggets....
Hmmmm I wonder if this would work on wordpress? I love the techie tutorials! Keep em comin!
ReplyDeleteFollowing you on Pinterest now! ...as if I needed MORE reason to spend hours there...
ReplyDeleteInstalling everything on a blog always takes me way longer than it should. And yes, it will work in wordpress. What I do is use the pictures from the original website (Icon Dock in your case). Instead of linking to photobucket, I link to the image URL. It makes the first two steps redundant (but there is a risk that if Icon Dock decides to change their photos around, you will get less than perfect look on your website).
ReplyDeleteThank you for the tutorial....I love a blogger who shares her knowledge. Now I am going to have to read your instructions like 10 times to get it!!! I am going to follow on Pinterest too!!! :)
ReplyDeleteThanks so much for posting this!
ReplyDeleteNice! And totally completely 100% understand how hard it is to blog about a house when you're never AT THE HOUSE. Yeah. This is when it would be nice to be a blogger about something that doesn't require work to create something to blog about. Ha!
ReplyDeleteCool! I guess I'd have to figure out twitter in order to do this ;) True life confession: I'm a twitter virgin!
ReplyDeleteThanks for the tutorial. Now I suppose I'll need actual facebook, twitter, etc accounts to link them up to???Maybe I'll claim ignorance for just a little while longer :)
ReplyDeletetotally understand not having time to do house projects! We have been home, but between both of us being crazy at work and lots of visitors, anniversaries, and birthdays, its been a bit crazy!
ReplyDeleteI've been on a blogging hiatus but I came back at EXACTLY the right time. Thanks for sharing all this precious info. I am sooooo interested in more blogging for dummies.
ReplyDeleteThankyou for the tips and great post it has rescued me from lameness
ReplyDeleteI all the time used to study paragraph in news papers but now as I am a user
ReplyDeleteof web therefore from now I am using net for articles, thanks to web.
Here is my web blog : web design miami beach
Hello there! I know this is somewhat off topic but
ReplyDeleteI was wondering which blog platform are you using
for this website? I'm getting fed up of Wordpress because I've had issues with hackers and I'm looking at alternatives for another platform. I would be fantastic if you could point me in the direction of a good platform.
Here is my page coffee bean extract
Hi would you mind letting me know which webhost you're using? I've loaded your
ReplyDeleteblog in 3 different internet browsers and I must say this blog
loads a lot faster then most. Can you suggest a good hosting provider at a
honest price? Cheers, I appreciate it!
Feel free to surf my blog - Credit Repair Reviews
I know you wrote this a long time ago, but I just stumbled upon it today! I am a "dummy" blogger too, and needed some plain, black and white directions on creating icons on my page. Your directions are the only ones that worked, so, THANK YOU!!
ReplyDelete-Sarah
{limitedspaceorganizing.blogspot.com}
PS: Quick question, when would you suggest a "baby blogger" should create a Facebook and Twitter page for their blogs?
I've been looking for a tutorial for this! I just started my blog the other day and there is so much to learn!!
ReplyDeleteThank you for this!! I'm such an html dummy - I need someone to hold my hand.
ReplyDeleteThere's certainly a lot to know about this topic. I like all of the points you made.
ReplyDeleteTake a look at my page - vexxhost ratings