samedi 5 mai 2012

Add Cool Css Menu Bar For Blogger



How to make a blog page number navigation easily


Actually sometime hard to find working number navigation gadget for blogger.So this post will help you to add page number navigation easily. it will helpful to your visitors to keep watching your other post.so you can increase page-views. Its just  blogger widget . try it.


1.  Log in to blogger account > Go to Design >> Page Element


2. Click Add Gadget and select 'HTML/Javascript'


3. Paste below code.



<style type='text/css'>


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #aeaeae;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#0a8be5;
border:1px solid #000000;


}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#aeaeae none repeat scroll 0 0;
border:1px solid #aeaeae;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #aeaeae;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}


</style>




<script type='text/javascript'>


var home_page_url = location.href;


var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


for(var i=0, post; post = json.feed.entry[i]; i++) {


var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;


if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}


if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;


}


for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="http://c-lien.blogspot.com/?Lw==">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ upPageWord +'</a></span>';
}


fFlag++;
}


if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="http://c-lien.blogspot.com/?Lw==">1</a></span>';


}else{
 html += '<span class="showpageNum"><a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ (p+1) +'</a></span>';
}
}


if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}


if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}


html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;


if(thisNum<(postNum-1)){
html += downPageHtml;
}


if(postNum==1) postNum++;
html += '</div>';


var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");


if(postNum <= 2){
html ='';
}


for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}


if(pageArea&&pageArea.length>0){
html ='';
}


if(blogPager){
blogPager.innerHTML = html;
}


}


function showpageCount2(json) {


var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var labelHtml = '<span class="showpageNum"><a href="http://c-lien.blogspot.com/?L3NlYXJjaC9sYWJlbC8nK3RoaXNMYWJsZSsnPyZhbXA7YW1wO21heC1yZXN1bHRzPScrcGFnZUNvdW50Kyc=">';
var thisUrl = home_page_url;


for(var i=0, post; post = json.feed.entry[i]; i++) {


var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;


if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}


if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;


}
}
itemCount++;
}


for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ upPageWord +'</a></span>';
}


fFlag++;
}


if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ (p+1) +'</a></span>';
}
}


if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}


if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}


html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;


if(thisNum<(postNum-1)){
html += downPageHtml;
}


if(postNum==1) postNum++;
html += '</div>';


var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");


if(postNum <= 2){
html ='';
}


for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}


if(pageArea&&pageArea.length>0){
html ='';
}


if(blogPager){
blogPager.innerHTML = html;
}


}


</script>
<script type='text/javascript'>


var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}


var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>



4. Save HTML/Javascript. you are done.
Publié par à
Libellés :

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)