Coding
Copy Code dibawah, kemudian masukkan ke HTML Blog anda Untuk Dapatkan Page Number Untuk Blogger Seperti Image Dibawah Ni..! Selamat Mencuba
How to add Blogger Page Number:
Step 1st: Go to Template - Edit Html - Click on the coding Box - (Ctrl F) - Search ]]></b:skin> - Copy Another Coding below it - Paste on above.
i.gray page number
#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;}
ii. Black with Orange Current Page
#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);}
iii. dark With Blue current Page
#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;}
iv.Green & Pink Page
#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;}
v. Orange Widget
#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;}
Step 2nd: (Ctrl F) - Seacrh </body> - Copy Code below it - Paste on above
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=1;
var numPages=1;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}
var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}
if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}
/*]]>*/
</script>
</b:if>
</b:if>
How to add Blogger Page Number:
Step 1st: Go to Template - Edit Html - Click on the coding Box - (Ctrl F) - Search ]]></b:skin> - Copy Another Coding below it - Paste on above.
i.gray page number
#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;}
ii. Black with Orange Current Page
#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);}
iii. dark With Blue current Page
#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;}
iv.Green & Pink Page
#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;}
v. Orange Widget
#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;}
Step 2nd: (Ctrl F) - Seacrh </body> - Copy Code below it - Paste on above
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=1;
var numPages=1;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}
var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}
if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}
/*]]>*/
</script>
</b:if>
</b:if>
perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}
Step 3rd : Label Fix , Find each Occurrence following Code
expr:href='data:label.url'
And replace one below
expr:href='data:label.url + "?&max-results=7"'
Step 4 ( Last ): Save Template
css
CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Selector | Example | Example Selects: | CSS |
|---|---|---|---|
| .class | .intro | All elements with class="intro" | 1 |
| #id | #firstname | The element with id="firstname" | 1 |
| * | * | All elements | 2 |
| element | p | All <p> elements | 1 |
| element,element | div,p | All <div> elements and all <p> elements | 1 |
| element element | div p | All <p> elements inside <div> elements | 1 |
| element>element | div>p | All <p> elements where the parent is a <div> element | 2 |
| element+element | div+p | All <p> elements placed immediately after a <div> element | 2 |
| [attribute] | [target] | All elements with a target attribute | 2 |
| [attribute=value] | [target=_blank] | All elements with a target attribute equal to "_blank" | 2 |
| [attribute~=value] | [title=flower] | All elements with a title attribute that contains space separated words, one of which is "flower" | 2 |
| [attribute|=language] | [lang|=en] | All elements where the lang attribute's value is "en", even if the value contains a hyphen (-), like "en-us" | 2 |
| :link | a:link | All links (<a> elements with href) | 1 |
| :visited | a:visited | All visited links | 1 |
| :active | a:active | Active links | 1 |
| :hover | a:hover | Links on mouse over | 1 |
| :focus | input:focus | The input element that has focus | 2 |
| :first-letter | p:first-letter | The first letter of all <p> elements | 1 |
| :first-line | p:first-line | The first line of all <p> elements | 1 |
| :first-child | p:first-child | All <p> elements that is the first child of its parent | 2 |
| :before | p:before | Content will be placed before each <p> element | 2 |
| :after | p:after | Content will be placed after each <p> element | 2 |
| :lang(language) | p:lang(it) | All <p> elements with the lang attribute containing "it" | 2 |
CSS Property Groups
The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Background Properties
| Property | Description | CSS |
|---|---|---|
| background | Sets all the background properties in one declaration | 1 |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | 1 |
| background-color | Sets the background color of an element | 1 |
| background-image | Sets the background image for an element | 1 |
| background-position | Sets the starting position of a background image | 1 |
| background-repeat | Sets how a background image will be repeated | 1 |
Border and Outline Properties
| Property | Description | CSS |
|---|---|---|
| border | Sets all the border properties in one declaration | 1 |
| border-bottom | Sets all the bottom border properties in one declaration | 1 |
| border-bottom-color | Sets the color of the bottom border | 1 |
| border-bottom-style | Sets the style of the bottom border | 1 |
| border-bottom-width | Sets the width of the bottom border | 1 |
| border-color | Sets the color of the four borders | 1 |
| border-left | Sets all the left border properties in one declaration | 1 |
| border-left-color | Sets the color of the left border | 1 |
| border-left-style | Sets the style of the left border | 1 |
| border-left-width | Sets the width of the left border | 1 |
| border-right | Sets all the right border properties in one declaration | 1 |
| border-right-color | Sets the color of the right border | 1 |
| border-right-style | Sets the style of the right border | 1 |
| border-right-width | Sets the width of the right border | 1 |
| border-style | Sets the style of the four borders | 1 |
| border-top | Sets all the top border properties in one declaration | 1 |
| border-top-color | Sets the color of the top border | 1 |
| border-top-style | Sets the style of the top border | 1 |
| border-top-width | Sets the width of the top border | 1 |
| border-width | Sets the width of the four borders | 1 |
| outline | Sets all the outline properties in one declaration | 2 |
| outline-color | Sets the color of an outline | 2 |
| outline-style | Sets the style of an outline | 2 |
| outline-width | Sets the width of an outline | 2 |
Dimension Properties
| Property | Description | CSS |
|---|---|---|
| height | Sets the height of an element | 1 |
| max-height | Sets the maximum height of an element | 2 |
| max-width | Sets the maximum width of an element | 2 |
| min-height | Sets the minimum height of an element | 2 |
| min-width | Sets the minimum width of an element | 2 |
| width | Sets the width of an element | 1 |
Font Properties
| Property | Description | CSS |
|---|---|---|
| font | Sets all the font properties in one declaration | 1 |
| font-family | Specifies the font family for text | 1 |
| font-size | Specifies the font size of text | 1 |
| font-style | Specifies the font style for text | 1 |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font | 1 |
| font-weight | Specifies the weight of a font | 1 |
Generated Content Properties
| Property | Description | CSS |
|---|---|---|
| content | Used with the :before and :after pseudo-elements, to insert generated content | 2 |
| counter-increment | Increments one or more counters | 2 |
| counter-reset | Creates or resets one or more counters | 2 |
| quotes | Sets the type of quotation marks for embedded quotations | 2 |
List Properties
| Property | Description | CSS |
|---|---|---|
| list-style | Sets all the properties for a list in one declaration | 1 |
| list-style-image | Specifies an image as the list-item marker | 1 |
| list-style-position | Specifies if the list-item markers should appear inside or outside the content flow | 1 |
| list-style-type | Specifies the type of list-item marker | 1 |
Margin Properties
| Property | Description | CSS |
|---|---|---|
| margin | Sets all the margin properties in one declaration | 1 |
| margin-bottom | Sets the bottom margin of an element | 1 |
| margin-left | Sets the left margin of an element | 1 |
| margin-right | Sets the right margin of an element | 1 |
| margin-top | Sets the top margin of an element | 1 |
Padding Properties
| Property | Description | CSS |
|---|---|---|
| padding | Sets all the padding properties in one declaration | 1 |
| padding-bottom | Sets the bottom padding of an element | 1 |
| padding-left | Sets the left padding of an element | 1 |
| padding-right | Sets the right padding of an element | 1 |
| padding-top | Sets the top padding of an element | 1 |
Positioning Properties
| Property | Description | CSS |
|---|---|---|
| bottom | Sets the bottom margin edge for a positioned box | 2 |
| clear | Specifies which sides of an element where other floating elements are not allowed | 1 |
| clip | Clips an absolutely positioned element | 2 |
| cursor | Specifies the type of cursor to be displayed | 2 |
| display | Specifies the type of box an element should generate | 1 |
| float | Specifies whether or not a box should float | 1 |
| left | Sets the left margin edge for a positioned box | 2 |
| overflow | Specifies what happens if content overflows an element's box | 2 |
| position | Specifies the type of positioning for an element | 2 |
| right | Sets the right margin edge for a positioned box | 2 |
| top | Sets the top margin edge for a positioned box | 2 |
| visibility | Specifies whether or not an element is visible | 2 |
| z-index | Sets the stack order of an element | 2 |
Print Properties
| Property | Description | CSS |
|---|---|---|
| orphans | Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element | 2 |
| page-break-after | Sets the page-breaking behavior after an element | 2 |
| page-break-before | Sets the page-breaking behavior before an element | 2 |
| page-break-inside | Sets the page-breaking behavior inside an element | 2 |
| widows | Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element | 2 |
Table Properties
| Property | Description | CSS |
|---|---|---|
| border-collapse | Specifies whether or not table borders should be collapsed | 2 |
| border-spacing | Specifies the distance between the borders of adjacent cells | 2 |
| caption-side | Specifies the placement of a table caption | 2 |
| empty-cells | Specifies whether or not to display borders and background on empty cells in a table | 2 |
| table-layout | Sets the layout algorithm to be used for a table | 2 |
Text Properties
| Property | Description | CSS |
|---|---|---|
| color | Sets the color of text | 1 |
| direction | Specifies the text direction/writing direction | 2 |
| letter-spacing | Increases or decreases the space between characters in a text | 1 |
| line-height | Sets the line height | 1 |
| text-align | Specifies the horizontal alignment of text | 1 |
| text-decoration | Specifies the decoration added to text | 1 |
| text-indent | Specifies the indentation of the first line in a text-block | 1 |
| text-shadow | Specifies the shadow effect added to text | 2 |
| text-transform | Controls the capitalization of text | 1 |
| unicode-bidi | 2 | |
| vertical-align | Sets the vertical alignment of an element | 1 |
| white-space | Specifies how white-space inside an element is handled | 1 |
| word-spacing | Increases or decreases the space between words in a text | 1 |
Blogger Gadget
By date of posting this article, the new widgets for Blog's stats and Popular Postsare now available for bloggers to add and display on their blogspot site(s) through Add a Gadget activation. Configuring both widgets really very simple as all the given options can be selected by just mark the provided radio buttons and also from the drop down list to select the value.
Before I further explain the importance of each widget related to blog content and the post content publicizing, let us see from the options given in each widget; Blog's stats and Popular Posts; respectively. By logic thinking, there must be various and multiple advantageous from these providing offered by the Blogger Team. If it is a type of useless thing, for sure, the Blogger Team won't surface or propose it to be used by blogspot's users.
 |
