Guest(s) Visitor(s)
My artwork and design are copyrighted. Kindly contact me at whiteymommy@yahoo.com for pricing.
You are not allowed to take any of my artwork and design without my permission!
All Whitey Mommy 's artwork and design is licensed under a
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
All Business by Whitey Mommy™ is licensed under Whitey Mommy Enterprise [002005515-D]

Cara Membuat Halaman Muka Surat Pada Blog

Salam Semua...
Anda mahu gantikan tulisan Older Post @ Newer Post kepada halaman muka surat yang lebih cepat dan kemas seperti gambar di bawah? Caranya sangat mudah!


1. Login ke Blogspot .

2. Klik Layout > Add a Gadget Javascript / HTML

3. Copy kod di bawah dan Pastekan kedalamnya
<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</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 = 'First';
var endPageWord = 'Last';
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 += '&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://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>


**Bahagian yang saya highlightkan dengan warna merah boleh di ubahsuai mengikit citarasa anda... Kod Warna anda boleh dapatkan disini...

Anda juga boleh mengubah bahagian berikut:
var pageCount=5;
- Jumlah halaman mukasurat yang akan kelihatan.

var displayPageNum=3;
- Jumlah topik yang akan disenaraikan setiap kali halaman mukasurat diklik.

4. Kemudian Save dan dragkan kotak ini kebahagian bawah Post... Kemudian tekan Save sekali lagi...

Dah siap! mudahkan?

Selamat mencuba...

Kredit kepada: Sis Eyriza

Whitey note : Sila tinggalkan komen anda selepas mengambil tutorial ini ya...

37 comments :

  1. saya ambil ni . thanks yee . :)

    ReplyDelete
  2. salam whitey mommy :)

    thanks a lot.btw, good tutorial :D

    ReplyDelete
  3. slm..akak xjdik sy wat page by page..sy copy bulat2.kena adjust pe2 ker?pls show me the way..:-)

    ReplyDelete
  4. tak jadilah...
    kenapa kat blog cute mum takder next page?

    ReplyDelete
  5. trima kasih byk2.. moga berjaya atas ilmu yg dikongsikan

    ReplyDelete
  6. salam.. sy dh cuba berkali2 tp xdpt jugaklah...

    ReplyDelete
  7. Tq da berjaya.. semoga dimurahkan rezki ...

    ReplyDelete
  8. da try.. thanks :)

    neway, really HEART ur creative artwork ;)

    ReplyDelete
  9. Salam~

    rash gune tuto ni.. senang nye ^^
    tQ

    ReplyDelete
  10. TQ for the tutorial..mtx izin guna ye :)

    ReplyDelete
  11. best la akk ni..tq for this tuto..nak letak akk kt dlm bloglist kt blog sy..tq akk

    ReplyDelete
  12. knp sya bt x jd...bleh tlg terangkan x...tq

    ReplyDelete
  13. mommy knpa sya udah coba tapi, tampilan muka surat yg kaya gambar d atas g muncul ?

    ReplyDelete
  14. minx kebenaran nk copy yer..terima kasih kak ^_6

    ReplyDelete
  15. assalmulaikum..saya nak minx kebenaran untuk copy paste cara2 membuat halaman muka surat dalam blog..harap dibenarkan..

    ReplyDelete
  16. wahh benda baru ni..tq mommy :D

    Jom ke blog sy ;) FAMILI FANTASTIK!!

    ReplyDelete

Thank You For Leaving a Comment to Me...

 

Copyright © Whitey Mommy™