ABie DearyOu

ABie DearyOu
Buat Kamu

ABie DearyOu

ABie DearyOu
Buat Kamu

Kamis, 22 Desember 2011

Cara membuat navigasi nomor halaman pada blogspot

Cara membuat navigasi nomor halaman pada blogspot

Tips dan triks blog yang ingin saya bagikan hari ini adalah bagaimana cara membuat navigasi nomor halaman pada blogspot. Navigasi nomor halaman yang saya maksud adalah nomor halaman yang ada di homepage blog kita. Biasanya pada homepage hanya berisi tulisan 'posting lama' - 'posting baru' dan 'home'. Jadi, disini kita akan memodifikasi sedikit. :D

Beberapa fungsi memasang navigasi nomor halaman pada homepage adalah :
  • Mempermudah pengunjung untuk melihat artikel-artikel kita yang sebelumnya
  • Mempercantik tampilan

Nah, berikut cara membuat navigasi nomor halaman pada blogspot :

1. Sobat login ke blog sobat >> Rancangan >> Edit HTML >> beri tanda centang pada expan widget template

2. Cari tag ]]></b:skin>

3. Copy lalu paste kode CSS berikut diatas ]]></b:skin> 
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

4.  Selanjutnya sobat cari lagi tag </body>

5. Copy kode berikut lalu paste diatas tag </body> tersebut
<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>
6. Save template sobat dan lihat hasilnya..

Tidak ada komentar:

Build Page

Kalender


Hari Ulang Tahun

  © Blogger templates The Transformers by Blog Tips And Trick 2009