After I posted about my pin-it button, some of you were curious about how to add other buttons to your blogs. It's very easy to do once you figure it out, so here's how! You can do this with any social network or even make buttons that link back to other sites such as your friends websites or blog sponsors. All you need is a picture.
For this tutorial, we're going to use this Pinterest image that I found in a web search. For other social networking sites such as Facebook, Twitter, Tumblr you can search for "social network icons" and find loads of free icons that match each other or create your own in Photoshop (or I use Photoscape). Ok, here's my image:
1. left click on the image, select "save as" and save it to your computer
2. go to your blogger dashboard and click the "design" tab
3. select "add a gadget"
4. a window will pop up. Scroll down to "picture" and click the plus sign next to it
5. When this box pops up, select "from your computer" and choose the image that you want to use. Make sure that you click the "shrink to fit" box so the image doesn't ooze out into the rest of your blog. Next, we need to get the link to the site
6. For this example, I'm making my pinterest button, so I logged into pinterest, copied and pasted my pinterest link to the "link" space above. You can do this with tumblr, facebook, twitter, etc.
7. hit "save" (tip- if you want to add a title or caption to your button, you can fill in those spaces in the box. I left mine blank since the button image obviously explains everything)
8. Now move it wherever you want it to be on your blog. Just drag and drop it on your side bar.
9. Hit "save" at the top right corner of the window, then view your blog to make sure that you like everything.
That's all there is to it! You can use this method to create buttons to other blogs, buttons to posts on your own blog, etsy shops, favorite online stores, etc. The only things that change are the links and images that you use. Any questions, just ask!
Learn everything I know about blogging and DIY blog design with my ecourse Bloggerific: A Guide to a Beautiful, Successful Blog
For this tutorial, we're going to use this Pinterest image that I found in a web search. For other social networking sites such as Facebook, Twitter, Tumblr you can search for "social network icons" and find loads of free icons that match each other or create your own in Photoshop (or I use Photoscape). Ok, here's my image:
1. left click on the image, select "save as" and save it to your computer
2. go to your blogger dashboard and click the "design" tab
3. select "add a gadget"
4. a window will pop up. Scroll down to "picture" and click the plus sign next to it
5. When this box pops up, select "from your computer" and choose the image that you want to use. Make sure that you click the "shrink to fit" box so the image doesn't ooze out into the rest of your blog. Next, we need to get the link to the site
6. For this example, I'm making my pinterest button, so I logged into pinterest, copied and pasted my pinterest link to the "link" space above. You can do this with tumblr, facebook, twitter, etc.
7. hit "save" (tip- if you want to add a title or caption to your button, you can fill in those spaces in the box. I left mine blank since the button image obviously explains everything)
8. Now move it wherever you want it to be on your blog. Just drag and drop it on your side bar.
9. Hit "save" at the top right corner of the window, then view your blog to make sure that you like everything.
That's all there is to it! You can use this method to create buttons to other blogs, buttons to posts on your own blog, etsy shops, favorite online stores, etc. The only things that change are the links and images that you use. Any questions, just ask!
Learn everything I know about blogging and DIY blog design with my ecourse Bloggerific: A Guide to a Beautiful, Successful Blog
What a great idea Brittany, I know sometimes I struggle to work out how to do something for my blog, I'm ok on this but it's always nice to share as it's not always obvious how to do these things!
ReplyDeleteThank you, Brittany! I've been struggling with how to get a button onto my site and I was going about it backwards (not surprising, actually). You are always so generous with your knowledge, and I really appreciate it.
ReplyDeleteYou're very welcome! I am not techno-savvy so I'm very thankful when I find good tutorials for this stuff. Otherwise, I just learn by poking around until I find what I;m looking for :P
ReplyDeletethat was very helpful!Thank you so much!
ReplyDeleteThanks for the tutorial. This is super useful info. I couldn't figure out how to do this and would never have guessed you inserted it as a photo.
ReplyDeleteFaith Wall
I think this post was written just for me, because I asked how to add this exact button on your last post! Thank you thank you thank you soooo much, you are awesome :)
ReplyDeleteBeccie, it was written just for you! :) thank you for the inspiration, I hope it helps! X
ReplyDeleteYou were right - I've been VERY unproductive on Pinterest since you invited me, but it is oh-so-much-fun! :)
ReplyDeleteSanne, I'm so sorry! LOL! It is fun, though and I've gotten a lot of cleaning and home organization ideas from pinterest too...for those days when I'm not pinning :P
ReplyDeletei just found your tutorial and was wondering how do you get your social networking buttons to line up horzontal i can only get min to go vertically using add gadget in layout on blogger
ReplyDeleteThank you so much for adding this tutorial! I worked it out very easily but I am having a little trouble with the buttons. They seem to keep coming up with a black background no matter how I do it? Any suggestions?
ReplyDeleteThanks again!!
- Lauren
What buttons are you using? If they don't have a transparent background, that could be the problem
Delete