RSS

<-----Yang Terhangat----->

Cara Buat Halaman atau Muka Surat di Blog


Assalamu'alaikum dan salam sejahtera, amri ingin berkongsi cara untuk Buat Halaman atau Muka Surat di blog.contohnya kawan-kawan boleh lihat di blog amri-lawak-kelakar ni seperti gambar di bawah:

cara buat halaman atau page di blog
 

Oh ye, kawan-kawan dah letak ke Meta Tag di blog kawan-kawan? Kalau belum, bolehla rujuk ke entry Cara Mudah Letak Meta Tags di Blog.

Ok,berbalik kepada soal muka surat atau halaman di blog, sebenarnya,dengan adanya tombol halaman atau muka surat, ia akan memudahkan pengunjung yang datang ke blog kita dan ia menggantikan fungsi Next atau Previous pada blog. Tutorial ini cukup mudah kerana kawan-kawan tidak perlu untuk meng-edit kod HTML. ini cukup dengan menggunakan fungsi Add Gadget.

Jadi, untuk tutorial cara buat halaman atau muka surat di blog ni, ikut langkah-langkah di
bawah ya.

1.Log in ke blogger kawan-kawan.
2.Klik DESIGN
3.Copy Code di bawah:

<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=4;
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 += ' <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">Halaman '+thisNum+' dari '+(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>

4. Klik ADD A GADGET dan pilih HTML/JavaScript
5. Pastekan code yang di copy di no 3 ke dalam kotak content seperti dalam gambar di bawah.

 paste pada bahagian content


6. Kemudian klik SAVE.
7. Drag dan Drop gadget tadi betul-betul di bawah Blog Posts seperti dalam gambar di bawah.

drag and drop below blog posts


8. Kemudian klik SAVE seperti gambar di bawah. Tadaa, dah selesai..

klik save


info tambahan:
Untuk var pageCount=5;  dalam kod di atas --> merujuk kepada jumlah entry/post dalam satu-satu halaman, jadi kawan-kawan boleh sesuaikan dengan jumlah post kawan-kawan dalam satu-satu halaman. sekiranya kawan-kawan ingin jadikan satu halaman ada 3 post/entry sahaja, tukarkan jadi var pageCount=3; dan sebagainya bersesuaian dengan kesukaan kawan-kawan.

Selamat Mencuba ye..Tinggalkan komen kawan-kawan di bawah ye..:-)
kelab-jutawan


Kongsi

10 komen:

Ayie Nano said... [Reply]

tunjukkn sekali kat post ni cth lau da siap buat...bru lg kemas kot....hehe....sori bro mmg xpndai buat yg tu...huhu

amri lawak kelakar said... [Reply]

@Ayie Nano aah,lupa plak nak sertakan sekali gambar kalau dah siap kan.hehe.sori.nnt saya masukkan gmabr ye..thanks Ayie Nano :-)

Tengku Puteri said... [Reply]

tima kasih sudi share...dh lama cri tutor nih..nak try nanti...hee

amri lawak kelakar said... [Reply]

@Tengku Puteri
selamat mencuba ye :-)

brat2104 said... [Reply]

Sudah berjaya!!! tq bos!!

amri lawak kelakar said... [Reply]

@brat2104 sama2..baru cun kan?hehe..

Gerek Basikal said... [Reply]

Bro, saya dah cuba buat bro tapi last page dia tunjuk hanya 46 ms je. Entri pd ms 46 tu bukan yang last sekali, ada lagi entri yg last. Kalau ada idea please info kat shout box saya ye. TQVM

amri lawak kelakar said... [Reply]

@Gerek Basikal
o yeke bro..cube bro wat lagi sekali..spatutnya skrip ni mmg show semua page bro..

KisahKu ^_^ said... [Reply]

terima kasih :)

suhaimie zulkifli said... [Reply]

macam mana nak buat widget ni ade kat setiap sume bahagian post entri,saya dah buat tapi cuma ada kat laman utama je

 

speed