Selasa, 08 November 2011

Membuat Page Number Di Blog

Dipostkan oleh Unknown

Langkah Cara Membuat Page Navigasi Angka / Number 123dst pada Blog.


Pertama,pergilah ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html.
Seperti biasa,contreng option expand widget templates,selanjutnya cari kode berikut:
]]></b:skin>
Setelah ketemu,letakkan persis diatasnya kode css yang ada.
Dibawah ini adalah kode STYLE PAGE NUMBER, pilih salah satu :


    Untuk style 1:        Demo

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyRU2S2wye_MbBpS3A2qjTXsGvl-6p2QWOm5MIJpHnEZH2wxH1cPoC7ICVB7QeId5NpcQmP0Dw_sbwEZJSH26rflAeaBBmPtUeP9L2GRQTWS75xMzBn1yrF1kPDZ1oCsc7Gg2BjpR90M/s1600/wp1.jpg) 0 -50px repeat-x;
  }
 
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyRU2S2wye_MbBpS3A2qjTXsGvl-6p2QWOm5MIJpHnEZH2wxH1cPoC7ICVB7QeId5NpcQmP0Dw_sbwEZJSH26rflAeaBBmPtUeP9L2GRQTWS75xMzBn1yrF1kPDZ1oCsc7Gg2BjpR90M/s1600/wp1.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyRU2S2wye_MbBpS3A2qjTXsGvl-6p2QWOm5MIJpHnEZH2wxH1cPoC7ICVB7QeId5NpcQmP0Dw_sbwEZJSH26rflAeaBBmPtUeP9L2GRQTWS75xMzBn1yrF1kPDZ1oCsc7Gg2BjpR90M/s1600/wp1.jpg) 0 0 repeat-x;
  text-decoration: none;
  }
 
Untuk style 2:        Demo

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #919106;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BWYxBeZY9IKdjBxLcUt4h2PtHru3cBHoespTiFxdRtX9f2EwTceOVIx1g9zaXFJLqGyQHXr6sMYNCs_wxtR5unLVFnpOt08ZA_Xf7baI0BhNPBW9FXnM8ATGseIQ3GLaax_o5Kxd2dk/s1600/wp2.jpg) 0 -50px repeat-x;
  }
 
.showpageNum a:hover {
  border:1px solid #aeae0a;
  background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BWYxBeZY9IKdjBxLcUt4h2PtHru3cBHoespTiFxdRtX9f2EwTceOVIx1g9zaXFJLqGyQHXr6sMYNCs_wxtR5unLVFnpOt08ZA_Xf7baI0BhNPBW9FXnM8ATGseIQ3GLaax_o5Kxd2dk/s1600/wp2.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #919106;
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BWYxBeZY9IKdjBxLcUt4h2PtHru3cBHoespTiFxdRtX9f2EwTceOVIx1g9zaXFJLqGyQHXr6sMYNCs_wxtR5unLVFnpOt08ZA_Xf7baI0BhNPBW9FXnM8ATGseIQ3GLaax_o5Kxd2dk/s1600/wp2.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

Untuk style 3:        Demo 

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #fff;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLuTBEF5Wrp3HhYTki8Ij-piClaCfn4hoSLZXkWUhiNkdGLKeEi5RYuWxFojKlou1-Np1A1es3nr5AsQPBABLm1Qn9Gws4bDGgGejw4VDTkgVdUTSYhVj3_p1JUzltUyc6yfSS35SxXAs/s1600/wp3.jpg) 0 -25px repeat-x;
  }
 
