Sunday, May 26, 2013

Blogger Buttons


So... First off, you have probably been affected by whatever's causing everybody's buttons to go crazy. (I think it's probably the new HTML thingy that blogger did to us.... *sadness*...)

Anyway, so through a great friend, Dahlia (via Google+), of this very cool button making site. I've tried dozens of other codes to make buttons work, but they always just showed the button and an empty code box. But with this site, it works perfectly. (And I even found out how to customize it in ways that you normally wouldn't...)

So, I'm going to give you the link to the site and then show you what you can do with the code. ;)


OK, so, I'm going to use my friend's button for this. (I made it for her. Anyway...)

This is what it looks like.


Totally Me!



OK, so now I'm going to show you how to customize this. Here is the code I used:

<div align="center" style="padding: 5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg"  title="Totally Me!" alt="Totally Me!" /></div><textarea style="background:#ffffff;border:solid 1px #ff0066; color: #000000; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://totallygeektotallyme.blogspot.com/" title="Totally Me!" target="_blank"&gt;&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg" alt="Totally Me!" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>


See? It looks quite different then the normal code. And here's some things you can customize about it:


<div align="center" style="padding: 5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg"  title="Totally Me!" alt="Totally Me!" /></div><textarea style="background:#ffffff;border:solid 1px #ff0066; color: #000000; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://totallygeektotallyme.blogspot.com/" title="Totally Me!" target="_blank"&gt;&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg" alt="Totally Me!" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>


(The other things you can already customize on the site.)

OK, so what do these things mean?

On the first thing I highlighted, the word before it is:  border:. This is talking about the border of your code box. The word I highlighted is "solid". This means that the border of your code box is solid. You can change this to these two things: dashed and dotted. This is what they both look like:

Totally Me!


See? That's with the box with a dashed border. Cool, right? :) Now, let's talk about the font size. No offense, but... it looks huge. See at the beginning code where I highlighted "100%"? The word before it is "font-size:". This is, of course, talking about the font size, which is on 100%. You can play around with the percentages and found out what kind of size you want. For example, this is seventy percent:

Totally Me!


A little bit small... but it's still good. :) I rather like it. :)

I hope that was helpful! Please go and check out the two blogs I mentioned. They're awesome. :)

God bless||have a great Sunday
~Storyteller

P.S. A slight edit--the fonts it in the grab it code box looked a lot bigger when I made this post...so...I'm not just crazily saying that a font that actually looks right is too big. =P But you can customize it however you want. :)

10 comments:

  1. Thank you so much! You just made my life so much more simpler:p - Katy

    ReplyDelete
    Replies
    1. You're welcome!! :) Glad I could help!! :)

      Delete
  2. Oh, there's sites for that! I was trying to find out how to make the code! Thanks girl for enlightening me!

    ReplyDelete
  3. OK, I seriously am thinking codes don't like me.Nokidding. I still can't do it. I've tried a lot of different things, so when I saw this I was sure it would work, but as usual, Autumn flopped. ;) But maybe I did something wrong,with the image URL, I took the URL out of my Flickr account. Do you think that was the problem- it couldn't work with Flickr? I don't know, mayb codes don't really like me. JK?

    ReplyDelete
    Replies
    1. Autumn,

      It might be your URL. How are you grabbing it? I would suggest doing a post with your picture it in on your blog, right clicking, doing "image in new window", and copying it from there. ;)

      Delete
    2. Thanks, I JUST FIGURED IT OUT. Thanks for everything!

      Delete

be kind • be polite • be amazing