Tutorial 3 : Membuat Pages Pada BLOG

Salam semua!
Jom kita menambah widge untuk mencantikan lagi blog kita.
Hari ini saya mahu ajar cara-cara untuk meletakkan number muka surat bagi menggantikan Older Post atau Newer Post.
Order dan Newer post ini kadang-kadang menyusahkan pembaca untuk melihat page kita.
Saya sendiri pun susah untuk melihat page orang itu kalau page dia tak ada halaman muka surat.
Nak tahu tak macam mana yang saya katakana sebagai halaman muka surat. Adalah seperti ini dibawah blog saya.. yang ada page 1, 2, 3,4,5



Ramuan yang perlu di letak adalah seperti berikut

Login ke Blogspot .

Klik Layout > Add a Gadget Javascript / HTML

Copy kod di bawah dan Pastekan kedalamnya…

<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://blogkomputers.blogspot.com">Grab this Widget ~ Navigasi Halaman</a></div>


Senangkan..tidak perlu bermain code html pada Design!

Selamat mencuba.
Share this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
45 Comments for "Tutorial 3 : Membuat Pages Pada BLOG"

peni dah try buat tapi tak ulih pown

@Peni Anani

peni kena letak widget ini di bawah sekali..kalau xjadi gtau fara

okeyh... akan di usahakan... hehe thanks yup fara....

@honeystar

kenapa lak tak boleh? kena drag widget kat bawah sekali..

@Edura Hanum


letakkan widget tu kat bawah sekali..test lagi..mybe ada coding x full

npe sy wt dia juz jd 2 page je ?

Hi Miss Farah,
I Miss L3en a.k.a eFa, i tak bole wat la yg page number ni...mcm mana yer???

@L3en @ eFa

dragkan widget itu ke bahagian footer...kalau xjadi mgkin ada code y tertinggal..tak jadi juga mungkin not suitable for your template

aku tak dapat buat la....aduiiii...tak faham aku nie...

kak farah cam na nak buat tutorial dlm nyer ada mcm kak farah...

PERHATIAN

Saya dah update coding baru so boleh try

kak farah..apa nie,x jadi langsung pon..adduuh..

@SUFIANA1992

Kenapa tak jadi?? akak testing boleh je? ???try again

amcm nk tukar warna utk no muka surat tue ek?

ok jadi. bahasa melayu ke. oke la..jnji ade. wah..mcm blog mahal.sila la dtg ye

kak farah x jadi pon.. dah letak kat bawah sekali dah..

wah nice :) ada toturial. nice to know u k :) -new Blogger-

tak jadii . please tolong , da lama carik tutorial nii . da try byk kali , still tak bole . da letak bawah sekali pun still same .

@Shahirah Adizan

sebenarnya dah 3x update tutorial ni tapi ada yang jadi dan ada y tak jadi. Mungkin bgantung kepada template :)

memang bahasa melayu ke kak farah ??? bahasa inggeris takde ??

tima ksh kak...saye sekejap je da jadikk :D

akak...napew saye buat tak napak pown..huhuhu

@♥Miss Farah♥

terima kasih ya Cik Farah, hehehe, BLOG AWAK BANYAK MEMBANTU !!!!!!
terima kasih sgt2,,

betul tu,
widget HTML ni kena letak d bawah POST, dlm reka letak....

Kak farah..cam ner nk buat ada cartoon cute di bawah komen tu??yang ada gambar princess di home,older and newer..ajar boleh??

salam kaak fara !!! cemaner nie .. tk leyh pown.. dh drag widget kt bwh.. tp tk leh lagi... cemane cemane ??!!!

thanks bab toturial.. tapi majoriti yang saya wat tak menjadi kenape ye???
saya budak baru belajar blogger

@aiyun idayu

visit me back

http://ilamie2012.blogspot.com

hi sis thanks a lot..ur tutorial very help me.. :)

@♥Miss Farah♥nak tanya.ada tak tutorial yang boleh memadamkan by blogger yg kat bawah sekali tu..??tolong saya sis,semak betul kalau ada tu.:(

sis....sy dh buat lepas tu?????? mcm ne nk jdi kn mcm sis pye..:(

..SAYA LETAK KAT ATAS PON SAMA JER ADE :) TERIMA KASIH KAK FARAH

waduh makasih bnget tipsnya gan,,,

mcm mana nak delete awal dan sebelumnya. kita nak bagi ada next and last je. tq farah

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts Plugin for WordPress, Blogger...
Back To Top