With the blog makeover came a new button, shop, banner, and so on. I had to redo my Grab This Button widget, which gave me the idea that you guys could probably benefit from having one as well. This tutorial may be a bit too basic for some experienced Bloggers, but I'm going to go step-by-step for the newbies!
Step 1. If you do not already have a button to use, then you'll need to create one. I made mine in Microsoft Paint. You can adjust the size under Image -> Attributes.
Step 2. Upload your button to a photo hosting site. I recommend Photobucket. After uploading, grab the link to use for the next step.
Step 3. Copy the code from the box above.
Step 4. On your blog dashboard, click Layout. From your layout page, click Add a Gadget on whichever sidebar you want to put your new widget on. Select the HTML/Java Script option.
Step 5. Paste the code into the Content box. Where it says YOUR IMAGE URL, paste the link from your button on Photobucket. For YOUR SHOP/BLOG URL, type in the url address of the shop or blog that you would like your button to link to. Be sure to leave the quotation marks and replace only the text. Put whatever title you'd like for your widget. Click SAVE, drag the gadget to wherever you want it on your sidebar, and save the layout.
That's all there is to it! If you need clarification on anything, just leave me a comment, and I'll try to explain! I also love to know when anybody uses my tutorials, so please do tell me if you put this widget on your blog!!!
This will be SOOOOOOO useful! Thanks so much!
ReplyDeleteThank you for doing this!! I can't seem to get rid of that little blue box with the question mark though. It has happened on every code I have grabbed...
ReplyDeleteI seem to be miles behind, I have never used a button in my life, lol. But now, I will look into it. Thank you :-)
ReplyDeleteThanks for this! It inspired me to recreate my blog and make a button. I having problem getting the code to work, but at least I made the graphic. LOL!
ReplyDeleteThe last step where it says to replace phrases (Shop, etc.) I don't have that on my code from Photobucket... did I do something wrong?! Help!
ReplyDeleteAnd in paint, there is no attributes. Your tutorial is so helpful and I can't get it write. Boo :(
Hi! As a total newbie to blogging, I was pretty thrilled to make a button. But the link isn't working; it's linking to Photobucket. What am I doing wrong?
ReplyDeletei can't seem to get it to work. it shows sort of half on my blog, half cut off. and it only shows the code that someone else would copy and not the picture at all...your directions were great tho!!
ReplyDeleteI am missing a tag somewhere. Sorry guys, and thanks to somebody in my reader survey for bringing this to my attention!
ReplyDeleteThanks for this great tutorial Lindsay! It's been very helpful! I've posted about it in my blog (I thought you would like to know this).
ReplyDeletehttp://lapatisseriedesidees.blogspot.com/2012/02/redesigning-part-ii.html
Thanks, MaJo_BV!
ReplyDeleteAll - the code should be working properly now. Thanks!
- Lindsay
Hi Lindsay, thank you so much for this tutorial. I don't know why but the code is not working right for me, it shows the image, then the code but you cannot click on it. I want to use images to link to each label on my new blog from the sidebar but don't know what I'm doing wrong. HELP!
ReplyDeleteOk forget it I just noticed this is a "Grab this Button" so it is working as it should. It's my English which is not good enough, not your tutorial :S Do you have a tutorial about what I was telling you earlier? Thanks :)
ReplyDelete