Tuesday, February 28, 2012

Color Code Generator

hex codes, color chart, color codes
This Color Code Generator will help you get the six digit color code i.e hexadecimal value. It could be very effective if you want to get a perfect combination of colors for your blog and if you have a good experience about color picking and selection matching, this will help you to make your blog to look really professional. The Color Code Generator is also very useful when you try to blend the Google AdSense ads with the site content.


- Drag the bar on the "Hue" selector to the area of your desired colour palette.
- Then click inside the Brightness/Saturation area and drag the cursor until you have achieved your desired colour. The "Swatch" bar shows you the final colour result.
- The hexadecimal colour code is generated in the "Hex" box. Simply copy the six digit code i.e #000000

How to add Hex Colour Code Generator

To install Hex Color Code Generator on a Blogger/Blogspot page or post, copy the following code and paste it in the post or page HTML:
<center><object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object></center>

How to submit your Blogger Sitemap to Google

What are Sitemaps?

Sitemaps are text files containing a list of all web pages that exist on your website and are accessible to crawlers and users. These helps visitors and search engine bots to find pages on website. Sitemaps are a way to help Google indexing pages on your site which otherwise might not be discovered.

If your blog is hosted on blogspot.com (or if you are using a self-hosted version of Blogger with a custom domain) you will be surprised to find out that the default sitemap file contains only the 26 most recent pages of your blog which in normal case should contain all the URLs of a website.

Many webmaster pretend to teach others how to drive traffic to blogs or websites yet leaving out the most important factors like sitemaps. There are still other websites who keep on providing the old methods of generating a sitemap for blogger which are not any effective.

How to add a complete Sitemap for your Blogger Blog

Step 1. If you haven't done this already, sign-in to your Google Webmasters account and add your blog. For details, check this post on how to add a blog to Google.

Step 2. Once your blog is added to Google, go to Webmaster Dashboard and click on your site URL

Step 3. On the left side, look for Crawl, then Sitemaps and click on the Add/Test Sitemap button.

Add each of the following lines:


If your blog have lots of pages, add the sitemaps below:

And this is how you can submit your Blogger sitemap to Google. Happy blogging!

Add Your Blogspot Blog to Google

1) Log in to your Google Webmaster Tools account.

2) Click the "Add a site" button at the top of the screen.

3) Enter the URL address of your blog (for example http://my-site.blogspot.com/) and press Continue

4) Select the method you would like to use to verify ownership. Here you can either upload an HTML file with a name we specify, or you can add a META tag to your site's index file.

Choose Alternate Methods:

5) Under Alternative Methods Click Add a meta tag to your site's homepage.

6) Copy the Meta tag Code generated.

7) Open a new tab and login into your blogger account.

8) Go to Template > Edit HTML

 ...and search (CTRL + F) for the following tag:
9) Just below of it, paste the META code and then click the Save Template button.

10) Switch to Google Webmaster Tools tab and press on the "Verify" button.

Now your site is added to sitemap account and the verification is done.

Monday, February 27, 2012

Style blogspot blogger date header

This can be a really cool addition to your blog which can be easily customized to suit your layout and design. What we are going to do in this tutorial is to change the Blogger date header background color with some simple CSS adjustments that will make the date header float on the left side of your post and be partially out of the structure, like a banner with a colorful appearance.

stylish blogger date header

Customize the Date Header of a Blogger Blog

Step 1. Log in your Blogger account and go to Template > Edit HTML

Step 2. Click anywhere inside the code area and search (CTRL + F) for the following CSS code:
.date-header span
Below this code you should see some lines similar to these:
.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);

date header, blogger

