Color Code Generator

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.


Instructions

- 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>

That's it!

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 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 tutorial 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 address

Step 3:  On the left panel choose Crawl > Sitemaps - then click on the Add/Test Sitemap button.

Add each of the following codes:

/atom.xml?redirect=false&start-index=1&max-results=500
/atom.xml?redirect=false&start-index=501&max-results=500
/atom.xml?redirect=false&start-index=1001&max-results=500

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

atom.xml?redirect=false&start-index=1501&max-results=500atom.xml?redirect=false&start-index=2001&max-results=500
atom.xml?redirect=false&start-index=2501&max-results=500
atom.xml?redirect=false&start-index=3001&max-results=500

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 (which is not possible with Google Blogger account), 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:

<head> 

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.

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.

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 code:

.date-header span

Below this code you should see some lines like 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);
}

Step 3. You will need to replace the 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

In this tutorial, you will see how to add more info in the Blogger posts like blog author's name, a time stamp for published posts, labels and comment count links. The comment links will display the 'Be the first to comment!' text in 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's name, a clock icon with date when posts have been published and finally, the post labels.

How to Add Author, Date, Labels and Comment Bubbles to Blogger

Step 1. From the Blogger Dashboard > go to "Template" and press the "Edit HTML" button

Step 2. Click inside the code area and press the CTRL + F keys to open the blogger' search box

Step 3. Type or paste the below code inside the search box and hit Enter to find it:

<div class='post-header-line-1'>

Note: If you can't find the code above, look for this one:

<div class='post-header'>

Step 4. After this code add the following code:

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7x11jR7BiHCK09UCnjSUZSlIMxNZWxR5YTsuN_JV3gK7TOkLuJW7gSsnUgu0hih01_O8v9r3b2a-_1C__vHAsxQAHsQZvEAGaeT6ZZd9nRCbg31GEHfS6z04BYsiPHhLi68jEvaFLpPj/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlFaMsErYEA3Lb0B0-ED8DHCitfYNg9IZrcXJMo0UAqCTphBb8MQ2EpKgJ1T5WUefwsn-8iqOEs77RTX22GrbrVpk68uH3IhFvN2KH9DD3L2zfmTNx7Aws4iLSVGqIb2APKd0gNEBwBqo/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoc-oUZfCgr5BErfA3JhZHk2Ap8_Q3hfi082V2nkg-aDMtLY9N_Pjdl-dRdkNUXdnFhnO1vFy9j8-qe8hl5SscPU4y8gN7xu-ChVqfU0gGhs-t4Jz0d1JAZjWPlkPuGvsS3s1ANjT3kQxu/s1600/tag.png) no-repeat scroll top left;padding-left:25px;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=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
    <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/AVvXsEgW22_ADh9iqjr-SgHdqbLLosWj9tGm3kuUDVdlnBVxhUczjuY0WzEaEZ2-cW1wmGalREL-shzmXizE4Xbu6V3UPzlissmbY8HIiYGzAo7q6V18OodIxGOCAEJr-QfLwNs84IpnVVcsqBH9/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 from above with the image URLs:
- First one is the icon for the Author
- Second one is the Clock icon
- The 3rd one is the icon near the Labels
- And the last one is for the comment bubble

Related: How to Add Comment Bubbles to Blogger posts titles

Step 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 we are 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:

Step 2. Click anywhere inside the code area and search by using the CTRL + F keys the tag below (hit Enter to find it):

</head>

Step 3. Just above the </head> tag, add the following style:

<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.

Advantages:

- 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:

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

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