Membuat Number Page Navigation Blogspot

Pujangga Blogs

11 March 2011

Membuat Number Page Navigation Blogspot

paga number navigation

Umumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.

CSS

Silahkan anda masuk ke halaman HTML blogspot. Karena disini kita akan menambahkan serangkaian kode CSS dan Javascript di dalamnya.

edit html

Carilah kode </b:skin> , dan letakan kode CSS berikut ini diatas nya.

edit html

/* -- NUMBER PAGE NAVIGATION -- */
.totalpages{color:#333; padding-right:7px}

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

.showpageArea a{text-decoration:none}

.showpageNum a{padding:1px 8px; margin:0 4px; text-decoration:none; border:1px solid #CDCDCD; background:#fff; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpageNum a:hover{border:1px solid #CDCDCD; background:#DDD}

.showpagePoint{color:#333; text-shadow:#333 0 1px 2px; padding:1px 8px; margin:2px; font-weight:bold; border:1px solid #FF9900; background:#FFBF00; text-decoration:none;-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpageOf{margin:0 8px 0 0}

.showpage a{padding:1px 8px; margin:0 2px; text-decoration:none; border:1px solid #CDCDCD; background:#fff;-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpage a:hover{color:#fff; text-shadow:#333 0 1px 2px; padding:1px 8px; margin:2px; font-weight:bold; border:1px solid #CDCDCD; background:#DDD; text-decoration:none;-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpageNum a:link, .showpage a:link{text-decoration:none; color:#333}

Javascript

Selanjutnya, carilah kode </body>.
Masukan kode javascript berikut ini diatas nya.

edit html

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=9;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-->

Keterangan :
var pageCount=9; » Varian tersebut menjelaskan bahwa setiap halaman akan menampilkan 9 postingan / artikel.

var displayPageNum=5; » Varian tersebut menjelaskan jumlah page number ( contoh : 1, 2 , 3 , 4, 5 » Next )

anda bebas mengubah varian tersebut sesuai dengan kebutuhan.

Setelah semua selesai, coba anda lihat dulu hasilnya dengan menekan tombol Preview.

preview

Apabila tampilan Navigasi tersebut muncul dan tidak terjadi error, silahkan SAVE TEMPLATE anda.

save template


Update : 


Javascript 2

Bila javascript yang ada di atas tidak kompatibel dengan template Blogspot anda, cobalah dengan menggunakan langkah-langkah dibawah ini :

Carilah kode HTML seperti dibawah ini  pada template Blogspot anda :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Letakan rangkaian javascript berikut ini sesudah kode » </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-5,thisUrl.length)==&quot;.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 =5;
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;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&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;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

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

}

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;

Lalu klik preview terlebih dahulu untuk memastikan tidak ada kesalahan kode.

preview

Apabila tidak terjadi error dari penambahan javascript tersebut, silahkan SAVE TEMPLATE anda.

preview


Semoga bermanfaat.

15 comments:

Vande Soul on March 12, 2011 at 4:14 PM said...

link script yang dari blogergadget ga cocok di template ane gan...
ada yang lain ga?

Pujangga said...

@ Vande Soul:
Kalo boleh... silahkan kirim template Blogspot mas ke email aku , sepertinya ada masalah dengan #blog-pager di template mas :).

Email :
pujangga_adhitya@yahoo.com.sg

Pujangga on March 12, 2011 at 7:16 PM said...

@ Vande Soul :
1. Silahkan anda menggunakan javascript yang kedua. dan hapus kode javascript yang pertama yang ada pada template anda.

2. Ubah CSS #blog-pager anda :

Sebelumnya yang ada pada blog anda:
#blog-pager {text-align:center;}
#blog-pager a {padding:4px;margin:0 40px;} « Hapus


menjadi seperti ini :
#blog-pager {text-align: center; clear:both;}

Media update on March 14, 2011 at 10:16 PM said...

Tutorial home,page dan prev sangat menarik

ekka on March 19, 2011 at 7:47 AM said...

om kaga fungsi :'(
dah semua script next page nav g ada yg berhasil...

:(

Pujangga on March 19, 2011 at 2:48 PM said...

@ekka :
Klao yang om maksud templates Simplexcelebrity jelas tidak akan cocok dengan script apapun, karena template tersebut tidak menampilkan mainpage/bar pada homepage.

Soundmix Indie on March 19, 2011 at 10:00 PM said...

ohh..gt y om! ada alternativ g buat jumlah posting di label blog bisa di atur jumlahnya abis terlalu banyak.
thx y om pencerahannya
:D

Pujangga on March 19, 2011 at 10:18 PM said...

@ Soundmix Indie :
Sebenarnya XML template om termasuk ribet juga tuh untuk di modifikasi... hihihi.
tapi insya allah nanti aku coba pelajari templatenya :32

Soundmix Indie on March 20, 2011 at 12:04 AM said...

bner ribet bgd om tp pas buat topik templatenya!, sebenernya dah males ngeblog tp ada tuntutan dri org suruh bikin web aku bikin aja blog entr tinggal bli domain abis mles harus bikin dri awal hehehehe...
:D
oh iya salam knal y om adhitya

netroadi on May 12, 2011 at 3:36 PM said...

g berhasil plen2.
wkwkwkwkw.....

singgih69 on May 18, 2011 at 2:51 PM said...

Terima kasih maz, berjalan dengan begitu baik, hehe, tinggal di edit sedikit cssnya :36

hafiz on June 7, 2011 at 3:16 PM said...

:36 mantap gan...

na_raka on October 28, 2011 at 10:49 AM said...

ga berhasil di saya : http://raka-1904.blogspot.com/

dokunimus on February 13, 2012 at 11:44 PM said...

Lumayan banyak juga script html nya. Perlu di coba..

Anonymous said...

Asking questions are truly nice thing if you are not understanding something entirely, but this piece of writing gives good understanding
yet.

Also visit my homepage :: here


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment