Membuat Navigasi Halaman Untuk Blog

Posted by Herman on Thursday, April 16, 2009 39 comments

navigasi halaman widget

Widget navigasi halaman merupakan widget yang berfungsi untuk membuka halaman belakang pada blog. Fungsinya hampir sama dengan fungsi "posting lama" dan "posting baru" pada blog. Bedanya adalah dengan widget ini anda bisa lebih cepat untuk menelusuri halaman belakang suatu blog karena anda tidak perlu membuka satu per satu halaman yang ada melainkan bisa langsung melompat kehalamman selanjutnya. Sehingga bisa menghemat waktu pencarian anda.

Ok bagi anda yang tertarik untuk menerapkannya. Berikut cara pemasangannya.

1. Login ke blogger. Buka menu Design -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript lalu letakkan kode dibawah ini kedalam kotak

<style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

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!=''){
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] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
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+'T00%3A00%3A00%2B08%3A00&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){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

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

if(isPage || isFirstPage || isLablePage){
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 src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.hermanblog.com">Grab this Widget ~ Navigasi Halaman</a></div>

Angka 5 pada "var pageCount" menunjukkan jumlah posting yang akan muncul pada setiap halaman. Silahkan diganti sesuai keinginan anda.

3. Jika sudah klik Save. Lalu letakkan widgetnya dibawah Blog post seperti contoh dibawah ini



4. Klik View Blog dan lihat hasilnya.

Selamat mencoba..


Recent Posts:

39 comments

Krupux zEngkol said... 17 April, 2009
PertamaX...thank tips-nya Bro
AWS _anak Tidore said... 18 April, 2009
Permisi mas Herman, q mau konsultasi nih tentang Blogq yg bbrapa hari ini gak bisa buat Postingan baru. Soalnya halaman DASBORnya gak bisa ditemukan. Kira2 pnyebabnya apa Mas ya, trus solusinya gmana. Q mohon sngat dan menantikan jawabannya..makasih sblmnya
Herman said... 18 April, 2009
@aws: setahu sy klu uda login pasti ada menu dashboardnya. Jika tidak ada sebaiknya anda kontak pihak blogger aja utk menanyakan permasalahan ini scr langsung
AG-Loc / Ananda ganesha said... 17 May, 2009
gabisaa! gak berhasil di blog aku! tolong dong om :| aku udah kopi script di atas, trus pindahin ke bawah postingan, tapi pas dicoba gak muncul2
herman said... 18 May, 2009
@AG-loc: sy uda coba bs koq. coba dicek lagi mungkin ada kode yg ketinggalan kali..
Remba said... 21 August, 2009
………………….._,,-~’’’¯¯¯’’~-,,
………………..,-‘’ ; ; ;_,,---,,_ ; ;’’-,…………………………….._,,,---,,_
……………….,’ ; ; ;,-‘ , , , , , ‘-, ; ;’-,,,,---~~’’’’’’~--,,,_…..,,-~’’ ; ; ; ;__;’-,
……………….| ; ; ;,’ , , , _,,-~’’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ¯’’~’-,,_ ,,-~’’ , , ‘, ;’,
……………….’, ; ; ‘-, ,-~’’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’’-, , , , , ,’ ; |
…………………’, ; ;,’’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’-, , ,-‘ ;,-‘
………………….,’-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’’-‘ ;,,-‘
………………..,’ ; ; ; ; ; ; ; ; ; ; ; ;__ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ‘-,’
………………,-‘ ; ; ; ; ; ; ; ; ; ;,-‘’¯: : ’’-, ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; _ ; ; ; ; ;’,
……………..,’ ; ; ; ; ; ; ; ; ; ; ;| : : : : : ; ; ; ; ; ; ; ; ; ; ; ; ; ,-‘’¯: ¯’’-, ; ; ;’,
…………….,’ ; ; ; ; ; ; ; ; ; ; ; ‘-,_: : _,-‘ ; ; ; ; ; ; ; ; ; ; ; ; | : : : : : ; ; ; .|
……………,’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ¯¯ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’-,,_ : :,-‘ ; ; ;|
…………..,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ,,-~’’ , , , , ,,,-~~-, , , , _ ; ; ;¯; ; ; ; ; ;|
..…………,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;,’ , , , , , , ,( : : : : , , , ,’’-, ; ; ; ; ; ; ; ;|
……….,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’, , , , , , , , ,’~---~’’ , , , , , ,’ ; ; ; ; ; ; ; ;’,
…….,-‘’ ; _, ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ‘’~-,,,,--~~’’’¯’’’~-,,_ , ,_,-‘ ; ; ; ; ; ; ; ; ; ‘,
….,-‘’-~’’,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; | ; ; | . . . . . . ,’; ,’’¯ ; ; ; ; ; ; ; ; ; ,_ ; ‘-,
……….,’ ; ;,-, ; ;, ; ; ;, ; ; ; ; ; ; ; ; ; ; ‘, ; ;’, . . . . THAT'S JUST WRONG---‘’’
………,’-~’ ,-‘-~’’ ‘, ,-‘ ‘, ,,- ; ; ; ; ; ; ; ; ‘, ; ; ‘~-,,,-‘’ ; ,’ ; ; ; ; ‘, ;,-‘’ ; ‘, ,-‘,
……….,-‘’ ; ; ; ; ; ‘’ ; ; ;’’ ; ; ; ; ; ; ; ; ; ; ‘’-,,_ ; ; ; _,-‘ ; ; ; ; ; ;’-‘’ ; ; ; ‘’ ; ;’-,
……..,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;¯¯’’¯ ; ; ; ; ; ; ; ; , ; ; ; ; ; ; ; ; ;’’-,
……,-‘ ; ; ; ; ; ; ; ,, ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; |, ; ; ; ; ; ; ; ; ; ; ‘-,
…..,’ ; ; ; ; ; ; ; ;,’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;|..’-,_ ; ; ; , ; ; ; ; ; ‘,
Anggra said... 31 August, 2009
dah copy semua tetep aja g bisa bos....mohon pencerahan dunk....
BeO said... 02 September, 2009
Wew....
Thank'z mas Herman...
saya dah beberapa jam googling tapi semua script page navigasi yg ada gak support atau gak jalan di blog saya termasuh page navigasi dari techieblogger.com milik Rias
Apa nya yg beda ya dengan punynya mas herman ini??

Nah buat temen2 yg pengen pake page navigasi, mungkin gak support templatenya kalo pake script yg ada di mas herman ini, tapi sapa tau support kalo pake script dr http://www.techieblogger.com atau yg lainnya...

:)] :)] :)] :)]
lubangbisnis... said... 16 October, 2009
apa aja dech..thx...
Kian Coi said... 26 October, 2009
makasih mas buat artikelnya, tak cobain yach..!!!
zakur said... 03 December, 2009
Tank's berat gan infonya,, Siip lahh =))
NaiCaNa said... 15 January, 2010
aQ tidak bisa menambahkan page element :(
Tiar's Blog said... 16 January, 2010
=))
Rendra Budi said... 05 February, 2010
Thx. dah ku coba n ternyata..
100% Berhasil...... ;)

