How to Add Different Background Color or Image in Each Blogger Post

When you have multiple authors on a Blogger blog and want to make a specific post stand-out, you can change anytime the background color of your posts or apply a background image behind them. And this can be easily done by wrapping the post's HTML in a 'div' element. You can apply this trick to your already published posts or you can change/remove it later if that's your wish.

Related: How to Add Different Backgrounds in Blogger Pages

So, this tutorial will show you how to style each post differently by adding some code snippets in your Blogger posts. Please note that this trick won't work if you have implemented the auto-read more function.

Demo Blog

How to Change the Background Color of a Blogger Post

Step 1. Log in to your Blogger account, click on your blog and press the 'New Post' button.

Step 2. Once you have finished writing the post, switch to the 'HTML' tab and add the following code just at the beginning and at the end of the post content - see the screenshot below for more info.

<div style="background-color: #444; color: #fff; padding: 10px;">
Your text goes here...
</div>

Note:
- replace the hex value in blue to change the background color and the color value in green with the color of the post's text. You can use this Color Code Generator tool to pick your favorite color.
- "Your text here...." is where the Post content should go, i.e. between the <div style="..."></div> tags.

How to Add a Background Image in a Blogger Post

If you want to add a background image in a post, add the following code just at the beginning and end of the post content:

<div style="background: url(IMAGE-URL-HERE); background-size: cover; color: #000; padding: 10px;">Your text goes here...
</div>

Note:
- paste the URL address of your hosted picture (use Photobucket, Tinypic etc.) where it says IMAGE-URL-HERE
- the line in red and the </div> tag has to be added at the beginning and at the end of the post's HTML.
- if the background image is dark, then you will need to change the text color - replace the #000 color value with #fff
- "Your text here...." is where your Post content should go.

Step 3. Now click the 'Publish' button and you are done.

How to Create Static Pages in Blogger

What are Blogger static pages? 

Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on stand-alone pages that are linked from your blog. The static pages basically are the same as post pages, but there are several things that make them different. One of the differences is that static pages don't appear in the home page, don't have a label, and are not indexed as archive pages.

How to Create Static Pages in Blogger.

Step 1. Log in to your Blogger Dashboard

Step 2. Click on Pages

Step 3. Click on New Page - Blank Page

Step 4. Type the title and write the page's content.

Step 5. Before publishing it, click on Preview to see how it will appear on your blog.

Step 6. When you have finished the editing, click on Publish button.

Step 7. Now you have 3 options:

1. Keep it as nav menu below header - Top tabs
2. Display the page in your blog's sidebar - Side Links
3. Add the page's link manually to your template - Don't Show

Step 8. After you have chosen where the page will appear, click on the Save arrangement button

And now you're done!
Now you have owned the static page. If you want another static page, just repeat the steps above.

Note: if you have opted for Don't show option: go to Pages again and right click on the page's title and select Copy link location (in firefox). You can add the link manually to your sidebar via Link widget or add the link in your template, via Edit HTML.

UPDATE: Blogger made an update recently to the way that pages are added to blogs. Here is an updated tutorial that will walk you through the new process, step by step: How to Add Static Pages to a Blogger Blog

Or you can watch this video tutorial below:

Tips To Avoid Your Google Adsense Account From Getting Banned

As many of you already know, Google Adsense is the most popular and generous advertisment service from Google that gives you recurring income. However, some people don't bother to read the Adsense policies and they usually violate AdSense Terms and conditions without knowing and as a result, later to find out that their accounts have been disabled. Many times, fraud clicks are the main cause. But there could be many other reasons for an Adsense account to be disabled.

So, if you want to keep your Google Adsense account safe, please read and keep in mind the following rules:

