Saturday, March 16, 2013

How to Get Disclosure Buttons On Your Blog Posts Without Using Images


How to get disclosure buttons that aren't images
With the new FTC Disclosure Guidelines, bloggers are scrambling to figure out how they'll include all of the disclosures needed without making their websites look crazy. Most want to use a simple button for their disclosures, though the problem is that many of the RSS Readers, Facebook, Google Plus... they all like to grab the first image in a post for the thumbnail. (Well, Facebook sometimes grabs a random image. Often that's my facebook icon in the header.) So, how do you make a button using just html or css instead of an image? Oh, and it needs to work in Blogger.

I've taken the script from a few places, though the best one was at DevGrow, smooshed a few things together and customized/simplified to create these buttons. The buttons can go to any website you want (great for linking to your full disclosure policy), change size according to what is written in them (so you can re-type what is in them according to the disclosure you need for that post), and you can make them any color you want! Oh, and they work in Blogger. Did I mention that? (For some buttons that work in Wordpress, head over to my friend Carleen's blog, where she has Disclosure Buttons For WordPress Blogs.)

Here's a close up of the buttons:
CSS buttons

I've currently made them black, white and grey with a little gradient in them to add interest, but you can make the color any hex number, remove the gradient, make the font bold, etc.

 photo edit-html.jpg

Add this to the CSS area. It can go anywhere, but I just add it as a new section near things like "Mobile".

