Blogging Basics Part 6-- More Advanced Tips and Tricks for Using HTML Code

Blogging Basics Part 6-- More Advanced Tips and Tricks for Using HTML Code

Dana Koogler

May 21, 2015

   Some time ago I wrote and posted a five part series of blog entries on blogging basics.

The progression of the information went from how to start and flowed along to part five

which got into the more technical aspects of writing some HTML code.  I had promised I'd write

up an addendum to expound upon writing HTML code and some more fun, advanced, geeky stuff 

for bloggers.  I've gotten a little feedback on the series and that  encouraged me to finish it.

            

           I preface the lessons with the reminder that some of the things I used to be able to cause a

web page to do are no longer possible.   I will try to include some of that, but it doesn't mean it will 

work.  One such example is that I used to be able to write up html code and insert an audio file.

It would make the page appear the same, but it had music embedded in its script.   I used it on the old

Waterfall Wanderings Yahoo group and my yahoo page back in the day.   Part of the problem is all

the fuss over copyright infringement.  Much of what used to be available for free in the way of audio files,

clip art and background art is no longer free or even available.  

   Writing HTML Code for a Link

A link  or hyper link is when you see a line of words that are highlighted on a page and you click on them and they take you to a photo, another webpage, a video, etc.  

HTML code is the script or set of instructions that permits that to happen correctly.  

HTML is an acronym for Hyper Text Markup Language. 

1. Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

The code for writing a link is this:

<a href="http://tnlandforms.us/landforms/falls.php">Tennessee Landforms</a>

Above the <a opens the script while the </a> closes it or finishes it like a period completes a sentence.
The portion in quotes http://tnlandforms.us/landforms/falls.php is the web address you want to link to.
The Tennessee Landforms is what you want the link to say once it is written.  

BUT in order for this to work you must insert this code on a portion of the page that supports HTML code.

To do so on Blogger you go to the top left of the blog entry you're working on. Find the two tabs one marked
COMPOSE and the other HTML.  To get to the HTML side click on it.  

Once you have done so you will see the entirety of the blog entry you're working on and it won't look like normal type as it does under the COMPOSE tab.  Go to the spot on the HTML tab where you want to insert the script to make a link and put this script there by directly typing it or copy and paste it there.
See below that is what I have done and here is how it pops up looking once it is inserted to a part that supports HTML code.
Tennessee Landforms

Writing HTML Code for a Link to Open in a New Window

Using blogger it always opens any link in a new page, but not every format will do so.
When you run upon social media or blogger or web page formats that don't automatically
do that for you there is another HTML script that will open the hyper link in a new window.

It looks like this:

<a href="INSERT PAGE ADDRESS HERE" target="_blank">
Again if you insert this code into the portion that supports HTML code you can get a link to open in a separate window.  


Where I have typed INSERT PAGE ADDRESS HERE-- insert the URL for the web page which will look something like this 

https://www.tn.gov/twra/gis/wmapdf/Bridgestone_webmap_2012.pdf

Where you see "_blank"> insert here what you want the page to show up as
Bridgestone Map 

In this script <a href="INSERT PAGE URL HERE"target="
opens the hyperlink
while again </a> closes it or finishes it off.

The link should look like this when typed

<a href="https://www.tn.gov/twra/gis/wmapdf/Bridgestone_webmap_2012.pdf"target="_blank"Bridgestone Map</a>

The reason it does not open a real hot link on blogger when I type it this way?
You have to go to HTML tab and put this script over there for it to be live.

Applying Free HTML Script Code to your Blog Page

In part #5 of the blogging How To series... I discussed decorating or customizing your blog.

I sometimes create my own graphics to use from photos.  I have found another tool that gives me  lots of other options to have a pretty, customized blog.  A very simple way to make your blog look nice is to make use of the free HTML blog scripts out there on the internet.  

I may not have any photos to use that are suitable. I may be uninspired with what I have available to me. I may have a look in mind, but I'm unable to create it myself.  Try this tool:

Pixabay Blog Backgrounds

**I have changed the above link to Pixabay because the previous one no longer existed.  You will need to search pixabay in their search box to find your backgrounds.  It is a free or donation based download of images. 
Pick the one you want.
Click Install background
tab beside it.

This automatically copies the script of the blog background you want

Go to the LAYOUT tab on the dashboard of Blogger

Click ADD GADGET--and select ADD HTML 

in the ADD HTML box paste the script for the blogger background 

Then click preview to see how it looks.
If you like it... click SAVE and VIEW BLOG

Then you will have applied the free script to your blog.

This comes in various layouts such as three column, two column, etc

There are other websites out there which provide free blog scripts.


Making a Custom Header or Graphics--Using Fotoflexer 
Using Foto Flexer to Make Graphics

   Some folks like a traditional look to their blog title.

If that is what you want you can easily do that with tools available on blogger.

