Simple Steps To Add Page Navigation in Blogger

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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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

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.
  1. Copy the below code
  2. Open a word editor like notepad
  3. Paste it
  4. Save it and rename it With someone.html (.html is must.Otherwise it wont work)
  5. Upload it your server using some FTP Client
<html>
<head>
<script type="text/javascript">
function $(esc_tool){
return document.getElementById(esc_tool)
}
var char2entity = { "'" : '&#39;', '"' : '&quot;',  '<' : '&lt;', '>' : '&gt;',  '&' : '&amp;'};
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: &#8216;courier new&#8217;,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: &#8216;courier new&#8217;,monospace; height: 10em; width: 450px;background:#f0f0f0;"></textarea>


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

Adding it to Blogger / Wordpress

  1. Open new post / Page -> Go to  HTML section
  2. Just paste the following Code
  3. Publish it.
<script type="text/javascript"> function $(esc_tool){ return document.getElementById(esc_tool) } var char2entity = { "'" : '&#39;', '"' : '&quot;',  '<' : '&lt;', '>' : '&gt;',  '&' : '&amp;'}; 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: &#8216;courier new&#8217;,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: &#8216;courier new&#8217;,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 "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}
//]]>
</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>&nbsp;
<br />
<div style="text-align: left;">
</div>
<div style="text-align: left;">
&nbsp;<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

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

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

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