http://rendra-budi.blogspot.com/
Komunitas One Piece Indonesia said... 10 March, 2010
brader,salam kenal...mohon maen di blog saya @seribumatahari.blogspot.com....
di bag atas blog terdapat tulisan home,contact , blog , RSS Feed, Twitter, Log in...
cara mengeditnya bagaimana ya agar bisa dimaksimalkan gitu?
computeroke said... 20 March, 2010
wah sukses nyubinya...wk..kk..kkk...makasih gan!
ERWIN BLOG said... 07 June, 2010
gimana crantya mengisi link di menu tab
asiamuda said... 12 November, 2010
di blog saya navigasi; « Newer Post, Older Post », Home
tidak muncul mohon pencerahannya.. email saya ke ulinrahman@gmail.com
software bali said... 21 November, 2010
thanks share-nya gan!
software 45 said... 21 November, 2010
salam kenal sob,,trims ilmunya!
yourpricehere said... 23 December, 2010
noce postttt brooo..
Anonymous said... 28 January, 2011
Just want to say what a great blog you got here!I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work! Thumbs up, and keep it going!.
Cayun said... 20 February, 2011
wah,, berhasill.... terimakasiihh ;)
Ary_Aditya said... 06 March, 2011
thanks infonya gan gue copy ya
My profile said... 29 March, 2011
Thank's bgt infonya,gr2x ngeliat info dr kakak blog aku jd lumayan bagus,sklai lg THX
Hori Revens said... 02 May, 2011
tanya nih mas, klo untuk navigasi yang ada gambarnya ada gag maksudnya klo gitu'an terlihat monoton .. maklum newbie jadi gg bisa edit css-nya
Game-Online said... 22 August, 2011
thank banget infonya
Hendra Thea said... 07 October, 2011
sudah saya coba duluan... berhasil gan, bagus juga. makasih banyak infonya
Admin kios kaos said... 31 October, 2011
gan..tolongin ane donk...punya ane nggak muncul...
coba di cek di http://bajuc-ker.blogspot.com
souvenir pernikahan said... 24 November, 2011
tutorianya mangstab gan..Thanks ane dpt banyak ilmu dimari..hehehehhe
Harisk said... 18 December, 2011
tak cobanya dulu gan
http://harisk-smart.blogspot.com/
Membangun Motivasi said... 30 December, 2011
makasih gan infonya
aliahmad9 said... 04 February, 2012
wah tanpa edit html ya ...
di coba dulu gan thank...
salam kenal
feri dwiramelann said... 13 June, 2012
sudah di terapkan ke blog saya bro tapi di page yang kedua munculnya bukan postingan selanjutnya tapi "Tidak ada posting yang sesuai dengan query Anda. Tampilkan semua posting"
gimana gan ?
galaxyelectronik.blogspot.com
ҒдӉяїzдL ѕҫядємїлб dєдтђ мєтдӏ said... 06 August, 2012
BAGUS nih artikel nya.
mampir yah dunia-yahuud.blogspot.com

back link yah ;))
KanG BarcA said... 02 January, 2013
ane pendatang baru,,ijin copas gan.
imponya keren...!

mampir di blog ane
http://blogkangbarca.blogspot.com/
fitranhebat said... 28 February, 2013
makasih gan, sangat bermanfaat
sun kitz said... 02 March, 2013
keren ga... makasih infonya...

salam kenal dari FileArchive4u
domtheo said... 08 March, 2013
weh, imba juga itu yang commentnya bisa jadi gambar @_@


Aksesoris Sparepart Motor

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment