My So-Called Chaos: Blog Tutorials

Showing posts with label Blog Tutorials. Show all posts

6.26.2015

Top Tips for Starting a Blog + an Ad Space Giveaway!

Starting a blog is completely overwhelming. There is SO much to do, so many options to choose from, and so much pressure to get it right. That's why Helene of Helene in Between and I got together to discuss how to start a blog.

Tips for Starting a Blog

Helene: First, remember this is your online space. You can mold it into whatever you want. Don't put too much pressure on yourself. You can get all the details worked out. Have an idea of what your blog is about and why you want to blog. Is it just for fun? Do you want to make money? Do you want to share your life? Whatever the reason (you can change it later) but it's a good idea to think about it.

Angie: Purchase a domain name. While it's easy and free to stick with your basic NAME.blogspot.com or NAME.wordpress.com when blogging, I highly recommended that you purchase a domain name. My domain name only costs about $10 a year, and it seems so much more legitimate when people visit www.mysocalledchaos.com. It also looks a lot more professional when it comes to advertisers and companies that want to work with me. Starting right out with a domain name shows that you mean business, and it helps you make sure you can actually purchase the domain name you want, because later down the road you could go to buy one that reflects your blog name and find out that it's been taken.

Helene: Pick a platform. This can be a tough decision. In my opinion, you have two basic options: Blogger or Wordpress. I am not a Wordpress user. For me it was confusing and a lot of work. But I have heard some great things about Wordpress. Essentially, you own all of your content. I like Blogger, you get free hosting, it's easy to navigate and it's simple to change your layout. Check out why I use blogger.

Angie: Stick with a clean design. One mistake a see a lot of newbie bloggers make is their design-both of the main page and the blog posts. If it's too hard to read, people wont read it. Keep it clean and easy to read and it will encourage people to actually read it.

I recommend you pay close attention to the following:

Fonts: Whimsical fonts are okay for your blog title or possibly for headers, but don't use them for your actual content. They're hard to read and discourage people from actually reading everything you have to say. Stick with a good classic and clear print font for the actual post.
Colors: Make sure you keep your colors easily contrasted-dark writing on a light background or light writing on a dark background. If you have a pink background and yellow writing it'll be too hard to read and people generally wont bother.
Formatting: Make sure you format your posts. Split it up into paragraphs (like you'd find in a news article or a book) instead of one giant blog of writing, and add photos where you can to split up the text. It makes everything easier to read and helps keep your reader's interest.
Sidebar: It's super easy to get that sidebar jam-packed with everything you want to showcase, but it is also a huge turn-off to readers. Just showcase the important stuff, and if there's more stick it in another page that you can just link to.

Angie: Think about the direction you want to go in. You don't have to commit to writing about only one thing for the entire life cycle of your blog, but it's good to know what direction you're going in. Is this a lifestyle blog where you'll write about lots of different things? Is it a family blog where you're going to talk about your kids? Do you want to share more recipes and cooking than anything? Direction is good. It's not set in stone, but it definitely helps you stay focused on the theme of your blog.

Angie: Create social media profiles for your blog. Social media is perhaps the best marketing tool there is these days. Make sure you create a Facebook Page, Twitter account, Pinterest account, Instagram, etc. If you already have all of these accounts, consider making your usernames fluid so that they match your blog and are easily associated with it. For example, since my blog is My So-Called Chaos, I use the handle mysocalledchaos on nearly all of my social networks. It's easy to associate, and easy for me to tell people how to find me.

Helene: Sponsor. If you're interested in getting your blog's name out there, this is a great way to do it. No, it's not the only way, but it helps. Sponsoring allows you to have your blog "button" (which is on the right side of my blog and links back to your blog). People will click that link and find you. Other options include sponsoring or advertising with other bloggers: guest posting, giveaways, social media shout outs, etc. Still up in the air? Check out why sponsorship works.

Angie: Start making friends with other bloggers. One of the best things about blogging is the community it builds. Take the time to go out and meet other bloggers so you can start building your community. Comment on their blogs, join linky parties or Facebook groups, etc. The more you interact with other bloggers and their blogs the more likely they are to interact back and come visit your blog. Bloggy BFFs are real, and amazing to have!

Helene: Write for you and do whatever you want. It's your space, you don't have to follow the rules!

For more tips and tricks on better blogging, check out Angie's New Blogger Series!

I'm offering one lucky reader a free Caffeine IV In-Post ad spot! That's a $45 value! Enter below:

a Rafflecopter giveaway

4.07.2015

New Blogger Series: Basic HTML for Bloggers

Learn some basic HTML codes that you can use while blogging.

When I was in high school I took a web design class. Back then, HTML was pretty much the name of the game, so my classmates and I took the time to design websites for ourselves using HTML coding and editing. These days there are so many different types of code that are more commonly used, however my basic HTML skills have been some of the most useful when it comes to updating my blog.

I can edit my design, alter little things in my post, or do so much more with HTML-sometimes I can even use that HTML coding to go around some of the pre-set conditions by blogger. So today I wanted to take the time to share a little bit of my basic HTML knowledge with you so you can use it in your blog posting.

Before we get started with actual coding, it's important for you to understand some of the common HTML terms you may need to know. Here are some of the more important things:

Angle Brackets:
In HTML coding, the "greater than" and "less than" signs are actually called angle brackets. You need angle brackets around anything you post. So all of your coding will be put in angle brackets for it to be recognized as code and not just as something you've written. Each section of your code will need to start with a less than sign < and end with a greater than sign > to be complete.

Attribute
An attribute is something added to a basic tag/HTML code to give it further description. For example, if you were to have a basic image code, but want to define it further-you could add a size attribute to change the size, or add an alternative text to the photo. The additions to the basic IMG tag are what we would call attributes.

HTML Converter
A software that converts HTML into actual code. Most blogging software automatically does this when you switch between the HTML and Compose tabs. Though, in Blogger at least, you can turn it off in the right hand menu of your post-which I have done for this post so I can show you the HTML.

Closing Tag:
Some codes require a closing tag which is usually just a mirror of the start of the opening tag but with a backslash in front of it. For example, if your opening tag is <center> your closing tag is </center>. This tells the HTML code to stop there, so you can move on to something new. Some tags require closing (links, formatting, etc.) and some do not (such as and image).

Image Code:
Alt Text is the text that shows in place of a photo on your blog/site before the image has fully downloaded. This text provides an alternative description of what the photo is in case the photo stops loading so that someone can see whatALTERNAT there-or for those people who have disabled images entirely in their browser. Without the Alt Attribute it would just show up as a missing photo icon, like this:

But if you have an alt tag and the photo link is broken, it would look like this at least:

This image is supposed to show you the alt attribute

It's also extremely useful for SEO (Search Engine Optimization) as the search engines can pull from your Alt Text when crawling-<u><a href=" googlewebmastercentral.blogspot.com="" http:="" src="www.mysocalledchaos.com" target="_blank" using-alt-attributes-smartly.html="" />Google has officially stated that they use the alt tag for this purpose. This is also useful for someone with a disability such as blindness, as the software they may be using to read your blog can also typically pull from that alt text to tell them what they would be seeing if they could see the image. In Internet Explorer the Alt Text shows up when you hover over the image.

To add an alt tag to a photo you would add the above code to the IMG code. For example:

Title Text/Title Attribute: title="TITLE OF PHOTO"
This one is pretty self explanatory, it should be a concise title of the image. In browsers such as Firefox or Opera, this is what shows when you hover over an image.

If you add both, your new IMG code would look like this:

Image Sizing:
If you want to adjust the size of your photos you can add width and height tags to it. The numbers for the sizes is in pixels though, so you'll want to make sure you understand the width of your blog post in pixels.

Your IMG code would now look like this:

For example, the main photo in this image (at the top) has a code that looks like this:

Anchor:
An anchor tab is for linking. Meaning you are anchoring whatever you want to "link" (a photo, some text, etc.) to a specific location. To anchor/link something you use the code above, and the HREF stands for Hypertext Reference. You must use a closing tag.

If you want to link to an external location with text, the code would look like this:

If you are linking a photo to an external location, the code would look like this:

If you want the photo to link to itself so it simply opens larger when someone clicks on it, simply place the URL for the picture in both the anchor tag and the image tag. For example:

Most of the time when writing a post your blogging platform or document will allow you to just do this using their toolbars, however the tips are still good to know in case you want to change things on your sidebar or clean up your HTML.

Center:
This will center whatever you're working on. It does need the closing tag or everything after putting in the opening tag will center.

DIV Alignments:

Bold:
Italicize:
Underline:
~~Strike Through:~~

Line Break:
I use this one a lot. Sometimes blogger makes an absolute mess of my posts and simply hitting enter doesn't fix it. In those cases I can go in and use the br tag to put in my own breaks. Each br tag takes you to a new line, so if you want a line space between instead of it just being on the next line, use two br tags right next to each other.

Horizontal Line:

Unordered Lists:
The ul tag is for an unordered list-which we may just call bullet points.

List item one.
List item two.
List item three.

Ordered Lists:
The ol tag is for ordered, or numbered, lists.

List item one.
List item two.
List item three.

Start Your Ordered List with a Specific Number:
Sometimes when using an ordered list you want to add something after and then start with the next number, but the code wants to start with 1 again. Never fear, you can change that by adding a "start with" code, like this:

List item eighteen.
List item nineteen.
List item twenty.

Block Quote:
Sometimes you want a quote to show up in a different format so it's clear that it's a quote. Like so:

You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something – your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.

-Steve Jobs

Add a Text Box:
Possibly one of the most useful HTML bits of code I've used in composing blogs is a text box. I've used it a lot through this post-since you can put HTML in a text box without it converting. This is really useful if you want to provide HTML For a button or something other people can grab from your site. You would remove the extra space in the closing tag from my example though, as I had to remove it so my text box wouldn't close prematurely.

Scrolling Text Box:

It looks like this:

This is a scrolling text box. You can use the slider bar on the right there to scroll up and down and read my code here. You would replace what I've written here with the information you want in a scroll box. The more you rattle on in here, the longer your scrolling could be. The sky is the limit!

Are there any HTML tags you use regularly that I missed?

Lesson 1: Blogger Lingo

Lesson 2: Finding Your Niche

Lesson 3: Social Media

Lesson 4: Start a Conversation

Lesson 5: Tips for Good Blog Design

Lesson 6: Becoming a Blog Sponsor

Lesson 7: Accepting Blog Sponsors

Lesson 8: Running a Giveaway

Lesson 9: Hosting Linky Parties

Lesson 10: Back Up Your Blog

Lesson 11: Sizing and Positioning Blog Photos

2.18.2015

New Blogger Series: Sizing & Positioning Photos

New Blogger Series: Sizing & Positionning Photos

There's something about a blog that has their photos figured out-something wonderful. When I visit a blog the first thing that draws me in are their photos. If they have large clear photos lined up beautifully in the post I'm much more likely to click their little follow/subscribe button. Even before I read through a lot of posts-it's just a fact that we live in a very visual society, and I am a visual person.

I'm not saying I wont read a blog that doesn't have good photos, there are plenty that I follow, I'm just less likely to check in as often, and I'm less likely to follow new blogs that have bad photos or poorly composed posts.

Sizing & Positioning Photos: Understanding Your Post Space

First thing is first, you must understand the space you're working with. It's kind of like how you can't really buy blinds for your window without first knowing how big your window is-what if your blinds are too small or too big? Man that would look funny.

Most blog editors are going to allow you to customize the size of your posts a little by altering the width in your template design. With blogger (unless you've purchased your template somewhere else and it's preconfigured) you can easily alter it by going to Settings > Template > Customize. Once you're in the Blogger Template Designer you can click on Adjust widths from the left hand menu and adjust your sliders there. The post size is going to be a combination of how large you set the Entire Blog vs. how large you set the sidebar sliders.

How to change your blog widths in Blogger.

If you feel comfortable enough, this can also be adjusted in the actual HTML-which may be the only way if you're using a pre-configured template. For help doing so, I recommend checking out this post. Warning: Not all templates will be the same-it may be best not to alter this if you aren't 100% sure what you are doing-and ALWAYS back up your template before altering the HTML. I have a tutorial for that HERE.

If you're happy with your blog widths, you can play with the size of your photos in your blog posts to see about what sizes happen to work for you, it will probably differ for other people, but the best tip I have for you is fill the space width-wise as best as you can. For example, I currently use a 750px width as my widest photo in order to best utilize the space in my blog posts. I try to make all photos total up to that size so they line up nicely. I'll show you how to change that in a moment.

Sizing & Positionning Photos: Choosing Photos For Your Post

Once you're aware of what space you're working with, you'll want to choose which photos you want to use in your post. Whether they're photos from your Instagram, higher quality photos you took with a nice camera, something you created, or stock photos; you'll want to make sure they have the capability to fill the space you're working with. Most high-quality photos can easily be made to fit any space-but if a photo is too small you may want to consider using something different.

Sizing & Positioning Photos: Uploading Your Photos

Uploading the photo can easily be done directly through most photo editors by clicking on the photo icon and choosing a method to upload. Once in there you can upload from your from your computer, drag and drop, choose something that was uploaded previously, enter the URL for the photo, etc.

For blogger simply click on the little picture icon in the editor bar along the top of your post:

For Wordpress, click on the Add Media button that typically shows between your title and post:

You can also use your HTML to add the photos. Instead of using the tool that is given to you in your editor, you can use some very simple HTML codes. The first thing you'll want to do is go into your HTML section (instead of the Compose section) and in the spot you want to put your photos in you can use some of these very basic codes:

If you want to insert an image that is not clickable, either to go anywhere or to show larger, use this code:

If you want to insert an image that does not link anywhere, but that opens up full size when someone clicks on it, use the following code. (This basically links the photo to itself.) If you want to link the photo to another page, use the same code but for the first url, put the web address of where you are linking the photo to.

Sizing & Positionning Photos: Changing the Size of Your Photos

Some blogging editors have a default sizes in pixels for width on horizontal photos or the height on vertical photos, for example the default sizes for Blogger are as follows:

Extra Large: 640px
Large: 400px
Medium: 320px
Small: 200px

That would mean for horizontal photos setting it to extra large means it would be 640px wide, but a vertical photo would be 640px tall. Same for Large, horizontal would be 400px wide, but vertical would be 400px tall, etc.

To change the photo size, simply click on the photo and from the pop up below it will give you the options to choose from.

Here's an example of what it looks like. I've uploaded this horizontal photo four times. The actual photo is the same size all four times (I made these non-clickable), but using the selection method above I've changed it to each different size:

New Blogger Series: Sizing & Positioning Photos

Most of the time the blogger defaults are going to work great for you, and typically the extra large size is going to work great for filling your space. However if your posts are slightly smaller, or slightly larger than the defaults you may need to manually edit the coding. Personally, I upload the photo first, select extra large, then I go in and alter the coding in the HTML section.

Here's the code as it shows normally for my first photo selected at Extra Large:

Since my optimal sizing is 750px wide, I go in and change the width to "750" and adjust the height accordingly. Make sure you change the height too or the photo may look weird and stretched out. I can eyeball it, but sometimes putting it into a photo editor and re-sizing the width there will show you what the height should be, and then you can input the most accurate number. Here's what my code and photo look like now:

Another great trick, and often a better one if you are concerned with storage space on your photo hosting service is to simply set the photo to the correct size you need before uploading, then tell blogger to just show it at it's Original Size when selecting the sizing. The only downfall to this is that it wont be able to be seen larger if it's clicked on.

Now you've got the sizing down, it's time to look into positioning photos. The first thing is your alignment. Clicking on the photo (see the example above in changing the size) will also give you the alignment options such as Left, Center, and Right. I typically think that left-aligned text with centered photos look best, but that's just my personal opinion.

You can also set the alignment with HTML too by using simple Center tags like this:

Or a more complex tag like this:

There are so many ways to position your photos, and it's super easy to do with wide photos when you just want them to fill the space, but then when it comes to vertical/square photos and putting them next to each other, it can get a bit tricky as you try to keep the widths lined up properly.

For example, when it comes to vertical photos do you want the width to fill like the wide ones do? Or do you want two vertical photos to show side by side? If you want it to fill, both the simple upload method and the HTML upload method work great-all you have to do is go in and alter the width of the vertical photo to match in the coding.

For example, if you simply upload it and set it to extra large it's not going to fill properly and may look kind of weird like this:

Here's how it looks when I take an extra couple of minutes to go in and adjust my sizing and alignment:

Here's what that code looks like:

If you want to put two photos side by side then typically the simple uploader is not going to allow them to sit right next to each other. But you can use that uploader and then grab the code from what it uploads to put into your own code, or host the photos somewhere else and just use the code. In this case, you'll want to break it down by sizing and whether your photos have spaces or not.

For this blog I don't have any spaces in between photos (my template doesn't even allow it) so I can simply take my 750px and divide to see how wide my photos need to be. For example, I know two photos next to each other have to be 375px wide each, or three next to each other have to be roughly 250px each to fit right. If you have spacing you'll want to accommodate your sizing to include those spaces. You can play with widths too-maybe one photo needs to be 370px and the next 380px just on how it fits, as long as they total up to match it's great!

Here's an example of what mine looks like with two next to each other:

Here's the code for that:

You can always play with sizing and setting things next to each other too. Sometimes I want a tall photo next to a short photo (tricky, but possible) like this: