Using Images to Make Your Pages Pop

So, you've set up a blog, invested in some quality WordPress premium themes to make it look amazing, and now you're ready to add some images. Adding images to a blog post is quite simple; adding quality images, however, is something else altogether.

Cell Phone Cameras

With the advent of cell phone cameras, suddenly everyone's a photographer. Whether it's blogs or social media pages, tweets or whatever, you can't swing a run-on sentence without hitting a camera-phone pic. What's wrong with that? A picture paints a thousand words, doesn't it? Exactly! And if you post a fuzzy, poor quality cell phone picture, the word that's going to come across loud and clear is amateur!

Poor Resolution

Cell phone cameras are great; you can take candid shots and send them out to friends and family almost instantly. These images are great for viewing in the window of a cell phone, but probably won't look as good blown up on a large computer screen. Technology is improving all the time, but by and large, most cell phone cameras have poor resolution and not a lot of great features.

Why More Resolution is Better

Your photos should have at least 5 megapixels of resolution, and 10 is even better. While some will argue that you don't need so much resolution unless you intend to blow your photos up into posters, the added resolution allows you to crop to your heart's desire. If you start with a 10 megapixel photo and crop out 50 percent of it, what remains is a basically a 5 megapixel photo. You might decide you only want one face out of a whole crowd, and starting with higher resolution will allow you to crop it out and enlarge it and still have a decent photo.

Crop, Crop, Crop Your Photos

Cropping sets the professional apart from the amateur. In professional artwork, photos are seldom used as they are taken. Don't be afraid to crop out the extraneous detail. Cropping a photo puts more emphasis on the subject, and allows you to frame it more clearly. Cropping also allows you to get rid of that extra arm, shoulder, or half a person on the edge of the photo. Done artistically, cropping can also make your photos look more edgy and modern. Another consideration is cropping to fit the layout of your WordPress theme where you want to post the image.

Adjust the Lighting

Whether you use a professional program or simply the software that came with your camera, you should always adjust lighting levels, brightness, contrast, hue and saturation. Even in "auto" mode, most point and shoot camera photos will need light and color adjustments for optimal image results. Take some time and play with the results. Changing the hue can give your image a cooler or warmer look, and increasing the saturation can make the colors pop.

Bag the Flash

Use flash sparingly. A good camera will take photos quite well without a flash. Using flash tends to white out the picture. Dark photos can be lightened; the information is still there in the darkness. Black is rarely truly black. The reverse is not true for white, however. White in a photo means lost information. Even the best editing tools cannot bring it back.

Image Stabilization

Sometimes referred to as "anti-shake" or "blur reduction," this feature is a must if you're not using your camera on a tripod. Even the steadiest of hands can shake imperceptibly, and most photos are taken "on the fly" with subjects and cameras all moving at once. Since you're not a professional shooting dozens of shots every few seconds, this will guarantee that your "money" shot doesn't end up blurry.

Rename Your Image File

Give your image file a descriptive name to help it pop up on Internet image searches. WordPress themes usually allows you to input a description when you upload an image, but including a keyword in the file name itself is a sure sign of a pro.

About author:
Olga Ionel is a creative writer at ThemeFuse – a top provider of WordPress themes. She is passionate about studying online marketing industry and sharing informative tips.

How to make clickable picture in HTML

This short tutorial will learn you how to make a clickable picture in HTML web page.

What is clickable picture?

Clickable picture is picture which will lead you to specific web page when you click on that picture.

To better explain what is clickable picture take a look at image below this text. If you click this image, post "Make clickable links and clickable images" will be opened.

HTML code for: How to make clickable picture

<a href="URLToLinkedWebPage"><img src="URLImageLocation" /></a>

In HTML code for clickable image you need to replace:

• URLToLinkedWebPage - with URL to web page you want to be opened when user click on image


• URLImageLocation - with location of image

Example:

<a href="https://www.google.com"><img src="https://www.google.com/images/srpr/logo3w.png" /></a>

Above HTML code display Google logo ("www.google.com/images/srpr/logo3w.png") and links to "www.google.com" when picture is clicked.

Make clickable links and clickable images

How to create clickable links?

Let's first explain what are clickable links.

Clickable link is a text which reference on some web place. So, when clickable link is clicked referenced page is opened. Common term for clickable link is hyperlink.

Example of clickable link:

Some tips for clickable link

When above clickable link is clicked user is redirected to "HTML link code tips" page (http://interestingwebs.blogspot.com/2009/06/tips-for-html-link-code.html).

Guide to make scrollable link on web page

<a href="Web address">Here type clickable text</a>

We have:


• the <a> that tag defines a clickable link, which is used to link from one page to another


• href attribute specifies the web address of the page where link lead

Code for above example of clickable link would be:

<a href="http://interestingwebs.blogspot.com/2009/06/tips-for-html-link-code.html">Some tips for clickable link</a>

To better explain making of clickable links there is one more sample with hyperlink inside sentence.

Example of clickable link in setnence:

This link go to Google.

HTML code for scrollable link inside sentence (above example):

This <a href="https://www.google.com/">link</a> go to Google.

In this example word link is a clickable link while other words in a sentence are not. The word link is enclosed inside <a> and </a> tag.

How to make clickable image in HTML

Clickable image would be an image which will open linked web page when visitor click on this image. It is easy to make such an clickable image.

Sample:

When this image is clicked it will lead you to How to make clickable image tutorial!

Remove blogger navbar

How to remove blogger (blogspot) navbar?

Main reason why people want to remove blogger navbar from their blogspot blogs is that navbar does not fit with their blog design.

In this post you will find short tutorial how to remove blogger navbar.

It is relatively easy to remove it!

You just need to follow steps in this article!

What is blogger navbar

The Blogger Navbar appears by default at the top of every Blogger blog. Take a look at a below image to see how blogger nvabars looks like.

Steps for removing the Blogger Navigation bar

• in blogger Dashboard click Template


• under "Live on Blog" click on button Edit HTML














• inside "Template › Edit HTML" find:

]]></b:skin>



• replace this code with:

#navbar-iframe,#navbar { display: none !important; }
]]>



• after replacing code you should save template and your blog will be without navbar. And be very careful when edit HTML layout of your blogger blog.

How often Google crawl

You make a new web page and ask yourself when Googe will crawl my new web page (or new blog post)?

Let's try to understand how Google crawl the web.

Google spiders

Google use spiders to crawl the web.

Spiders (also called GoogleBots) are software robots which discovers new and updated web pages and add those pages to the Google index.

Google crawling

When Googlebot (or a Google spider) visit one web site it detects all links on each page of this web site and adds them to its list of pages to crawl.

So Googlebot crawl from one page to another and follow their links. This is how Google crawl almost all pages on the internet.

When Google find some web site it will come back to crawl this site again and reindex it.

How often Google crawl

How often Google will crawl some web site depends on many factors such us PageRank, links to a page...

One of the factors is how often you change your site or add new pages. If changes are happening more frequently then Google will probably crawl your web site more frequently.

If your site or blog is new and is not indexed by google find out how to force google to crawl your web site or blog.

Blogger tips for beginners

Here you will find a few links to blogger tips for beginners. Those are tips that every blogger should know.

Tips are primarily for blogspot blog. Learn few basic techniques which will help you to blog better.

Learn how to make and arrange categories in blogger, how to have recent posts in your side bar, expandable summaries, display HTML code in blogger post...

Arrange your posts by categories in blogger

Add categories to the blogger and give your visitors opportunity to view your posts sorted by categories. Accomplish this in a few simple steps.

List recent posts in blogspot

You can easily display links to last (recent) five posts on your blog. Or maybee last ten posts.
Don't know how? Read this post, it is easy!

Expandable post summaries on main blog page

If you want to have post summaries on main blog page which will expand on click on "read more". Read this article to learn how to accomplish it.

Display HTML code in blogger post

Want to write blogger post about HTML code, but HTML code is not properly displayed in your blog post.

For example this text will not be displayed correctly:

<h3>I want <h3> tags not heading format</h3>

Follow the link and you will find guide how to display HTML code in your blog posts!

Make google search for your blog

Add search capability on your blog with AdSense for Search. Allow your visitors to search content of your site in a Google like manner and try to earn some money.

How to add java script in your blogger post

You need to add some cool javascript functionality inside blogspot post but do not know how? Here is a short tutorial how to do this.

Increase visits with title change

Short guide to change title structure in blogger which have significant impact of SEO performance.

The default title structure is : [Blog title]: [Post title]

The structure : [Post title]: [Blog title] could improve your traffic performance.

Add meta description on blogger post

How to add unique meta description tag to each post post in blogspot (blogger) blog?

If you searching answer on that question this article is right place to find solution. It give simple easy to implement solution.

This article is divided on two parts:

• what is purpose of meta description tags


• how to implement meta description tags to every post in blogger

WHY TO USE META DESCRIPTION TAGS?

What is Meta Description Tags?

Meta Description Tags are HTML elements used to provide description about a HTML page.

Why Meta Description Tags are important?

It is important because Meta Description Tag content might be used in Search Engine Result Page (SERP) for snippets. So if user find snippet text usable there is better chance he will open your page.

Example of SERP code snippet

We get above code snippet and here is a content of Meta Description tag!

<meta content='This blog have blog tutorial, Javascript and HTML tips (including jQuery).'
 name='description'/>

ADD DIFFERENT META DESCRIPTION TAG TO EVERY POST IN YOUR BLOGGER BLOG

Now blogger make it easy to add meta descriptions for each post throug blogspot interface.

Recently it was much harder to accomplish it, you must make a change inside HTML template edit for each post and it was very impractical.

Now it is enough to follow this steps:

• Inside blogger dashboard click Settings > Search Settings
  
  
  
  
  
  
  
  
  
  
  
  
  


• Under Meta tags switch "Enable search description" (to Yes) and type text you want to be meta description for your blog. Of course don't forget to Save changes.
  
  
  
  
  
  
  
  
  
  
  
  
  
• Last step is to inside "Edit post interface" find Post settings --> Search Description and type description you want to appear for meta description tag in current post.
  
  
  

Submit guest post guidelines

Here are some basic guidelines for submitting guest post on this blog.

First let's list few reasons why you should guest post:

• by posting on other’s blog, you are gaining exposure and publicity


• get more backlinks


• immediately increase traffic if you guest post on popular blogs

Rules for guest posting on this blog

Choose a topic

• suggest a few titles with two or three keywords - e.g. Title: "How to increase web traffic" Keywords: "increase traffic"
  
  
  • I will decide if I am satisfied with suggested titles, topic and keywords, optionally you can make keyword research
  
  
  • you can send me your suggestion on this mail with a subject "Guest post"



• Choose a topic which is related with this blog. Topics could be:
  
  
  • HTML, CSS...
  
  
  • javascript, jQuery
  
  
  • tips for blogspot blog
  
  
  • tips for general blogging
  
  
  • how to increase web traffic, monetization and SEO


• guest post should have some useful information, answer on some question or give some step by step instructions how to do something, for example: Adding categories to blogspot (blogger)

Post rules

• article must be original, it shouldn't be published anywhere on web


• use paragraph tags (<p></p>)


• paragraphs should not be too long, so text should be easy to read


• you shuold pay attention on keywords in text:
  
  
  • Keyword position on web page
  
  
  • Keyword density
  
  
  • Keyword proximity


• using unordered list is a good idea, example:
  <ul>
  <li>first line</li>
  <li>second line</li>
  </ul>

Writing code inside guest post

• if you want to have some code in guest post put it inside <pre> tags for example: <pre>Some code</pre>


• don't forget to replace code characters and symbols into character entities, find more in How to display HTML code in blog or web

Images

If you have some screenshots you could send me images in mail (not more then 3 per post) and type image file name inside text where image should be. .jpg format is recommended.

Example of well formated text

At the end here is HTML for this post. When you send me guest post it should be formated similar to this example:

<p>Here are some basic guidelines for submitting guest post on this blog.</p>
<p>First let's list few reasons why you should guest post:
<ul><li>by posting on other%u2019s blog, you are gaining exposure and publicity</li>
<br />
<li>get more backlinks</li>
<br />
<li>immediately increase traffic if you guest post on popular blogs</li>
</ul></p>
<br /><br />
<h3>Rules for guest posting on this blog</h3>
<h4>Choose a topic</h4>
<ul>
<li>suggest a few titles with two or three keywords - e.g. Title: "How to increse web traffic" Keywords: "increase traffic"
<br /><br />
<ul><li>I will decide if I am satisfied with suggested titles, topic and keywords, optionally you can make <a href="http://interestingwebs.blogspot.com/2011/11/how-to-keyword-research.html">keyword research</a></li>
<br />
<li>you can send me your suggestion on this <a href="mailto:blogsrec@gmail.com?subject=Guest post">mail</a> with a subject "Guest post"</li>
</ul>
</li>
<br /><br />
<li>Choose  a topic which is related with this blog. Topics could be:
<ul><br />
<li>HTML, CSS...</li>
<br />
<li>javascript, jQuery</li>
<br />
<li>tips for blogspot blog</li>
<br />
<li>tips for general blogging</li>
<br />
<li>how to increase web traffic, monetization and SEO</li>
</ul>
</li>
<br />
<li>guest post should have some useful information, answer on some question or give some step by step instructions how to do something, for example: <a href="">Adding categories to blogspot (blogger)</a> </li>
</ul>
<br />
<b>Post rules</b>
<ul><li>article must be original, it <b>shouldn't be published anywhere on web</b></li>
<br />
<li>use paragraph tags (&lt;p&gt;&lt;/p&gt;)</li>
<br />
<li>paragraphs should not be too long, so text should be easy to read</li>
<br />
<li>you shuold pay attention on <a href="http://interestingwebs.blogspot.com/2011/12/web-page-optimization-techniques.html">keywords in text</a>:
<br /> <br /> 
<ul><li>Keyword position on web page</li>
<br /> 
<li>Keyword density</li>
<br /> 
<li>Keyword proximity</li>
</ul></li>
<br />
<li>using unordered list is a good idea, example:
<br />
&lt;ul&gt;
<br />
&lt;li&gt;first line&lt;/li&gt;
<br />
&lt;li&gt;second line&lt;/li&gt;
<br />
&lt;/ul&gt;</li>
</ul>
<br />
<b>Writing code inside guest post</b>
<ul>
<li>if you want to have some code in guest post put it inside &lt;pre&gt; tags for example: &lt;pre&gt;Some code&lt;/pre&gt;</li>
<br />
<li>don't forget to replace code characters and symbols into character entities, find more in <a href="http://interestingwebs.blogspot.com/2008/12/easy-way-to-put-code-snippets-in-blog.html">How to display HTML code in blog or web</a></li>
</ul>

3D snowflakes effect on HTML page or blog

Here is a sample of 3D snow effect on HTML page. This sample work with a help of HTML5 and three.js library.

Snowflakes are moving in 3D manner and if you move mouse on left snowflakes will rotate to left. Same thing function for other directions. Try it!.

This 3D snow effect work on new version of browsers which support HTML5 functionality.

It seem this effect does not work on Internet Explorer browser but it works well on Chrome and Firefox.

Here is 3D snowfall code:

<style type="text/css">
   .snow {
    background-color: #000099;
    margin: 0px;
    overflow: hidden;
    width: 650px;
    height: 350px;
   }
</style>
 
<div id="Div1" class="snow"></div>

 <script type="text/javascript" src="http://seb.ly/demos/JSSnow/js/ThreeCanvas.js">
</script>
 <script type="text/javascript" src="https://dl.dropbox.com/u/59215462/SnowFall/3D/Snow.js">
</script>
<script src="https://dl.dropbox.com/u/59215462/SnowFall/3D/3DSnowBox.js"
 type="text/javascript"></script>

<script>
      init('Div1');
  </script>

Let's explain 3D snowfalling code

• Line 1 to 9 is a style for div HTML element in which snowfall effect is putted, this style is used for .snow class, you can change value in style to adjust width, height or color to your needs


• Line 11 is div element, its class in snow so style from beginning of code is used on this div


• Line 13 to 14 is a reference to three.js library, it is 3D library


• Line 15 to 16 is a reference to Snow.js library. This library make this cool 3D snow effect


• Line 17 to 18 is a reference to 3DSnowBox.js. This file is mine and it make call to Snow.js easier


• line 20 to 22 is a javascript call to a Init method with id parameter of div element in which 3D snow should occur

If you find this article useful please make a link to this article on your page or blog!