Step 3. You will need to replace the CSS code above with this one:
.date-header {
margin: 0px 0px -50px -190px;
.date-header span {
background-color: #DDEDAA;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px solid #bada55;
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px solid #FFBD54;
border-radius: 100%;
bottom: -50px;
content: "";
display: block;
height: 30px;
position: absolute;
width: 30px;
z-index: 10;
margin-left: 140px;
.date-header:after {
background: none repeat scroll 0 0 #F9F9F9;
border: 7px solid #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;

How to Customize the Date Header

To change the:
- background color, replace #DDEDAA with the hex code of your color
- font color, replace #444
- border color of the bigger circle below the date header, replace #FFBD54
- border color of the green circle, replace #bada55
- distance between date and post, change the -190px value from margin-left

Step 4. Click the "Save template" button to save the changes. That's it!

Now you've applied a new style to the date header of your Blogger posts. Please note that codes vary from template to template and if you have a custom template, there might be a different CSS selector for the date header.

Display post author, date, labels and comments with icons below post titles

This tutorial will show you how to add more information in Blogger posts like author name, display the post date, post labels and comment count links. How does this work? The comment links will display the 'Be the first to comment!' text for posts with no comments and once we get a comment, it will show '1 comment so far'. On the left side, it will show the author name, a clock icon with date for posts published and finally, the post labels.

labels below blogger posts

How to Display Author, Date, Labels and Comment Bubbles in Blogger?

1. Login to your Blogger Dashboard > go to 'Template' and hit the 'Edit HTML' button:

2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box

3. Type or paste the HTML line below in the search box and press Enter two times to find the second occurrence of it:
<div class='post-header-line-1'>
Note: If you can't find the line above, look for this one:
<div class='post-header'>
4. After this line, add the following:
<div style="margin: 10px 0;"><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzuWtF6E_ik9ZKUQHU_hMu8eCaVYWo3hlo2X8vZMSdaRB38hbYzXoGvMKNBkC7AYAgrxN2Mnq-IP1yCDEjQZPD6GIyJziMTG-_c12uoFe_7DNj-y24W3bxSOm6jrMbiYvRsc-yg2jx60s/s1600/author.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.author/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpDRvkwiogTNKccpP-GS6k_6HQ16EBmOFbxuajtBIwJ2BsLHzIg-exQ33NnDgkkkgX_2yrRcyegbxMoRW20DG0XvsMOekNziCW1sLZ8NMML7O9E9ygOhE2CoLJ1jJEKqrsCAiL0QGeUCDR/s1600/clock.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.timestamp/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOnPiP8RlDc5b06neGm6i-EkRKN3jTXjYgfDV92miMc4W_x7McsKMQS4QVUERhYJ-XhLPdKFKDfoO02pGPP5dfmnyE2wW8Kh5-6NoS4cimDQcgRYK4G7Gbm678qiJMXAK09YazYGgq0ah/s1600/tag.png) no-repeat scroll top left;background-position:0px -1px;padding-left:23px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop></b:if></span><span class='post-comment-link' style='float:right;'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPH1U_g-vRByj-ktyL8kU360I1ZgJGgtzv9hyphenhyphenUwWeEpZ9wR52D-ULQYYLroaRARPrq76F6RVJxnJmBtsmdLw-NB9Fg6a0bFxdBczJqVTbSrLiFSEKbFozRixrehnSrSeOrJfIDI5H412UH/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if></b:if></a></b:if></b:if></span></div>

How to customize:

To change the icons, replace the urls in blue with those of your images (see this tutorial: how to get the url of an image):

- first url is for the author's icon
- second one is the clock icon
- the third one is the icon for the labels
- the last one is for the comment bubble

Related: How to Add Comment Bubbles to Blogger posts titles

5. Click the 'Save template' button and you're done!

How to remove/delete labels from Blogger posts

Many bloggers might find labels below posts (or post titles) unnecessary, as long as they are already in the blog's sidebar. So, this tutorial will show you how to remove them manually from the Template's HTML. To hide labels from the blogger post footer (or below post title), we could simply uncheck the "Labels" option; however, this setting might not work properly in some custom templates and then, we'll have to remove the code from our template.

How are we going to do this?

Hide labels in Blogger Posts using CSS

Step 1. Log in to your Blogger account > head to the 'Template' tab > hit the 'Edit HTML' button:

hide labels, blogger labels, blogger tutorials

Step 2. Click anywhere inside the code area and search by using the CTRL + F keys the tag below (hit Enter to find it):
Step 3. Just above the </head> tag, add the following CSS:
<style>.post-labels {display: none;}</style>
Step 4. Click the 'Save Template' button to save the changes and view your blog. The labels below the posts should be hidden now.

How To Remove Blogger Navbar

What is Blogger Navbar?

Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. This navigation bar can be very useful when you are blogging, but sometimes it can get in the way. The Blogger navbar is usually hidden in most of the third party templates, so this tutorial might be useful only for those who are using a default Blogger template.


- when you click on the B icon, it will take you to blogger.com
- a quick link to your Dashboard and "Sign in /Sign out" dialog
- you can easily search and find other blogs
- you can "Flag Blog" (if you consider content of a blog objectionable)
- NextBlog - takes you to a random, recently-updated Blogger blog

The only disadvantage is visual. If you have customized design, this navbar just doesn't fit in. So, how could we get rid of it? It is very easy. Just follow these steps below:

Turn off The Blogger Navbar

Step 1. Log in to your Blogger account, click on your blog and head to the 'Layout' tab > look for the 'Navbar' heading and click on the Edit link as shown in this picture:

edit blogger navbar

Step 2. When the pop-up window appears, scroll down and select 'Off', then click the Save button:

turn off blogger navbar

And that's it! With only two easy steps and we have already removed the Blogger Navbar.

Search This Blog

Recent Post

Recent Posts Widget