Turn Links into Buttons with CSS

CSS Tags Decorate Stuff!

Using CSS you can turn dull links into attractive buttons. Let me show you how!

What an average link looks like...

Average link

Average link

What a link could look like...

Button link

Button link

By using CSS I am able to decorate the anchor tag! Before CSS buttons on websites were text in images between the anchor tags.

THIS WAS BAD. Loading images takes a significant amount of time, much more than the average visitor was willing to spend watching the page load. CSS is a way of decorating text based on selectors and classes which describe the style needed.

Thanks to CSS you don't have to compromise looks for speed. Take a look at some more examples of how CSS can decorate links to appear as buttons.

Don't Have the Time to learn CSS?

Although learning CSS would be ideal, there are many programs and websites that host programs to help you create buttons visually. The CSS for the buttons will be printed out to you once you reached a design you like! Try a CSS button creator now!

What a link could look like...

Button link 2

Button link 2 

The Parts of a CSS Button

• a:link - How non-visited links would appear.
• a:visited - How visited links would appear.
• a:hover - How links appear while the mouse hovers over them.
• a:active - How links appear while they are clicking.

Easy Ways to Decrease Home Page Load Time

w7r.blogspot.com

The Sad, but True Facts	The Big Factors
Unfortunately, not everyone has the same internet provider, connection, and/or browser as you do. Any one of those differences can determine whether your website loads in 1 second or 120 seconds. As you know, page viewers do not like to wait. In fact most visitors would rather research and try a different resource than a website that does not load in under 5 seconds.	internet provider computer speed web browser device or computer location cache memory bandwidth

Obviously, you cannot buy all of your readers Alienware super computers so to decrease page load time you must focus on your websites' internals.

Is Less More?

How to Create Email Links with HTML

w7r.blogspot.com

Copying and pasting an email address into the "To:" prompt of an email can be surprisingly unpleasant especially when the email benefits the receiver and not the sender.

In a blog such as W7R it is important to allow users to email you with as little effort as possible (without the copying and pasting).

Email me!

Result: Email me!

About the Email Link Syntax

• The 'a' is the same anchor tag used with website links
• href is an HTML attribute of the anchor tag, 'a'
• After href comes an = sign and a destination in parenthesis
• The format for email destinations is mailto: + an email
• Replace AnEmailAddress@gmail.com with your own email
• </a> is a closing tag for an anchor

Bulleted Lists in HTML

w7r.blogspot.com

Bulleted Lists Quick Facts

• The HTML opening tag <ul> and its matching closing tag </ul> create bulleted lists
• The more formal name for bulleted lists is Unorganized Lists
• These quick facts are list items of an unorganized list.
• List item can contain
  • pictures
  • text
  • video
  • links
  and combinations of those mentioned (pretty much anything)
• Unorganized lists can have list items that contain unorganized lists lists inside them. Lists in lists are considered nested (previous list item)

Bulleted lists are called Unorganized lists and are used to display information that is to be treated equally (no rankings or order necessary).

Here is the source code for the Bulleted Lists Quick Facts!

HTML Entity [Case Sens.]	Symbol
>	>
&lt;	<

  

  The HTML opening tag <ul> and its closing tag </ul>  create bulleted lists 
  
  
The more formal name for bulleted lists is Unorganized Lists
  
  
These quick facts are list items of an unorganized list.
  
List item can contain
    

      
pictures
      
text
      
video
      
links
    
 and combinations of those mentioned (pretty much anything)
  
  
Unorganized lists can have list items that contain unorganized lists lists inside them. Lists in lists are considered nested (previous list item)
  

• Numbered Lists in HTML

How to Center Adsense Ads on Blogger

w7r.blogspot.com

The concept applies to any blog.

The Directions

1. Get on Blogger and click the "Template" tab.
2. Click the button labeled "Edit HTML" and then click the "Proceed" button to reach the source code for your blog.
3. At the top of your source code there will be a bar with a unchecked box that says "Expand Widget Templates". Check that box! You cannot find the code you need to alter without expanding the widget templates.
4. With the "Expand Widget Templates" checked the source code below is even more in depth than it was before! (now it is showing additional code for widgets)
   
   Press Ctrl + F or manually open the Find module for your internet browser.
5. In the Find moodule's text area, type adCode and press Enter to search the page for the Adsense code. It will look similar to the code below
   
   <b:if cond='data:blog.pageType != &quot;error_page&quot;'> <data:adCode/> </b:if> <b:include name='quickedit'/>
6. Now insert <center> before and </center> after .
7. Click the Preview button to make sure the change was made (and did not have any unwanted side effects). Click the Save template button and close your template if the preview passed inspection.

