Cara Pasang Navigasi Nomor Halaman di Blog

Thank you for using rssforward.com! This service has been made possible by all our customers. In order to provide a sustainable, best of the breed RSS to Email experience, we've chosen to keep this as a paid subscription service. If you are satisfied with your free trial, please sign-up today. Subscriptions without a plan would soon be removed. Thank you!

Halo sobat ketemu lagi di Tip Blogger

Kali ini saya akan membahas bagaimana Cara Memberi 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 Membuat Nomor Halaman Navigasi untuk 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 merah adalah jumlah dari nomor yang akan muncul pada halaman. Contoh : 1, 2, 3, 4, 5
Dan pada tulisan com yang juga saya cetak merah 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 code pada langkah ke dua

Simpan selesai dan lihat hasilnya.


Selamat Mencoba

Imtikhan 03 Sep, 2010
false

--
Source: http://www.imtikhan.co.cc/2010/09/cara-pasang-navigasi-nomor-halaman-di.html
~
Manage subscription | Powered by rssforward.com