Friday
Feb052010
Bedazzle Your Posts
Friday, February 5, 2010 at 10:23AM | Mr Lady
This weekend is the Blissdom conference in Nashville, where hoards of women and the unsuspecting dude will meet Tanis and her sparklecorn walking cane, so in honor of that I thought we'd talk about how to bedazzle blog posts and comments. Why? Because sometimes you need flair, and sometimes you'll want to use this for COMMENTS. You can do almost anything is a blog comment, if you know how.
Now, making text change in a post isn't all that complicated. Most blogging platforms will give you the tools to do it with a click. If you already know all of this stuff, please enjoy Unhappy Hipsters and have a great weekend. If you don't, won't you join us in class after the jump?
Examples? We has them. (Click to make them bigger)
paid wp
squarespace
free wp
Typepad
blogger
(PS: To use "click to make them bigger", just upload your photo at full size but insert into your post using medium or thumbnail. Your blog will do the rest.)
For comments, you have to know how to do it.
As you can see, you get progressively less tools as you go down the payscale. But that's okay; all of those things can easily be done for free, and easily, if you just know the right html. If you click HTML, or edit HTML, or Raw HTML when you're composing your posts, you can change how your words look by wrapping the following around them.
Strike out: If I wanted to cross out asshole and say jerk, but wanted to leave asshole in there, all I do is go to the word asshole. Before it, I tell my blog I want to change the html with "<" That is always the opening command for, like, everything. Then I tell it what to do. < strike >asshole. Then tell it to stop after the asshole* by closing the command with "</" That's how you end any command, like, ever. < / strike > It'll look like this: < strike >asshole< / strike >, just take the spaces out.
And that is the basic idea for most of your edits. To make Italics, replace stirke with em. So, < em >italics< / em >; again, no spaces. Bold? < strong> Bold < / strong >
Now, to use a Blockquote, which is handy for quickly identifying a, you guessed it, quote, and your platform will automatically have some weird formatting for it, just type < blockquote > and then your quote and close it with < / blockquote >. And then you will have
To change Color or Size, you need a slightly different command. This time it's "span style". You open the command with < span style = " color : #(that means color number)(now pick one)(this pink is #ff00ff) then ; " > here is the word who's color you're changing < / (that's always END, remember?) span > It will look like this, just without spaces: < span style = "color: #ff00ff ; > Color < / span >.
Font size is also a style, so start the same by opening the command: < span style = " font-size : x- large ; " > Size < / span >
To link to a webpage, you have to open a command with < a href = " Write that down. You'll use it a ton. Then tell it where you want the link to go http : // heymrlady . com "> Now write the text you want linked: Hey Mr Lady {dot} com and close the tag with < / a > All together? < a href=" http : // heymrlady . com " > Hey Mr Lady {dot] com < /a >, no spaces.
If you want that neato subtext for people to read when they hover over your link, which I like to use A) to leave funny notes and B) to tell you where you're clicking before you bother to click there, you just change that slightly. You just have to tell it there is a title with < a title = " Hey Mr Lady {dot} com " href = " http://heymrlady.com " > Hey Mr Lady {dot} com < / a > See? Go on, hover over this. Hey Mr Lady {dot} com
You can also add a link that bumps people to email. Like, if you want me to email you from your comment, you can say, "Bitch, email me!" (click it, see what happens) and add the link directly to your email by putting < a href = "mailto: heymrlady @ gmail . com " > before the words email me! or whatever you choose and then closing it with another one of those lovely < / a > things.
Want to add pictures? Yes you can, to posts OR comments. ANYWHERE. It's the same basic principle. The thing is, you have to already have the picture uploaded somewhere to use it in a comment box. You cannot upload pictures to people's comments, but you CAN tell people's comment box to see your picture. All you have to do is this:
Tell it where the picture is: < a href = " http://mrlady.posterous.com/masochistic-fish-and-adorable-preschoolers " > If you right click or command click (mac) a picture, then choos "Copy Link", that's the url you want. Now you have to tell it to pull the picture into the comment with the image address, which is DIFFERENT that it's url. Right click on the picture or command click (mac) and choose "copy image address" < img src = " http : // posterous.com / getfile / files . posterous. com / mrlady / 6BmdhOsz57hJHW1rfknR6tGNm7UnFhFSIqO1fEnpOVmFEOaQCpFkh7JpjCM3 / IMG00272 - 20100204 - 2125 . jpg . scaled . 1000 . jpg " / > Then close it all with < / a >
All together? < a href = " http://mrlady.posterous.com/masochistic-fish-and-adorable-preschoolers " > < img src = " http : // posterous.com / getfile / files . posterous. com / mrlady / 6BmdhOsz57hJHW1rfknR6tGNm7UnFhFSIqO1fEnpOVmFEOaQCpFkh7JpjCM3 / IMG00272 - 20100204 - 2125 . jpg . scaled . 1000 . jpg " / > < / a > Again, no spaces.
Sites like Flickr will give you all of this already, so if your photo is on Flickr, just click "All sizes" above the photo, choose SMALL for a comment box, then copy the code it gives you, throw it into the comment box, and it WILL appear.
If you click that picture, it will take you to the Flickr Page you'll want to look for. Just for your own reference.
My brain hurts. Does yours? Good, my job here is done.
Your weekend homework is this: Leave a comment, linking me to your favorite post you've written this week or photo you've taken. Use at least one of the tricks (strike, color, size, etc) and in the link to your post, leave us all a sub-text hovery-thingy note. Preferably filthy in nature. If you leave a picture, ACTUALLY LEAVE IT IN THE COMMENTS. If you're at Blissdom, stop reading my blog and go socialize. But leave us a photo of the conference, k's?
Now, if you'll excuse me, I have to go see if I can still drink at altitude. Denver, here I come....
*Always stop after the asshole. Just sayin'.
Now, making text change in a post isn't all that complicated. Most blogging platforms will give you the tools to do it with a click. If you already know all of this stuff, please enjoy Unhappy Hipsters and have a great weekend. If you don't, won't you join us in class after the jump?
Examples? We has them. (Click to make them bigger)
paid wp
squarespace
free wp
Typepad
blogger(PS: To use "click to make them bigger", just upload your photo at full size but insert into your post using medium or thumbnail. Your blog will do the rest.)
For comments, you have to know how to do it.
As you can see, you get progressively less tools as you go down the payscale. But that's okay; all of those things can easily be done for free, and easily, if you just know the right html. If you click HTML, or edit HTML, or Raw HTML when you're composing your posts, you can change how your words look by wrapping the following around them.
Strike out: If I wanted to cross out asshole and say jerk, but wanted to leave asshole in there, all I do is go to the word asshole. Before it, I tell my blog I want to change the html with "<" That is always the opening command for, like, everything. Then I tell it what to do. < strike >asshole. Then tell it to stop after the asshole* by closing the command with "</" That's how you end any command, like, ever. < / strike > It'll look like this: < strike >asshole< / strike >, just take the spaces out.
And that is the basic idea for most of your edits. To make Italics, replace stirke with em. So, < em >italics< / em >; again, no spaces. Bold? < strong> Bold < / strong >
Now, to use a Blockquote, which is handy for quickly identifying a, you guessed it, quote, and your platform will automatically have some weird formatting for it, just type < blockquote > and then your quote and close it with < / blockquote >. And then you will have
a lovely Blockquote, formatted however your blog is set to do it automatically. It will typically be centered in the post and emphasized somehow, maybe with italics, maybe with a great big quotation mark, maybe just centered and spaced. (See? My blog did is automatically.)
To change Color or Size, you need a slightly different command. This time it's "span style". You open the command with < span style = " color : #(that means color number)(now pick one)(this pink is #ff00ff) then ; " > here is the word who's color you're changing < / (that's always END, remember?) span > It will look like this, just without spaces: < span style = "color: #ff00ff ; > Color < / span >.
Font size is also a style, so start the same by opening the command: < span style = " font-size : x- large ; " > Size < / span >
To link to a webpage, you have to open a command with < a href = " Write that down. You'll use it a ton. Then tell it where you want the link to go http : // heymrlady . com "> Now write the text you want linked: Hey Mr Lady {dot} com and close the tag with < / a > All together? < a href=" http : // heymrlady . com " > Hey Mr Lady {dot] com < /a >, no spaces.
If you want that neato subtext for people to read when they hover over your link, which I like to use A) to leave funny notes and B) to tell you where you're clicking before you bother to click there, you just change that slightly. You just have to tell it there is a title with < a title = " Hey Mr Lady {dot} com " href = " http://heymrlady.com " > Hey Mr Lady {dot} com < / a > See? Go on, hover over this. Hey Mr Lady {dot} com
You can also add a link that bumps people to email. Like, if you want me to email you from your comment, you can say, "Bitch, email me!" (click it, see what happens) and add the link directly to your email by putting < a href = "mailto: heymrlady @ gmail . com " > before the words email me! or whatever you choose and then closing it with another one of those lovely < / a > things.
Want to add pictures? Yes you can, to posts OR comments. ANYWHERE. It's the same basic principle. The thing is, you have to already have the picture uploaded somewhere to use it in a comment box. You cannot upload pictures to people's comments, but you CAN tell people's comment box to see your picture. All you have to do is this:
Tell it where the picture is: < a href = " http://mrlady.posterous.com/masochistic-fish-and-adorable-preschoolers " > If you right click or command click (mac) a picture, then choos "Copy Link", that's the url you want. Now you have to tell it to pull the picture into the comment with the image address, which is DIFFERENT that it's url. Right click on the picture or command click (mac) and choose "copy image address" < img src = " http : // posterous.com / getfile / files . posterous. com / mrlady / 6BmdhOsz57hJHW1rfknR6tGNm7UnFhFSIqO1fEnpOVmFEOaQCpFkh7JpjCM3 / IMG00272 - 20100204 - 2125 . jpg . scaled . 1000 . jpg " / > Then close it all with < / a >
All together? < a href = " http://mrlady.posterous.com/masochistic-fish-and-adorable-preschoolers " > < img src = " http : // posterous.com / getfile / files . posterous. com / mrlady / 6BmdhOsz57hJHW1rfknR6tGNm7UnFhFSIqO1fEnpOVmFEOaQCpFkh7JpjCM3 / IMG00272 - 20100204 - 2125 . jpg . scaled . 1000 . jpg " / > < / a > Again, no spaces.
Sites like Flickr will give you all of this already, so if your photo is on Flickr, just click "All sizes" above the photo, choose SMALL for a comment box, then copy the code it gives you, throw it into the comment box, and it WILL appear.
If you click that picture, it will take you to the Flickr Page you'll want to look for. Just for your own reference.
My brain hurts. Does yours? Good, my job here is done.
Your weekend homework is this: Leave a comment, linking me to your favorite post you've written this week or photo you've taken. Use at least one of the tricks (strike, color, size, etc) and in the link to your post, leave us all a sub-text hovery-thingy note. Preferably filthy in nature. If you leave a picture, ACTUALLY LEAVE IT IN THE COMMENTS. If you're at Blissdom, stop reading my blog and go socialize. But leave us a photo of the conference, k's?
Now, if you'll excuse me, I have to go see if I can still drink at altitude. Denver, here I come....
*Always stop after the asshole. Just sayin'.
Reader Comments (45)
See? IN THE COMMENT.
http://www.flickr.com/photos/heymrlady/3512596488/" title="Genetic Brilliance by heymrlady, on Flickr" rel="nofollow">
http://farm4.static.flickr.com/3395/3512596488_4cafe0cf47_m.jpg" width="240" height="157" alt="Genetic Brilliance" />
Once upon a time I was totally cute. And had the most awesome airplane swing in the world.
http://www.flickr.com/photos/rozie/4316886933/" title="Pre flight check up by rozieeeeee, on Flickr" rel="nofollow">
PS: strike through is
notmy favourite.OMG it ate my flickr picture. Your blog is a jerk.
Holy balls, I didn't know I could leave a photo in the comments.
http://www.flickr.com/photos/41705600@N06/4330826703/" title="up by MsZDub, on Flickr" rel="nofollow">
I ate my photo too. I SWEAR I did it properly.
Okay, so this week, I wrote about http://mommysmartini.blogspot.com/2010/02/how-to-drive-your-mama-crazy-in-one.html" rel="nofollow">driving your mama crazy and http://mommysmartini.blogspot.com/2010/02/holiday-decor-good-bad-and-tardy.html" rel="nofollow">people who leave their holiday decorations up waaay too long and http://mommysmartini.blogspot.com/2010/02/when-six-year-old-asks.html" rel="nofollow">the perplexing questions six-year-olds ask.
I don't know if any of the posts are any good. But I'm digging this subtitle thing!
CRAPFISH. It ate my whole long subtitled and href'd to the max comment. I copied all the code, though, so I could double-check it. Here I am trying again.
Okay, so this week, I wrote about http://mommysmartini.blogspot.com/2010/02/how-to-drive-your-mama-crazy-in-one.html" rel="nofollow">driving your mama crazy and http://mommysmartini.blogspot.com/2010/02/holiday-decor-good-bad-and-tardy.html" rel="nofollow">people who leave their holiday decorations up waaay too long and http://mommysmartini.blogspot.com/2010/02/when-six-year-old-asks.html" rel="nofollow">the perplexing questions six-year-olds ask.
I don't know if any of the posts are any good. But I'm digging this subtitle thing!
WHY is your blog eating my comments??!?
GOOD JOB!
Because I had the link allowance too low. I fixed it!
Where did the Jack Daniels go? I am in withdrawals.
Thank you, my dear. It wasn't that I desperately needed all the links, only that I wanted to be sure I learned that little trick properly, since I love it.
I just know I
won'twill be able to do this. But I need to know one little thing...Do the pictures need to be hosted, or can they come straight from my computer?
Dang it seems as though your blog ate my titles and links. :-{
I am sad.
Oh, you spoke to my Inner Geek, girl.
Well, I'm still basking in the glow of my trip to California and this video of Emily brings me no end of glee.
If I'm going to link a picture, it should very well be this one:
http://www.flickr.com/photos/ourcrazylife/3627844610/" title="Pure hotness, indeed" rel="nofollow">
All right. Let's see if this works.
Shoot. I tried to change the title of the photo and failed the class.
One more try:
http://www.flickr.com/photos/ourcrazylife/3627844610/" title="Mr. Lady and I by angellaD, on Flickr" rel="nofollow">
Well, boo. How about I link it instead?
You and I, baby.
http://www.flickr.com/photos/ladyjess78/4169313351/" title="Pondering by LadyJess78, on Flickr" rel="nofollow">
Check out my coolness
: Bedazzle Your Posts http://www.whiskeyinmysippycup.com/2010/02/05/text-html/
Well, crap. I had a picture and it's gone. And my link is there and all subtitled coolness, but won't go anywhere. I shall be back tonight. When I have a margarita and less of a headache.
Lookit!
my head hurts. Really. I need to lay down now.
Srsly, you can put html in the comments? Now I can
die happyannoy my friends with funky comment formatting. And lots of links, like this one to my post about http://childwild.com/2010/01/27/choosing-a-greener-life-together/" rel="nofollow">chooseing a greener life together.And photos! Cute! http://www.flickr.com/photos/63946444@N00/4303799733/" title="Serena with banana by Sierra Black, on Flickr" rel="nofollow">
grrr. no love on the photo in the comments, or correcting the embarrassing typo in my link. *sigh*
WHERE DA HELL is your blog... the one I felt close to and all warm and googy inside??? I can't follow this blog... it's too sterile and not fun...
Have you gone over to the other side...
Have aliens come and sucked out your brain...
Should I report that you've been kid-napped...
Are you now a stepford blogger???
AMEN... THE END~
Great info. I'm bookmarking this post because I can't think anymore tonight.
Homework? I can't handle homework. But I'm wicked stoked to know that a picture may actually be left in a comment...
http://s957.photobucket.com/albums/ae54/mommakiss/?action=view¤t=clown.png" rel="nofollow">
poof. it's gone. shiz.
http://i957.photobucket.com/albums/ae54/mommakiss/clown.png
One more time
http://www.flickr.com/photos/ladyjess78/4169313351/" title="Pondering by LadyJess78, on Flickr" rel="nofollow">
http://www.flickr.com/photos/43243871@N04/4334090775/" title="DSC_0008 by kristinwinterrowd, on Flickr" rel="nofollow">http://farm3.static.flickr.com/2744/4334090775_1be1d7b5bf_m.jpg/>
Let's try this again...it ate the first try.
http://www.flickr.com/photos/43243871@N04/4334090775/" title="DSC_0008 by kristinwinterrowd, on Flickr" rel="nofollow">http://farm3.static.flickr.com/2744/4334090775_1be1d7b5bf_m.jpg
So the link showed up, but not the picture. I'm copying from Flickr, but there are spaces...already in the Flickr code. Okay, last time.
http://www.flickr.com/photos/43243871@N04/4334090775/" title="DSC_0008 by kristinwinterrowd, on Flickr" rel="nofollow">
Damn. Now I'm just pissed. This time I'll eliminate the spaces.
Oh, for the love of Spongebob. I'm done. Maybe later.
If he doesn't know what he is doing, mutual fund is the way to go. That might be counted as cheating in the class though.
I love these little lessons even if it takes me a few
hoursminutes to figure it all out. This week I blogged about our first trip to Dr Cuckoo , Other Butts, and Starting Meds.I think I did that right! This
shitstuff is Cool! :)Or, if you're an idiot, you can just use Blogger.
Now, where the hell is the bottle?
ok what the
hellcrap is going on with your comments?? I left this nice long many linked with the cool little captions when you hover and it never showed up :( I give up.So it's okay to bedazzle. Nice. On message boards, I would get bitched out for that. Awesome.
My posts last week were a little dark and depressing. But this was a great post. I love having the strike through code now. Never bothered to look it up before. Thanks!
If this works, I will have officially learned more about html and coding than I did in the session on this topic at Blissdom. (Where very knowledgeable, lovely women presented useful information; it was just way over my head.)
I used my http://countryfriedmama.com/?p=2467&trashed=1&ids=10172" rel="nofollow"> last post to shame my husband into doing more cooking for me.
http://www.flickr.com/photos/mommynamedapril/4336310042/" title="It's what's for dinner by MommyNamedApril, on Flickr" rel="nofollow">yes, i did eat that whole jar.
@MommyNamedApril, try again...http://www.flickr.com/photos/mommynamedapril/4336310042/" title="It's what's for dinner by MommyNamedApril, on Flickr" rel="nofollow">
apparently
i suckand my kids have turned my brain to mush. no picture for you.OK, I am late to the party as
alwaysusual, but I had to give this a shot because I have often admired your bedazzling posts and I like to learn new things. And here's a link to my favorite post from last week.here goes nothing....
Hmmm...the link and hovering smart-assery didn't seem to work. But the other stuff did, so cool! Thanks!