/* Buttons
----------------------------------------------- */
.button {
padding: 5px 10px;
display: inline;
background: #ffffff url(button.png) repeat-x bottom;
border: none;
color: #000000 ;
cursor: pointer;
font-weight: normal;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.button:hover {
background-position: 0 -48px;
}
.button:active {
background-position: 0 top;
position: relative;
top: 1px;
padding: 6px 10px 4px;
}

.button.black { background-color: #000000; color: #ffffff;}
.button.white { background-color: #ffffff ; color: #000; }
.button.gray { background-color: #f1f0f0 ; color: #000; }


 photo customize-code.jpg
Here's where you change things up!

Add the URL of where you put this image: Download the gradient, upload it to a site like Photobucket and then put the direct image URL in. If you don't want a gradient, remove the entire url(button.png).

To change the background color of a button or the font color to any color you want, you'll need to use the hex number. You can get that from using a program like Photoshop, or you can head to Colour Lovers and play with colors until you find one you like.

 photo add-html.jpg
After a few hours of trying to get the page to display html like I could get it to display css and I gave up. But, I think it's pretty easy to see what to type. It's a normal link, but to have it show up as a button use class="button white" (or whichever color you want) in the link. Put the html where you want the buttons to show up. So, the top of a post and the bottom of a post is easiest, it's best to just add this to the post template (under settings->post) so it autopopulates in every new post without you doing anything. You can display as many buttons as you want, you can rename buttons to whatever colors you want, etc.

39 comments:

kelly logan gould said...

I"m trying this now!! You rock! Thanks!

The Beauty Professor said...

Excellent...thanks so much for sharing this, Christine! Hope your weekend is going well.

Warm regards,

--The Beauty Professor

Michaela said...

Great post and script! Australian bloggers don't need to comply with this yet, but it's good to have this available, especially as I like to be 100% transparent with where I get products from.

Jackie said...

I don't think it works on Chrome (Google's browser). All that's showing up for me is a regular link. Like where your links are under the title for facebook, twitter, etc under that is just a regular teal link that says "nothing to disclose".

Christine Mikesell said...

Are you sure you have the code installed correctly? I use Chrome and I can see it working just fine on my test site and a few friends that have it up and going already. The white buttons will look just like a regular link if you don't have the gradient installed correctly (you need to download the image and then put the URL in the code of where you have it stored). Email me at cemikese@yahoo.com and I can help!

StephanieLouise said...

I think one of the reasons I'm confused is I'm ot seeing the buttons at the top either? I didn't realize it! I'm on firefox & it looks like a link "nothing to disclose" instead of a button.

Christine Mikesell said...

Sometimes depending on your browser it won't show up in preview. I can see them in chrome, but not Safari. But if I publish, I see them in both places. I'm not sure why, it's strange.

Kristie Burnett said...

Thanks Christine!! xo

Chalkboard Nails said...

Really looking forward to using this. Thanks so much!!

StephanieLouise said...

Oh no! I have not even begun to work them into my site yet! I meant on your site. It also looks like a link on my mobile. Let me know if you want a screen shot or anything!

Christine Mikesell said...

I don't have them installed on my site! I have links since I usually have way more to say and the buttons would end up HUGE! I might use them sometime, bug I've been using them on my test site to work on this.

Sarah said...

Great tips, thanks for the share. I'll be putting it to use shortly.

Shelly said...

Wow! You are a computer genius!! Thank you so much for figuring this out and writing it in such a way that a total non-techie like me can actually use it. And thanks for being so kind in sharing it with all of us :) Bookmarked and will be adding them to my blog when I get home.

Krystal Emery said...

I love you.

Gwen Sexton said...

Everything works & looks great except that it will not go to the link for my Disclosure page. It redirects to Blogger home. Any suggestions? Thanks in advance!

Christine Mikesell said...

That's odd! Email me screen shots of your html and css at cemikese@yahoo.com

Arielle said...

Thanks so much for posting this! You're always so helpful!

Alice said...

For anyone having trouble making the button show up:make sure you have <...class='button [color]'> without the "." (so you should have the above instead of"button.[color]'). I went NUTS trying to figure out what was wrong with mine until I checked that tiny detail!

Christine Mikesell said...

Yes, the html has no . !! :D

Michelle Marino said...

This is going to sound so dumb but ok ... I did this and it is showing up but only the letters/words are, I went back into the template to darken up the background of the button but cant find the /*Buttons--- anymore ? it disappeared LOL I put it right above columns like you did , I am clearly just missing something. Thank you !!
sparklemepink.com

UnitedInBeauty said...

This is an amazing tutorial, thank you so much!! I'm not sure what I'm doing wrong though, as I am only getting links in my post as opposed to a button? Any suggestions?

Ameerah@Valiantly Varnished said...

I'm awful at stuff like this so thank you for writing such a clear and easy to follow tutorial!

Christine Mikesell said...

@Michelle, the html is a regular link, so it must just be showing up as one and probably something is wrong with your CSS. I usually do a page search to look for things, but if you can't find it now, then it probably didn't save into it. I think you probably need to reinstall.

@UnitedInBeauty- it will show up as a link rather than a button if your CSS isn't installed correctly or you aren't using the class="button white" correctly, some people were adding a period in there. Email me a picture of your css and html and we can fix it! cemikese@yahoo.com

Ishah C said...

Thank you, thank you, thank you so much for this! I was about to create button images but didn't want the thumbnail problem that you mentioned. I am using them on my blog now :)

Gini@Sassy Paints said...

I just can't get it to work. it shows as a lonk and then says the page can not be found. I guess I'm just not going to use the buttons :(

Kimber said...

Is anyone else having issues with their banner being pushed to the right after installing the css? My banner is right justified and cut off in firefox now, but looks fine in Safari......any ideas??

Christine Mikesell said...

Ginni- did you input your URL for the button.png file? Most people are skipping that step if it is showing up as a link. As well, something is wrong with your link if it is coming up as URL not found- double check that you have the address correct with "" around the link, some people had misspelled their link or forgotten quotes. Let me know if it still isn't working!

Kimber- there isn't anything in the CSS that does anything with justification and it shouldn't mess with your banner at all, though if you have a lot of different scripts in your template there's no telling what is interfering

Silver Lips said...

Thank you so much for sharing this!!!!! I swear i need to attend a bloggers tech conference asap seems like so much back-end stuff i'm clueless about. Thanks again :-)

Mama Jenn said...

Thanks for sharing! Do you happen to know if the buttons will show up in RSS feeds?

Christine Mikesell said...

They show up as text like a link, but they aren't images so the RSS feeders will pick the "real" image you have leading your post as the picture.

thalie @ Glazed Talons said...

Ok,I know this is supposed to be easy,but I am completely stupefied on how to do this on my blog.I get as far as backing up my template,and then go "what?"

When you write "Add this to the CSS area", I can't find that anywhere on my template. And do you mean add the code that is grayed out in your box up there? Thank you for your help.

Christine Mikesell said...

It's a little harder to find now that they changed the html box yesterday. It's hidden behind a "carrot". It also works if you take the code in the gray, then go under customize (instead of edit html), then advanced, and put that into the box under "Add CSS".

Next, you need to download the button.png (it's linked above), and upload it to wherever your images are. Put the direct link to it in the place of the button.png in the parentheses and then edit the colors.

Nathalie's Talons said...

Hi Christine! I am just getting around to fixing this on my blog.When I go to "Download the gradient", all I get is a blank page,and nothing actually downloads to my desktop.Thanks for your help.

Christine Mikesell said...

It's not a blank page, you're actually just opening the graphic in a window. It's only 1 pixel wide so it's hard to see! Right click to download the file and you'll be all set!

Nathalie's Talons said...

Thank you,Christine! :-)

Nathalie's Talons said...

Okay I am just not getting this.Sorry.I right-clicked,I'm not getting the option to "download the file" I get "open in new window" but no way to download,even when I right-click.

Nathalie's Talons said...

I think I may be getting it now,but there's another thing I don't understand. You're saying to copy the code from where I uploaded it to photobucket,and place the code in between the parentheses where (button.png) is and remove the words "button.png"?

Nathalie's Talons said...

I am so sorry I don't mean to keep writing message after message.I did all the stuff,ADD to CSS,and then clicked Apply to blog.But nothing shows up on the blog.

Christine Mikesell said...

It sometimes depends on your browser whether it will give you the option to download the file. Because it's just an image, that option isn't always there. If it opens in the new window you can right click over the image to save it, but it's hard to get in the right spot with it so small.

Once you have it up loaded you need to copy the URL link from photobucket (they call it the direct link) and put it in place of the parentheses and remove the button.png word.

Once all of that is done you need to put html wherever you want the buttons to appear. It's a regular link, but with class="button.white" added to the code.

Post a Comment

I love comments! Please ask away, provide info on how you liked something, etc. Note that spam, comments with random links (which I count as spam), anything not in english (again, spam) and comments that are completely unrelated to anything will all be deleted.

nrelate

progrids