Aldi: Cara Mudah Membuat Nomor Halaman di Blog

Untuk membuat nomor halaman (page navigator) ataupun jumlah posting di halaman depan pada Blog di Blogspot khususnya, Anda bisa melakukan tips cara membuat nomor halaman dan membuat jumlah posting halaman seperti langkah berikut dibawah, karena secara default tampilan ini tidak disertakan, alias Anda harus membuatnya sendiri. Nomor halaman (page navigator) akan muncul di bagian bawah postingan berupa kotak tombol yang jika di klik akan masuk ke halaman berikutnya. Apa manfaat Anda membuat cara ini? tentu ada
dong. Ya, dengan membuat nomor halaman, ini akan lebih mempermudah pembaca untuk masuk ke halaman berikutnya, demikian juga jumlah posting yang ada di halaman depan juga bisa Anda tentukan berapa yang akan ditampilkan. Jika Anda sering membuat postingan terdiri dari beberapa halaman atau halaman itu bersambung kehalaman berikutnya maka nomor halaman ini akan sangat membantu pembaca untuk masuk ke halaman-halaman selanjutnya. Sebelum merubah sebaiknya Anda backup dahulu kodenya, untuk menjaga jika nanti ada masalah. Anda tertarik? kita simak tips cara membuat nomor halaman (page navigator), jumlah posting pada Blog berikut ini.

Login ke blogger &gtdashboard--> Design--> Edit HTML
Cari Kode ]]></b:skin> (Tekan ctrl + F di keyboard masukan ]]></b:skin&gt untuk mempermudah pencarian)
Copy dan paste kode script di bawah ini sebelum kode ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

Save Template.
langkah selanjutnya pergi ke Page Elements dan klik "Add a gadget".
pilih "html/java script" dan tambahkan kode script di bawah ini (Tanpa Judul) dan click save. sekarang

pilih "html/java script" dan tambahkan kode script di bawah ini (Tanpa Judul) dan click save. sekarang pindahkan/drag Gadget yang di buat tadi di bawah bagian "Blog Posts".

<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';





for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

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+'&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){
  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){
   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++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

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

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

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


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;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-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 labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;


for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);



var title = post.title.$t;

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

 if(title!='') postNum++;
 htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&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){
  upPageHtml = labelHtml + 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){
  html = labelHtml+'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++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

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

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

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

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 type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
 document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

Catatan:
Rubah Nilai dari pageCount (maxsimal jumlah tampilan postingan),displayPageNum (Tampilan Jumlah Halaman),upPageWord,downPageWord sesuai Selera sobat.
contohnya seperti gambar di bawah ini

Untuk membuat nomor halaman (page navigator) ataupun jumlah posting di halaman depan pada Blog di Blogspot khususnya, Anda bisa melakukan tips cara membuat nomor halaman dan membuat jumlah posting halaman seperti langkah berikut dibawah, karena secara default tampilan ini tidak disertakan, alias Anda harus membuatnya sendiri. Nomor halaman (page navigator) akan muncul di bagian bawah postingan berupa kotak tombol yang jika di klik akan masuk ke halaman berikutnya. Apa manfaat Anda membuat cara
ini? tentu ada dong. Ya, dengan membuat nomor halaman, ini akan lebih mempermudah pembaca untuk masuk ke halaman berikutnya, demikian juga jumlah posting yang ada di halaman depan juga bisa Anda tentukan berapa yang akan ditampilkan. Jika Anda sering membuat postingan terdiri dari beberapa halaman atau halaman itu bersambung kehalaman berikutnya maka nomor halaman ini akan sangat membantu pembaca untuk masuk ke halaman-halaman selanjutnya. Sebelum merubah sebaiknya Anda backup dahulu kodenya, untuk menjaga jika nanti ada masalah. Anda tertarik? kita simak tips cara membuat nomor halaman (page navigator), jumlah posting pada Blog berikut ini.

3 komentar:

Hobeeku mengatakan...: Wah nce info mas,

terimakasih untuk sharing infonya.sukses selalu; 15 Juli 2012 pukul 16.19
Fikhi mengatakan...: thanks gan infonya, saya coba ya...masih newbie ni...; 23 Oktober 2012 pukul 19.36
Dipragha mengatakan...: Sukses bro.. Wah,,; 3 November 2012 pukul 09.01

Posting Komentar

Laman

Rabu, 09 Mei 2012

Cara Mudah Membuat Nomor Halaman di Blog

3 komentar:

Pengunjung Ke :