Book Blogging 101 – Tutorial

HTML can be easy!

I was supposed to write a Brainstorming post for this week, but brainstorming gives me headache from the many “brainstorming” meetings that I had to sit through when I was delegated to the 3rd Circle of Hell in a past life (corporate marketing = 3rd circle of Hell). Thus, I’ve pushed Chapter 6 back to next week. I decided to interrupt my boring, yet hopefully helpful take on blogging tips with a bit of knowledge dropped regarding a question I get asked all the time. “I have social icons – now how do I install them?”

Step 1: Find the Image, I have Free Social Icons for you!

Oh look — I have some for you here:

These are the most common social icons that book bloggers usually include on their blogs. If you want more options there are usually tons of images available for free download across the web. Just search “Free social icons” in Google. Or if they are available like I have  here, just right click and save them to your hard-drive and keep them for your own.

Step 2: Host the Images

The second step is to host them with an image host, or server. The easiest way to do this is just by inserting them into a Blogger or WP post or page. Like I’ve done here:

Just like you would when creating a post, insert the social images into a post or page. Then publish the page or post.

The icons will show up in your post, click on the image you want to use.

The Image will now appear in the gallery view. Along with all the other images.

You now want to right click the image you want. Depending on the OS you are working within the options will be different. I get a very convenient option of Copy Image Address, but in some browsers or Operating Systems you might have to open the image in another window and then copy the URL that is shown, it will look like this:

<span style="color: #3366ff;">http://2.bp.blogspot.com/-ZQDJE1RK6TM/UG2X4s803vI/AAAAAAAABfk/4RxDCniSwQQ/s1600/good.png</span>

You now have the images URL. Congrats. Now moving on to the HTML.

Step 3: Setting up the Framework in HTML

I always recommend using a basic text editing software like Notepad or TextEdit. If you have an HTML editing software, what is called a WYSIWYG things could be much easier for you, but they can add their own information. So I recommend basic for setting this up.

Your code will be separated into two COMMANDS. The Get Image Command and the Get URL command. Very simple HTML but if you drop a ” it can get very aggravating.

The Get Image HTML Part:

Telling a browser you want an image is the IMG tag.

This is what it looks like in use:

http://3.bp.blogspot.com/-sENWxrgWrlo/UG2X5nPDebI/AAAAAAAABf0/FSUfq_1_euw/s1600/rss.png

The SRC tag is telling the browser where to find the image, and you put the URL of the rss.png that you hosted on Blogger in ” quotes telling the browser that it is looking for a URL.  Simple right?

Now for styling purposes we are going to add some attributes, just because HTML can get wonky, and if you put more than one image, they will be right up against each other, until they run out of room and then they will go on the next “line”. This is will vary depending on how big your sidebars are set in your blog. So I’m adding a small styling to the image, with a right margin. It is set to 2px you can drop that down to 0px if you do not want any space, or you can increase this if you want it to track across your margin:

<img src="http://3.bp.blogspot.com/-sENWxrgWrlo/UG2X5nPDebI/AAAAAAAABf0/FSUfq_1_euw/s1600/rss.png" style="margin-right: 2px;" >

The Get URL HTML Part:

Now we are current working on the RSS image – so you want to find out what your RSS link is. Scroll down to the bottom of your page and look for the link that says Posts (ATOM) if you are in blogger:

Right click on Post (Atom) and scroll down to Copy Link

If you are using Feedburner or another Feed software, go to that software and look in your settings for your feed URL. Use this link.

We are going to create a LINK code. Link code uses the tag A. Then you use the HREF tag which tells the browser where to go. We are going to wrap this tag around the image so the browser will know when you click on THAT particular image you get THAT particular link:

<a href="http://newadulttester.blogspot.com/feeds/posts/default">
<img src="http://3.bp.blogspot.com/-sENWxrgWrlo/UG2X5nPDebI/AAAAAAAABf0/FSUfq_1_euw/s1600/rss.png" style="margin-right: 2px;" >
</a>

You have to remember to close the tag with the tag </a> if not the browswer will not know to stop linking — and everything will be linked to your RSS link.

We are not done yet though, it is a smart practice to open a new window when linking OUT of your site. You don’t want them to leave your blog right? This is accomplished by adding a new tag within your A tag. It is called a TARGET attribute. You are telling the browser WHERE you want them to open the page. You have a few options within HTML, but the one you are going to worry about is BLANK. Meaning, a new page:


<a href="http://newadulttester.blogspot.com/feeds/posts/default" target="_blank">
<img src="http://3.bp.blogspot.com/-sENWxrgWrlo/UG2X5nPDebI/AAAAAAAABf0/FSUfq_1_euw/s1600/rss.png" style="margin-right: 2px;" >
</a>


Now you have one image down!! All you have to do is repeat this step for each image you want linked and include the respective links for each image. If you use all six of the icons, you’ll have the above code repeated six times. Just change the HREF link and the SRC link. If you want grab this code to start and insert your own URLs:

<a href="URL HERE" target="_blank">
<img src="IMAGE URL HERE" style="margin-right: 2px;" >
</a>


Finally you will place all your code within an HTML or TEXT widget within your blog and you’ll start building more followers from your blog.

Tune in Next Week for Chapter 6: Creative Thinking – Brainstorm for a Better Blog (hopefully!)

Book Blogger News:

Bloggiesta

Building your better blog time is coming to a close and hopefully everyone has their blogs all sparkly and reformed to deliver great happy content. If you missed this years fiesta I’m sure it will be back again next year, but search the hashtag #bloggiesta and the posts, great information was given from a lot of bloggers!

Teen Read Week Begins

Teen Read Week is coming up this October, check it out sounds like a great event. [Top