.showpageNum a:hover {
  background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLuTBEF5Wrp3HhYTki8Ij-piClaCfn4hoSLZXkWUhiNkdGLKeEi5RYuWxFojKlou1-Np1A1es3nr5AsQPBABLm1Qn9Gws4bDGgGejw4VDTkgVdUTSYhVj3_p1JUzltUyc6yfSS35SxXAs/s1600/wp3.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLuTBEF5Wrp3HhYTki8Ij-piClaCfn4hoSLZXkWUhiNkdGLKeEi5RYuWxFojKlou1-Np1A1es3nr5AsQPBABLm1Qn9Gws4bDGgGejw4VDTkgVdUTSYhVj3_p1JUzltUyc6yfSS35SxXAs/s1600/wp3.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

Untuk style 4:        Demo

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #fff;
  }
 
.showpageNum a {
  padding: 3px 4px;
  margin:0 4px;
  text-decoration: none;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhngGoPlH7JgOjCpKUm3RSLHnWWYc8QaVMldkjPEqPCgCLqAfjPfxDfMNPtG2F-NIpCZ7ENQjNfsMksPfWoSB7JOqecC13SZdY3a_i70OIeWgzMRA08SmaNYU8WyAZlHfgKE0ZqtGotEac/s1600/wp4.jpg) 0 -25px repeat-x;
  }
 
.showpageNum a:hover {
  border-top:2px solid #999;
  border-left:1px solid #999;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  background: #999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhngGoPlH7JgOjCpKUm3RSLHnWWYc8QaVMldkjPEqPCgCLqAfjPfxDfMNPtG2F-NIpCZ7ENQjNfsMksPfWoSB7JOqecC13SZdY3a_i70OIeWgzMRA08SmaNYU8WyAZlHfgKE0ZqtGotEac/s1600/wp4.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhngGoPlH7JgOjCpKUm3RSLHnWWYc8QaVMldkjPEqPCgCLqAfjPfxDfMNPtG2F-NIpCZ7ENQjNfsMksPfWoSB7JOqecC13SZdY3a_i70OIeWgzMRA08SmaNYU8WyAZlHfgKE0ZqtGotEac/s1600/wp4.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

Untuk style 5:        Demo       

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #fff;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEias50bszUO7gUUr5UyNBsh3fHJlW7V_shXH6Em43XPpzvN-7sIvXj0nf6gqkC2Y_C0JFUNNO2Fkmb2mumes3oRyWVi3hUeR6pMIc0vnFXasa7FE2B8K2MlhIwkRyT4avuY0-Xz73JyUYs/s1600/wp5.jpg) 0 -50px repeat-x;
  }
 
.showpageNum a:hover {
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEias50bszUO7gUUr5UyNBsh3fHJlW7V_shXH6Em43XPpzvN-7sIvXj0nf6gqkC2Y_C0JFUNNO2Fkmb2mumes3oRyWVi3hUeR6pMIc0vnFXasa7FE2B8K2MlhIwkRyT4avuY0-Xz73JyUYs/s1600/wp5.jpg) 0 -25px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEias50bszUO7gUUr5UyNBsh3fHJlW7V_shXH6Em43XPpzvN-7sIvXj0nf6gqkC2Y_C0JFUNNO2Fkmb2mumes3oRyWVi3hUeR6pMIc0vnFXasa7FE2B8K2MlhIwkRyT4avuY0-Xz73JyUYs/s1600/wp5.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

Untuk style 6:        Demo

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #fff;
  font-size:11px;
  margin:10px;
  padding:8px 20px;
  background: #333;
  }
 
.showpageArea a {
  color: #fff;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #666;
  }
 
.showpageNum a:hover {
  background: #888;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #da6100;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
Lalu,cari lagi kode seperti ini:
</body>
Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
Langkah terakhir,carilah kode berikut:
'data:label.url'
Jika sudah ketemu,hapus kode tersebut dan gantilah kode berikut:
'data:label.url + &quot;?&amp;max-results=5&quot;'

0 komentar:

Posting Komentar

Apabila ada yang tidak mengerti akan isi dari postingan ini, anda bisa bertanya lewat kotak komentar dibawah !!!

Langganan: Posting Komentar (Atom)

Subscribe via email

Enter your email address:

Delivered by FeedBurner