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;
}
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 != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</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..
0 komentar:
Posting Komentar