BloggingTricks4u-Blogging Tips Tricks

Simple Steps To Add Page Navigation in Blogger

2016-04-28T06:53:00.000-07:00

We will Now use our Personal model to Add web page navigation in Blogger.Listed below are some easy simple Steps to observe to make use of web page navigation in your blog.By default in blogger we will set the variety of publish to indicate by going to setting> then Publish & Remark and set the variety of publish by giving quantity like 7 or 10 or as you need.as soon as the variety of complete posts exceeds , we are going to see "Older Posts" and "Newer Posts" navigation hyperlinks in our house web page and archive pages footer as Blogger would not have any built-in perform on web page numbering. However web page numbers as an alternative of older and newer posts hyperlinks assist guests to navigate faster (leap from one web page to a different web page or click on on a particular web page) and know the whole variety of posts printed. Right here on this publish we point out easy steps to Add web page navigation in blogger / blogspot blog. You'll be able to choose any one of many completely different kinds that talked about under:-

Steps to Add Numbered Page Navigation to Blogger

You can use page navigation by using two steps like Adding The CSS and Adding The Script.

1. Adding The CSS

Step 1. Go to Blogger Dashboard > Template > click on the Edit HTML button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box and type or paste the following tag inside the search box and hit Enter to find it:

]]></b:skin>

Step 3. Now choose one of the following numbered page navigation styles and copy the code just below it. Just above ]]></b:skin> paste the code of the style that you want to use:

Style 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}

Style 2:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Note: if you want to hide the "First" and "Last" buttons add this line below the CSS code:

.firstpage, .lastpage {display: none;}

2. Adding The Script

Step 4. Now find (CTRL + F) this tag:

</body>

Step 5. Add the following script just above it:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

Configuration

After installing, you might want to change these default settings:

perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}

1) perPage: how many posts will be shown in each page (7). This value has to be the same as the number of posts on the main page. Otherwise, add the same number by going to "Settings" > "Formatting" and type it in the "Show at most" field, then click on the "Save Settings" button.

2) numPages: how many pages will be shown in the page navigation (6)

3) to replace the 'First', 'Last', "« Previous" and "Next »" texts, just type your own within the quotes.

Labels fix:

By default, Blogger will show 20 posts on label pages. To make this widget appear on label pages, we will have to cut down this down to the value that we gave for the perPage variable.

Find each occurrence of the following code snippet:

expr:href='data:label.url'

Replace it with this one below:

expr:href='data:label.url + "?&max-results=7"'

Here 7 is the number of posts to be displayed per page.

Step 8. Click on the Save Template button and that's it! Enjoy

How to insert Adsense Ad code converter tool in Blog Post

2016-04-26T09:27:00.000-07:00

Now you can insert Adsense code /HTML or Javascript code Converter to your page on Website or Blog by using these below mention simple coding

Adding it to your site as a new HTML page

You now may have understood how the JavaScript runs.Now its time to implement in your site /Blog.

Copy the below code
Open a word editor like notepad
Paste it
Save it and rename it With someone.html (.html is must.Otherwise it wont work)
Upload it your server using some FTP Client

<html>
<head>
<script type="text/javascript">
function $(esc_tool){
return document.getElementById(esc_tool)
}
var char2entity = { "'" : ''', '"' : '"', '<' : '<', '>' : '>', '&' : '&'};
function escape_entities(str) {
var rv = '';

for (var i = 0;i < str.length; i++) {
var ch = str.charAt(i);
rv += char2entity[ch] || ch;
}
return rv;
}
function do_escape(e){
$('escaped').value = escape_entities(e.value)
}
</script></head>
<body>

<center>
<br>
<b>Enter raw code here</b>
<br/>
<textarea onchange="do_escape(this)" onkeyup="do_escape(this)" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 450px;"></textarea>
<br/><br/>
<b>Get escaped code here</b>
<br/>

<textarea id="escaped" onclick="this.select()" onfocus="this.select()" readonly="readonly" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 450px;background:#f0f0f0;"></textarea>

</center>
</body>
</html>

Adding it to Blogger / Wordpress

Open new post / Page -> Go to HTML section
Just paste the following Code
Publish it.

<script type="text/javascript"> function $(esc_tool){ return document.getElementById(esc_tool) } var char2entity = { "'" : ''', '"' : '"', '<' : '<', '>' : '>', '&' : '&'}; function escape_entities(str) { var rv = ''; for (var i = 0;i < str.length; i++) { var ch = str.charAt(i); rv += char2entity[ch] || ch; } return rv; } function do_escape(e){ $('escaped').value = escape_entities(e.value) }
</script>
<center> <br> <b>Enter raw code here</b> <br/> <textarea onchange="do_escape(this)" onkeyup="do_escape(this)" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 450px;"></textarea> <br/><br/> <b>Get escaped code here</b> <br/>
<textarea id="escaped" onclick="this.select()" onfocus="this.select()" readonly="readonly" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 450px;background:#f0f0f0;">
</textarea>
</center>