All we did was replace <data:adCode/> with <center><data:adCode/></center> which can be undone at any time in the template source code.

Numbered Lists in HTML

w7r.blogspot.com

The HTML element, ol, or Organized List is used to list items that come in a particular order. When order matters, such as a list of the top 10 songs on billboard, then you would use a Organized List.

Image Source

Race Results

1. Pacman
2. Speedy "Pinky"
3. Shadow "Blinky"
4. Bashful "Inky"
5. Pokey "Clyde"

<h4>Race Results</h4>
<ol>
  <li>Pacman</li>
  <li>Speedy "Pinky"</li>
  <li>Shadow "Blinky"</li>
  <li>Bashful "Inky"</li>
  <li>Pokey "Clyde"</li>
</ol>

About the HTML Tags ol and li

• <ol> starts a organized list
• <li> starts a list item
• </li> closes a list item
• </ol> ends the organized list

• Bulleted Lists in HTML

Comparison Table HTML Code

w7r.blogspot.com

Copy and Paste This to Your Site!

The table is on top of the source code that I used to create the table. So feel free to copy and paste that code to your blog posts or website to save yourself the time and trouble.

Object A	Both A and B	Object B
difference 1 difference 2 difference 3 difference 4	similarity 1 similarity 2 similarity 3 similarity 4	difference 1 difference 2 difference 3 difference 4

 
Object A
 
Similarities
 
Object B
 




difference 1
difference 2
difference 3
difference 4





similarity 1
similarity 2
similarity 3
similarity 4





difference 1
difference 2
difference 3
difference 4

Mouse Hover Effects with CSS

Hover over the link below! (Example 1)

Add W7R to your favorites!

The link above is a result of the code in the text area below. The text ":hover" is placed behind the id selector, #post, to indicate that all CSS styles in the following brackets should take place when the mouse is hovering over the element with the matching id, "#post".

 Add W7R to your favorites! 

We all have seen hover effects on links, but how about paragraph or divisions <div> like this text here. This phenomenum is made possible by using the ":hover" syntax following the selector we are using which in this case is "hovering". ":hover" is an example of a pseudo-property. Pseudo properties are attached to selectors to indicate that the selector has the block of CSS when that pseudo property applies. Other pseudo properties can be found here!

We all have seen hover effects on links, but how about paragraph or divisions <div> like this text here. This phenomenum is made possible by using the ":hover" syntax following the selector we are using which in this case is "hovering".

All elements of a webpage can be used like the link and paragraph did with the syntax below.

content

For more information please visit CSS :hover Selector

Introduction to CSS

An Introduction To CSS

It is recommended you understand HTML (DHTML, XHTML) before digging into CSS. CSS stands for Cascading Style Sheets and describes how a web page and its parts should be displayed. External style sheets are CSS files that can be implemented into any web page you desire. For example, a CSS file can describe how much indentation there should be in every paragraph <p> element.

Why web developers need CSS

The reason web developers need CSS is because HTML was never intended to provide visual properties to its components, but to instead inform web browsers of what element they were going to be displaying. Different web browsers display HTML in different ways (same for CSS). CSS separate the bones(HTML code) from the flesh (CSS).

Support for CSS

Have no fear! All web browsers support CSS so everything you learn about CSS will apply to a website viewed on any web browser, such as Firefox, Google Chrome, Internet Explorer, Safari, Opera, SimplePie.

Learning CSS Resources

W7R.blogspot.com currently has only a few lessons/posts on CSS, so I want to leave you with two great sites where you can study CSS.

• Codecademy.com
• w3schools.com

HTML Force Links to Open in New Tab

Sometimes, as a blog writer, it seems counter-productive for you to provide links to other websites and blogs that have similar or better content then your own; however, contrary to ones intuition, providing useful links from your site can build up an audience as well as a new post could.

In other words, sharing your resources with your audience will only benefit your blog or site. A thought crossed my mind after adding more links and resources to my blog. The thought was that when many people read content on the web clicking links to get more indepth information is inevitable, but most viewers do not intend to leave your page. So, I wanted the links on my site that appear in articles and posts to open in a new tab by default.

The knew there must be a way to force links to open in a new tab because you can right click any link and select "Open in new tab". So, after a google or two it was clear that one of the easiest ways to do this was by hiding the bar, instead of actually removing it all together. By using an attribute for the HTML anchor tag, <a>. Here's the original HTML code for a link to google (The first link would open and make you leave this page, but the 2nd link would open the page in a new tab.)

<a href="http://www.google.com/"> Go To Google </a>

Go To Google

<a href="http://www.google.com/" target="_blank"> Go To Google (new tab)</a>

Go To Google (new tab)