1. Never use adult, violent or advocating racial intolerance content on your site.
2. Never copy paste any article from any other website. Google can easily find out which one is original.
3. Never click on your own ads. Google can analyze all the clicks made on your ad units.
4. Never place above your Adsense ad units texts like "Click on ad below", "Please click below" etc. instead you can use label headings as "sponsored links" or "advertisements".
5. Never say your friends to click on your ads on social networking websites like Facebook
6. Don't put unwanted links, pop-ups on your website. Keep interface quite neat and clean with proper navigation and all. Google also looks for the quality standard of websites.
7. You must have a privacy policy page which must contain a description about the use of Google AdSense on your website. This is the latest policy introduced by Google. Many webmasters don't know about it which results in their account getting banned.
8. Hide Adsense ad units from Contact and Privacy Policy page (read here to see how you can do that) Place ads only on Content Pages. Advertisers pay only for content based ads.
9. Never display Adsense ads in floating boxes with images or texts that could overlap or cover the ads. However, you can use floating text, images on your website under the condition they don't play with your Adsense ads.
10. Never place more than 3 ad units and 3 ad links or 2 adsense search boxes on any web page.
11. Do not confuse with adjacent images - It was a common policy to increase CTR by placing same number of images as the number of text ads, which falsely gave the impression that the text ads represented an explanation to these images. Inserting a small space or a line between the images and ads is not allowed. Make sure that the ads and images are not arranged in a way that could easily mislead or confuse your visitors. Read more about this here
12. Do not send your Google adsense ads code to anyone.
13. Never place your Google ads any unit under any drop down menu, if you do so you are Violate Google Adsense TOS.
14. Never place Adsense ads on empty pages (pages with no content), pop-up pages, error pages, contact forms or registration pages.

These rules are the minimum requirements for maintaining an AdSense account in a proper way.
Whenever needed, it is better to ask for adsense help from the learned staff of Google Adsense. At least, you'll get authorized and very helpful tips from them! Good luck and be wise :)

Ways To Increase Page Impressions and Traffic on Your Blog

What is a Google AdSense "Page Impression"?

The page impressions or page views - how much time a user stays on your website and how many pages are visited. This is one of the most important things when talking about advertising. Page impressions are the result of good high quality traffic which is mostly based on the quality of the content available on your blog/website. If you build high quality content then people will enjoy navigating through your site and therefore, create page views.

In general, AdSense reports show the following fields of information:

• Page Impression: how many times the page or pages containing the AdSense advertisement was shown to your blog/website visitors
• Clicks: the number of times visitors clicked on an advertisement from your site
• Page CTR: The clickthrough rate of an advertisement is defined as the number of clicks on an ad divided by the number of times the ad is shown (impressions), expressed as a percentage. (1) In most cases, a 2% click-through rate would be considered very successful, though the exact number is hotly debated.
• CPC: is Cost Per Click. That is what Google pay you per click.
• Estimated earnings: Your account balance for the time period selected. This amount is an estimate that is subject to change when your earnings are verified for accuracy at the end of every month.(2)

Below are some ways that could help you to increase the page impressions:

1. Navigation Menu

Create a navigation structure that is clear and easy to follow. You want to make sure that once you have a visitor, they can easily make it to other parts of your blog. Creating links within your blog pages is one of the best ways to increase the number of impressions for your website.


2. Posts Summary on Homepage

A very good method to increase your page views is to have a summary of your posts on your blog/website homepage. That will force visitors of your blog to click on posts link / read more button in order to see the full article. To show only a part (excerpt) of Blogger posts, read this tutorial:
Automatic Posts Summaries for Blogger with Thumbnails

3. Improve Blog/Website Load Time

If a blog�s pages load very slowly, then visitors will eventually lose patience and stop visiting more pages, sometimes sooner rather than later. A blog that has quick loading pages is a pleasure to browse and it encourages more clicks.

4. Add a Popular Posts widget

Another great way to engage your readers to stay more on your site/blog and to browse through your content and make more pageviews is to add a Popular Posts Widget where you share some of the best posts on your blog.

Here are some nice Popular Posts widgets for your Blogger blog:

Popular Posts widget above Blogger Posts
Multi-Colored Popular Posts widget

5. Add a Random Posts Widget

If you have loyal visitors who come to your blog on a daily basis, a popular article widget will become boring just because they see it every day, with same posts. A random posts widget will mix the articles so that the probability for a post to repeat will be very low.

Want to add a Random Posts Widget for your Blogger blog? Then take a look at this tutorial:
Random Posts widget with thumbnails

6. Link to Related Posts at the End of a Post

Displaying a related posts is a smart way for keeping your site visitors around. The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.

