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:

Free Social Icons & Tutorial

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

Free Social Icons & Tutorial

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

Free Social Icons and Tutorial

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

tutorial on installing social iconsYou 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:

Free Social Icons, Figure out your RSS link 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!)

[divider top=”1″] [note color=”#dbdbdb”]

Reader Question of the Week:

How do you address an author, publisher, publicist, etc in an email? – Anon

I always tell people to approach things like a job interview, friendly but professional. Dear Sir, or Ma’am if you don’t know a name. Dear Author Full Name if you do. Always use their name. You don’t like to be emailed HEY YOU. So don’t do that to an author. Always be respectful and toned down. Fan girling all over an author might work if you are sending them a FAN GIRL letter, but if you are doing a formal request for an ARC or Feature spot, you need to keep it professional. It is their job and business and they are not going to want to do business with a jibbering, yet enthusiastic juvenile if that is how you appear in an email.

[/note]

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. [source]

Professional vs. Bloggers Again!

It would seem that Peter Stothard’s remarks about opinions of some people being worth more than others has caused quite a debate in the literary world. There are some, mainly bloggers of course that are sticking their tongue out at the pompous literary snob, but a good bit of the “paid”, I mean professional outlets are half-heartedly agreeing with him. This of course brings back the debate, who do you trust more? The paid critique or the everyday reader that is voicing their opinion? And I do believe a lot of these paid outlets are getting worried, because frankly most people trust the everyday reader. Just like I would trust a recommendation from my neighbor more, then I would from our local paper. Because I know her taste. Pardon us, oh paid literary critics, we don’t mean to step on your toes. It is not our fault that your critiques sound snobby and the majority of readers want to be entertained instead of enlightened. Yes, prose is wonderful when we are feeling the need to be educated, but frankly the majority of readers want an escape, not education. And personally I think it is insulting that entertaining books are looked down upon by literary critics and their readers thought to be baseless. Which is probably the reason why more readers are flocking to the blogosphere to get their recommendations. I am not going to apologize for liking ‘Twilight’ as opposed to ‘The Lighthouse’, call me an idiot all you want, but at least I’m happy and I attract readers. XOXO – PJ [source]

 

Happy Thursday. Talk Less. Read More. Blog with Integrity.

[divider top=”1″]
Ask A QuestionHave a question? Fill out the form by clicking on the button to the left. This will go into a spreadsheet to be looked over at a later date and hopefully answered on this blog. This is completely anonymous, you do not have to leave your real name. Urls will not be included in your question unless it pertains to the question.