Previous month:
January 2014
Next month:
March 2014

Posts from February 2014

Back To Basics: HTML for your Images

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out part 1 in the series.

We're back with another installment of "Getting To Know HTML" and today we're going to talk about how to use HTML when adding images to your blog post.  Images are what grabs readers' attention before reading a word so let's make a good first impression and give them a reason to stick around.  

Coffee Mug Image

To follow up our previous HTML post, we are sticking with the Edit HTML tab on the Compose page.   You can still use the Insert Image button while using the HTML tab. The above image was inserted and styled using HTML only (no Aviary or Insert button involved).  We'll break down and explain the components used to create this image's appearance.

The image tag always begins with "img" and followed by an attribute tag to identify the image source ("src" ) and enhancing your images by adjusting the size, adding borders, and descriptions. So we start with our image HTML and we'll build from there:

<img src="https://mperezsay.typepad.com/coffeemug.png">

The original size of this photo is 639 × 638 px was but made smaller by adjusting the  "width" and "height" attribute to width="300" and height="290".

You can also enlarge your picture but it's not recommended as it may distort the quality of the image so remember, it's better to downscale a large image than enlarge a small one. 

To give it a thick solid black border around your image,  you can pull this off by including a style parameters to your code including Width, Style, and Color like so:  style="border: 10px solid black;"

If you hover your mouse over the above image, you should see a little pop-up text that says "Good Morning Typepad!"  This is added by including the Title attribute simply as: title="Good Morning Typepad".   In addition to this, you can add alternative text to your image file so if someone's browser is a little slow to load images, instead of reading "coffeemug.png" in the box, it says "Coffee Mug Image" using the "alt" attribute.

You may notice the placement of the image and spacing around it.  If you don't want to mess around with the <p> tags and don't want to use the Align Center button, you can adjust the spacing by adding hspace for horizontal spacing and vspace for vertical spacing.

So let's put this all together and see the HTML for the image above:

<p><img style="border: 10px solid black;" title="Good Morning Typepad!" src="https://mperezsay.typepad.com/coffeemug.png" alt="Coffee Mug Image" width="300" height="290" hspace="150" vspace="40" /></p>

Like text links, images can be linked to another website. To link an image, you start the HTML the same as a text link which we learned about previously, only this time we're connecting it with the image HTML as shown in this example from our Knowledge Base:

Screen Shot 2014-01-25 at 3.35.27 PM

 

Adding a link to our Coffee Cup image will look like this: 

<a href="http://www.typepad.com" target="_blank"><img style="border: 10px solid black;" title="Good Morning Typepad!" src="https://mperezsay.typepad.com/coffeemug.png" alt="Coffee Mug Image" width="300" height="290" hspace="150" vspace="40" /></a>

You can also try these codes out in your Sidebar if you want to skip using our Sidebar Image Uploader and go strictly with the Embed Your Own  HTML module under Design > Content and insert your image HTML there.

Play around with your image HTML coding skills in your test blog or a saved draft posts and see how much you can do on your own!


Check out our newest theme: Tectonic

We've recently released a new theme and we think it's pretty unique. We combined a sleek, grid-based layout with the colors of nature for a fresh look that will suit all types of blogs. It has a 'sticky' navigation bar that stays at the top of the page as you scroll, making it easy for your readers to find important content. There are four color combinations available, so you're sure to find one that suits your tastes.

Tectonic

With Valentine's Day swiftly approcating, we also want to recommend the Heartbeats theme for anyone who wants to show a little love on their blog.

Heartbeats

You can try either theme by going to Blogs > Design > Choose a new theme. If you want to try a theme before you commit, we recommend setting up a test blog and applying it there.


Typepad 101: Turn your blog into a book!

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. The tip is suitable for bloggers at all levels - no special tricks or upgrades needed.

Although Typepad goes to great lengths to back up your blogs, sometimes you want the security of having a copy of your blog on your computer. You can export your blog posts, pages, and comments any time at Settings > Import/Export. The export is in a format that is easy to import to a new blog, but maybe you want a copy of your blog that mirrors your blog's design and includes all your photos.

BooksIf you want a hard copy of your blog to share with your friends and family who don't get their news online, or if you like the idea of having your blog on your bookshelves to flip through any time, you can do that! There are blog to book tools you can use to turn your Typepad blog into a beautiful book filled with your photos and writings.

A couple services we recommend to turn your blog into a book are Blurb and blog2print. Ask about the discounts they offer for Typepad bloggers! By using one of these services, you can design your book featuring all or some of your posts and photos in a soft- or hard-cover book, and the book (or books!) will be delivered to you.

If you simply want a backup copy of all images and other files uploaded to your Typepad account, just let us know! We're happy to do an export of files for you. Just open a help ticket at Help > New Ticket with your request and give us a couple days to complete the export.


Rolling Out of Beta: Sidebar Image Uploader and Author Photo Configuration Options

A few weeks ago, we announced two new features for our Beta Team to try out: the sidebar image uploader and author photo configuration options.

We're pleased to announce that testing has gone well for these features and we've started rolling them out to all of our bloggers.  Expect to see these new, exciting options in your own Typepad account soon (if you don't already have them)!

If you'd like to get first crack at features like this in the future, simply go to the Account tab and sign up for the Beta team!