If you don't have it on your blog yet, see this Related Posts Widget tutorial for Blogger blogs: Add the Related Posts Widget with Thumbnails to Blogger


7. Add internal links to your content using related anchor text

Include a link in a new post to related information in a previous post. When you link to a previous post that you've written you should consider doing it so with descriptive words of the post, rather than generic words. (don't use simple words like "click here for more"). Adding links to previous articles will determine your visitors to view articles and automatically will be converted into page impressions.

8. Provide links into your social networks profiles or forums

Share your blog links on Facebook, Twitter or any other websites or popular forums. Answer to questions on the web. But be careful to not be too intrusive and always try to give pertinent info.
You wouldn't want to support or to be considered as a spammer, don't you?

9. Add a search box

A lot of websites does not have a search box. As a result, the visitor will leave the site if he didn't find anything further relevant. For best results, you should be using the Google custom search widget. You can embed the Google search box directly in your blog. The search results will be more relevant than those that are provided by your default search box.



10. Add Social media buttons 

Give your visitors multiple options to tweet, bookmark and share your posts via Facebook as well as save your whole blog. Put social icons below your post and in the sidebar, make them visible and let them be found easily.

11. Use a clean background for your posts and readable fonts

Avoid dark backgrounds, tiny and sophisticated fonts, and make written content the visually most distinct part of your blog. If your main objective is to deliver a message and get the visitors reading your stuff, then you should make this process comfortable for them.

12. Advertising

And finally, getting people to your site may just be a matter of getting the word out. By using pay-per-click advertising, you can create an inexpensive advertising campaign to get more people to your site.

Following these tips will surely increase your blog's page views, which will make your blog traffic high in the future. Good luck!

How to Replace Older Posts and Newer Posts Links with Blogger Post Titles

If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts of the so-called blog pager which helps readers navigate between pages and posts.

If you want to increase your page impressions, one of the ways is to replace the older/newer posts links with the Blogger post titles.

How To Add Post Titles Instead of Older Post/Newer Post Link

Step 1. Log in to Blogger, go to Layout and click on "Add A Gadget" link

Step 2. From the pop-up window, choose "HTML/JavaScript"

 Step 3. Paste the following code into the empty field of the HTML/JavaScript gadget:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Note: The line in red is for acquiring jQuery framework. If you have acquired jQuery in your template, then you can just delete this part.

Step 4. Now Save the Widget and drag it under the Blog Posts section.

Step 5. Click on Save arrangement.

Now view your blog and see the older/newer posts link, replaced with your post titles.

For any questions, leave a comment below.

How To Disable or Turn Off Lightbox View For Blogger Images

When you click on your images or photos, a wide black iframe window opens without leaving the page and shows you the image in foreground. This Lightbox (also called as Greybox or thickbox) view effect is enabled for all Blogger blogs by default, and it can be found also on Facebook and Google +. However, for some people this effect has turned into a headache and some may prefer to turn it off.

How to disable Lightbox view?

• Log in to your Blogger Dashboard 
• Go to Settings > Posts and comments  
• Look for the "Showcase images with Lightbox" and select "No".

Save your Settings and you're done!

Blogger Auto Video Template by webbilgi

Rate this template:

Demo: Click here for Demo

Source And Designer: Author page

Click here to Download



Features:

• Automatic thumbnail creation for Youtube videos.
• A picture similar to the articles.
• Custom fields gadget.
• Simplified design.
• Dailymotion, metacafe, vimeo, LiveLeak, YouTube, to automatically embed videos

Usage:

• For videos from, Dailymotion, metacafe, vimeo, LiveLeak, add the endofvid tag to the end of the link. 
• For the video description: place the [starttext] and [endtext] code to the beginning and end of description.

Example:
http://www.dailymotion.com/video/xmpjro_yntikamyn-bedeli-seeking-justice-vizyonda_shortfilmsendofvid
[starttext]
this is description
[endtext]

The thumbnails for these video services are not available. You'll have to add pictures manually.

Youtube videos: When you add the iframe code, it automatically creates a thumbnail. Instructions:When creating a post, switch to Edit HTML tab and paste the embed code of youtube video in the HTML box.
You don't need to add any pictures.


Other: If thumbnails don't appear, find and delete the ?rel=0 code at the end of youtube URL.