You can get this tool from here
Color Code Generator
Posted by Unknown
You can get this tool from here
{ 1
comments }
How to submit your Blogger Sitemap to Google
Posted by Unknown
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 Site Configuration >> Sitemaps - then click on Add sitemap.
Add each of the following codes:
If your blog have lots of pages, add the sitemaps below:
More about → How to submit your Blogger Sitemap to Google
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 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 Site Configuration >> Sitemaps - then click on Add sitemap.
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=1001&max-results=500
atom.xml?redirect=false&start-index=1501&max-results=500
atom.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 comments }
Add Your Blogspot Blog to Google
Posted by Unknown
1) Log in to your Google Webmaster Tools account.
2) Click on 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.
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 home page.
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 on 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.
More about → Add Your Blogspot Blog to Google
2) Click on 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.
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 home page.
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 on 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.
{ Add comments }
Add CSS codes into your blogger blog easily
Posted by Unknown
Sometimes you may want to add CSS codes to your blog for styling blog elements or blog widgets,Many of us adding CSS code by going to Edit HTML and add codes before ]]></b:skin> and save template, Using this method by mistake if any of the content in it deleted ,it my goes to your Template Crash.So there is a secure and alternate way to add CSS code as follows .Here is a simple way to add CSS codes.
- Go to Design-> Template Designer (as shown in the figure)
Update [01/06/2012] : Select Template -> Customise in New Upgraded Blogger Interface
- Template Designer will open
- Select Advanced -> Add CSS
- Place the CSS codes in the Text area.
- Then you can see preview by clicking preview.
- Save by click on Apply to Blog
{ Add comments }
Style blogspot blogger date header
Posted by Unknown
To change your blog's date header color and font style, you can do it with a very simple CSS adjustment that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.
See the result in the image below:
How to do it
Step 1. Login into your Blogger Dashboard, select Template option > click on Edit HTML
Step 2. Select Expand Blogger Template and search (CTRL + F) for the following code:
Or...
Step 3. Add the following code snippet just below of it
Putting it all together, it should look something like this:
To modify the style, replace the above bold/colored codes...
to change the background color:
to change the font size and date color:
Example:
to change margin-left:
(represents the distance between date and blogger post)
More about → Style blogspot blogger date header
See the result in the image below:
How to do it
Step 1. Login into your Blogger Dashboard, select Template option > click on Edit HTML
Step 2. Select Expand Blogger Template and search (CTRL + F) for the following code:
date.header
Or...
.date-header
Step 3. Add the following code snippet just below of it
background:white;
border-bottom: 1px solid #000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;
}
Putting it all together, it should look something like this:
.date-header span {
background:#FFD465;
border-bottom: 2px solid #cc0000;
color:#000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;}
To modify the style, replace the above bold/colored codes...
to change the background color:
- #FFD465: replace with the hex code of the color you want
- delete -bottom if you want border all around
- change: 2px to a higher or lower value
- change: solid with dotted if you want a dotted line
- change: #cc0000 with the hex code of border color
- for a bigger text, change: 12px to a higher value
- color: replace the hex code (#000000) with the hex of date color
Example:
color: #0000cc;
to change margin-left:
(represents the distance between date and blogger post)
- replace -105px with a bigger/smaller value
- change left to right
{ 3
comments }
Display post author, date, labels and comments with icons below post titles
Posted by Unknown
When there are no comments made to your posts, there's a link that says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. If you want to make your blog more stylish by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the next steps:
Steps:
Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:
Step 2. Select the "Expand widgets templates" box
Step 3. Search for the below code (press the CTRL + F keys and paste the code in the search box):
If you can't find the code above, look for this one:
Step 4. Paste the following code below/after the code above:
How to customize:
If you want to change the icons, just replace the URL addresses above colored with:
... with the URL address of your image.
Step 5. Save template... and you're done!
More about → Display post author, date, labels and comments with icons below post titles
Steps:
Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:
Step 2. Select the "Expand widgets templates" box
Step 3. Search for the below code (press the CTRL + F keys and paste the code in the search box):
<div class='post-header-line-1'>
If you can't find the code above, look for this one:
<div class='post-header'>
Step 4. Paste the following code below/after the code above:
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8J0dpK_J8q86NDuI-YsvsA7zC6rKZO4P3_afdDNNB2nh0nlTBoRUGrDf-SiNL3peWwhhfHkpSPI11_q2OgbwjjXV3aWvksgOme05EvXM30tnYJOJHLmw3PSHk1RhgVHK1qgOaXyZpNClD/s1600/author.gif) 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/AVvXsEj9xklFs37gyVKS0b5xKkm8804baFI1goTlD102WkPmbODlFb1dtWr6fIMceSTVJgNHOjuTXh2_tc2WYTUrGa7XE6GzkaDfbZ4uOMeq9QAexNlTav8Okl0hJQnFU2VPhR78_3uYTHlwODWE/s1600/clock_icon.gif) 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/AVvXsEjRc6KvJnSPiU-Ds4Ie-SwSVRFSEKlXgWKD9fUFByIYRaQdjsobJhC98GytZlIhV8FMrVLSyKM4Et1OAmRx88D3j3e7CyzZ9qdn5igx9FR0FcmUNNis2BUoR0MPEq56Y11OfwbKUtU1FAcV/s1600/tag+icon.gif) 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 + "?max-results=8"' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
<b:if cond='data:blog.pageType != "item"'>
<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/AVvXsEja9H4Ncuw_c6iDQsXb9TBuKhwF13ZQFPZqOfPItX-jyc7tJo43Az68cOmAWfR953LqRKi_TxWg6AQe_mjrGYh6RRa6AUO_LTdowaC6lXp6BWMqqAO0nRnKeJ0Kvk2-lB4EU4LxPpWTo1wa/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><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>
How to customize:
If you want to change the icons, just replace the URL addresses above colored with:
- Red - Author
- Green - Date
- Blue - Labels
- Violet - Comment bubble
... with the URL address of your image.
Step 5. Save template... and you're done!
{ Add comments }
How to remove/delete labels from Blogger posts
Posted by Unknown
Many bloggers might find labels below posts (or post titles) unnecessary, as long as they are already in the blog's sidebar. In this tutorial we will learn how to remove them manually. To hide labels from the blogger post footer (or below post title), you could simply uncheck the "Labels" option, however, sometimes this setting might not work properly in certain templates and then we'll have to remove it manually from our template.
How we going do this?
Hide labels from Blogger
Step 1. Click on the 'Template' option and then go to the 'Edit HTML' button.
To ensure that you won't lose or delete something, it is advisable to make a backup of your current template. To do this, click on the Backup/Restore button on the right top corner:
Step 2. After you clicked on the Edit HTML button, select the 'Expand Widget Templates' option for expanding the CSS code.
Step 3. Now find the following code snippet (press CTRL+F and paste the code in the search box):
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
Step 4. And delete it.
Step 5. Click on the Save Template button. You're done ;)
{ Add comments }
How To Remove Blogger Navbar
Posted by Unknown
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.
The advantages of it are the following:
- 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 for 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, Navbar just doesn't fit in.
So how we get rid of it? It is very simple. Just follow the next steps...
Removing The Blogger Navbar:
1. Login to your Blogger account, click on your blog name and navigate to Layout;
2. Look for the Navbar text and click on the Edit link as shown in the picture below:
3. When the pop-up window appears, scroll down and select Off, then click on Save button:
You're done.
More about → How To Remove 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.
The advantages of it are the following:
- 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 for 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, Navbar just doesn't fit in.
So how we get rid of it? It is very simple. Just follow the next steps...
Removing The Blogger Navbar:
1. Login to your Blogger account, click on your blog name and navigate to Layout;
2. Look for the Navbar text and click on the Edit link as shown in the picture below:
3. When the pop-up window appears, scroll down and select Off, then click on Save button:
You're done.
{ Add comments }
Facebook jQuery POP OUT likebox widget generator
Posted by Unknown
Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
- Go to Design->Edit HTML[Template->Edit HTML in new blogger interface]
- Copy below code inside <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
- Go to Design-> Page Elements
- Click add gadget and select HTML/javascript
- Copy and paste the generated code inside it and save it.
This is my first widget generator,also expect more other awesome widget generators from us.If you enjoyed this widget Generator please please share n like us..
{ Add comments }
Dynamic Views Button with jquery Effect for Blogger Blog
Posted by Unknown
Add Dynamic Views Button to Blog
Make sure you had Backed up your Template before editing Template.(How to Backup Template)
- Go to Design -> Edit HTML
- Go to Design->Edit HTML
- Copy and Paste Below code inside <head> section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- Go to Design-> Page Elements
- Click on Add Gadget ,Select HTML/Javascript from it
- Leave Title as blank, Copy the below code inside content section.
<div class="noopdynamic">
Click this for change the view to Dynamic views</div>
<a href="/view">
<img class="noopdynamicimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuJXXHqxAPcXvS3nwVblPKrK2pDt9kHztB_aF7ouo76ZEEkBiXcTepEouuE6GZcETyCrGoYbIFLx-djfPdg0U5uzJh9S5lUbglth0ff_bSIZ7DUcUgrTizIoHtX97KhLWrSCzoY06w0U/s1600/google+dynamic+views.jpg" /></a>
<style type="text/css">
.noopdynamicimg{bottom: 2%;
position: fixed;
right: 1%;}
.noopdynamic {background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background-color:#ABABAB;
border: 2px solid;
border-radius: 6px 6px 6px 6px;
bottom: 13%;
padding: 4px;z-index:999;
position: fixed;
right: 5%;
font:18px Arial;
text-shadow: 1px 1px 0 #FFFFFF;
width: 21%;
box-shadow:0 0 5px;
}
</style>
<script type="text/javascript">
$(function(){
$(".noopdynamic").hide(0);
$(".noopdynamicimg").hover(function(){
$(".noopdynamic").show("slow");
},function(){$(".noopdynamic").hide("medium");
});});
</script>
- Then Save it.
- That's all,you are done..
{ Add comments }
.jpg)
