All post

Sabtu, 28 Maret 2009

Membuat navigasi halaman seperti wordpress

nomer page pada blog digunakan agar navigasi lebih mudah bila dibandingkan older Post link. Script ini akan menggantikan standar blog page dengan nomor halaman navigasi seperti page nomor pada navigasi wordpress.kita dapat menyesuaikan jumlah link halaman dan jumlah posting yang ditampilkan pada setiap halaman. yang memungkinkan Anda dengan mudah mengakses ke pembaca di halaman arsip. Namun, nomor halaman tidak akan muncul pada halaman posting.banyak blog yang menggunakan nomor halaman
contohnya lihat kebawah blog ini terdapat nomer2 sebagai navigasi halaman, Untuk membuatnya ikuti langkah berikut ini
Seperti biasa, langkah awal anda masuk account Blogger dan arahkan ke Layout. Sekarang anda tuju Edit HTML.

Langkah selanjutnya, masukkan kode CSS berikut ini :


.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
Taruh kode CSS tersebut persis diatas ]]></b:skin>

Kemudian anda cari kode dibawah ini atau kode yang mirip dengan template anda
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Kalo sudah ketemu, tambahkan kode berikut ini dibawah  </b:section>

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&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= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;


var pageCount=5;
var displayPageNum=3;
var firstPageWord = &#39;First&#39;;
var endPageWord = &#39;Last&#39;;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

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

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+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){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

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

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

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

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

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

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

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

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

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;


<div style='text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;'> <a href='http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html'>Grab this Widget ~ Blogger Accessories</a></div>

Setelah menambahkan kode ini,coba preview dulu template Anda untuk memastikan tidak ada kode kesalahan. untuk mengubah jumlah posting yang ditampilkan pada setiap halaman, dan berapa banyak link akan terlihat pada saat yang sama. Ganti angka berikut
The var pageCount = 5;
Angka 5 Menunjukan jumlah posting yang ditampilkan pada setiap halaman, Dan
var displayPageNum = 3;
Angka 3 menentukan jumlah link yang ditampilkan (misalnya: 1 - 2 - 3) bagian bawah posting. Setelah selesai dan anda yakin setelah anda preview benar,biasanya dalam preview tidak akan ada aksi jika anda mencoba mengeklik nomer page yang anda buat karena belum anda simpan,lalu simpan template, Semoga bermanfaat. Link sumber :
ndyteens.blogspot.com

13 komentar:

Nur Rachmat 3 Mei 2009 21.01  

gagal bro.. udah aku coba baru aja.. gimana nih?

___________________________________________
visit my blog
1. info kaki palsu 2. Prosthetic and Orthotic 3. Nur Rachmat Tips dan Trick ___________________________________________
Mengajak teman-teman Blogger semua untuk:
1. saling berkunjung
2. tukeran link
3. saling follow di Google friend connect
Salam Blogger!!!

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Nur Rachmat
Website : https://www.blogger.com/profile/00511774977692064342
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Andhìnì 14 September 2009 13.13  

masih baru, so agak bingung bos

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Andhìnì
Website : https://www.blogger.com/profile/17976067327820719525
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Anonim 27 April 2010 18.31  

=)) :D

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Anonim
Website :
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
krisadhi 3 Agustus 2011 21.59  

ga ada contohnya nih????

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : krisadhi
Website : http://krisadhi.blogspot.com
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
GiveMeMore 4 September 2011 13.58  

pusing kalo yang ini..btw nice share ;)

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : GiveMeMore
Website : https://www.blogger.com/profile/01517122195348902774
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Blogterms 2 September 2012 23.03  

Mantef Info nya gan.. ijin cikidot. :D

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Blogterms
Website : http://bloggersterms.blogspot.com/
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
wawan yawarmansyah 29 Januari 2013 10.04  

bukankah ini akan membuat blog jadi LOLA gan?
visit gan. http://stikesdompu.blogspot.com/

maaf ngelink di sini

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : wawan yawarmansyah
Website : https://www.blogger.com/profile/00883067714249599267
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Obat TBC Tulang Tradisional 5 Februari 2013 15.13  

mantap infonya

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Obat TBC Tulang Tradisional
Website : http://goo.gl/DS8zL
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Obat Kanker Payudara Yang Ampuh 15 Juni 2013 22.15  

kunjungan malam gan, salam bikers nih..

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Obat Kanker Payudara Yang Ampuh
Website : http://goo.gl/PocUV
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
obat penyakit kanker usus 19 Juni 2013 15.01  

siang gan. salam. Sudah lama tal berkunjung kesini lagi. Wah informasinya menarik2 nih.. Mantap..

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : obat penyakit kanker usus
Website : http://goo.gl/DOPuJ
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
obat diabetes 4 September 2013 14.01  

salam sehat, kunjungan siang nih, Artikelnya bermanfaat banget..

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : obat diabetes
Website : http://obatdiabettes.blogspot.com/
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Obat Tradisional Asam Lambung 9 Oktober 2013 09.36  

punten bapa kalou pingin info bagus gini gimnanya ya bapa ,, makasih bapa http://goo.gl/U2KZUA

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Obat Tradisional Asam Lambung
Website : http://goo.gl/U2KZUA
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
obat kanker hati 31 Januari 2014 10.10  

Hai kawan, lama tak mengunjungi blog ini. Wah makin rame aja kayaknya.. Semoga selalu ada dalam keadaan sehat yah kawan.. Saya coba baca satu persatu nih.. :D

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : obat kanker hati
Website : http://obatkankerhatiampuh.blogspot.com/
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Poskan Komentar