| Popular Posts and Blogs stats - Widgets |
 |
| Popular Posts - Configuration |
 |
| Stats Widget - Configuration |
A. Popular Posts
There are three (3) elements provided; Title, Most viewed, and Show.
1. Title
For Title box, it is a ready-made for Popular Posts in plural. It means, if you are ready to display more than one number of post in the activated widget. But, it is editable, where you can delete the alphabet for small letter of s if you want to display only a post. Meaning that, you are also can fill in the box for what name to the widget's title as you wish or like much related to the proposed widget.
2. Most viewed
2. Most viewed
For Most viewed, you only must choose one (1) from the three (3) options by marking on the provided radio button. Whether for All time or Last 30 days or Last 7 days. It is a periodical type of analyzation on your blog post under Most viewed category/element related to the respective post's visitors' profiling and trending to the period of time selected.
The main thing now is what are the related data to know, learn, and discern to be analyzed directly connected under Most viewed category/element? The answer is to visit your Google Analytics account and to observe the following; Bounce Rate (BR), Traffic Source (TS), and "Inbound Sources and Outbound Destinations".
- Bounce Rate (BR):
BR not provided in your blog Stats, and BR is very important as it gives value by percentage. If the BR percentage is high, there are two (2) main reasons or sources; unrelated post's content for visitors to read which is also directly related to their country of origin AND another reason is your blog post page speed. So, got to think about both factors for what to amend or update the content and how to enhance the page downloading speed, technically known as page speed.
Whatever, high BR can be compensated by viewing the data for visitors' Average Time on that particular blog post. If the Average Time figure shown high by referring to your blog post length/deep on that post page, for sure and it means that the post receiving many Unique Visitors. Worth it! what?
- Traffic Source (TS):
Although your blog Stats provided TS data, but it would be much better to also refer toTop pages under Filters... in your Google Webmaster Tools account. Which one contributed the highest from Search engine, Referring sites, Mobile (smartphone), Direct, Video, Image. Who knows! may be you got many or highest visitors sourced from your embedded images! Whether true and through from the images in your post or whether Picasa Web Album (any image embedded in your blogspot post will automatically stored in your Picasa Web account, please check it out to provide backlink under image's caption section to your post).
Subscribe to:
Posts (Atom)
