Breaking News
Loading...

Pasang Navigasi Nomor Halaman di Blog

Halo sobat ketemu lagi di Tip Blogger
Kali ini saya akan membahas bagaimana Cara Pasang Navigasi Nomor Halaman di Blog
Mungkin para sobat sekalian pernah melihat Blog yang di bawah kolom postingannya terdapat Navigasi berupa Nomor-nomor dari halaman,
Berikut Cara Pasang Navigasi Nomor Halaman di Blog :

Pertama :
Login ke Blogger
Klik Rancangan (Yang dulunya Tata Letak)
Klik tab Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget,
Kemudian cari kode ]]></b:skin>

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3).

Jika sudah ketemu, Copy kode CSS dibawah ini dan letakkan diatas kode tersebut :

/* Navigasi Nomor Halaman
----------------------------------------------- */
.showpageArea a {
text-decoration: underline;
float: left;
}
.showpageNum a {
border: 1px solid #CCCCCC;
background-color: #eeeeee;
text-decoration: none;
margin: 0 3px;
padding: 3px;
float: left;
}
.showpageNum a:hover {
border: 1px solid #CCCCCC;
background-color: #000000;
}
.showpagePoint {
color: #000000;
text-decoration: none;
border: 1px solid #CCCCCC;
background: #CCCCCC;
margin: 0 3px;
padding: 3px;
float: left;
}
.showpageOf {
border: 1px solid #CCCCCC;
background-color: #eeeeee;
text-decoration: none;
padding: 3px;
margin: 0 3px 0 0;
float: left;
}
.showpage a {
background-color: #eeeeee;
text-decoration: none;
border: 1px solid #ccc;
padding: 3px;
}
.showpage a:hover {
color: #000000;
background: #000000;
text-decoration: none;
}
.showpageNum a:link,.showpage a:link {
text-decoration: none;
color: #333;
}


Kedua :
Cari kode seperti berikut :

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>


Kalau sudah ketemu, letakkan kode dibawah ini tepat di bawah kode tersebut :

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".
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 =
5
;
var upPageWord = 'Previous';
var downPageWord = 'Next';

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 += '<span class="showpagePoint">'+thisNum+'</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 = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

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

}

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>


Keterangan : Angka (5) yang saya cetak biru adalah jumlah dari nomor yang akan muncul pada halaman. Contoh : 1, 2, 3, 4, 5
Dan pada tulisan com yang juga saya cetak biru adalah domain dari blog sobat. 
Jika sobat memakai domain co.cc maka tulisan com tersebut harus di ganti dengan co.cc dan kalau tidak berhasil, parse dulu kode pada langkah ke dua.

Simpan selesai dan lihat hasilnya.


Selamat Mencoba

1 komentar:

  1. tank you bos atas tutorialnya, kemarin aku udah beberapa kali mencoba mengutak - atiknya tapi tiap aku klik halaman 2 ternyata meloncat sampe hal 5, tapi untuk trik yang ini sangat bagus.... tank you banget

    BalasHapus

Terima kasih sudah mau berkunjung ke Blog sederhana ini, Tidak ada salahnya untuk memberikan komentar untuk kemajuan blog ini.
Catatan komentar yang tidak ditampilkan :
1. Komentar SPAM
2. Komentar tidak bermutu / tidak nyambung.
3. Memasukan Link ke dalam kotak komentar blog.

 
Toggle Footer