Freckles in April: DIY Blog Design Part 12: Other Useful Stuff

Saturday, June 30, 2012

DIY Blog Design Part 12: Other Useful Stuff



Here are a few extra little tidbits you may find useful-

Constrain the size of your images

Don't you hate when you post and then you go take a look at it and your pictures are bleeding out into your sidebars? So then you have to go back in and resize your images to make them fit?

Add this little snippet into the CSS section of your template designer in order to limit the size of your images in your posts. Doesn't matter how big they are in your post editor- they'll always fit within your posting body! Change the 600 to whatever works for your blog.

.post-body img {
max-width:600px;
height:auto;
}



Make a blog grab button

Create a button that's around 125x125. You can probably go up to 150x150 but keep in mind that some people have smaller sidebars so you don't want to make it so big that it spills out and annoys them and they get rid of it.

Host your image.

Use this code:

<div align="center" style="padding: 5px;"><img src="http://4.bp.blogspot.com/-4S9ouBZ1k2Y/T-ax2iEZXuI/AAAAAAAAFxk/X82Ut38MTNE/s1600/Button1.jpg"  title="Sumo's Sweet Stuff" alt="Sumo's Sweet Stuff" /></div><textarea style="background:#f0f0f0;border:solid 1px #666666; color: #777777; display: block; font-size: 1em; height:45px; margin:auto; padding: 10px; undefined; padding: 10px; ; width: 90%;">&lt;div align="center">&lt;a href="http://sumossweetstuff.blogspot.com/" title="Sumo's Sweet Stuff"&gt;&lt;img src="http://4.bp.blogspot.com/-4S9ouBZ1k2Y/T-ax2iEZXuI/AAAAAAAAFxk/X82Ut38MTNE/s1600/Button1.jpg" alt="Sumo's Sweet Stuff" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

Your URL - plug in your blog's URL.
Alt text - Tell them where they're going.
Image URL - plug in the URL from your hosted image.

There's a lot of extra junk in this code but it works better than the fresh code I got somewhere else so I'm going with it. You can always Google "blogger grab button tutorial" or something similar to find tutorials with variations on the above code.

The above code yields this-

Sumo's Sweet Stuff


The grab box at the bottom will resize itself according to it's space (ie it'll fit in a sidebar). Readers can easily grab one of Summer's buttons to display on their blog.


Seek professional help

Google maintains a forum for Blogger. I've only ever needed to post to it once (for that dang misaligning top widget) but I got an answer really fast and the solution worked perfectly (and also saved my butt when all subsequent widgets went crazy). If you have a problem, check out the forum. Someone may have already asked your question. I find answers there all the time. If you don't see your particular issue, post it and wait for someone who knows what they're doing to help you out!



And that's all I've got! If you have any questions or anything else you'd like me to cover, let me know!

3 comments:

  1. Thanks for that max width picture tip!

    ~ Elle

    ReplyDelete
  2. That max width thing is genius!

    ReplyDelete
  3. Thank you so much for the picture width directions! I have been trying to figure out how to fix that for ages and it was such a quick fix.

    ReplyDelete

Thanks for your comment!

Any trolls will be dragged into the trees and beaten soundly.

Related Posts Plugin for WordPress, Blogger...