Sunday, October 30, 2011

Membuat Navigasi per-Halaman di Blog

Postingan seperti ini mungkin sudah ada sebelumnya di buat oleh para master blogger, bukan hanya mungkin pasti sudah ada, hanya saya saya akan menyajikan ulang dengan gaya bahasa saya sendiri, dan semoga bisa di mengerti olah sobat yang mancari tutorial tantang cara Membuat Navigasi Halaman Bernomor Untuk Blogger.
Saya sarankan sebaiknya backup template sobat sebelum melakukan proses di bawah ini, karena kita akan bermain di dalam Edit HTML.


1.Login ke blogger &gtdashboard--> Design--> Edit HTML
2.Cari Kode ]]></b:skin> (Tekan ctrl + F di keyboard masukan  ]]></b:skin&gt untuk mempermudah pencarian)
3.Copy  dan paste kode script di bawah ini sebelum kode  ]]></b:skin> 


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
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 #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

4. Save Template.
5. langkah selanjutnya pergi ke Page Elements dan klik  "Add a gadget".
6. pilih "html/java script" dan tambahkan kode script di bawah ini (Tanpa Judul) dan click save. sekarang pindahkan/drag Gadget yang di buat tadi  di bawah  bagian "Blog Posts".

&lt;script type=&#039;text/javascript&#039;&gt;

var home_page_url = location.href;
var pageCount=1;
var displayPageNum=3;
var upPageWord =&#039;Previous&#039;;
var downPageWord =&#039;Next&#039;;


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= &#039;&#039;;
var upPageHtml =&#039;&#039;;
var downPageHtml =&#039;&#039;;

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!=&#039;&#039;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
 if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
 }

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

}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
 if(thisNum==2){
  upPageHtml = &#039;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#039;+ upPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;
 }else{
  upPageHtml = &#039;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#039;+htmlMap[p]+&#039;&quot;&gt;&#039;+ upPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;
 }

 fFlag++;
}

if(p==(thisNum-1)){
 html += &#039;&lt;span class=&quot;showpagePoint&quot;&gt;&#039;+thisNum+&#039;&lt;/span&gt;&#039;;
}else{
 if(p==0){
   html += &#039;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#039;;

 }else{
  html += &#039;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#039;+htmlMap[p]+&#039;&quot;&gt;&#039;+ (p+1) +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;
 }
}

if(eFlag ==0 &amp;&amp; p == thisNum){
 downPageHtml = &#039;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#039;+htmlMap[p]+&#039;&quot;&gt;&#039;+ downPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;
 eFlag++;
}
}
}

if(thisNum&gt;1){
html = &#039;&#039;+upPageHtml+&#039; &#039;+html +&#039; &#039;;
}

html = &#039;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span  class=&quot;showpageOf&quot;&gt; Pages (&#039;+(postNum-1)+&#039;)&lt;/span&gt;&#039;+html;

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

if(postNum==1) postNum++;
html += &#039;&lt;/div&gt;&#039;;

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

if(postNum &lt;= 2){
html =&#039;&#039;;
}

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

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#039;&#039;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#039;&#039;;
var upPageHtml =&#039;&#039;;
var downPageHtml =&#039;&#039;;
var labelHtml = &#039;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#039;+thisLable+&#039;?&amp;max-results=&#039;+pageCount+&#039;&quot;&gt;&#039;;
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!=&#039;&#039;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
 if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
 }

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

}
}
itemCount++;
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
 if(thisNum==2){
  upPageHtml = labelHtml + upPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;
 }else{
  upPageHtml = &#039;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#039;+htmlMap[p]+&#039;&quot;&gt;&#039;+ upPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;
 }

 fFlag++;
}

if(p==(thisNum-1)){
 html += &#039;&lt;span class=&quot;showpagePoint&quot;&gt;&#039;+thisNum+&#039;&lt;/span&gt;&#039;;
}else{
 if(p==0){
  html = labelHtml+&#039;1&lt;/a&gt;&lt;/span&gt;&#039;;
 }else{
  html += &#039;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#039;+htmlMap[p]+&#039;&quot;&gt;&#039;+ (p+1) +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;
 }
}

if(eFlag ==0 &amp;&amp; p == thisNum){
 downPageHtml = &#039;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#039;+htmlMap[p]+&#039;&quot;&gt;&#039;+ downPageWord +&#039;&lt;/a&gt;&lt;/span&gt;&#039;;
 eFlag++;
}
}
}

if(thisNum&gt;1){
if(!isLablePage){
html = &#039;&#039;+upPageHtml+&#039; &#039;+html +&#039; &#039;;
}else{
html = &#039;&#039;+upPageHtml+&#039; &#039;+html +&#039; &#039;;
}
}

html = &#039;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span  class=&quot;showpageOf&quot;&gt; Pages (&#039;+(postNum-1)+&#039;)&lt;/span&gt;&#039;+html;

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

if(postNum==1) postNum++;
html += &#039;&lt;/div&gt;&#039;;

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);
if(postNum &lt;= 2){
html =&#039;&#039;;
}

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

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#039;&#039;;
}

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

&lt;/script&gt;
&lt;script type=&#039;text/javascript&#039;&gt;

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

var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1){
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
 document.write(&#039;&lt;script src=&quot;&#039;+home_page+&#039;feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;/script&gt;&#039;)
}else{document.write(&#039;&lt;script src=&quot;&#039;+home_page+&#039;feeds/posts/full/-/&#039;+lblname1+&#039;?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;/script&gt;&#039;)
}
}
&lt;/script&gt;

Catatan:
Rubah Nilai dari pageCount (maxsimal jumlah tampilan postingan),displayPageNum (Tampilan Jumlah Halaman),upPageWord,downPageWord sesuai Selera sobat.
contohnya seperti gambar di bawah ini





0 comments:

Post a Comment

Terima Kasih telah memberikan komentar disini
Info Jasa kami, klik http://www.grahaDesignstudio.com
Phone :
081332333372 - 087833396980
email :
cs@grahadesignstudio.com

Copyright © 2016 grahaDesignstudio | All Rights Reserved.