If you want to do away with the traditional title and make up something 

more unique and suited to you... you can do it using your own photos.

I found and began using Foto Flexer as a free editing tool

about a year ago when my favorite editing software bit the dust.

It is fairly simple.   

I'll try to walk you through it.   

Pick a photo. I usually try to pick something from the current season or recent doings.

Lets say its high Summer and I want a swimming hole background for my blog.

Here is a photo I took showing a swimming hole at Brewster Bridge.

go to Fotoflexer main page and UPLOAD the photo.

Fotoflexer can also be used to tune up a photo like this to adjust sharpness, color tune up, crop the image, and other things. I won't launch into that this lesson.  Just know that I do that as needed.  This image has been tone mapped already.  

What needs to happen to make it work for blogger as a title? It cannot be any bigger than 725 pixels wide.  On the BASIC tab of Fotoflexer once you have uploaded the image....

Go to the RE-SIZE tab under the image.

Change the numbers to 725 wide in the first box.  It will adjust the other box automatically to 483 pixels.  Make sure the Keep Proportions box is checked to keep your image the shape you want.   Then click APPLY.  

   I like to sometimes apply a border to my images. To do so go to the DECORATE tab on Fotoflexer.  Then click the BORDERS tab.  From the drop down menu pick what sort of border you might think looks nice.   If you try it and don't like it there is the UNDO button at the top left.  I picked a "Vignette" border. You can experiment with how wide you want it to be and what colors you'd like it to be. A tab will open up that says BORDER OPTIONS giving you a chance to pick colors, customize colors, and tune the size and strength of the border.

Once you have it how you like it click APPLY

I like to put my handle on the photo to complete the title.  

To put your title graphics on the photo stay under the DECORATE tab on Fotoflexer.

I go to the TEXT tab and click that.

New windows will open. One is a tool window.  It gives you options to pick the background of your title.   It also gives options on picking glittery text, shapes for your text background, text choices, and size choices.  Play around with it until you find what you like. You can always UNDO IT or start over.   

In my case I set the keyboard to All Caps and go into the second box it has opened for me.

In this box type your title.   The position that box where you want it on your photo.  

You can drag the box with the text to where you want it and continue to play around with it until you get it where you like it and want it.  Once you have it how you like it click APPLY.

Then go to the top box on the left and click SAVE.  Save the image to your computer.

Here is the one I just worked on while I was typing this lesson up.

This is a good time to mention I have begun putting a watermark on some of my photos as I had another batch stolen by an unscrupulous woman this past weekend.   You can use a text adding tool like Fotoflexer to mark your photos to help cut down on the chance of theft of your images.   It can't totally prevent it, but chances are such a lazy person who would steal work will not have the smarts or energy to remove the mark.  

Once you get your title photo how you want it.... 

Go to the LAYOUT tab under the DESIGN feature of Blogger on the top right of the home page of your blog. 

Click Layout and under the HEADER tab... it is on the left.

On the LAYOUT PAGE look for the HEADER button.  Click EDIT on that.

Make sure you click the selection INSTEAD OF TITLE AND DESCRIPTION

Upload the title image to your blog from your computer. 

Once it is there click SAVE!  

Then view your blog to make sure it looks ok.

There are other options you can try to put your blog description after the image etc.

Play around with that and see what you come up with that you may like. 

Life is different for different people.

Picking a matching color scheme--Using Get Colors from Image

Get Colors from an Image

Now lets say I want to tune up my color scheme on blogger and have the background

all color coordinated. 

I found a tool on Get Colors from an Image that works like a charm.

See the link above.  Click that. 

On the main page of Get Colors from an Image upload your image.. any image you want.

In this case I'm trying to customize colors from my Brewster Bridge title page.

on the Top LEFT of the page click CHOOSE FILE

Find the image you want to use.

Then go over to the RIGHT and click the SHOW IMAGE tab

It will show you the photo you just picked to work from.

Move your mouse over the image.

It will give you on the right block of colors selected from the pixels in the photo.

As you move your mouse around if you see a color scheme you like click on it.

It will stop there and give you the color code to add to your blog to use as text, background color, or whatever you like.

Lets say I'm interested in a particular shade of green from the Brewster Bridge image 

here is the color code for it. #568563

notice it is preceded by the # sign

I go into the DESIGN tab on blogger and go to Customize.. then go to ADVANCED tab on the bottom left.

You can adjust the colors of hot links, text, titles, backgrounds using these color codes obtained from your image.

One common example of something I adjust in this way? The MAIN BACKGROUND

It is not easy to get going with this. It is a more advanced technique for bloggers who have been at this awhile or are very determined.

Once you get the color scheme you want you click SAVE CHANGES or PREVIEW then SAVE.

Hope this is helpful.  

I have certainly enjoyed using these tools.  

I hoped for some of these tools and was thrilled when I found them.