Southern Listeners

Thursday, December 2, 2010

Adding a Third Party Gadget

This one is for beginners. Advanced users, please ignore this post. Lot's of users are having trouble in placing third party widgets. You can't blame them, Blogger is not user friendly when it comes to this. To add a third party gadget, you ought to use the HTML/Javascript gadget. But this is not readily known. If I were a non-technical person, I wouldn't have any idea what a HTML/Javascript gadget is. In Blogger Help Forum, I have captured dozens of screen shots to pin-point exactly where the HTML/Javacript gadget is. With this post, I hope I won't be capturing anymore screenshots.

Step 1:If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.
If you're using the new Blogger interface:Go to Dashboard - Layout - Add a Gadget

There will be few 'Add a Gadget' links. Choose the one where you want your gadget to be. If you're adding a script (like a background from Cutestblogontheblock or ShabbyBlog), it doesn't really matter where you place this gadget.

Step 2:

From the pop-up window, choose HTML/Javascript:

Lot's of users tend to click on 'Add your own' link on the left panel. This is not for you, unless if you're a gadget maker and you want to add your own gadget. I admit, this link confuses lot's of users. Blogger should seriously consider renaming this link.

Step 3:

Paste your script into the editor and click Save.

Title field is optional. Most of the times I leave it blank. That is all, you're done. Have fun!

JimneedsPunished: Get the code first, and follow the steps above. I cant tell you where to get the codes because that's something subjective and totally up to you. And not to mention, tangential to this tutorial.

Your old background is overlapping with the shabbyblog's background, hence the white part. Here's what you should do. Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

@Moddy: You don't have to add CSS to add a script for Shabby Blogs. Use the HTML/Javascript gadget shown in this tutorial. As for the Add CSS, if you ever had to use it and you can't find it under Advanced, use a different browser, preferable Google Chrome, to see if you can find it there.

@Frances: You can upload your image directly to blogger as a background by going to Dashboard 0 Design - Template Designer - Background.

If for some reason that doesn't work, there's an alternative. First you need to upload your image to an image hosting site. You can use imageshack, photobucket, or even Blogger, just upload to one of your posts and get its direct link.

Next, go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

I followed all of your directions for adding the shabby blog code, but my old blog background is still there (with shabbyblog site up in the top left corner). How do I get the old background to go away?

@anon: I'm not sure if I'm getting you right. There seems to be only one background in your blog, and I'm not sure if that is your old background or new background. If you could get in touch with me via email, probably I'll be able to assist you better. Use the form below.

First of all, congratulations for this wonderful site, you ' ve been very helpful with your tips! Thank you so much!I 'm trying to embed a soundcloud player into my blog with HTML/JavaScript. The player is there, unable to play the track, though! Am i doing something wrong? I followed these steps, i' ve done it before, but the player is not playing music...

Hello! First of all, congratulations for this onederful site;) You 've been really helpful! Well, i am trying to embed a music player into my blog through HTML/JavaScript gadget but, while the player is inside my blog page, it is unable to play the music..i 've done it before but now it just doesn't work. I don't think i am doing something wrong..any ideas? Thanks in advance!

Hi! I realize I'm late to the party, but I'm ready to pull my hair out. I recently decided to give my blog a face lift. I went to shabbyblogs to get a new background, installed the HTML gadget and on my preview, it showed up just fine. However, now it is showing nothing but the shabbyblogs logo. I've tried the CSS code mentioned above, changing the background, deleting the gadget and reinstalling. I'm at a loss! Any ideas?

I think it might be the other blog, showing as a black background. Purely because I am having an identical problem loading a shabbyblogs background and that's what mine is doing.It worked before, but looked too narrow so I got a wider one, now won't work with either background.Script is in the 3rd party widget I added under layout, and the background shows in preview underneath template editor, but not in liveview or blog online. I thought I did something with removing the orignal background image for the template before, but can't see what now. Have tried loading script, then removing background, and the other way round. Just shows black on the blog. All of shabbyblogs tutorials/help etc refers to old version template designer so I can't work it out. Anyone got an idea?Sorry to OP, but you've given yourself a status of 'someone who knows and actually cares enough to help', and they always seem to be thousands of miles away!Thanks

Gadget/widget won't show up. I've been working on it for DAYS and it's getting annoying now. I can't find even one solution on the Internet. This is my blog: http://thechaiichishop.blogspot.com/

Title just show up but the widget won't (as you can see on the left sidebar there is a title which says "The Best Animal Film and Documentaries", that's supposed to be a carousel - a widget I got from amazon).

I'm wondering if there's a problem with the template (i've tried changing to different ones but it still won't work) or blogger or me. I'm desperate.

I've inspected your gadget, and it looks like the gadget itself is broken/non-functional. It has all the necessary frames and all, but it's lacking in content - literally, there's nothing for your template to show.

Tell you what. Let's bring this discussion to Blogger Help Forum. It'll be easier for me to help your there. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

You might wanna include the content of the widget when creating your discussion thread in the forum.

Hello,I have stumbled upon this very helpful post by chance when trying to sort out a problem I have with my blog background (shabby blog). It shows up great on my laptop and desktop but on my iPad, it appears only halfway down the page. I just wondered if you had any ideas? I am a novice and not very technical! Thank you so much for any help you might be able to give!Blog is www.alittlebitgreedy.blogspot.co.uk

I don't have an iPad and as such I couldn't quite picture what the problem is (or think of possible workarounds). Could you perhaps take a screenshot of your iPad depicting the issue, upload the image somewhere, and give me the link so that I can have a look?

Hello, came across this while having a problem with my blog. I can't get the shabby blog icon to go away, and some of the background appears to be there as well. Have tried to use the CSS overwrite, but nothing changes. Also have tried to change padding to eliminate the white space on the left and right side, but that won't adjust either... wondering if it's all related to Shabby Blogs. I'm not a techie, so any help would be appreciated! :) Blog is www.lullabiesandaleathernecklife.blogspot.com. Thanks!!

I am having a problem inserting a cookie statement pop-up on my dynamic view blog www.tastesofhealth.eu. You would need to add to HTML and then it appears in other templates but not in dynamic. Any ideas? Thanks. Simon