Check Demo Here :HTML/JavaScript Code Converter For use in Blog Post

Another Method is :-

At first you will need to sign in to your Blogger Account if you haven't signed in to your Blogger Account yet.
Now click on the Blog Title in which you want to add HTML Encoder.
Go to Dashboard and click on Pages. Now create a new and fresh Blank Page so that you can add HTML Encoder on that page. You can also add HTML Encoder in the Posts Page if you wish to add the HTML Encoder in your Post Page.
Now Switch to HTML Mode of your new Blogger blog Page. If you are adding this Encoder in the post page than switch to HTML Mode in that case too.
It's time for codes. At first make sure that there aren't any codes in the HTML Editor. If their are some codes than at first delete that codes. Now add the code given below in the HTML Mode of Blogger Post Editor.

<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
//<![CDATA[
function html2entities(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "<"
else if (match==">")
return ">"
else if (match=="\"")
return """
else if (match=="'")
return "'"
else if (match=="&")
return "&"
}
//]]>
</script>
<br />
<div id="wrap">
<div id="wrap2">
<div class="widget Blog" id="Blog1">
<div class="blog-posts hfeed">
<form class="ht-newform">
<textarea class="ht-encoder" name="data1" placeholder="Add Codes Here and Click Encode to Parse it"></textarea> 
<br />
<div style="text-align: left;">
</div>
<div style="text-align: left;">
 <input class="ht2" onclick="html2entities(this.form.data1)" onmouseout="this.className='ht2'" onmouseover="this.className='ht2 ht2hov'" type="button" value="Encode" /> <input class="ht2" onmouseout="this.className='ht2'" onmouseover="this.className='ht2 ht2hov'" type="reset" value="Clear All" /> </div>
</form>
</div>
</div>
</div>
</div>
</div>

After adding the code given above in the specified place you can save your newly created page. If you would like to turn off comments on the HTML Encoder page than switch to Compose Mode and than click on Options. Now choose your desired option for comments.

It isn't over yet. You have added the HTML codes and Scripts for the HTML Encoder but haven't changed it's look until now. If you will see your HTML Encoder now than it will look little bad. So, now we will add some CSS codes to customize the newly created Parsing Tool for your Blogger blog. Follow the steps given below to add the CSS code to customize HTML Encoder.
To add the CSS code you have to go to Templates > Edit HTML. Now in the HTML Page search for the code given below.

]]></b:skin>

Now add the CSS code given below just above/before ]]></b:skin>

".

.ht-newform {
width: 400px;
margin-left: 100px;
}
.ht-encoder {
width: 400px !important;
height: 180px !important;
margin-left: 10%;
margin: 5px auto;
padding: 2px 2px 2px 6px;
font-family:Arial, sans-serif !important;
font-size: 18px;
color:#808080;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.ht-encoder:focus {
width: 100%;
color: #666;
border: 1px solid #808080;
-webkit-box-shadow: inset 0 1px 2px #808080, 0 0 0 6px #808080;
-moz-box-shadow: inset 0 1px 2px #808080, 0 0 0 6px #808080;
box-shadow: inset 0 1px 2px #808080, 0 0 0 6px #808080;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.ht-encoder:hover{
border: 1px solid #c0c0c0;
-webkit-box-shadow: inset 0 1px 2px #c0c0c0, 0 0 0 6px #c0c0c0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
box-shadow: inset 0 1px 2px #c0c0c0, 0 0 0 6px #c0c0c0;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.ht3 {
color:#000;
font: normal 12px sans-serif, verdana;
border:1px dotted #67A7E3;
background:#C9E4FF;
}
.ht3:hover {
color:#289728;
font: normal 12px sans-serif, verdana;
border-left:5px solid #289728;
background:#fff;
}
.ht4 {
color:#3C3C3C;
font: normal 12px sans-serif, arial;
border:1px dotted #67A7E3;
background:#C9E4FF;
margin-bottom:4px;
}
.ht4:hover {
color:#289728;
border:1px solid #289728;
background:#fff;
}
.ht2 {margin-bottom: 2px; float: right;}
.ht2 {
padding: 12px 12px;
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 0%, #f1f1f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1));
background: -webkit-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%);
background: -o-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%);
background: -ms-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%);
background: linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f1f1f1',GradientType=0 );
-moz-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff;
color: #808080;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
line-height: 1;
font-size:12px;
border: solid 1px #bbb;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.ht2:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ht2:active {
outline: 0;
border-color: #aaa;
color: #FF0000;
-moz-box-shadow: 0 4px 4px #bbb inset;
-webkit-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 4px 4px #bbb inset;
}
.ht2 a:active {
color: #FF0000;
-moz-box-shadow: 0 4px 4px #bbb inset;
-webkit-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 4px 4px #bbb inset;
}

How to Show/Hide Content or Data Using Spoiler Code

2016-04-26T05:12:00.000-07:00

Now you can hide the content or data in your blog or on your blog posts using the clickable button Show / Hide Spoiler simple uses Code.You can use CSS or code Spoiler to hide text in blogger. To hide part of the content of your blog, you can use the code spoiler mentioned below. You can use them in posts, pages, widgets, or wherever you want to hide content. In this case you can change the button text changes according to circumstances spoiler - "Show" in the state plot "Hide" in the event of the country.

With the help of animated expand and collapse action, using CSS Transitions. But the animation will not work in Internet Explorer though but it works well in other browser.The great thing is that you can use some spoilers in one page without having to assign a unique ID to them.

This spoiler is made up of two parts -CSS and HTML.

I) CSS

If you plan to use this spoiler regularly then I suggest you put this CSS rules in your template just before the </head> tag. If it is a one off thing then just place it in your post together with the HTML part of the spoiler.

<style type="text/css">.spoilerbutton {display:block;margin:5px 0;}.spoiler {overflow:hidden;background: #f5f5f5;}.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}.spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;}.spoilerbutton[value="Hide"] + .spoiler {padding:5px;} </style>

II) HTML

This part goes into the place you want the spoiler to appear -into a widget if you want to it in the sidebar or into your post HTML if you want to hide a part of a post:

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';"><div class="spoiler"><div>PUT CONTENT YOU WISH TO HIDE HERE</div></div>

Simply put the content you wish to hide inside the div tag, as indicated above.

III) CUSTOMIZATION

The spoiler above is in its most basic form.

You can replace “Show” and “Hide” text with your own. Simply replace the word in both HTML (line 1) and CSS (line 6 and/or 7).
For multiple spoilers, all you need to do is duplicate the HTML part. Add as many as you want, they will work independently of each other.
You can change animation speed by changing the duration (in seconds) in CSS line 5.
Enjoy!

SEO Ready Permalink used in Word press

2010-05-15T02:53:00.001-07:00

Permalink is one important factor in search engine optimization. If you want your blog to rank on a particular keyword, then you need to enter your target keyword as part of your blog permalink.

If you are just starting a blog, or your new blog and your blog using default wordpress (http://www.yourblog.com/?p=123) system id permalink page .. you must change its permalink structure to better seo , But told that you may lose some trackbacks are there, if you have, and you'll need to modify your site's link page, unless you install the plugin to capture trackback specialwordpress before.

Permalinks only under SETTINGS if you're using Wordpress , and under CHOICE if you are using an earlier version of WordPress.

So what is the best SEO permalink? Based on my own experience and opinion the best wordpress permalink are:

%category%/%postname%.htm

it is short, simple, categorized and specific..
By the way, %category%/%postname% is also a good SEO wordpress permalink. Do you know other good seo based wordpress permalink? Please comment your thoughts about this post.

How to install a Blogger HTML template

2009-08-22T07:01:00.000-07:00

If you are not satisfy with the blogger default Templates, Now you can Use other commercial or free templates available on internet.Here are some steps to follow to install Blogger Templates

*Make sure you have backed up your template before installing a new one

1. You have to choose a Blogger Templates

2. Go to your blogger control panel and Edit HTML

3. Paste the code into the Template area (Ctrl A: Select All, Ctrl V: Paste)

4. After that just save the Template changes

Thats it All Done Enjoy your New Template on your Blogger Blog

How to control number of post displayed in Label

2009-05-04T20:18:00.000-07:00

In Blogger , the label pages contains all posts. That is , If I am giving a label wallpaper , and if there is 20 posts labeled with Wallpaper , all these posts will appear on a single page . So this method would help you to control the number of posts per label page . Open your Blogger template's edit HTML Click on expand widget templates . Now search for

 data:label.url

and replace With this instead:

data:label.url   "?max-results=5"

where "5" is the number of posts you would like to display on label pages. An easy way to search for all these phrases is to key CTRL+F. You may also like to copy all of the expanded template to Notepad (or your favorite text editor) and change these phrases using the "replace" function instead. Then you would need to paste the modified template over the existing template.

Once you've done this, save your template and click on a label to see the change in the number of posts which are displayed.

Free Top blog header image sites

2009-03-26T06:29:00.000-07:00

Your blog is a representation of who you are so it should be unique, right? The only problem is most free Blogger templates (if not all) are available to anyone so chances of you stumbling across another site that looks very similar to yours is going to be high. It’s like going to a party and bumping into another girl who’s wearing the exact same dress as you. It’s something you hate and try to avoid.

The good news is you can easily make your Blogger site unique just by changing or adding a header image. Usually that move alone will make your blog stand out from the crowd (as well as customizing your sidebar widgets).

So here’s a couple header image sites I’d like to recommend to help you dress up and personalize your blog.

45 Free Beautiful Blog Headers - This is a great list compiled by Smashing Magazine. Some of the headers include the .psd source files so you can really customize the header if you’ve got Photoshop experience.
Free Webpage Headers - A very nice collection of hundreds of 800 x 200 website headers which can easily be used for Blogger. Images are organized by category which makes it much easier to find what you’re looking for.
Dreamstime - This is actually a pay for image site but they have a free images section you can benefit from. Click on the “Free Images” tab once you get to their home page.
stock.xchng - By looking at the name of their site you wouldn’t think it was any good but looks can be deceiving. They’ve got thousands of free images that would work for your blog header or for inserting them into a blog post.
Stock Vault - This free image site is dubbed the stock photo sharing website where designers and photographers can meet to share their images. Decent selection and more targeted towards designers but you might be able to find some goodies for your blog.
FreeFoto - This last one is a bonus since the list was only supposed to be 5. It’s a pretty good site where you can find all sorts of images for your blog header, etc.

Top Ten tips for increase traffic for blogger

2009-03-26T06:19:00.000-07:00

In every bloggers life comes a special day - the day they start a new blog for the first time. Well, if you went out and bought someone else's blog chances are your blog with just one very loyal reader launched - you. Maybe a few days later you get a few hits when you told your sister, father, girlfriend and best friend about your new blog but that's about as far you went when it comes to the reader.

Here are the top 10 techniques new bloggers can find readers. These are tips specifically for new bloggers, those people who at the time next to no audience and want to get the ball rolling.

It helps if you work on this list from top to bottom as each technique in the previous step is building to create momentum to help. Finally, if you win enough momentum determine what is called "traction" which is a sufficiently large audience base (about 500 readers a day is good) that you no longer have to work hard to find new readers. Instead of doing your current loyal readers to do the work for you through word of mouth.

Top 10 Tips

10. Write at least five major “pillar” articles. A pillar article is a tutorial style article aimed to teach your audience something. Generally they are longer than 500 words and have lots of very practical tips or advice. This article you are currently reading could be considered a pillar article since it is very practical and a good “how-to” lesson. This style of article has long term appeal, stays current (it isn’t news or time dependent) and offers real value and insight. The more pillars you have on your blog the better.
9. Write one new blog post per day minimum. Not every post has to be a pillar, but you should work on getting those five pillars done at the same time as you keep your blog fresh with a daily news or short article style post. The important thing here is to demonstrate to first time visitors that your blog is updated all the time so they feel that if they come back tomorrow they will likely find something new. This causes them to bookmark your site or subscribe to your blog feed.
You don”t have to produce one post per day all the time but it is important you do when your blog is brand new. Once you get traction you still need to keep the fresh content coming but your loyal audience will be more forgiving if you slow down to a few per week instead. The first few months are critical so the more content you can produce at this time the better.
8. Use a proper domain name. If you are serious about blogging be serious about what you call your blog. In order for people to easily spread the word about your blog you need a easily rememberable domain name. People often talk about blogs they like when they are speaking to friends in the real world (that’’s the offline world, you remember that place right?) so you need to make it easy for them to spread the word and pass on your URL. Try and get a .com if you can and focus on small easy to remember domains rather than worry about having the correct keywords (of course if you can get great keywords and easy to remember then you’ve done a good job!).
7. Start commenting on other blogs. Once you have your pillar articles and your daily fresh smaller articles your blog is ready to be exposed to the world. One of the best ways to find the right type of reader for your blog is to comment on other people’s blogs. You should aim to comment on blogs focused on a similar niche topic to yours since the readers there will be more likely to be interested in your blog.
Most blog commenting systems allow you to have your name/title linked to your blog when you leave a comment. This is how people find your blog. If you are a prolific commentor and always have something valuable to say then people will be interested to read more of your work and hence click through to visit your blog.
6. Trackback and link to other blogs in your blog posts. A trackback is sort of like a blog conversation. When you write a new article to your blog and it links or references another blogger’’s article you can do a trackback to their entry. What this does is leave a truncated summary of your blog post on their blog entry - it’’s sort of like your blog telling someone else’s blog that you wrote an article mentioning them. Trackbacks often appear like comments.
This is a good technique because like leaving comments a trackback leaves a link from another blog back to yours for readers to follow, but it also does something very important - it gets the attention of another blogger. The other blogger will likely come and read your post eager to see what you wrote about them. They may then become a loyal reader of yours or at least monitor you and if you are lucky some time down the road they may do a post linking to your blog bringing in more new readers.
5. Encourage comments on your own blog. One of the most powerful ways to convince someone to become a loyal reader is to show there are other loyal readers already following your work. If they see people commenting on your blog then they infer that your content must be good since you have readers so they should stick around and see what all the fuss is about. To encourage comments you can simply pose a question in a blog post. Be sure to always respond to comments as well so you can keep the conversation going.
4. Submit your latest pillar article to a blog carnival. A blog carnival is a post in a blog that summarizes a collection of articles from many different blogs on a specific topic. The idea is to collect some of the best content on a topic in a given week. Often many other blogs link back to a carnival host and as such the people that have articles featured in the carnival often enjoy a spike in new readers.
To find the right blog carnival for your blog, do a search at blogcarnival.com.
3. Submit your blog to blogtopsites.com. To be honest this tip is not going to bring in a flood of new readers but it’’s so easy to do and only takes five minutes so it’’s worth the effort. Go to Blog Top Sites, find the appropriate category for your blog and submit it. You have to copy and paste a couple of lines of code on to your blog so you can rank and then sit back and watch the traffic come in. You will probably only get 1-10 incoming readers per day with this technique but over time it can build up as you climb the rankings. It all helps!
2. Submit your articles to EzineArticles.com. This is another tip that doesn’t bring in hundreds of new visitors immediately (although it can if you keep doing it) but it’’s worthwhile because you simply leverage what you already have - your pillar articles. Once a week or so take one of your pillar articles and submit it to Ezine Articles. Your article then becomes available to other people who can republish your article on their website or in their newsletter.
How you benefit is through what is called your “Resource Box”. You create your own resource box which is like a signature file where you include one to two sentences and link back to your website (or blog in this case). Anyone who publishes your article has to include your resource box so you get incoming links. If someone with a large newsletter publishes your article you can get a lot of new readers at once.
1. Write more pillar articles. Everything you do above will help you to find blog readers however all of the techniques I’ve listed only work when you have strong pillars in place. Without them if you do everything above you may bring in readers but they won’t stay or bother to come back. Aim for one solid pillar article per week and by the end of the year you will have a database of over 50 fantastic feature articles that will work hard for you to bring in more and more readers.
I hope you enjoyed my list of traffic tips. Everything listed above are techniques I’ve put into place myself for my blogs and have worked for me, however it’’s certainly not a comprehensive list. There are many more things you can do. Finding readers is all about testing to see what works best for you and your audience and I have no doubt if you put your mind to it you will find a balance that works for you.
This article was written by a guest blogger by the name of Yaro Starak who is a professional blogger and my blog mentor. He is the leader of the Blog Mastermind mentoring program designed to teach bloggers how to earn a full time income blogging part time.

How to improve blogger google ranking by using simple tricks

2009-03-26T05:38:00.000-07:00

To have a top position in Google is the holy grail for anyone who has a website. Organic Google traffic is free advertising and like most bloggers (especially those just starting out) achieve visitors and traffic to their website. There is a simple numbers game down. Essentially = more traffic more earning potential of your blog. The question is how to get more for my blog posts place with Blogger? Title tags are one of the most (if not most) important "on page" elements for a high ranking in Google. Search engines such as Google weigh the importance of each word in the title from left to right. So ideally you want your blog post title all the way to the left and your actual blog name on the right side. Below is a perfect example of how to change the title tag.

Step #1

In your Blogger dashboard, go to “Layout” => “Edit HTML”.

Step #2

In the template code, do a search for this:

<title><data:blog.pageTitle/></title>

It’s usually in the first 5-10 lines of code in your template near the top.

Step #3

Replace that bit of code with the following code:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Step #4

Save your template and go back to your blog. Click into any individual post and look at the page title.
All your blogger posts are now much better optimized to rank higher in Google. I’m not going to promise you a night and day difference but you’ve taken a step in the right direction. Now just go post unique high quality content so people searching Google will find your blog first!

How to change older newer post Default in blogger

2009-03-15T00:00:00.000-07:00

This hack can be used if you are bored seeing the standard view of your blog. If You want to change the "newer post" to "previous" or "older posts" to "next page", this hack may help you. Even you can add an image in place of text link. There are several steps you should do:

1. Log in to your blogger account
2. Click Layout and then click Edit HTML
3. Check List Expand Widget Templates
4. Then, search for below code:

And replace above code with Previous or any text you want to write instead of default Newer Post. And you able to add an image on it by add an image URL after text. And replace above code with Next Page or any text you want to write instead of default Older Post. And you able to add an image on it by add an image URL before text.

How to make Speed up blogger

2009-03-14T23:41:00.000-07:00

Speed is the key. Yes, this expression is actually right, especially when we acces internet. Sometime we have limited connection speed due to unstable network. This is some tips from blogger. The speed at which your blog loads is critical to attracting more readers to your blog. If your blog takes a long time to load, many readers may leave your blog before they have the chance to read it. Here are a few tips and tricks that will help your blog load faster and attract more users:

Posts

Your blog's load time can be affected by the number of posts you display on your main page. You can easily edit the number of posts displayed of the main page from the Settings | Formatting tab. You can then select the number of posts you want to display on the main page. It's recommended displaying 10 or fewer posts on the main page.

Third Party JavaScript and Links

For optimal blog load speed, its recommended using Google/Blogger widgets, JavaScipt and links. However, if you need to use third party JavaScipt and links, your blog will load much faster if you put all JavaScript at the bottom of your blog. If you have third party JavaScript and links in your sidebar, put them in at the bottom of the sidebar.

Images and Media

The more images, videos and other multi-media you have on your blog the longer it will take to load. However, images and other multimedia are important to attracting users to your blog, so it is important to optimize the load speed of your images and media. Here are a few tips to increase the load speed of your media:

Decrease the size of your images or use thumbnails that link to the full-size image.
If you use third party images, consider uploading them to Picasa Web Albums via the Blogger post editor.
If you have a large number of images to display, you can upload all your images (from a vacation or event) to a Picasa Web Albumand link to the album in your post or sidebar.

Other suggestions

If you've added any custom CSS to your blog, make sure you put it at the top of the page.
The most important content of your blog that catches readers attention should load the quickest. To help you identify which items are taking the longest to load you can use Stopwatch. To use Stopwatch, enter your blog's URL into the text box and click "Start StopWatch". Stopwatch will then open your blog in a frame and will record the time it takes for everything on your blog to load, including images, videos, widgets, etc. Take note of the items that take the longest to load and modify them appropriately using our suggestions.

Add HTML and JAVA SCRIPT into blogger post

2009-03-14T22:10:00.000-07:00

For beginner or amateur blogger like me, will be very difficult to make posting that contains the HTML, CSS, or JavaScript. You might have ever seen a blog post which showing html script in a display box. >

So, how to make our blog post able to show HTML or Java Script?. You don't need to have headache about it. You only need doing some simple steps as follow:

Log in to your blogger account
Click Layout
Then click Edit HTML
Backup your template
Find ]]>
Add below script right above ]]> section.

pre{background:#c0c0c0;border:1px solid #A6B0BF;font-size:120%;line-height:100%;overflow:auto;padding:10px;color:#000000 }pre:hover {border:1px solid #efefef;}code {font-size:120%;text-align:left;margin:0;padding:0;color: #000000;}.clear { clear:both;overflow:hidden;}

7. Save your template

The code above is for drawing a display box inside the post to show HTML and Java Scripts you want to post. Hemmm.... You can change the length ,width ,size and color of the box as well by editing the code . Even you can add an image background by adding image url following color code of display box background.

Now you able to post HTML and Java Script code in your blog post. You can call the display box anytime into your post by writing below code:

<pre> Place your HTML or JAVA Script Here </pre>

But, before you place your HTML or Java Script code, you need to make your code postable by generate your HTML or Java Script here to make it friendly. Paste your HTML or Java Script inside the box provided and then click make it friendly.

And then, copy the generated code and paste between

<pre> & </pre>

to make it posted inside display box

Show popular posts on blogger

2009-03-14T21:47:00.000-07:00

Popular Posts widget on Blogger uses Pipes , a feed and content aggregation tool from Yahoo. It fetches the Comment feeds and find outs the most commented post . Now , to Show Popular posts on Blogger Go to your Blogger template's layout and select suitable location for the widget to be appeared . Click to add a gadget and pick up HTML/JavaScript . You have to paste the following code into it , after making the necessary changes .

Hide navbar in blogger template

2009-03-10T03:58:00.001-07:00

As we all know in blogger, above header there is navbar or navigation bar . Most of want to hide the navigation bar in blogger , but we don't know how to do that. Never wonder here is a simple trick to hide the navigation bar in blogger Log in to your blogger account and select the Layout of the blog which you want to modify. Select the tab page Template and then click on Edit HTML Search for the text : body { now paste the CSS code above the line in red. This is how your template HTML code should look after pasting the hack code snippet

Trick to add adsense between two posts

2009-03-10T03:20:00.000-07:00

Blogging platform, now has the ability to allow Blogger users to add AdSense ads in between their posts using Show Ads Between Posts feature. To put and show AdSense ads units between posts in Blogger template is very easy, in fact, users not even need to know any HTML code programming knowledge. Just follow step-by-step instructions at the below guide. 1. Sign into Blogger account. 2. At Blogger Dashboard, click on Settings link listed behind “Manage” for the blog that you want to enable to show AdSense ads between posts. 3. Click on Template tab, and then click on Page Elements sub-tab if it hasn’t been already selected.

On the lower right corner of “Blog Posts” widget, click on Edit link. A “Configure Blog Posts” web page will be loaded, select and tick the check box for Show Ads Between Posts setting under “Select Items” section. # Once “Show Ads Between Posts” option is selected, a “Configure Inline Ads” configuration options section will appear. Here, users can set how often the ads will appear, i.e. to show and display ads after every 1, 2, 3, 4 or 5 posts up to maximum of 3 ads on a web page due to AdSense program policies. You can also choose your prefer ad format for AdSense for Content or Link Units (for ads between posts, rectangle or large rectangle is recommended), and customize the colors of background, border, text, title and URL Click on SAVE CHANGES button when done

Tricks to add Adsense Adbrite Chitika and other Ads directly in your blogger HTML Template

2009-03-10T03:15:00.000-07:00

Advanced users of Blogger.com service may have tried to insert and put Google AdSense ad code which is actually a Java script directly into the blog pages by manually editing the XML-based template HTML coding interface. Actually, it’s possible add any ad code by using HTML/JavaScript page element within the Blogger new XML template system, but the place where you can place the new block is rather limited, i.e. above or below the post body, header, footer, within sidebar or between blog posts. In case you want to put the ads inside the post, or align the ads to float and wrap around the text, or just within the single individual article content view, you will have to edit directly the HTML coding of Blogger template. If you try to insert any Google AdSense, AdBrite, AdEngage and any other JavaScript based ad code, or client-side components such as counter, tracker, form, snippet, effect, date and time, etc which is JavaScript based, the following error message may be returned when saving ore previewing:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching “[xX][mM][lL]” is not allowed.

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The reference to entity “zs” must end with the ‘;’ delimiter.

and many other different XML error message. The problem is caused by incorrect dynamic interpretation of Blogger XML template when it generates the HTML webpage for the blog page that is requested, probably due to the fact that the AdSense ad code or other code is not a valid XML, coupled with the fact that some ASCII characters have special meaning and reserved functions, confusing Blogger blogging .

The resolution to the JavaScript based coding does not work in Blogger HTML template error can be solved by replacing special characters or symbols in the script to HTML code. Check out the list below for which ASCII characters that need to be replaced with their corresponding HTML code. Using HTML code will ensure that Blogger render the character correctly when serving the page to the viewer.

< - < > - >

Above two is enough to make Google AdSense works in Blogger template. For other scripts, such as AdBrite ad code, you will need to replace more characters such as those listed below. & = & ” = "

For example, a Google AdSense code should become looks similar to code below:

<script type="text/javascript"></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

While an AdBrite ad code will became the similar code to the below:

<script type="text/javascript"> var AdBrite_Title_Color = '0000FF'; var AdBrite_Text_Color = '000000'; var AdBrite_Background_Color = 'FFFFFF'; var AdBrite_Border_Color = 'FFFFFF'; </script> <script src="http://ads.adbrite.com/mb/text_group.php?sid=303771&zs=3330305f323530" type="text/javascript"></script>
Your Ad Here

Simply use the text editor to parse the code and then replace the characters. Don’t worry about violating AdSense TOS or other terms and conditions, as once the blog’s web pages are rendered and presented to the viewers and visitors, the code will be exactly same as the original code before any replacement! or other way to use Html in to blogger template Step-by-Step Guide:

Step 1:
Parsed Your AdSense Code:
Parse means you make slight modification to the AdSense Code. How do you want to parse the code?
Simple. You need to change all the symbols like <, >, and so on in the code to HTML tags.
If you are lazy to do it, you can parse the AdSense Code at BlogCrowds.com. BlogCrowds.com offer free parse code service.

Parse Your AdSense Code: http://www.blogcrowds.com/resources/parse_html.php

Step Two:
Placement of the AdSense Ads your posts:
Expand your blog's widget first and find for the code below:
i) Place the Ads Next to your posts:

ii) Place the Ads after your posts: Paste the parsed AdSense Code at the place you want the Ads to appear. Then, Save the template. After doing all the steps above, the AdSense Ads will appear in your posts area. The steps mentioned above is only applicable to Blogger.com Customize Template.

blogger at blogspot with category labels and drag and drop template editing out of beta

2009-03-10T03:11:00.000-07:00

Blogger beta, which it used to be called, is now officially become only Blogger by releasing the new completely redesigned service out of beta with lots of new and highly anticipated features, replacing the existing yet old architecture and system of Blogger weblog publishing platform that in used since Google bought the Blogger.com from Pyra Labs in 2003, or since the service first started in 1999. According to Blogger Buzz: The new version of Blogger is metaphorically bursting with features, from the big guns like drag-and-drop template editing and post labels (which are perfect, by the way, for indexing the 131 historical figures you may have written about), to little polishes like a better-designed Dashboard or that you no longer need to solve a word verification CAPTCHA to post a comment on your own blog. We’re excited about the new version of Blogger, both for what it can do now (which also includes access control for blogs and better input fields for post dates) and what we’ll add to it in the future, now that we have a new, stable, powerful infrastructure to work with. We’re done with “beta,” but we’re far from done with the new Blogger. Some of the noted features include: * All Blogger accounts and blogs now integrated with the free Google Account after switching from old Blogger. * Ability to tag posts with multiple keywords known as labels, which is called categories in other blogging platform. * New privacy settings that restrict readership to a predetermined audience. They can set the blogs private so that only accessible by blogger themselves only, or public for everyone, or only allow users with pre-approved e-mail addresses registered in Google Account to access and browse the blogs. Those without Google Account will need to be relisted every two weeks. * Flexibility in customizing layout by enabling drag and drop positioning of most elements on the page with more options available for colors, fonts, headers, and the sidebar, thus eliminating the need to know HTML and CSS (Cascading Style Sheets). * Multiple authors. * Faster or instant publishing and publication of new posts as the blogs are now constructed dynamically. No longer a need to republish. * More feed options such as new feed for all the comments on your blog, individual feeds for all the comments on each separate post, and support for the RSS 2.0 and Atom 1.0 standards. * Updated Dashboard. * Improved server performance, as now hosted on Google servers . All Blogger accounts will gradually be converted and switched over to Google Account in order to take advantage of the new and improved features. You will be offered an option to switch to New Blogger if you’re still using Old Blogger and slot is available. If you haven’t switch, you will need to click on Old Blogger to login to your Blogger accounts on login page. Else, you can always login to your Google Accounts or click on New Blogger to login to access Blogger Dashboard. If you haven’t been offered an option to convert or switch in your Old Blogger Dashboard, you may see a button named Switch Now if you’re lucky enough to enable to you immediately switch over to New Blogger platform. However, you need to logout first and go to the login page to check it out.

Page Navigation widget for blogger temeplate

2009-03-10T01:45:00.000-07:00

Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing Blogger Template. Let us see how to add this Page Navigation Menu Widget : 1 : Login to your Blogger account and Navigate to Layout Section . Now click Add Page Element link there. Step 2 : In that Page Element window , choose HTML / JAVASCRIPT . Step 3 : Now add this Javascript in that window Download the script code .After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot In the code above you can edit the lines in red to your wish . 1 : var pageCount = 5; The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want. for example : In my blog I have put that value as 2 . In each page you can see only 2 posts . 2 : var displayPageNum = 3; here the digit in red represents number of pages to be listed. For example : In my blog I have chosen 3 , then 3 pages will be shown. Now save your template . That's it now we have added Page Navigation menu widget to our blog successfully . I hope you guys will feel this method is easier